フロントエンドのコーディング規約など

デザインシステムについて

デザインシステムとは

デザインシステムは、開発の生産性を最大化し、ユーザーに一貫性のある体験を提供するための仕組みを指す。

デザインシステム(もどき)を作るために行うこと

デザインシステムを作る際は、基本的にデザインガイドライン、UI パターンやコンポーネント、ライブラリを作成する。だが、そこまでするのは手間がかかるので、UI パターン・コンポーネントを作成するに止めようと考える。そのため、今回はデザインシステム(もどき)を作る予定でいる。

予定している作業内容は以下のものになる。

• ./components/uiに基本となる共通コンポーネントを作成する。選定基準は、Material 3 Design Kit に乗っている component を参考にすることとする。
• 既存のページで使われているコンポーネントを、新しく作成した共通コンポーネントに置き換える

モチベーション

ハッカソンにも関わらず、デザインシステム(もどき)を作りたいと思った理由を以下に書く

1. 現状の実装だと、page.tsx で UI の描画を切り替える機能をハードコーディングしており、描画部分と機能部分をうまく切り分けれていない。
2. 検索欄の実装箇所などで、似た機能なのにそれぞれを実装している箇所が散見され、そういった部分を修正したい。
3. 今後コードを書く上で、なるべくコンポーネントはブラックボックスにして、実装を知らずとも簡単に機能として使えるようにしておきたい
4. 今後追加実装をする上で、親コンポーネントさえ変えれば良い、という状態にするのは理にかなっていると思う。

以上から、上記の内容を満たすデザインシステム(もどき)を作りたいと思う。

フロントエンドの設計思想について

components/以下のディレクトリ構成について

components 直下には、機能を構成する単位ごと(state を管理できる単位ごと)にディレクトリを切ります。 それぞれの components 内で使用するパーツは、さらに細分化したディレクトリを切り、その中でコードを記述します。

ui 直下には、2 つ以上のコンポーネントで利用する機能を配置します。

コーディング規約

本プロジェクトでは、コンテナ・プレゼンテーションパターンを採用しています。 コンテナコンポーネント(index.tsx)が useState や useEffect を使ってデータの取得や管理を行い、そのデータをプレゼンテーションコンポーネント(presenter.tsx)に渡すことで、UI ロジックとビジネスロジックの分離を図っています。 コンポーネント中でグローバルにアクセスしたい変数は、Context API を用いて provider が提供します。