HiTTOを支える技術について (フロントエンド編)
HiTTO株式会社エンジニアのなかむーです。 フロントエンドを担当しています！
今回はフロントエンド周りの技術スタックをご紹介したいと思います。
言語/ライブラリ
React + TypeScript という最近では割とスタンダードな構成を採用し、スタイルはstyled-componentsで当てています。
GraphQLクライアントとしてApollo Clientを利用しており、一部ローカルの状態管理も兼ねてくれています。
また、Apollo CLIのapollo client:codegenコマンドを利用してGraphQLのSchemaからTypeScriptの型を自動生成しています。
Linter、Formatterについては以下のものを利用しています。
- ESlint
- Stylelint
- Prettier
ルールを全て紹介すると長くなってしまうので１つだけご紹介させていただくと、simple-import-sortのプラグインを使って後述するAtomic Designの粒度順に自動ソートしているのが気に入っています。これにより手動でimport順を整理することがなくなりました。
アーキテクチャ
コンポーネントはAtomic Designに基づき作成しています。
Atomic Designは汎用性が高く変更に強いコンポーネント設計ができ、Reactとの親和性も高いのですが
粒度の認識が人によってまちまちだったりします。（主にMolecules、Organismsあたりが。）
HiTTOでは各粒度の定義を以下のようにルール化しています。
ですが、上記のルールはフロントエンドのメンバー側で定めたものであり デザイナー/フロントエンド間で認識が異なっている部分がありました。
デザイナー/フロントエンド間で粒度の認識を統一すべく毎週少しずつFigmaを眺めながらコンポーネントの確認を行い 認識が統一できたのでFigmaと実装での粒度の差分をこれから無くして行ければと思っています。
CI/CD
CircleCIで Lintの実行/Test/Build/Deploy/StorybookのDeploy を行っています。
StorybookのDeployはNetlifyを使っており、デザイナーさんにデザインの確認をしてもらうのに使っています。マージ前に確認いただく事で手戻りの発生を抑えられます。
また、dev環境と本番環境用のブランチ（それぞれdevelop, master）にマージされるとそれぞれの環境に自動でDeployするようにしています。
Deployの結果はSlackで○之助が教えてくれます。。！
Test
全て網羅できている訳ではなく一部ですがJestを使ったテストの他、
reg-suit + Cypressでビジュアルリグレッションテストを行っています。
GithubのPRに対してビジュアルリグレッションテストの結果がコメントされるようにしており、 意図しないデザインの崩れ等がないかサッとチェックできてとても快適です！
パッと目で見ただけでは分からない1pxのズレ等でも前回との差分がある場合は検知してくれるので非常に助かってます。
パッケージ管理
renovateを使って定期的にパッケージ更新のプルリクを作っています。
最近まで機能開発を優先してライブラリの更新を後回しにしがちだったのですが 開発スプリントの中でライブラリ更新の時間も取るようにしたり、各メンバーに自動アサインされるようにした事で プルリクが消化出来ているように思います。
おわりに
今回フロントエンド周りの技術について紹介させていただきました。
HiTTOでは複業のメンバーも数名在籍しており、他社での事例等も(聞ける範囲で)知ることができ、
参考になったり気づきになる事も多くあります。
最高のサービスを提供するため、プロダクト/技術に向き合える方の採用も行っておりますので ご興味持っていただけましたら応募をお待ちしています！
