前回まででサーバーサイド側に検索機能の実装まで終わっているため、今回からフロントエンドを作っていきます。
今回は、ざっくりコンポーネントの作成まで行います。
Nextjs + Material UIの組み合わせで行きます
フロントで利用するフレームワークは脳死的にNextjsを選択するのが、最近のマイブームです
https://nextjs.org/
GUIはMaterial UIを利用します。こちらも特に理由はなく、完全に好みの問題です。
https://mui.com/
Atomic Design的な考えを取り入れつつ、かなり簡素なディレクトリ構成にしました
ReactでUI設計を行う時は「Atomic Design」を利用することが多いと思います。本プロジェクトでもこの考え方を利用しますが、現状のアプリ内容に合うように少しカスタマイズして利用します。
というのも、今回作成するアプリはとても小さいもので、想定している機能としては
・画面から検索を行う
・検索結果を表示する
程度のものになります。
そのため、ディレクトリについても以下の画像のように
・ui-elements:画面の部品となるコンポーネント
・template:ui-componentsを組み合わせたページ
の2ディレクトリのみとしました。
一旦ここまで
ということで、こんな感じで作っていますということで、一旦ここまでになります。
各コンポーネントはビジネスロジックは持たず、最終的にnextjsのpageディレクトリに配置するページ内に処理に必要なすべてのメソッドを作成し、プロパティ経由で各コンポーネントに受け渡すような設計で進めていきます。
フロントエンド周りは自分が苦手とするところなので、サーバーサイド以上に作成に苦戦しそうですが、なんとか作っていきたいと思います。
created by Rinker
¥3,498
(2024/04/07 18:00:18時点 楽天市場調べ-詳細)
created by Rinker
¥3,960
(2024/04/07 18:54:25時点 楽天市場調べ-詳細)
