前回記事の続きです！！
以下全て
たにぐちまこと様の「ともすたチャンネル」
https://www.youtube.com/watch?v=ib7VfVHEACk&t=68s
を参考にさせていただいております！
$npx create-react-app sample02
↑npm(node.jsのパッケージマネジャー)のnpxコマンドを用いてcreate-react-app(Reactのアプリケーションを作るパッケージ?)を実行
Reactアプリ開発に必要なファイルが一気に生成される。
こんな感じ。
結果
Reactの環境構築が完了。
(Happy hacking という言葉に一瞬びびった・・・笑)
$npx create-react-app sample02
で作成したReactファイルにはAjax==非同期通信(自動更新機能とか！) のための
簡易的なwebサーバーも含まれているそう。
(jQueryでの非同期通信の復習しないと💦)
そのwebサーバーを起動する。
ターミナルで 作成したReactアプリのsample02をカレントディレクトリにして
$ npm run start
コマンドの意味
・・・sample02内のpackage.jsonファイルに記述されているスクリプト
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
の内容を実行する。
$ npm run 上の４つどれか
の形で指定すれば良いのかな。
さすがに理解が曖昧すぎるのでもうちょっと深入りして調べる。
※※※※※※※
どうやらこれはNode.js(npmなのだから当然ですね笑💦)の
npm-scripts と呼ぶらしい。
“
引用
そもそもnpm-scriptsとは何か？
npm-scriptsとは、
package.jsonファイルに記述可能なシェルスクリプトのエイリアスです。エイリアスとはコマンド名を別のコマンド名に置き換えることです。
出典 : https://ics.media/entry/12226/
”
もう１つ
“
引用
npm scirptsとは
npmはpackage.json内の「scripts」というフィールドにシェルスクリプトやエイリアスコマンドを登録することができます。
出典 : https://techblog.kayac.com/2016-12-22_npm-scripts
”
つまり、ターミナルで実行できるコマンドをpackage.jsファイルにそれぞれ名前(エイリアス名)つけてまとめて書いておこうぜ！！ってことかな。
(ここはとりあえずの理解。)
sample02内のpackage.jsonファイル
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
の青部分がscript名(タスク名？) ＝ エイリアス名 、赤部分が実行するコマンドの内容
↑これは間違ってたらごめんなさい！！今の認識です。
参考URL : https://ics.media/entry/12226/
ちなみにエイリアスについて
“
引用
エイリアスとは、コマンドに別名を付けることを言います。よく使用するコマンドやオプションの指定が複雑なコマンドにエイリアスを設定すると、設定したエイリアス名でコマンドを実行できるようになります
出典 : http://www.turbolinux.com/products/server/10s/manual/command_guide/command_guide/alias.html
”
まあ、あれだ、エイリアス==実行するコマンドにつけるあだ名 みたいなものだ。
次に赤部分(実行内容)のreact-scripts startとはなんだ。
こんな記事を見つけた。
“
引用
create-react-appおよびreact-scripts
react-scriptsは create-react-app starter packの一連のスクリプトです。 create-react-appを使用すると、設定しなくてもプロジェクトを開始できます。そのため、自分でプロジェクトを設定する必要はありません。
react-scripts startは開発環境を設定し、サーバーを起動し、さらにホットモジュールをリロードします。
”
引用部分
「react-scripts startは環境開発を設定し、サーバーを起動し、」
ここまではわかる。
つまりreact-scripts startコマンドでローカルサーバを立ち上げられるってこと。
Rails での
＄rails s と同じだ。
その続き
「さらにホットモジュールをリロードします。」
ホットモジュールはわからないので調べました。笑
ホットモジュールとはホットモジュール環境==Hot Module Replacement(HMR) のことだそう。
“
引用
Hot Module Replacement (HMR)はwebpackの提供する仕組みで、画面の再描画すること無しにJSの変更をブラウザに適用してくれる開発ツールです。再描画無しにと言うのは、「F5とかリロードボタンを押さなくても自動的に再描画してくれますよ」ということではなく、文字通り変更したモジュールのみを置き換えてくれます。
出典 : https://qiita.com/haradakunihiko/items/40486ec2b6b9aea119bb
”
ふむ。
ちなみにwebpackとは複数のモジュールをサーバー側で 管理するツールのことらしい。(モジュールマネージャー？)
Rails におけるgem(パッケージ)を管理するbundler(パッケージマネージャー)や
Node.jsにおけるパッケージを管理するnpm(これもパッケージマネジャー)と立ち位置が似ているが厳密には違った役割を持っている。(ここはとりあえず深入りしない。)
“
引用
ホットモジュールの交換
ホットモジュール交換（HMR）は、アプリケーションの実行中に、完全なリロードなしでモジュールを交換、追加、または削除します。これにより、いくつかの方法で開発を大幅にスピードアップできます。
- 完全なリロード中に失われたアプリケーションの状態を保持します。
- 変更内容を更新するだけで、貴重な開発時間を節約できます。
- ソースコードでCSS / JSに変更が加えられた場合、ブラウザを即座に更新します。これは、ブラウザの開発ツールでスタイルを直接変更するのとほぼ同等です。
出典 : https://webpack.js.org/concepts/hot-module-replacement/
”
これらの引用部分から自分が注目したのは
「完全なリロードはせずにモジュールを交換することで、変更内容のみを更新。」
「CSS/JSに変更があった場合、ブラウザを即座に更新する」
です。
通常
リロードボタンを押すとリクエストが送られて
それに対するサーバーからのレスポンスを受け取り、ページを全て1から作り直していた。
(変更されていない部分も再描写していた。)
ex
→twitterのいいねボタン♡を押すと、ハート以外の変更されていない部分も全て作り直され再度表示のようなイメージ
ホットモジュール環境
ホットモジュール環境では変更された部分(モジュール)のみをサーバー(Webpack?)から取得し、書き換える。
(webpack・・・複数のモジュールをサーバー側で管理するツール＝モジュールマネージャー)
webpackが変更の必要なモジュールのみをサーバー側で書き換え、レスポンスとして返す。== ホットモジュール環境
ex
→twitterのいいねボタン♡を押すと、ハートの部分のみ作り直され表示されるイメージ
これがホットモジュール環境の今の認識。
つまり赤部分(実行内容)のreact-scripts start とは
①開発環境を用意してくれる。
②ローカルサーバを起動してくれる。
③jsやcssの記述が変更されるとその変更部分のみ自動で更新される。(他の部分はそのまま)=ホットモジュール環境
以上3つを行ってくれるコマンド
※※※※※※※
と長く寄り道してしまったので戻ります。
$ npm run start
を実行。
するとターミナルは
localhost:3000のURLで
sample02のファイルをブラウザ上で見れると書いてある。
つまり
Railsにおける
$rails s
と同じことができた！！(ローカルサーバの立ち上げ)
試しにそのURLにアクセスすると
ちゃんとローカルサーバーが立ち上がっている。
ここで↑に書いてある
Edit src/App.js and save to reload.
に注目。
Reactアプリファイルsample02 > src > App.jsファイル内を見ると
10~12行目の記述がブラウザ上に表示されている。
ここを編集してみると
と表示が自動で変わる。
ページ更新ボタン押してないのに自動で変更された。
ここで注目したいのは
ページ全体が再描写されたのではなく、p要素の中身
Edit src/App.js and save to reload. →ごえもん
だけが書き換えられた。
↑ホットモジュール環境
以上、npm-scriptsを用いてreact-scripts start コマンドを実行しホットモジュール環境を構築しました！！