名前も知らないSEでしょう

この木なんの木気になる樹

JavaScript

React関連の使い方を復習する/(2) props

更新日:

前回、アプリケーションの雛形を作成したので、続いて作成する簡易カンバンの雛形を作ります。
とりあえず、Reactのコンポーネントのpropsを通じて静的なデータを受け渡すことで、画面イメージを作ります。

この記事で触れること

画面とコンポーネントの設計をする

見せる用に綺麗に書くのも時間がかかるので、ホワイトボードに書いたものを貼り付けておきます。
TrelloJIRAイメージしています。
黒字と青字なので少し見辛いですが、青枠で囲った単位でコンポーネントを作成していきます。

index.js

まずは、受け渡すデータの構造を作成します。
とりあえずは固定値で画面を描画するため、基点ファイルでデータを定義して下層コンポーネントに受け渡していきます。

前回と今回の記事に該当しそうなカード、タスクのデータにしてみました。
ポイントは、L99で定義したデータをAppコンポーネントに受け渡しているところでしょうか。コンポーネント間で値を受け渡す、Reactの基本的な構文ですね。

Appコンポーネント

続いて、カンバンの大枠を作成します。
とりあえず、ステータスがTodo、WIP、Doneの3つであることを想定してLaneコンポーネントを配置していきます。

コンポーネントに渡されたpropsを取得する方法は、this.props.xxxですね。
ポイントとしては、先ほどindex.jsで定義してpropsとして受け渡した値を、各Laneコンポーネントに割り当てられているCardオブジェクトに絞り込んで受け渡しているところでしょうか。

Lane

続いて、ステータスごとにカードを配置する縦列のコンポーネントを作っていきます。
ポイントとしては、列に配置されるCardオブジェクトを配列で持つことでしょうか。

L21-L32でCardコンポーネントのDOMツリーを生成して、L37で割り当てています。
先ほども述べたとおり、現時点ではカンバンのステータスはTodo、WIP、Doneの3つを想定しているので、列を3分割します。CSSを書くのをサボるためにBootstrapを使いたいので、react-bootstrapをパッケージに加えます。
また、L24でkeyを設定しています。これを設定しないと、デベロッパーツールなどで警告が出ます。VirtualDOMから実際のDOMへの変更を最小限にするために大切な設定です。一意である必要があるので、idを指定します。

参考:React.jsの地味だけど重要なkeyについて

Card

続いて、Cardコンポーネントを作っていきます。
カード名と説明、そして複数のタスクを持つ単純なコンポーネントです。
例によってデザインを考えるのが面倒なので、BootstrapのPanelコンポーネントを使います。

特に目新しいところはないですね。
Tasksコンポーネントに、Cardが持つタスクを受け渡しています。

Tasks

続いてTasksコンポーネントです。
タスクというからには、チェックボックスか何かで完了したかをチェックするチェックボックスが欲しいですね。

L21、やっぱり楽したいのでBootstrapのCheckboxコンポーネントを使います。
trueで固定ならば、checkedをマークするだけでOKです。今回はisDoneの値によって表示を変えたいため、値を設定します。

CSSの調整

最後に、見栄えを調整するためにCSSを少しだけ書きます。

Laneの高さをブラウザの高さいっぱいに揃えたいので、その親となっている要素のheightも全て100%にしています。
他にいい方法あるんでしょうかね?この辺りはあまり詳しくないのでとりあえず知っている方法で。

画面の確認

ここまで作った画面を確認していきます。
なお、create-react-appで自動生成された使わないファイルは削除しているため、現時点でのファイルツリーは以下のようになっています。

Reactコンポーネントのpropsを使って、静的な値の受け渡すことで、なんとなくカンバンっぽい画面ができました。
今回は値しか受け渡していませんが、当然関数を渡すことも可能です。
次回は、stateを使って動的な値の受け渡しを行なっていきます。

現時点でのソースコードは、Githubに置いておきます。

-JavaScript
-, ,

Copyright© この木なんの木気になる樹 , 2018 AllRights Reserved.