Rのつく財団入り口

ITエンジニア関連の様々な話題を書いているはずのブログです。

トップ > IT > 【感想】WebデベロッパーのためのReact開発入門

【感想】WebデベロッパーのためのReact開発入門

IT 読書 開発 プログラミング JavaScript フレームワーク React フロントエンド

WebデベロッパーのためのReact開発入門

　ちょいとJavaScriptフレームワーク関連の情報収集が急遽必要になって、勝手にフロントエンド強化月間ということで読み漁ったReact本のひとつ。230ページクラスのちょい厚い入門書で2016年11月刊行。本書で使っているReactのバージョンは15.3.0となっています。(本エントリ時点の最新版は2017/9にv16.0.0、2017/11にv16.2.0)

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

WebデベロッパーのためのReact開発入門 JavaScript UIライブラリの基本と活用

  • 作者:柴田 文彦
  • 発売日: 2016/11/25
  • メディア: 単行本（ソフトカバー）

Chapter 1 Reactとは？

　A JavaScript library for building user interfaces を名乗るReactの特徴、動作環境から始まり、動かし方へ。

reactjs.org

　こうしたJavaScript周りの本ではNode.jsやnpmから始まって環境構築が結構長かったりしますが、本書ではブラウザ上でHTML/CSS/JavaScriptを書いてオンライン上で実際に動作を確かめられるWebサービス、jsFiddleを一貫して使っています。

jsfiddle.net

　ブラウザはChromeにし、とにかくブラウザのみで完結してReactを動かして入門しよう…という初学者に優しいアプローチですね。このjsFiddleジツは知らなかったのですがけっこう便利ですね。
　そしてReactはコンポーネントベースである、ステート(State)が内部の変数のようなもので状態を保持、プロパティ(Props)が外部から与えられてコンポーネント自体からは変更してはいけない値、JavaScript + XMLの略であるJSXがReactのコンポーネントを書く際に使う独自の言語というか記法、仮想DOMの技術が内部で使われていて高速に動く…という話から2章へ続きます。

Chapter 2 Reactのコンポーネント

　僕も最初誤解していたのですが、JSXを使った書き方はReact必須かというと、実際の開発では事実上必須だけどReact自体はJSXなしでも書けるんですね。本書ではまずそこから始まり、最初は

// コンポーネントの定義
var HelloWorld = React.createClass({
  render: function() {
    return React.DOM.h2(null, 'Hello, React World!');
  }
 });

// コンポーネントの生成
ReactDOM.render (
  React.createElement(HelloWorld),
  document.getElementById('content')
);

// HTML側
<div id="content"></div>

とHelloWorldコンポーネントを作るところからです。ちなみにReact.createClass(..と書くのはES5なJavaScriptの場合でもう古く、公式でも既にES6形式でclass HelloWorld extends React.Component {..と書く方式を推奨してるのでそこは注意です。(この本は2016年11月刊行ですが、もう古いあたりフロントエンドの変化の速さを感じますね。)
　そこからテキストボックスでの入力を受け付けて内部のpropsに格納して計算して表示したりと応用、ライフサイクルメソッドの説明など。

Chapter 3 JSXの基本

　この章から事実上必須のJSXを使った書き方になります。jsFiddleはBabelに対応しているのでそのままオンラインで試せます。

// コンポーネントの生成
ReactDOM.render (
  <h2>Hello, React World!</h2>,
  document.getElementById('content')
);

から始まり、カスタムコンポーネントとした作り方、内部での演算など。
JSX内では<!-- HTML形式こめんと --> はだめで { /* こめんと */} か // 1行だけなら可能 としないといけない、などはあまり解説されないことが多いので有用でした。
　そしてES6のJavaScriptで使えるようになったスプレッド属性 {...myStyle}を、Reactではコンポーネントの各プロパティにセットする時に使うととても便利だという話、最後にトランスパイラ Babelの使い方。
　本書では一般的なコマンドプロンプトからbabelでjsファイルをES5形式に変換する方式でなく、Reactコンポーネントを書いたHTMLファイル自体にヘッダに <script src="...../libs/babel-core/xxx/browser.min.js"></script> のようにしてブラウザ用のBabelを読み込ませ、ブラウザでの表示時に自動的に変換させる方式を採っています。Reactを記述したjsファイルが外部にある場合は、Chromeだけはセキュリティ設定の変更が必要です。こういうやり方もあるんだなあとこれは新しい発見でした。

Chapter 4 Reactを使いこなす

　ここからは応用編。

  • HTMLのフォームと同じようにテキストボックスを作ると編集できなくなってしまうのでコントロールドコンポーネントの使い方
  • type, checked属性を使ったラジオボタン、チェックボックス、セレクトボックスの作り方、value属性の与え方
  • stateの値を使ったフォームのバリデーションの実現方法
  • Reactを使った場合の<table>タグでの行ごと繰り返しのリスト表示方法(HTML5準拠なのでタグ内ではborder属性が使えず、CSSで設定の必要あり)
  • ES5で追加されたMapオブジェクト(キー：値の連想配列をよりわかりやすく定義できる)を使った、より便利なリスト表示方法
  • コンポーネントの親子関係の定義方法
  • 関数を内部に持たせたJS変数をコンポーネント内で mixins: [変数名], のように加えると複数コンポーネントで共通機能を共有できるようになる、Mixin機能

がコードや画面、ChromeのDeveloper Toolsのキャプチャの例を豊富に出しながら解説されています。 Mixin機能は知らなかったのでこういうのもあるのかーとなりました。ところで読みがなは「ミクシン」とありましたが「ミックスイン」とどちらなのでしょうね。やってることはRubyのmixinやPHPのtraitと同じなのですが。

Chapter 5 Reactの一歩進んだ使い方

　本体自体がガッチリ機能豊富で大きいAngularに比べるとReactは本体は小さく、アドオンやサードパーティのライブラリで機能を広げているというのは特徴として聞いていましたがそのアドオンの話。単に「アドオン」といった場合はReact公式、Facebookが用意したものを指すことが多いそうです。個別にダウンロードせずとも .../xx.x.x/react-with-addons.jsをHTMLにインクルードするだけでも使えます。

  • ReactTransitionGroup / ReactCSSTransitionGroup：CSSを使ったアニメーション実現
  • LinkedStateMixin：親から子への一方通行でなく、双方向データバインディング
  • update：JSの変数を参照渡しでなくデータを複製して渡せる
  • PureRenderMixin：描画を高速化、しかしレガシーになってReact本体に取り込み予定
  • shallowCompare：不要な再描画を防いで高速化
  • TestUtils：テスト用の便利な機能を提供
  • Perf：コンポーネントのパフォーマンス評価

　触りとして、Perfを導入して対象コンポーネントが入ったソースにコード追加、ChromeのDeveloper Toolsのコンソールに評価結果を表示した例。
　そしてToDoアプリにReactTransitionGroup / ReactCSSTransitionGroupを取り入れてアニメーション効果を出す例はかなり詳しく載っています。まあ、メインがプログラミング面を知りたい側からすると見た目のアニメーションとかはふーんという感じなのですが(笑)、React周辺のアドオンにもいろいろあるということで。

　そしてReact開発ツールとして、Chrome拡張機能／FireFoxアドオンとしてダウンロードできる「React Developer Tools」の話が詳しく載っています。

chrome.google.com

　Chromeの場合はDeveloper Toolsを開くとタブが増えてそこで見られる形式ですが、現在のStateやPropsが動作中の状態から見られたり、インターネット上のReactを使ったサイト(Facebookなど)でも普通に動いたり、なかなか高機能のようです。
さっそく使う予定はないけどChromeに入れてみました。Reactを使ったサイトに行くとReactロゴの原子と電子(なのかな？)がアイコン一覧の中で輝いてフロントエンド最前線なキモチになれます。(ウソ)

　最後は周辺技術としてキーワードが上げられています。

  • Flux：MVCに代わりReactに適した状態管理用のアーキテクチャ。(Reduxの話は本書には出てきません)
  • React Native：Reactを使ってモバイル開発ができるフレームワーク。JSXが使え、ネイティブアプリと同様に動作。
  • Material-UI：GoogleのMaterialデザインをReactで使えるようにするUIライブラリ
  • Grommet：フラットデザイン的なUIライブラリ
  • NativeBase：React Native用のUIライブラリ

気になったところ

★タイトルには「Webデベロッパーのための」とありますが、バリバリの高スキルなフロントエンドエンジニアよりもマークアップエンジニア寄りの人(このへんの用語の範疇も曖昧ですが)やJavaScriptフレームワーク初学者をターゲットにしているのか、説明はかなり懇切丁寧、やや冗長に感じるほどです。
コードの説明も同じようなことを文章で繰り返していたり、他言語でもプログラム経験のある人なら「そんなことぐらい分かるぜよ」と感じるかもしれません。(特に前半。)　まあ入門書と割り切ればReact初心者にはこれぐらいでも丁度よいかということで。

★細かい話ですが、本文の日本語の文章中に出てくる英単語が、これはもしかして本文と同じ明朝系のフォントなのかな？ 文字同士の間隔が広くて見にくいです。技術書だとメソッド名とか変数名とか要素名とかライブラリ名とかキーワードとかアルファベットは多く出てくるので、これはちょっとマイナスですね。

まとめ：Reactの基礎が学べる本

　出版タイミングが悪かったのかv15対応で若干古くなっているのが難点ですが、説明も丁寧ですしコード例も多く、まったく初めてから入るReact入門書としては良いのではないでしょうか。JavaScriptや他の言語がある程度分かる人ならすんなり読めると思います。僕も計3日の3−4時間ぐらいでした。
　230ページのボリュームの割には基礎部分に留まっているので、仕事などでがっつり使うにはもう1冊本格的な本へ進んだ方が良さそうです。