tannoTweetみなさまはじめまして。リスペクトの丹野です。去年の4月に入社し、今年で2年目を迎えました新人プログラマーです。お手柔らかによろしくお願いいたします。最近js関係の記事でよくReactという名前を見かけます。何度も見かけるのでとても気になっていました。使いこなせるだろうか...敷居が高そうだなぁと思って今まで手を出せずにいました。そこで今回はReactに実際に触れてみてどんなものなのかを体験しつつ、その所感をレポートしたいと思います。Reactとはfacebook製のJavaScriptライブラリです。http://facebook.github.io/react/Backbone.jsやAngular.jsのようなフレームワークとは少し違い、MVCのViewの部分を作るためのライブラリです。facebookをはじめ、Instagramなどいろいろなところで使われるようになってきています。ライブラリなのでBackbone.jsやAngular.jsなどのフレームワークと併用することも可能です。Backbone.jsやAngular.jsはアプリケーションの規模が大きくなると管理が難しくなりますが、Reactは規模が大きくなっても管理がしやすいというのが大きなメリットです。Reactの特徴として公式サイトで紹介されているものは以下になります。UIReactはMCVのViewを作るためのライブラリなので、ModelやControllerについて考えることなく手軽に導入することができます。DOMとは、実際のDOMとは別に仮想のDOMを構築して、前回の仮想DOMとの差分だけをとって更新し、実際のDOMに反映することができるというものです。DOMを更新するよりも高速に処理できるところが特徴です。FLOWReactでは、データの受け渡しが親から子への一方向なので処理の流れがつかみやすくなります。アプリケーションもわかりやすく作ることができます。まとめると、今までのライブラリに比べると簡単に実装できて、処理が早く、コード全体の流れも見やすくなってコードの管理が楽になる、というのがReactの特徴ですね。主な導入方法は以下になります。src="https://fb.me/react-dom-15.1.0.js"></script>チュートリアルでは後者ですが、好きな方で試していいと思います。これだけ入れてしまえば使えるのでとっても手軽です。記事作成中に気がついたらReact.jsのバージョンが上がっていたので、こまめにバージョン情報を見ておくといいかもしれません。チュートリアルをやってみた今回はReactがどんなものなのか知るために、公式サイトにチュートリアルが載っていたのでとりあえずこのチュートリアルをなぞっていくことにしました。Tutorialちなみに日本語ページが存在するのですがチュートリアル内容が若干違うようなので、日本語ページは参考程度に見ることをおすすめします。内容としてはブログにも設置できるようなリアルタイムコメントボックスをつくるというものです。commentsなどのコメントシステムが採用しているリアルタイムコメント機能のベーシック版です。以下のような機能を基本装備しています。コメント全件の表示欄コメントの送信フォーム自作のバックエンドとの連携機能そこに以下の機能を追加します。コメントの先読み:送信したコメントをサーバに保存する前に表示することで、アプリ動作の体感速度をあげる。自動更新:他のユーザのコメントをリアルタイムで表示させる。Markdown記法:ユーザがMarkdown記法でコメントを書けるようにする。ちなみに実際にコメントボックスとして動かすにはサーバサイドのプログラムも必要なのですが、そこらへんも既に出来上がったコードが用意されているのでReactで画面を作ったらすぐに動かすことができます。Python、Ruby、Go、PHPと好きな環境で試せるそうです。至れり尽くせりですね。はじめてみようそれではさっそくチュートリアルをやってみましょう。今回用意した環境は以下のとおりです。15.1.0まずHTMLファイルを用意します。HTMLに関してはチュートリアルに載っているものをそのまま使用しました。</body></html>最初のコンポーネントReactの特徴とも言えるコンポーネントを作っていきます。Reactでは画面を構成する要素をコンポーネントという部品にわけ、それを組み立てることでアプリケーションを構築しています。コンポーネントをつくることで、カプセル化ができ、保守性や可読性が向上するというメリットがあります。実戦投入への道)今回作るコメントボックスのコンポーネント構造は以下のようになります。CommentBoxCommentListCommentCommentForm上の構造はこんなイメージでしょうか。</div></div>まず最初のコンポーネントを書いてみます。document.getElementById('content'));CommentBoxコンポーネントを作成しました。下のReactDOM.render()で実際のDOMに反映しています。引数で反映する内容、第二引数(document.getElementById(‘content’))でHTMLの反映場所を指定しているようですね。class="commentBox"></div>になる、という感じでしょうか。ちなみに、このReactDOM.render()は一番下に置いておくのがベストらしいので、この先のコードはすべてこの上に足していくことにします。コンポーネントの組み立てここでさらにcommentListとcommentFormというコンポーネントを追加します。このコンポーネントを表示するように先に作ったCommentBoxコンポーネントを書き直します。}});これでコメントをリスト表示するためのCommentListコンポーネントとコメントを投稿するためのCommentFormコンポーネントが出来上がりました。Propsを使う入力されたコメントを表示するCommentコンポーネントを作ります。Commentコンポーネントは投稿されたコメントを表示するためのコンポーネントなので、コメントのデータを受け取って表示させる処理が必要です。そのデータの受け渡しを可能にするのがPropsというプロパティです。自分の親にあたるコンポーネントから渡されたデータを扱えます。データにアクセスするにはthis.propsを使います。}});Commentの親コンポーネントはCommentListです。CommentコンポーネントはCommentListコンポーネントからデータを受け取ります。Commentコンポーネントの{this.props.author}はCommentListコンポーネントのauthorプロパティのデータを取ってきます。Commentコンポーネントの{this.props.children}はCommentListコンポーネントのネストされた子要素の値をとってきます。commentですね。これでコメントが表示されるようになりました。最初に作ったHTMLファイルでheadに既に以下のコードが入っていたと思います。src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.5/marked.min.js"></script>marked.jsとは、ブラウザ上でマークダウンをhtmlに変換してくれるマークダウン用のパーサー&コンパイラです。変換する方法)このコンパイラを使ってユーザがマークダウン記法でコメントを書けるようにします。Commentを以下のように変更します。}});マークダウンで書かれたコメントは{marked(this.props.children.toString()}で出力できるのですが、このままだとReactがご丁寧にXSS対策を行ってくれているおかげでHTMLタグまで表示されてしまうんですね。HTMLタグとして認識してもらうためにrawMarkup関数を使っています。ここで気をつけなければいけないのが、dangerouslySetInnerHTMLです。dangerouslySetInnerHTMLはHTMLをエスケープせずに表示するためのものですがXSSの危険があります。信頼できる場合以外使用するなとtutorialにも記載されているので、使用する際は気をつけて使用してください。今までソースコードに直接書いていたauthorやcomment本文をデータとして受け取れる形にします。今回はjsonデータで受け取って表示できるようにします(後々Ajaxとかで使えそうですね!)まずjson形式で送信するデータを書いてみます。comment"}];CommentBoxを以下のように変更します。document.getElementById('content'));ReactDOM.render()でdataを受け取り、CommentBoxコンポーネントでpropsを使ってCommentListにデータを渡しています。あとはこのデータの内容をCommentコンポーネントを使って表示できるようにCommentListに変更を加えます。}});CommentBoxから受け取ったdataに.map()を使ってcommentという配列をつくり、Commentコンポーネントにデータを渡せるようにしています。これでCommentコンポーネントを使って1つ1つのコメントデータを表示できるようになりました。Commentコンポーネントの処理を関数化してCommentListコンポーネントで表示できるようにしています。前半まとめさて!これでJSONデータで表示できるところまで行きました!ここまで試してみましたが、確かにデータの流れが一方向なので処理の流れも追いやすいですし、renderの中身もHTMLに近いのでHTMLがわかっていれば書くのも非常に簡単そうです。コンポーネントで分けることでコードが整理され、修正も管理も楽そうだなという印象を持ちました。今回はここまでで一旦終了にしたいと思います。navigationRedPenでお手軽文書校正そろそろDockerを始めないとやばいと思い始めたあなたへ株式会社リスペクトという、仙台・東京に拠点を持つ会社のシステム部門のブログです。プログラミングやシステム運用のノウハウなどを公開していきます。