Reactの入門書を書きました「作りながら学ぶ React入門」、買って下さいね!

「作りながら学ぶ React入門」というReactの入門書を書きました。

Reactの情報は ReactのホームページDocs や中級者向けの入門 Tutorial にまとまっていますが、初心者には敷居が高いかもしれません。
私自身も Reactの教育を行うのに良い日本語書籍はないかなぁ? と探していたのですが見つからないので、自分で書くことにしました。

f:id:yuum3:20170904123837j:plain

「作りながら学ぶ React入門」の紹介

各章毎に作者の思いを込めつつ紹介記事を書きます

0. まえがき

原稿校正の最終段階で「まえがき」お願いいたします〜 と言われ、一般的な事を書いてもなぁ・・・と、とても悩みました。そこで素直に私とReactの関わりを書きました。
私自身が2万行のjQueryベースの ■■なSPAコードをReactに置き換えた経験が、この本には込められています。

1. はじめに

「前提知識」に書いているように本書は入門書ですが、「JavaScriptプログラミング入門」に付いては書かれていません。 既にJavaScript, jQuery等を使った事のある人を対象にしていますので注意して下さい。
ただし、今までの新人教育等の経験から判りやすさを心がけています。

既にReactを使いこなしてる方には、あまり役立つ情報は少ないかと思いますが、Reactに詳しくない同僚等に教えるのには役に立つと思います。

「Reactとは」は一般的な事を手短にまとめました。

重要な情報: サポートページ https://github.com/yuumi3/react_book

2. モダンJS開発環境の構築

本書ではMacまたはWindowsのターミナル(コマンドプロンプト)とエディターを使って開発するという(Web系)プログラマーとしては一般的なスタイルで進めています。そこでは避けて通れない開発環境の構築には力を入れてあります。

JavaScript関係の技術。開発ツールはとても進歩が早いですが、開発環境としてはここ数年で Webpack, Bable, ESLint などの開発ツールが主流になったのでこれらを使っています。

ただし、最初は開発の停滞していたnpmではなく yarn を使って書いていたのですがバタバタがあったり、突如 npm が進化したので npm に戻したりと振り回されました ^^);

今後の開発環境の進化は油断は出来ないので、後はサポートページで頑張ります

3. モダンJS開発環境の解説

本にも書きましたが、面倒な説明はいいから React を使いたい! という人は飛ばしても良いように、開発ツールの解説は別章にしました。

現在よく判らず開発ツールを使っている人にも、この章は役に立つかもしれませんね。

4. ES6

本書ではJavaScriptはES6(正確にはES2015)で書いています。この章ではある程度JavaScriptを知っている人に最低限必要なES6の説明をしています。

後半の「いろいろな補足」ではJavaScriptというかプログラミング言語の理解が深く無い人のために、オブジェクト指向、無名関数、イテレーターなのどの解説を書きました。Reactのプログラムではこれらが頻繁に使われるので、これらの判りにくい部分の理解に少しでも役に立つと良いなと思っています。

5. JSX

いよいよReactの解説です。JSXはReactの基本の基本ですJSXが書けないとReactは使えません。しかもJSXは従来のテンプレートエンジンとはいろいろと違います。
ということで、この章は力を入れて書いています。 例題(サンプルコード)は、ほぼHTML → 値を埋め込む → コンポーネント分割 → 条件・繰り返し と徐々に進化するように書いています。

デザイナーの方などはJSXを完璧に書けるようになれば、かなり仕事がはかどるのではないでしょうか?

6. コンポーネント

Reactの説明ですね、ライフサイクル・メソッドの図は頑張って書きました。

7. コンポーネントの応用

ここではMaterial-UIを使って美しい画面を作ったり、ルーティングを学んだり。 サーバーとの通信を学んだりします。ここは作って、動いたら楽しいような例題を取り上げたつもりです。

また、通信の部分では 非同期処理、Promise の解説などを行っています。

8. テスティング

テスティングに付いて書くかは迷ったのですが、昔からお世話になっている t-wada さんの顔が浮かんだので書きました。

E2Eテストに付いては ブラウザテストツール総まとめ・2016年夏版 記事に助けられました。テストツール(テストライブラリー)は多数ありますが、これだというものが無く、消去法的に Nightmare になりました。
これからは Headless Chrome を使ったツールか主流になるのかな・・・・

ちななみに、jQuery → React 置き換えの仕事では E2Eテストは Phantom.js + Turnip というRubyのツールを使いました

9. さらに学ぶなら

この本では取り上げなかった Redux, Flowtype, React Native, Electronに付いての簡単な説明を書きました。

そして、 Reactの情報源では英語の情報にアクセスしよう! ということを書きました。

作りながら学ぶ React入門

作りながら学ぶ React入門