はじめに
こんにちは、aptpodに入社しそろそろ1年になりますWebチームの松本です。
aptpodでは日々フロントエンドエンジニアとしてReact/TypeScriptを用いた、お客様向けアプリケーションのUIを実装しています。
Reactは実は入社してから初めて触ったフレームワークでしたが、頼れる先輩方のサポートもありつつ日々成長を感じながら開発に励んでいます。
入社当初から開発に関するノウハウやコードに関する考え方など、具体的なプログラムのプロジェクト構成やコンポーネントのファイル分け、コード全体の品質を担保できるよう様々な工夫があり、入社する前から知っていれば…と思うことも多くありましたのでそれらについて今回ご紹介しようと思います。
コンポーネントのファイル構成
まずコンポーネントとはWebページのビューを切り出した部品、つまりボタンやアイコン、またそれらを含む集合体であるヘッダーやメニューを指す言葉です。
コンポーネントと一口に言ってもコードとして記述するには色々な情報を詰め込む必要があります。
ボタンのコンポーネントであれば、ボタンの色形といったスタイル情報や、ボタンを押したときの日時の変換や文字列のフォーマット、またそれらのコードがちゃんと想定通りに動いているかチェックするためのテストコードなどになります。これらを一つのファイルにまとめて記述した場合、コードの可読性が著しく損なわれるため、コンポーネントで利用する基本的なファイル構成をテンプレート化し、それぞれのファイルに対し記述を行います。
以下の図はコンポーネントのファイル構成になります。共通で使うものや、ファイルとして大きくなってきた場合などは外出しすることもありますが、基本的にはこれを使っています。
- component.tsx
- React.FCを宣言しReactコンポーネントのメインとなるファイル
- constant.ts
- componentやutilsで使う定数を置くファイル
- index.ts
- importしやすくするためのフォルダ内のexportを格納するファイル
- style.tsx
- styled-components用のCSS設定を格納するファイル
- test.stories.tsx
- storybookで利用するためcomponent.tsxからインポートし表示するためのファイル
- test.stories.style.tsx
- test.stories.tsx内で利用するstyled-componentsのCSS設定を格納するファイル
- utils.ts
- component.tsx内で利用するロジック用の関数を格納するファイル
- utils.test.ts
- jestを利用しutils.tsからインポートした関数のテストコードを格納するファイル
テンプレート生成ツール
上記のように各コンポーネントにテストを書くなどしてファイルが増えてくると新しいコンポーネントを作るときにファイル生成が手間になってしまいます。そのようなときにコマンドでコンポーネントのファイル郡を生成してくれるものとして次のものを使っています。
hygen
対話式コードジェネレータCLIでテンプレートに沿ったファイルの生成を行ってくれるツールになります。 npm、yarnで導入でき先に示したテンプレートを設定しコマンド入力しコンポーネント名を入れると生成してくれるようになります。
ユニットテストツール
コンポーネントは見た目に関するビュー部分と動きや計算を行うロジック部分に分かれますが、こちらは主にそのロジック部分をテストするツールになります。前述のコンポーネントのファイル構成ではutils.ts内で使われるライブラリとして以下のものを使用しています。
jest
npm、yarnですぐに使えるテストツールです。utilから関数をインポートし入力に対する結果を記述することで、コマンド入力もしくはymlの記述でCI時に自動テストを行うことができます。 下図のように、設定した拡張子(ここでは.test.ts)のプロジェクト内のファイルのテストコードが実行され、結果が表示されます。
ビジュアルリグレッションテストツール
こちらは先程と違いビュー部分に関するテストツールになります。ビジュアルリグレッションテストとは、画像の保存を行い、コミット後にコミット前との比較を行うことで、意図したコンポーネントだけが変更されているか、意図していないコンポーネントに変更を及ぼしていないかを検出するテストです。
前述のコンポーネントのファイル構成ではtest.stories.tsx内で使われるライブラリやツールとして以下のものを紹介します。aptpodではアトミックデザインを採用したコンポーネント構造になっており、基本的な部品コンポーネントを変更した場合、影響の出る親コンポーネントは多数に渡ることもあり、目視確認では限界があるためこれらを導入しています。
storybook
こちらはテストツールというよりは作成したコンポーネントを一覧化し、開発中のコンポーネントのUIを確認するためのツールになります。アトミックデザインを採用していればフォルダ構造そのままで一覧化されるので、わざわざページアクセスし対象のコンポーネントが表示されるページまでリンクを追ってという手順を踏まずに済みます。
storycap
このツールではstorybook上で表示されるコンポーネントの画像をスクリーンショットとしてフォルダにまとめて保存してくれるツールになります。 ローカルでは保存先のフォルダを指定することでコマンド一発でスクリーンショットを生成してくれます。CIでは保存先をAWSのストレージサービスであるS3などにしておき、後の変更時の比較に使います。
reg-suit
こちらは先程S3に保存した画像と新しくコミットされた内容の画像を比較し、変更があった場合はその差分を検出してくれる機能になります。CIにAWSのキーを環境変数にセットしregconfig.jsonに設定を書き込むことで動いてくれます。
まとめ
今回はコンポーネントのファイル構造という目線から、自動テストなどを用いてどのように品質を向上させていくのか、それらを組み合わせコンポーネントとしてどのように運用しているのか説明させていただきました。各ツールの詳しい使い方は割愛させていただきましたが、Webチームがどのように開発を進めているのかその一部でも伝わったならば幸いです。私個人としても今後ともフロントエンドを含むWebに関する知識や経験をもっと身につけ、本テックブログを通して情報発信していけたらなと思います。
