Reactの基本的な仕組みを理解しよう (1/4)
作成:2017-04-01 09:10
更新:2017-04-01 09:10
更新:2017-04-01 09:10
■Reactを構成する3つのファイル
Reactのアプリケーションには、デフォルトでいくつかのファイルが作成されています。その中で、アプリケーション本体を構成するファイルは3つあります。それらの役割をざっと頭に入れておきましょう。
・index.js
「src」フォルダに用意されています。メインプログラムとなるものです。ここで、HTMLのテンプレートとJavaScriptのコンポーネントを組み合わせてレンダリングし、実際の表示を作成しています。
・App.js
「src」フォルダにあります。これは、コンポーネントを定義したプログラムです。実際に画面に表示される内容などは、ここで定義されます。
・index.html
「public」フォルダにあります。メインプログラムであるindex.jsと対になるもので、HTMLのテンプレートファイルです。このファイルが直接表示されるわけではなく、index.jsによって読み込まれ、レンダリングされた結果が表示されます。
●ビルドすると構成が変わる!
注意したいのは、これらは「Node.jsのアプリケーションとして動く場合の構成」である、という点です。サーバーにNode.jsがあって、そのまま起動するのであれば、このままです。が、普通のWebサーバーにアップして使う場合、「アクセスするとindex.jsが読み込まれレンダリングされる」という方法はちょっと無理ですよね?
このような場合は、前回説明したように「npm run build」でアプリケーションをビルドします。こうするとフォルダの構成が変わります。フォルダのルートにindex.htmlが新たに生成され、その中からindex.jsに相当するスクリプトが実行され表示を作成するようになります。
実際にやってみるとわかりますが、index.htmlはまだしも、そこから呼び出されるスクリプトはビルド時に新たに生成されており、コード自体がまるで違うものになっています。自動生成のためか改行などもされておらず、人間が読むのはかなり大変でしょう。つまり、ビルドして生成されたものは、もはや「人が編集すること」を考えてない、ということです。一般のプログラミング言語は、ソースコードをコンパイルするとバイトコードを生成しますが、それに近い感覚で考えたほうがいいでしょう。
したがって、私たちがプログラミングするのは、あくまで(ビルドする前の)index.jsやApp.jsになります。修正する場合も、これらを編集し、再ビルドして生成されたものをデプロイすることになります。今までの、「HTMLやJavaScriptは、書いたものがそのままサーバーにアップロードされ、ブラウザに読み込まれて動く」という常識は捨てて下さい。
Reactでは、「開発時に書くコード」と「実際にデプロイされるコード」はまるで違うものです。Reactは、コンパイラ言語で開発するのと同じ感覚で作る必要があるのです。
(※ただし、Node.jsそのものがサーバーにあって、Node.jsアプリケーションとして実行するのであれば、話は別です。この場合は、いわば「インタープリタがサーバーにあってコンパイルしなくても動く」ような状態と考えていいでしょう)
・index.js
「src」フォルダに用意されています。メインプログラムとなるものです。ここで、HTMLのテンプレートとJavaScriptのコンポーネントを組み合わせてレンダリングし、実際の表示を作成しています。
・App.js
「src」フォルダにあります。これは、コンポーネントを定義したプログラムです。実際に画面に表示される内容などは、ここで定義されます。
・index.html
「public」フォルダにあります。メインプログラムであるindex.jsと対になるもので、HTMLのテンプレートファイルです。このファイルが直接表示されるわけではなく、index.jsによって読み込まれ、レンダリングされた結果が表示されます。
●ビルドすると構成が変わる!
注意したいのは、これらは「Node.jsのアプリケーションとして動く場合の構成」である、という点です。サーバーにNode.jsがあって、そのまま起動するのであれば、このままです。が、普通のWebサーバーにアップして使う場合、「アクセスするとindex.jsが読み込まれレンダリングされる」という方法はちょっと無理ですよね?
このような場合は、前回説明したように「npm run build」でアプリケーションをビルドします。こうするとフォルダの構成が変わります。フォルダのルートにindex.htmlが新たに生成され、その中からindex.jsに相当するスクリプトが実行され表示を作成するようになります。
実際にやってみるとわかりますが、index.htmlはまだしも、そこから呼び出されるスクリプトはビルド時に新たに生成されており、コード自体がまるで違うものになっています。自動生成のためか改行などもされておらず、人間が読むのはかなり大変でしょう。つまり、ビルドして生成されたものは、もはや「人が編集すること」を考えてない、ということです。一般のプログラミング言語は、ソースコードをコンパイルするとバイトコードを生成しますが、それに近い感覚で考えたほうがいいでしょう。
したがって、私たちがプログラミングするのは、あくまで(ビルドする前の)index.jsやApp.jsになります。修正する場合も、これらを編集し、再ビルドして生成されたものをデプロイすることになります。今までの、「HTMLやJavaScriptは、書いたものがそのままサーバーにアップロードされ、ブラウザに読み込まれて動く」という常識は捨てて下さい。
Reactでは、「開発時に書くコード」と「実際にデプロイされるコード」はまるで違うものです。Reactは、コンパイラ言語で開発するのと同じ感覚で作る必要があるのです。
(※ただし、Node.jsそのものがサーバーにあって、Node.jsアプリケーションとして実行するのであれば、話は別です。この場合は、いわば「インタープリタがサーバーにあってコンパイルしなくても動く」ような状態と考えていいでしょう)
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
※関連コンテンツ