フロントエンドの設計

[Fumiya-Matsumoto]

概要

フロントエンドを設計する。フロントエンドはReactを使って作る

目的

• 保守性の低いフロントエンドにならないよう、設計をきちんと行う

  メモ

  Container/Presentational Componentについて

• Container Component
  • データを扱うコンポーネント
  • データをもち、また親コンポーネントとして複数の子コンポーネントにデータを渡す役割を担当
• Presentational Component
  • 受け取ったデータを表示するだけ
  • 例えば、ボタンやモーダルなど

    二つを分けるメリット

• 子コンポーネントの再現性を高める
  • Presentational Componentは子コンポーネントとしてUIを提供することだけに関心を持つ
  • そのため、どのようなデータが入ってくるか？によってその振る舞いを変えることができる
  • もし子コンポーネントにデータを持たせてしまうと、複数ページで同じようなUIなのにデータが異なるという場合に再利用できず、結局コピペするということになってしまう

    本アプリケーションのコンポーネント設計

    Container層/Component層をディレクトリから分ける。1ページ1Containerとする。

    Container層

    一旦、以下の4つを作る。ゆくゆくはTeam.jsxなどを作っていきたい。 これらは各ページの最も上部に存在するContainer層で、データを扱う。 中身のボタンやモーダル等は小コンポーネントがレイアウトのみ提供する。

• containers/PracticePosts.jsx
• containers/Calender.jsx
• containers/Feeds.jsx
• containers/MyPage.jsx

  Component層

• components/Buttons/HogeButton.jsx
• components/Modals/FugaModel.jsx
• components/Wrapper.jsx

  APIを呼ぶ関数

  フロントエンドからAPIを叩く部分を考える。一般的にファイルごとに関心を分離するらしい。 そのため、Reactのコンポーネントはあくまでレイアウトやデータを保持することを担当させる。 その場合に、各種APIを呼ぶ部分を関数化して他のファイルに分けることで関心を分離することができる。

コンポーネントファイルの中にAPIを叩く関数を定義してしまうと、他のページから同じAPIを叩きたい場合にコピペするハメになるため、コンポーネントファイル/API関数ファイルを分ける。

• apis/users.js
• apis/posts.js
• apis/best_records.js これらのファイルの中にはただのJavaScriptの関数だけが存在する。

  reducer

  Reactの組み込みAPIであるReact Hooksを使う。

• reducers/users.js
• reducers/posts.js
• reducers/best_records.js

  URLの管理

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

[Fumiya-Matsumoto]

定数や画像を配置

定数には2種類ある

• APIへのリクエストに関するもの
• スタイル これらは複数コンポーネントから参照されることを考慮して別のファイルに共通化する。

  2つのファイルを作る

• src/constants.js
  • APIリクエストに関して必要となる定数を定義する
• src/style_constants.js
  • colorsやfont_sizeなどを定義する

    画像を配置する

    src/imagesに保管する

[Fumiya-Matsumoto]

APIを呼ぶ関数を用意

フロントエンドからサーバーサイドのAPIを叩くための関数を定義する以下のファイルを作る

• frontend/src/apis/posts.js また、URLの文字列を定数のように定義しておく以下のファイルも作る
• frontend/src/urls/index.js

  コンポーネントからAPIを叩く時の流れのイメージ

• コンポーネントAから関数Xを実行する
• この関数Xがfrontend/src/apis/hoge.jsの中にあるイメージ
• 関数XはURL Xを参照しており、このURL Xはfrontend/src/urls/index.jsの中にある文字列であり、例えばapi/v1/postsのような文字列。このURLが指し示す先を目掛けて関数XがAPIを叩きにいく。

[Fumiya-Matsumoto]

axiosを導入

axiosというHTTPクライアントを導入すると、フロントエンドからHTTPリクエストを送ることが非常にシンプルになるらしい

# frontend/
$ npm install axios

[Fumiya-Matsumoto]

フロントエンドからAPIを叩くことに成功。 テストのため、一旦、GET http://localhost:3000/v1/postsは叩けば認証なしで情報が取れるようにしてある。

[Fumiya-Matsumoto]

Udemyを参考に、Headerとルーティングの設定を進めた