勉強記録ウェブアプリ作成の軌跡 2:フロントエンド設計

概要

「【Rails×React】UberEats風アプリを作りながら、SPA開発を学ぼう」を使って学んでいく上で自分で勉強記録アプリを作りたいと思ったので、完成するかは置いといて、とりあえず学んだことを自分が作りたいものに置き換えて考えていく。

内容

前回の記事で決めたデータを元に画面とコンポーネントの設計を行う。
画面に対応するコンポーネントはデータを扱うため、最初の設計を誤ると保守性の低いフロントエンドのコードになるため注意が必要。
コンポーネントというのは、ボタンや画像などのUIのパーツや部品のこと。

コンポーネント

「データを扱うコンポーネント」 Container Component

こちらは親コンポーネントとして複数の子コンポーネントにデータを渡す役割がある。

「受け取ったデータをただ表示するためのコンポーネント」 Presentational Component

これはボタンやモーダルなどが含まれる。

コンポーネントがこの２種類に分けられている最も大きい理由として、子コンポーネントの再利用性を高めることが挙げられる。
例えば、複数のページにおいて同じようなUIではあるが、データは異なるといった場合に、子コンポーネントではデータを持たずどのようなデータが入ってきても対応できるようにすることで、無駄なコードをなくし、デザインやコードの整理を行うことができる。

そのため、今回はわかりやすくするためにContainer層とComponent層を以下のようにディレクトリから分ける。

• Container層
  • containers/Main.jsx
  • containers/User.jsx
  • containers/Review.jsx
• Component層
  • components/Button.jsx
  • components/Wrapper.jsx

API(Application Programming Interface)

次にフロントエンドからAPIを叩く部分を考える。一般的にファイルごとに分離すべきということ。
そのため、Reactのコンポーネントはあくまでレイアウトやデータを保持することを担当させる。
注意点として、コンポーネントファイルの中にAPIを叩く関数を定義してしまうと、他のページから同じAPIを叩きたい時に参照できずコピペしてしまい、冗長なコードとなってしまう。そのため、コンポーネントファイルとAPI関数ファイルを分ける。

• api/Main.js
• api/User.js
• api/Review.js

reducer

今回はReactの組み込みAPIであるReact Hooksでシンプルにデータを保持できるようにする。
一般的には、reduceなどのデータライブラリを用いることもある。
複数コンポーネントで同じような状態を持ちたい場合に便利であるため、desucerもコンポーネント内で定義せずAPIと同様別のディレクトリ・ファイルで管理する。

• reducers/Main.js
• reducers/User.js
• reducers/Review.js

URLの管理

APIのURL管理も別ファイルに分ける。これはRailsでURLがroutes.rbにまとまっているようにフロントエンドでもここを参照すれば使われているURLがわかるというようにする。
今回はurls/index.jsを作成し、ここにAPIのURL文字列を定義していく。

参考記事

• 【Rails×React】UberEats風アプリを作りながら、SPA開発を学ぼう
  • https://www.techpit.jp/courses/138