JAPAN AIのSTUDIOチームで開発をしているエンジニアの須貝 栄城です。
最近はFlesh and Bloodというカードゲームにハマっていて仕事以外の時はずっとFaBのことを考えてたり店舗でプレイしてます。
普段はJAPAN AI STUDIOというプラットフォームの機能を開発しています。主にフロント部分を触っていますが、時々バックも実装したりしています。
STUDIOにはたくさんの機能がありチームメンバーがそれぞれ機能を開発しました。
私も1つの機能を開発したのですが、今回は機能の話ではなく、STUDIOを開発するにあたってちょっとしたリファクタリングのようなものをしたのでそれについて書いていこうと思います。
STUDIOの開発を進めるにあたって普段使用しているJAPAN AI CHATの設定画面や機能をSTUDIO内でも使用したいということがありました。
通常であれば、既存の設定画面で使用しているコンポーネントを新しいSTUDIO設定画面でも呼び出せば済む話でした。しかし、UIコンポーネント内に設定表示のためのロジックがすべて実装されており、そのままでは他の部分で同じコンポーネントを使い回すことができませんでした。
そのため、STUDIO設定ページで再利用することが難しく、別のところで使えるようにロジックとUI部分を分離して別の部分でも使用しやすいように切り出す作業をやりました。
リファクタリングの厳密な定義については割愛して、この記事では別のファイルからも呼び出すためにUIとロジックを分けて細かいコンポーネントに切り出したと思って下さい。
リファクタリングについて詳しく知りたい方はこの本がおすすめです。(入社して間もない頃、上長におすすめされた本です。最近ではAIがコーディングを支援してくれますが、人間が読みやすいコードの原則を知っておくことは重要だと思います。)
リファクタリング(第2版): 既存のコードを安全に改善する (OBJECT TECHNOLOGY SERIES)
改訂新版 良いコード／悪いコードで学ぶ設計入門 ―保守しやすい 成長し続けるコードの書き方
私がリファクタリングをした時に意識したことを共有したいと思います。
まず大前提として、リファクタリングをするときは今動いているコードを変更するため、変更後に既存の機能で不具合が発生するなら触らない方が良いので、慎重に扱う必要があります。
そのためコードを変更する際は必ず既存の機能のどこに影響があるかを確認してコードの変更をしました。