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

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

JavaScript

React関連の使い方を復習する/(4) prop-typesとreact-dnd

更新日:

React関連の使い方を復習する/(1) create-react-app
React関連の使い方を復習する/(2) prop
React関連の使い方を復習する/(3) stateとイベントハンドラ

前回、reactのstateを使ってタスクのチェックボックスを通じて画面を少し動的にしてみました。
今回は、react-dndを使ってドラッグ&ドロップでカードを移動できるようにしてみます。合わせて、コンポーネントのPropが徐々に増えてきたので、ちょっとした型安全性をもたらしてくれるprop-typesを導入していきます。

この記事で触れること

ReactDndを導入する

カンバンと言うならば、カードを移動できないと面白くないですよね。ReactDndと言う便利なパッケージが公開されているので、これを利用します。

導入する手順をざっくりと書くと、以下の流れになります。

  1. ルートコンポーネントをDragDropContextでラップする
  2. ドラッグするコンポーネントをDragSourceでラップする
  3. ドロップするエリアとなるコンポーネントをDropTargetでラップする
  4. ドラッグ、ドロップしたときにstateを操作する処理を作成する

今回だと、ルートコンポーネントはAppコンポーネント、ドラッグするコンポーネントはCardコンポーネント、ドラックするエリアはひとまずLaneコンポーネントとして改造していきます。カードの順序をドラッグしている場所に応じて入れ替える処理は少々複雑なので、今回はレーンの移動だけをできるようにします。

ソースコードの変化を順に見ていきます。

Appコンポーネント

ルートコンポーネントとなるAppコンポーネントは、DragDropContextでラップするだけです。

Appクラスをexportする前に、ラップしてあげているだけですね。
公式によると以下らしいので、バックエンドにはとりあえずHTML5Backendを指定しておけば良いのだと思います。

This is the only officially supported backend for React DnD. It uses the HTML5 drag and drop API under the hood and hides its quirks.

Cardコンポーネント

DragSourceでラップするわけですが、es7のdecoratorsを利用すると、Javaで言うところのアノテーションのような形でクラス定義の頭に定義することができます。

ただ、このdecorators記法を利用するためには、ejectして設定ファイルにtransform-decorators-legacyを追加しなければなりません。例によって本題ではないので、今回はes6の記法を使います。

ざっくりですが説明します。詳細はドキュメントを参照のこと。

DragSourceは3つの引数を必須でとります。
typeは、stringかsymbol、またはコンポーネントのpropを返す関数のいずれかを指定します。DropTargetも同様にtypeを持ち、これが一致するときだけDropTargetにドロップできるようになります。
specは、react-dndで定義された関数を実装したオブジェクトを指定します。例えば、ドラッグが開始された時の処理はbeginDrag、ドラッグが終了した時の処理はendDrag、などです。
collectは、コンポーネントでreact-dndの機能を使えるようにするための定義みたいなもので、connectとmonitorを引数に持つ関数を指定します。connectはDragSourceConnectorのインスタンスで、主にDOMノードとReactDNDを紐付けるための関数を提供します。
monitorは、名前の通りドラッグ元をモニタリングしてくれる関数を提供します。例えば、ドラッグしているかを判別するisDragging、ドラッグできるかを判別するcanDrag、などです。

実際のソースコードを見ていきます。少々長くなってきたので、今回変更のない箇所は省略しています。
L33-L47、decoratorsを使用しないとこのような記述になります。コンポーネントの定義とは別にDragSourceでラップをする形になります。カードを動かすための設定なので、typeは文字列でCARDとしています。specには、ドラッグ開始時に呼び出されるハンドラとしてbeginDragを実装しています。コメントに書いてある通りですが、CardコンポーネントのPropをDropTargetに渡す、と言う処理をしています。最後にcollectですが、今回Cardコンポーネントで使用するのは、DOMとReactDndを紐付けるconnectDragSourceだけなので、それだけ定義しています。

L16、connectDragSourceがpropsから取り出せるのでそれを利用して紐付けを行なっています。renderで返却するノードのルートがdiv要素であれば、以下のようにreturnの戻り値をconnectDragSourceでラップするだけでも良いのですが、今回はルートがAccordionのためこのような記述をしています。

Laneコンポーネント

続いて、ドロップ先となるLaneコンポーネントを改造していきます。
Cardコンポーネントと同様、今度はDropTargetでラップします。取る引数などの概要はだいたい同じなので省略

L74-90、DragSourceと同様にDropTargetでLaneコンポーネントをラップします。
typeはDragSourceと合わせないと動作しないため、文字列でCARDとしています。specには、カードをドロップした時に呼び出されるdropを実装しています。dropでは、L33-L40で定義したmoveCardを呼び出しています。collectでは、先ほどと同様にDOMとReactDndを紐付けるconnectDropTargetだけ定義しています。connectDropTargetは、L66でpropsから取り出して紐付けを行なっていますね。
ReactDndの定義部分はここまでで、あとは実際にstateをどうやって更新するかの処理を作り込みます。
L33-L40で、ドラッグ元のレーンとドロップ先のレーンそれぞれがstateで持っていたcardsを更新します。ドロップ先のレーンは、LaneコンポーネントなのでそのままupdateLaneStateを呼び出すことができますが、ドラッグ元はCardをドラッグして移動しているため取得できるコンポーネントの情報がCardコンポーネントなので、少々面倒です。L55、L59でCardコンポーネントに必要な情報をPropで持たせてあげて、そこから呼び出すようにしています。だんだんとコンポーネント間の相関が増えてきてわかりづらくなってきました。

prop-types

コンポーネントがもつPropが多くなってきて視認性が悪くなってきます。また、不毛な誤りも増えてきそうですよね。prop-typesを利用してコンポーネントがもつPropの型安全性を担保しつつ、ドキュメント代わりにしていきます。

prop-typesを利用するメリットは、主に以下でしょうか。個人的には、特にドキュメント代わりというところが大きい気がしています。

  • 動的型付けであるが故のバグを早期に発見できる
  • コンポーネントがもつPropを一覧で確認できる(ドキュメント代わり)
  • isRequiredで必須としておくことで、undefinedやnullチェックを省略できる

React.PropTypesはReactのv15.5から別パッケージに移動したので、prop-typesというパッケージを別途インストールします。prop-typesですよ。間違えてprop-typeをインストールしてハマっていたのはご愛嬌。

こんな感じで設定します。

esdocに出力できるように、別途Propごとにコメントを書いてもよいでしょう。CardコンポーネントがどんなPropを持つのかを一目で確認することができますね。この定義と違った実装をしている場合は、デベロッパーツールで警告が出るのですぐにわかります。

画面の確認

それでは、今回作り込んだ画面を確認して見ましょう。

だいぶそれっぽくなってきました。
現時点でのソースコードは、Githubに置いておきます。

だんだんコンポーネント間のバケツリレーが増えてきて、流れを読み解くのが大変になってきましたね・・・。Fluxを使わない場合でも、もっとスマートな方法があるのだろうか。
この状態で並び順を制御する処理を書いていく気力はなかったです・・。
そろそろreduxを導入して違いを見ていくとよいでしょうかね。

今回のはなかなか時間がかかって疲れた・・明日はお休みかな。

-JavaScript
-, ,

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