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を組み合わせて実現する一例です。