コンポーネントコロケーションパターン

Last updated at 2024-12-18Posted at 2023-06-04

コンポーネントコロケーションパターン (component collocation pattern)

Next.js で利用します。

結論

コンポーネントコロケーションパターンは、ファイル群（コンポーネントファイル、テストファイル、Storybookファイル）を一つのフォルダ内に配置することで、以下の効果をもたらす開発手法です。

コンポーネントのコードの可読性、保守性を高めることができる。
コンポーネントの依存関係が明確になる。
アプリケーションの開発と保守が効率化する。

小規模なプロジェクト向けの開発手法です。

(注: アトミックデザインとは水と油です。)

用語

まずは用語の定義から始めます。

コロケーション (Collocation)

コロケーションとは、ネットワークへの常時接続環境のもとに、サーバや回線接続装置などを共同の場所に設置する事を言います。

コロケーションパターン (collocation pattern)

一箇所に機能をまとめておく開発手法です。
アトミックデザインとは水と油です。

アトミックデザイン (atomic design)

アトミックデザインとは、Webサイトやアプリのデザインを、原子、分子、組織、システム、ページの5つの階層に分けて行うデザイン手法です。

原子は、Webサイトやアプリのデザインを構成する最小単位の要素です。例えば、ボタン、テキスト、画像、アイコンなどが原子にあたります。

分子は、原子を組み合わせて作られた要素です。例えば、ナビゲーションバー、ヘッダー、フッターなどが分子にあたります。

組織は、分子を組み合わせて作られた要素です。例えば、記事一覧ページ、記事詳細ページなどが組織にあたります。

システムは、組織を組み合わせて作られた要素です。例えば、Webサイト全体、アプリ全体などがシステムにあたります。

ページは、ユーザーが目にする最終的な画面です。

アトミックデザインでは、Webサイトやアプリのデザインを、原子からページまで、階層的に分けて考えることで、デザインの統一感や再利用性を高めることができます。

また、アトミックデザインでは、デザインの変更や修正が容易に行えるため、Webサイトやアプリの開発や運用を効率化することができます。

アトミックデザインは、Webサイトやアプリのデザインを効率的かつ効果的に行うための、優れたデザイン手法です。

Sever Action

Next.jsのServer Actionsは、サーバーサイドで実行される関数を呼び出すことができる機能です。これにより、クライアントサイドのJavaScriptを減らし、プログレッシブエンハンスメントなフォームを実現することができます。

Server Actionsを使用するには、まず、App Routerでページを作成する必要があります。次に、

タグのaction属性にServer Actionの関数を指定します。Server Actionの関数は、サーバーサイドで実行され、フォームのデータを処理したり、データベースに保存したりすることができます。

Server Actionsを使用すると、クライアントサイドのJavaScriptを減らすことができます。これにより、ページの読み込み速度が向上し、古いブラウザや機能の限られた端末でもフォームを正しく動作させることができます。また、Server Actionsを使用すると、プログレッシブエンハンスメントなフォームを実現することができます。プログレッシブエンハンスメントとは、古いブラウザや機能の限られた端末のユーザーをサポートしつつ、モダンなブラウザのユーザーにはリッチなユーザー体験を提供することを指します。

Server Actionsは、Next.jsの新しい機能です。現在はAlpha版の機能ですが、今後、正式にリリースされる予定です。

fetch関数 (fetch function)

Next.jsのfetch関数
ウェブブラウザがウェブサーバからデータを取得する機能です。

fetch関数の基本的な使い方

async function logJSONData() {
  const response = await fetch("http://example.com/movies.json");
  const jsonData = await response.json();
  console.log(jsonData);
}

Using the Fetch API - Web APIs | MDN

コンポーネント (component)

コンポーネントとは、システムを構成する部品や要素のことです。ソフトウェア開発においては、特定の機能を持ち、他のプログラムから呼び出されたり連結されたりして使用されるプログラム部品のことを指します。コンポーネントは、再利用性や独立性を高めた仕様や設計を持つことで、システムの開発や保守を効率化することができます。

コンポーネントには、次のようなものがあります。

データベース
アプリケーション
フレームワーク
ライブラリ
ツール

コンポーネントは、システムの開発や保守を効率化するために重要な役割を果たします。コンポーネントを効果的に使用することで、システムの開発期間を短縮し、品質を向上させることができます。また、コンポーネントは、システムの保守性を高め、コストを削減することができます。

コンポーネントは、システムの開発や保守において重要な役割を果たします。コンポーネントを効果的に使用することで、システムの開発期間を短縮し、品質を向上させ、コストを削減することができます。

tRPC

tRPCは、高速で安全なタイプセーフのAPIを簡単に構築できるTypeScript RPCフレームワークです。GraphQL の上に構築されているため、GraphQL API ですでに使用しているのと同じ使い慣れたツールやワークフローを使用することができます。

tRPCは、使いやすいように設計されています。TypeScriptでAPIエンドポイントを定義すると、tRPCがクライアントとサーバーのコードを生成します。また、Next.js、React、Angularなど、あらゆるWebフレームワークでtRPCを使用することができます。

また、tRPCは安全な設計になっています。APIコールが常に有効であることを保証するために型チェックを使用し、データを保護するために認証と認可をサポートします。

高速で安全、かつタイプセーフなRPCフレームワークをお探しなら、tRPCは素晴らしい選択肢です。使いやすく、GraphQLの上に構築されているため、GraphQL APIにすでに使用しているのと同じ使い慣れたツールやワークフローを使用することができます。

以下は、tRPCを使用する利点の一部です：

高速：tRPC は、非常に効率的なプロトコルである GraphQL の上に構築されています。つまり、大量のデータを扱う場合でも、tRPC API は非常に高速に動作します。
安全：tRPC は型チェックを使用して、API 呼び出しが常に有効であることを保証します。これにより、エラーを防止し、アプリケーションの全体的な信頼性を向上させることができます。
タイプセーフ：tRPCは、タイプセーフのクライアントコードとサーバーコードを生成します。これにより、エラーを防ぎ、アプリケーションの全体的な保守性を向上させることができます。
使いやすさ：tRPCは使いやすいのが特徴です。TypeScriptでAPIエンドポイントを定義すれば、tRPCがクライアントとサーバーのコードを生成してくれます。
柔軟性：tRPCは、Next.js、React、Angularなど、あらゆるWebフレームワークで使用できます。

Storybook

UIコンポーネントを個別に開発するためのオープンソースツールです。コンポーネントの個別ストーリーを作成でき、ドキュメント、テスト、プレビューに使用できます。Storybookは、UIコンポーネントの品質と保守性を向上させるのに最適な方法です。

Storybookを使用する利点は次のとおりです。

品質の向上：Storybookは、コンポーネントをアプリケーションの残りの部分から分離することで、より優れたコンポーネントを書くのに役立ちます。これにより、コンポーネントのテストとデバッグが容易になり、再利用可能で保守可能であることを確認できます。
ドキュメントの改善：Storybookは、コンポーネントのドキュメントを生成するために使用できます。このドキュメントは、開発者がコンポーネントの使用方法を理解し、問題をトラブルシューティングするために使用できます。
プレビューの改善：Storybookは、コンポーネントを個別にプレビューするために使用できます。これは、さまざまなスタイリングオプションをテストしたり、他の開発者からフィードバックを取得したりするのに役立ちます。

UIコンポーネントを開発している場合は、Storybookの使用を強くお勧めします。コンポーネントの品質、保守性、ドキュメントを向上させるのに最適な方法です。

Storybookの機能は次のとおりです。

ストーリー：ストーリーは、コンポーネントの動作を示す機能の個別ユニットです。ストーリーは、ドキュメント、テスト、プレビューに使用できます。
アドオン：アドオンは、Storybookに追加機能を追加する拡張機能です。テスト、ドキュメント、プレビュー用のアドオンなど、さまざまなアドオンが用意されています。
構成：Storybookは非常に構成可能なので、特定のニーズに合わせて調整できます。

コンポーネントコロケーションパターン (component collocation pattern)

Reactアプリケーションのコードベースを整理するためのパターンです。このパターンでは、関連するコンポーネントを同じディレクトリに配置することで、コードの可読性と保守性を向上させます。

コンポーネントコロケーションパターンを適用するには、まず、アプリケーションのコンポーネントを機能ごとにグループ分けします。たとえば、ログイン画面のコンポーネントは「login」ディレクトリに、ユーザープロフィール画面のコンポーネントは「profile」ディレクトリに配置します。

次に、各ディレクトリに、そのディレクトリに含まれるコンポーネントの依存関係を定義するファイル（「page.tsx」など）を作成します。このファイルでは、各コンポーネントのimport文とexport文を定義します。

コンポーネントコロケーションパターンを適用することで、コードの可読性と保守性を向上させることができます。関連するコンポーネントが同じディレクトリに配置されているため、必要なコンポーネントを簡単に見つけることができます。また、各コンポーネントの依存関係が明確に定義されているため、コンポーネントの変更の影響範囲を把握しやすくなります。

コンポーネントコロケーションパターンは、Reactアプリケーションのコードベースを整理するための効果的なパターンです。このパターンを適用することで、コードの可読性と保守性を向上させ、アプリケーションの開発と保守を効率化することができます。

コンポーネントコロケーションパターンのメリットです。

コードの可読性と保守性が向上する
コンポーネントの依存関係が明確になる
アプリケーションの開発と保守が効率化する

コンポーネントコロケーションパターンのデメリットです。

ディレクトリ構造が複雑になる可能性がある
ファイルの管理が複雑になる可能性がある

一つのフォルダにまとめて管理するファイル

一つのフォルダの中に

コンポーネントファイル(.jsx,.tsx Reactソースコード)
テストファイル(Jestファイル)
ストーリーファイル(Storybook:SF3ファイル)
その他

これらすべてのファイルを一つのフォルダにまとめます。

Next.jsの
App router
Server Action
を利用して開発していきます。

Sever ActionのかわりにtRPCを利用します。

グローバルで管理するファイル

グローバルで管理するファイルはRootもしくはsrc直下で管理します。

グローバルスタイルファイル
型定義ファイル
utilファイル
libファイル
その他

コンポーネントコロケーションパターンとアトミックデザインのそれぞれのメリットとデメリット

コンポーネントコロケーションパターンのメリット

コードの可読性と保守性が向上する
関連するコンポーネントを簡単に見つけることができる
コンポーネントの再利用性が向上する

コンポーネントコロケーションパターンのデメリット

ディレクトリ構造が複雑になる可能性がある
プロジェクトの規模が大きくなるにつれて、管理が難しくなる可能性がある

小規模向け開発手法だと思われます。

アトミックデザインのメリット

コンポーネントの複雑さを管理しやすい
コンポーネントの再利用性が向上する

アトミックデザインのデメリット

学習コストが高い
プロジェクトの規模が小さい場合は、必要のない手間になる可能性がある
最終的に、どちらのパターンを使用するかは、プロジェクトの規模や複雑さ、チームの開発スタイルなどによって異なります。

コンポーネントコロケーションパターンの実装方法

コンポーネントコロケーションパターンは、コンポーネントをグループ化することで、コードの再利用性と保守性を向上させる設計パターンです。このパターンでは、コンポーネントを機能ごとにグループ化し、各グループに責任を持つクラスを作成します。これにより、コンポーネントを簡単に再利用し、コードを簡単に保守することができます。

コンポーネントコロケーションパターンを実装するには、次の手順に従います。

コンポーネントを機能ごとにグループ化します。
各グループに責任を持つクラスを作成します。
クラス間の依存関係を定義します。
クラスをテストします。

コンポーネントコロケーションパターンは、コードの再利用性と保守性を向上させる効果的な設計パターンです。このパターンを実装することで、コードを簡単に再利用し、コードを簡単に保守することができます。

コンポーネントコロケーションパターンの利点は次のとおりです。

コードの再利用性向上
コードの保守性向上
コードのテスト容易性向上
コードの理解性向上

コンポーネントコロケーションパターンのデメリットは次のとおりです。

設計が複雑になる可能性がある
コードのサイズが大きくなる可能性がある
コードの実行速度が低下する可能性がある

コンポーネントコロケーションパターンは、コードの再利用性と保守性を向上させる効果的な設計パターンです。ただし、設計が複雑になる可能性があるため、慎重に使用する必要があります。

参考

Collocation

コロケーション | makotot.dev

[Next.jsのAppRouter] コロケーションパターンを実現し、eslintで依存の向きを強制する方法

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up