Rのつく財団入り口スマートフォン用の表示で見るRのつく財団入り口ITエンジニア界隈で本やイベント、技術系の話などを書いています。フロントエンドWebデベロッパーのためのReact開発入門ちょいとJavaScriptフレームワーク関連の情報収集が急遽必要になって、勝手にフロントエンド強化月間ということで読み漁ったReact本のひとつ。230ページクラスのちょい厚い入門書で2016年11月刊行。本書で使っているReactのバージョンは15.3.0となっています。名乗るReactの特徴、動作環境から始まり、動かし方へ。reactjs.orgこうしたJavaScript周りの本ではNode.jsやnpmから始まって環境構築が結構長かったりしますが、本書ではブラウザ上でHTML/CSS/JavaScriptを書いてオンライン上で実際に動作を確かめられるWebサービス、jsFiddleを一貫して使っています。jsfiddle.netブラウザはChromeにし、とにかくブラウザのみで完結してReactを動かして入門しよう...という初学者に優しいアプローチですね。このjsFiddleジツは知らなかったのですがけっこう便利ですね。XMLの略であるJSXがReactのコンポーネントを書く際に使う独自の言語というか記法、仮想DOMの技術が内部で使われていて高速に動く...という話から2章へ続きます。Reactのコンポーネント僕も最初誤解していたのですが、JSXを使った書き方はReact必須かというと、実際の開発では事実上必須だけどReact自体はJSXなしでも書けるんですね。id="content"></div>とHelloWorldコンポーネントを作るところからです。{..と書く方式を推奨してるのでそこは注意です。(この本は2016年11月刊行ですが、もう古いあたりフロントエンドの変化の速さを感じますね。)そこからテキストボックスでの入力を受け付けて内部のpropsに格納して計算して表示したりと応用、ライフサイクルメソッドの説明など。JSXの基本この章から事実上必須のJSXを使った書き方になります。jsFiddleはBabelに対応しているのでそのままオンラインで試せます。document.getElementById('content'));から始まり、カスタムコンポーネントとした作り方、内部での演算など。しないといけない、などはあまり解説されないことが多いので有用でした。ようにしてブラウザ用のBabelを読み込ませ、ブラウザでの表示時に自動的に変換させる方式を採っています。Reactを記述したjsファイルが外部にある場合は、Chromeだけはセキュリティ設定の変更が必要です。いうやり方もあるんだなあとこれは新しい発見でした。Reactを使いこなすここからは応用編。Toolsのキャプチャの例を豊富に出しながら解説されています。Mixin機能は知らなかったのでこういうのもあるのかーとなりました。ところで読みがなは「ミクシン」とありましたが「ミックスイン」とどちらなのでしょうね。やってることはRubyのmixinやPHPのtraitと同じなのですが。本体自体がガッチリ機能豊富で大きいAngularに比べるとReactは本体は小さく、アドオンやサードパーティのライブラリで機能を広げているというのは特徴として聞いていましたがそのアドオンの話。「アドオン」といった場合はReact公式、Facebookが用意したものを指すことが多いそうです。.../xx.x.x/react-with-addons.jsをHTMLにインクルードするだけでも使えます。Toolsのコンソールに評価結果を表示した例。ReactCSSTransitionGroupを取り入れてアニメーション効果を出す例はかなり詳しく載っています。メインがプログラミング面を知りたい側からすると見た目のアニメーションとかはふーんという感じなのですが(笑)、React周辺のアドオンにもいろいろあるということで。Tools」の話が詳しく載っています。Toolsを開くとタブが増えてそこで見られる形式ですが、現在のStateやPropsが動作中の状態から見られたり、インターネット上のReactを使ったサイト(Facebookなど)でも普通に動いたり、なかなか高機能のようです。使う予定はないけどChromeに入れてみました。Reactを使ったサイトに行くとReactロゴの原子と電子(なのかな?)がアイコン一覧の中で輝いてフロントエンド最前線なキモチになれます。(ウソ)最後は周辺技術としてキーワードが上げられています。Flux:MVCに代わりReactに適した状態管理用のアーキテクチャ。Native:Reactを使ってモバイル開発ができるフレームワーク。JSXが使え、ネイティブアプリと同様に動作。Native用のUIライブラリ気になったところ★タイトルには「Webデベロッパーのための」とありますが、バリバリの高スキルなフロントエンドエンジニアよりもマークアップエンジニア寄りの人(このへんの用語の範疇も曖昧ですが)やJavaScriptフレームワーク初学者をターゲットにしているのか、説明はかなり懇切丁寧、やや冗長に感じるほどです。コードの説明も同じようなことを文章で繰り返していたり、他言語でもプログラム経験のある人なら「そんなことぐらい分かるぜよ」と感じるかもしれません。入門書と割り切ればReact初心者にはこれぐらいでも丁度よいかということで。文字同士の間隔が広くて見にくいです。技術書だとメソッド名とか変数名とか要素名とかライブラリ名とかキーワードとかアルファベットは多く出てくるので、これはちょっとマイナスですね。出版タイミングが悪かったのかv15対応で若干古くなっているのが難点ですが、説明も丁寧ですしコード例も多く、まったく初めてから入るReact入門書としては良いのではないでしょうか。JavaScriptや他の言語がある程度分かる人ならすんなり読めると思います。僕も計3日の3−4時間ぐらいでした。230ページのボリュームの割には基礎部分に留まっているので、仕事などでがっつり使うにはもう1冊本格的な本へ進んだ方が良さそうです。最近話題になることも多いJSフレームワーク群。»プロフィールなのだid:iwasiman引退した元TRPGゲーマー。COBOLですらなくPL/Iの金融系レガシー紙駆動開発から脱出→国産メーカー系SIerな企業のITエンジニア&アーキテクト。SEだけど仕事はほぼソフトウェアエンジニアとして、Web開発でコードを書いたり技術を追ったり時々イベントに行ったり、楽しいエンジニアリングを目指しています。.NETPythonpixivJavaThink<書くことは考えること>TRPGRubyHTMLリンクはてなブログブログをはじめる週刊はてなブログはてなブログProはてなブログをはじめよう!iwasimanさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。