JavaScript初心者だけどReactにさわってみたよ!

本日のあらすじ

フロントエンド界隈で流行っていたらしい React という謎のテクノロジーにちょっと触ったよ! 流行に乗り遅れた気もするけどきにしない!


ご注意

この記事に開発環境の構築や JSX の構文・コンパイル方法、React の API に関する解説はありません。

単なる「こんなの書いた! 動いた! わーい!」系の内容なので、解説記事を探している方にとって有益な情報はなにひとつありません。予めご了承ください。

React とは

2013年に Facebook が開発した JavaScript ライブラリで、『フロントエンドエンジニアのための現在とこれからの必須知識』によると、React はあらゆる JavaScript フレームワークの中でも特に将来性が期待されています。ほんとかな?

React は何をしてくれるか?

React の仕事は、本質的にはたったの2つだけです。

  • DOMの更新
  • イベントへの反応

これだけ見ると、「べつに React を使わなくてもよくね?」と思うのですが、『入門 React ―コンポーネントベースのWebフロントエンド開発』には React ならではのアドバンテージについて以下の記述があります。

React は従来とまったく異なる方法でブラウザの DOM を扱います。手動で DOM を更新して状態を管理するといった旧態依然としたアプリケーションの開発方法は、スケーラビリティの点で劣っており、新機能の開発を遅らせる要因となります。一方、React を使えばユーザーインタフェースをより宣言的に記述することができます。

従来とまったく異なる点として、「テンプレートと表示ロジックを敢えて分離しない」「必要なコンポーネントHTML ごと作る」というのが React 流。

そのほか 仮想 DOM とか JSX とか小難しげな話題が次から次へと出てきてなかなか本題に入れなさそうなので、その辺はすべてすっ飛ばしてとっとと始めようと思います。

まずはお約束として、この記事を書くにあたり使用したライブラリの一覧のご紹介から。

本日の使用ライブラリ一覧

  • React 0.15.1
  • Browser 5.8.24
  • Bootstrap 3.3.6

React で Hello, World

さっそく Hello, World を書きました。僕にとって記念すべき初 React です。

実は公式がすでに公開しているものを、ほぼそのままパクっています。


ソースの構造

React 独自のお作法を攻略すべく、ソースの中でどことどこがどう繋がっているのかを図にしてみました。

f:id:tercel_s:20160619204241p:plain
HTML自体はほとんど空っぽで、必要なコンポーネントマークアップも表示ロジックも JavaScript 側が一手に担っています。

React では、JavaScript 側でマークアップしやすいよう、わざわざ JSX という JavaScript の特別な拡張言語が用意されています。ソース中の return <div>Hello, {name}.</div>; に注目すると、JavaScript から直接 HTML を返している(ように見える)のが直感的にわかります。

React でイベント処理

続いて、React の 2 つめの機能であるイベント処理にいってみます。テキストボックスの入力と表示を連動させる仕掛けを見よう見まねで書いてみました。

以下のデモの「お名前:」欄を変更して、表示の変化を確かめていただくことができます。


ソースの構造

ユーザの入力を UI に反映させるには、以下の 3 ステップが必要です。

ここでは簡単のため、「ラベル」「テキストボックス」「メッセージエリア」を、すべて一つのコンポーネントとしてまとめて扱っています。

f:id:tercel_s:20160619204352p:plain

コンポーネントの分割

さきほどのサンプルでは、画面内のすべての構成要素を単一のコンポーネントとしてコーディングしました。

React では、コンポーネント一つ一つを分割し、それぞれに親子関係を与えることができます*1

f:id:tercel_s:20160619231558p:plain

見た目も振る舞いも全く一緒ですが、コンポーネントを分けると、一つの render にすべてを詰め込まずに済むため、個人的にはスッキリしているように見えます。

ちょっと面倒な点といえば、子コンポーネントで発生したイベントを親コンポーネントに通知するための仕掛けが必要になることでしょう。
ここでは、以下の方法で子から親にイベント通知を行っています。


ソースの構造

f:id:tercel_s:20160619204653p:plain

おまけ: React 自分用メモ

ちょっとお勉強してちょっとわかったことを適当に書き留めておくコーナー。

コンポーネント

props と state

props と state は、ともにコンポーネントの入力となるデータで、それぞれ意味合い(役割)が異なる。

props
  • propsとは、Reactコンポーネントに渡す任意のデータのこと
  • 親から子への(一方向的な)データの引き渡しに使われる
    • 初期データを外部から与えたい場合
    • 親のコールバック関数を子に参照させたい場合、などで使う
state
  • stateとは、Reactコンポーネントの内部状態を表すデータのこと
  • 要素の表示内容を決定するために使用される

*1:言い換えると、小さなコンポーネントを組み合わせて、より大きく複雑なコンポーネントを作ることもできます。

Copyright (c) 2012 @tercel_s, @iTercel, @pi_cro_s.