Reactガイドを読んでいくその18

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

React の流儀

何回かに分けて実施する。

ここでは検索可能なデータ表を作成していく。
巨大で軽快な Web アプリを開発する場合はReactが素晴らしい選択肢になることを伝えている。
背景にはInstagramFacebookがあるのでその説得力は確かなものだと考えられる。
もちろんReactに問題がないわけではないと思う。

モックから始めよう

想定としてはJSON API実装済みで、デザイナーからもデザインモックが渡された状態。
検索窓とスポーツ用品・電子機器の名前と価格が表示された簡易なもの。
JSON APIはcategory:でそれぞれ表の情報を並べただけのもの。
以下のような感じに返ってくると想定。

[
  {category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
  {category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
  {category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
  {category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
  {category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
  {category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];

Step 1: UI をコンポーネントの階層構造に落とし込む

まずは構成要素をみて、コンポーネントそれぞれに名前をつけていく。
デザイナーと一緒に仕事をしている場合はこの作業をすでに終えている可能性があるので話しにいく。
プロダクトの設計や検討には関連チームとのコミュニケーションは大切なんだということを知れる。
デザイナの場合モックを作っている時にレイヤー等ですでに名前をつけていることがあるので、それをコンポーネントの名前にそのまま適用するのがスムーズで良い。

Single responsibility principleに則り、一つのコンポーネントは理想的には一つのことだけをするべきという考え方のもと、コンポーネントにする範囲を決めていく。
もし検討段階で単一化が難しい場合は将来的には分割することを考える必要がある。

ユーザに向けて表示する=JSONデータモデルというパターンが多いので、正しく構築されていればUIにもうまく適用することが可能。Reactにおいて良いモック、JSONモデルかどうかはこういうところで判断することが可能なのかもしれない。

例では5種類のコンポーネントがこのアプリにあることがわかる。
・全体を取り囲むもの(FilterableProductTable)
・ユーザ入力を受け付ける場所(SearchBar)
・ユーザ入力に基づくデータの集合を表示する枠(ProductTable)
・カテゴリを見出しとして表示する(ProductCategoryRow)
・各商品を一行で表示する(ProductRow)

この例では表のヘッダー部が単独のコンポーネントになっていないが、好みの問題でどちらでも良いとみなせるが、データの集合を描画する一環としてProductTableを定義したため。
将来的にコンポーネントの役割が肥大化してきた時にはProductTableHeaderとして分割してあげるのが良い。

今回わかったコンポーネントを階層構造にすると以下のようになる。

・FilterableProductTable
 - SearchBar
    - ProductTable
       - ProductCategoryRow
       - ProductRow

今日はここまで。