freeeの開発情報ポータルサイト

開発合宿でadmin画面の開発について妄想した

この記事はfreee Developers Advent Calendar 10日目の記事です。 こんにちは、freeeスマート受発注のエンジニアをしているmiyachiです。

最近は VCT (Valorantというゲームの世界大会)を鑑賞しています。 日本からも1チーム出場しており、手に汗握る試合をしていました。 ベルリンで開催しているので試合時間が深夜11時から朝7時になってしまうのが辛いところです。

この記事では、新規プロダクトにおけるadmin開発について、現在実践中のアプローチをお話していきます。

新規サービスでは往々にしてやることがパンクしがちです。 既存のプロダクトと比べて足りない機能が圧倒的に多いので、それらを最速で実装することに注力しなければならないためです。 そんな中で先送りにされがちなものとしてadmin画面の開発が挙げられます。

admin画面があることによって、ユーザーのトラブルに対して迅速なサポートが提供できたり、ビジネスサイドの方でもコンソールを使わずに操作ができる等、その恩恵は十分あります。 しかしながら、admin画面の開発が先送りにされがちな理由としては、admin画面自体はユーザー体験には何も影響がなかったり、サービスの初期段階ではコンソールからの操作でなんとかなる場合も少なくないためです。 まだ実装しなければならない機能がたくさん残っている状態で、admin画面を開発している余裕がないという状況になってしまうことはよくあることだと思います。 また、admin画面を開発することになったとしても開発リソースを大きく割くことは出来ないため、UI/UXを十分に検討する前にえいやで実装したり、負債を残しながらとりあえず機能だけ用意する、みたいなこともありがちだと思います。 結果、使いづらい画面になったり、機能を追加するごとにカオスなコードになってしまいます。

そんな状況をなんとかしたいなと思っていたところ、11月25日, 26日にfreeeの開発合宿があったので、admin画面を簡単に用意するための方法についていろいろ考えてみました。 freeeでは毎年開発合宿を行っており、今年は少人数ずつに分かれての開催となりました。昨年の開発合宿の様子

鬼怒川の川や旅館群が見えている様子
合宿地の鬼怒川の風景

まず、admin画面を簡単に用意できるようにするためには、admin画面の下地となるテンプレートがあると良さそうです。 テンプレートで表示されるのは、rails newしたときやcreate-react-appした時に出てくる画面のようなイメージです。 freeeでは、新規プロダクトを作る際にバックエンドにRuby on Rails、フロントエンドにReactが採用されるケースが多いので、admin画面もそちらに合わせることを想定しています。 Reactは使わず、Rails内にerbやhamlでviewsを書いていくことも出来ますが、Reactにした理由は freeeのデザインシステム Vibes を使うためです。 プロダクト開発でVibesを使っていて、簡単な画面やパーツを作るだけならVibesで簡単に出来てしまう開発効率や、アクセシビリティも考慮されたユーザ体験の良さを実感していました。 admin画面を開発するとき、実際に触るときにも同じ体験をしたかったので、Reactにしました。

またテンプレートを持ってくる際には、コードがなるべく1つのディレクトリにまとまっていると便利です。 しかし、Railsのディレクトリ構成に則って考えると、adminのコードはcontrollers/adminviews/adminなどに分かれてしまっています。 またversion 6.0以前のRailsを使う場合、ルーティングは全て1つのroutes.rbに書かなくてはいけないため、アプリケーションとadminでルーティングを分離出来なかったりします。 そこで今回はRails::Engineを用いました Rails::Engineを用いると、adminそのものを1つのgemのように扱うことができ、adminに関連するRailsのコードはadmin/というディレクトリに集約することができたり、ルーティングも分けることが出来ます。 Rails::Engine自体は新しい技術ではないですが、Modular Monolithというアーキテクチャで用いられたりなど、長い期間使われています。

Reactには特にディレクトリ構成に関する規約が無いので、admin用のディレクトリを切ってそこに集約できそうです。 ReactとRailsそれぞれのadminディレクトリをまとめたものを別のリポジトリに切り出すことによって、テンプレートを作ることが出来ました。 今回の開発合宿で作成できたのはテンプレートまでですが、最終的にはコマンド一発でAdmin画面の下地が完全に整ってしまうところを目標にしています。 そのためには、インフラの設定も自動化しなくてはならなかったりと、まだまだ山が残っています。 更に進展があれば本ブログで発信していきたいと思います。

明日のAdvent Calenderは、AWSコストの番人 miryさんです!