React Hot Loaderで開発をさらに加速する
...こんにちは！ Webエンジニアの吉田です。
先月16日にReact.js meetup × React Native meetupという180人ものエンジニアが集まる大規模なReact関連のイベントにてLT枠トップバッターで発表を行いました。
その時行った発表の「React Hot Loaderの導入」についてこれから詳しく説明します。
React Hot Loaderとは
従来のフロントエンド開発においてはBrowsersyncが一般的に用いられてきました。 Browsersyncはファイルの変更を監視して、自動でブラウザリロードを行い変更を反映させることができます。
しかしReact Hot Loaderはその利便性をさらに一歩前に進めます。
React Hot Loaderはファイル変更を監視して、stateを保持したままReactコンポーネントの変更をブラウザリロード無しで即座に反映する強力なロードモジュールです。
stateを保持したままReactコンポーネントの変更を反映をするということがピンと来ないかもしれませんので、まずは以下のデモ動画をご覧ください。
テキストボックスに入力した文字をstateに設定し、その下に表示するだけのシンプルなReactアプリケーションです。
左側のブラウザでテキストボックスに文字を入力した後、右側のエディターでcomponentを修正して保存します。
するとブラウザリロードが発生せずに即座に変更が反映されていることが分かります。 かつテキストボックス下の文字列は残ったままなので、stateの情報は保持されています。
もう一つデモをご覧ください。今度は親コンポーネントが二つの子コンポーネントを持った状態で、色々とコンポーネントを変更してみます。
stateが保持されているので、子コンポーネントを一旦削除した後復元してもテキストボックスに入力した内容が表示されています。
このようにReact Hot Loaderはstateに依った処理を修正する際に非常に便利です。
なぜならブラウザをリロードすれば当然stateの内容は消えてしまうので、修正した箇所をテストする為にまずstateに設定するための手順を踏まなければいけません。
複数のパターンで修正をして確認したい時は余計に時間が掛かります。
React Hot Loaderを使用すればその手順は不要になるので、よりスピーディーに開発することが出来ます。
React Hot Loaderを導入してみよう
では実際に導入してみましょう。
前述したようにReact Hot Loaderはあくまでロードモジュールです。 従ってWebpackなどのビルドツールでロードして使用することが前提となります。
今回紹介するのはgulp+Webpack+Browsersyncを組み合わせて実現する一例です。
第3回外部向け勉強会『React+Reduxで作るSPA』を開催しました
...初めまして、SMAPリーダーの吉岡真人です。
SMAPって何? ・ ・ ・ ですよね??? Sales&Marketing Projectを無理して略してSMAPですｗ
91年生まれの若手エンジニアが登壇
今回のテーマはReact+Reduxで作るSPA
ISAOへ入社して1年が経った弊社若手エンジニア@saekis が、なんと自ら手を挙げて登壇いたしました（＾＾）!
前日風邪をひいてしまい、延期した当日の事前練習はトーン低めでしたが何とかやり抜きました。
本番に強い男だな (ホッ)
当日使用した資料はこちら。
受付〜開始時間まで、自慢の社内バーカウンターで、Welcomeドリンクが出るというスタイル!
私自身、初めて体験しましたが、頭が少し柔らかくなり、なかなか良いですね。
もっともっと良くなる勉強会に、どんどんチャレンジしていきたくなりました。
ISAO Meetup名物『今月のミート』は!?
そして勉強会後の楽しみになってきました、懇親会の肉メニュー。
今回はSMAPリーダーとして負けられないチョイス。
知る人しか知らない近所のとんかつ藤芳です～
Pokemon GOのポケストップにも出ていますよ！
勉強会の予約人数通り購入したら、いっぱい余ったああああ（TT） もっともっと魅力ある勉強会とISAOになるぞおおおお
次回は8月下旬開催予定です。お楽しみに！