Amaziaを支える技術 2024フロントエンド編

2024年10月1日 16:50

こんにちは。CTOの江口です。
今回はマンガBANGブックス（manga-bang.com）で採用しているフロントエンド技術についてご紹介します。

バックエンド編、インフラ編に関しては別の記事にまとめていますので興味のある方はこちらをご覧ください。

開発言語・フレームワーク

※CircleCIはテストで使用

昨年の10月にマンガBANGのWEBサイトをマンガBANGブックスとしてリニューアルしました。

フロント周りを一新することになり開発の効率性やデザインの統一を図るためにUIライブラリの Chakra UI を導入しました。

状態管理についてはJotai、通信周りでReact Queryを採用しています。
以前はReact Reduxを利用していましたが、未経験のメンバーにとってReduxの学習コストが高くなかなか思うようにメンテナンスが出来ないという課題があったため、シンプルで分かりやすい構成に変更しました。

カスタムコンポーネントの管理には Storybook を利用しています。

UIのデザインや機能の確認が手軽に行えるのが便利です。

JS部分のテストにはJestを使用していますが、正直テストコードはまだまだ整備が足りていないと感じています。
カスタムhookによるUIとロジックの分離とテストコードの充実は今後の課題です。

マンガBANGブックスではアプリ版の利用者に限らず、新たなユーザー獲得を目指して日々機能追加を行なっています。
フロントエンド技術に興味のある方は、ぜひ弊社採用サイトもご覧いただければと思います。