Reactではじめるフロントエンド開発入門
変化が激しすぎて追いつけないなどとも言われる2010年代のWebフロントエンドのJavaScriptフレームワーク・ライブラリ群。2018年現在の不動の3強はGoogle発の本格派Angular、Facebook謹製のReact、そして元GoogleのAngularJS開発チームにいた中国人エンジニアが生み出したVue.jsでしょうか。
僕も若干敬遠していたところがあったのですが、ちょいと仕事で出てきそうになって急ぎ調べることにして電子書籍の軽い本も読んでみました。
作者の方は個人出版ベースなのでしょうか、他にも何冊かフロントエンド系の本を出されています。空いた時間に新しい技術をさっくり学ぶ、がコンセプトの155ページの軽い本。
2017年11月刊行でかなり新しめ、情報の新しさは安心です。React本体もv16で最新。コマンドでの実行例は豊富に載っており動作確認はMac上。操作しているところのキャプチャ画面などは出てきませんが、エディタはatomを推奨しています。サンプルコード一式もGitHubに載っています。
1. Reactについての基礎知識
このへんはWebの情報でもよく聞くところです。SPA向けである、状態を一箇所で管理でできる、宣言的である、他のフレームワークと同様コンポーネントベースである、昔のJavaの謳い文句のパロディでもある「Learn Once, Write Anywhere」キーワード、仮想DOMの話など。
2. ES6とJSXの復習
ECMA2015仕様のJavaScriptの主な変更点。スコープ、変数宣言にletとconstが加わった話、クラスの導入やテンプレート文字列、アロー関数、そしてReact独自の記法であるJSXの例など。
3. 環境構築
MacではHomebrewを使ったNode.js、npmのインストール方法。コマンドを打つだけで簡単です。WindowsではUbuntuを入れた場合でやっています。
そしてトランスコンパイラBabelでES5のJSに戻したり、複数のJSファイルをひとつにまとめたりを一度にやれるパッケージングツール(正確にはモジュールバンドラーツールと呼ぶのかな)としては、従来のGrunt、gulpに代わり既に広まっているWebpackについて軽く触れています。このへん古い本だと違ったりするのでありがたいですね。
Reactプロジェクトの作成としては
- JavaScriptの代表的なパッケージ管理ツール npm を使う方法
- Facebookのエンジニアがnpmが遅いので作ったという、より高速な yarn を使う方法
- コマンド
create-react-appを使う方法
の3種類を紹介しています。それぞれコマンド多数をいろいろ叩いたりして、最終的に画面に約束の Hello, Worldを出すサンプルです。
4. Reactの構造と仕組みを理解する
目次だと「4. Reactの基本設計」となっていてちょっと違っています。
3強フレームワーク(Reactは正確にはライブラリですが)どれもそうですが、最小単位が「コンポーネント」という話。ドメイン駆動設計とも相性がよいそうです。
ReactではES6記法のクラス定義でコンポーネントを定義し、render()関数に戻り値でJSX記法でタグ的にどう出力するのかを書くのが普通です。
class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }
でも実はJSXを返すJavaScript関数があればそれだけでコンポーネントと認識する、というのはへぇーと思いました。
そしてコンポーネント外で描画を記述する際の <App name={"bob"} />,のように属性名＝{値}で渡すと外部からコンポーネントに値を渡すことができ、コンポーネント内では this.props.name のようにして取り出せるというpropsの話。
そしてメソッドも、オブジェクト指向のクラスのメソッドのようにコンポーネント内に定義できます。
class App extends React.Component { onClickButton() { alert("押した！"); } render() { return <button onClick={this.onClickButton}>押すよ</button>; } }
そしてReactの特徴でもあるstate。コンストラクタ内にプライベートなメンバ変数的にstateという大きな変数があり、中に連想配列でなんでも持てます。取得する時は this.state 、値を入れる時は this.setState({count: 1}) のようにします。
イベント管理の例としては、簡単なToDo管理システムのサンプルコードを。以下のように内部データは state 内にテキストボックスの入力値、todosの配列で保持する方式です。
this.state = { input: "", todos:[] }
そしてコンポーネントのライフサイクルに関するメソッド一覧などなどでは、画面に時刻を表示するコードをサンプルに取り上げています。
そしてコンポーネントには親子関係があり、親のstateは子コンポーネントのpropsとして受け渡される、また子コンポーネントはpropsの中から親コンポーネントの関数も呼べるという特徴があります。
本格的なSPAで1画面にコンポーネントがたくさん詰め込まれたような複雑なアプリケーションで状態やデータの流れを管理する、フロントエンドでよく話題に上がるFlux/Redux関連の話は難しいからか(僕もまだよく理解できていません...)、本書には出てきません。
5. Reactとテスト駆動開発
- Jest: ReactでTDDするためにFacebookが開発したライブラリ。
- Enzyme: Airbnb製の、React仮想レンダラー。Jest単体ではテスト実行に不十分なので、2つを組合わせて使う。
という触りについて。このJest+EnzymeのセットがReactのデファクトのようです。Angularも確かテスティングフレームワークJasmine＋テスト実行ツールKarmaのセットでTDDに対応していますが、この辺JS系はどのフレームワークも最初からかなり備えていますね。
6. Reactと非同期HTTPリクエスト
従来のAjaxに代わる非同期HTTPリクエストを扱うJavaScriptのAPIが「fetch API」で、現状Chrome/Firefox/Operaのみ。しかしポリフィルを使うとどのブラウザでも使えるようになる。
というわけでReactアプリからこのfetch APIを使い、アメリカの掲示板サイトRedditからトップページの情報をJSON形式で取得、「Reddit ニュー速R」React版を作るサンプルコード。
という流れで、若干唐突気味に本は終わります。
感想
- サンプルコードがちょっと崩れてるところがありました。またコードが全部行頭〜最終文字まで同じ色の背景色が何故か付いていて、ちょっと見づらい感じがします。
- 短い本なのでキーワードの説明はさらっと、ときどき用語が前触れなく出てきたりします。突然出てきた「Airbnb」ってなんだ？と思ったらアメリカの宿泊施設貸し出しWebサービスで、開発にもReactを利用していてGitHubでもReact用のコンポーネントを公開していて、有名なのがreact-dateだよという話なんですね。
- 本格的に学ぶなら他の本をというところですが、最新状況に適合してるし500円ちょっとで安いし、短い時間でざっとReactの概要を掴むならここからというところでしょうか。僕も電車の中で35分ぐらいで読み終わってしまいました。
- Reactの解説書やネットの情報だと、中にデータを持って更新で画面が変化するコンポーネント例としてダントツでToDo管理システムがよく題材に使われています。
本書もそうなのですが、最後の最後でサンプルにニュー速Rが出てきて笑ってしまいました。ニュー速RR的なカンジでしょうか。これは不意打ちや……w
