Node.js
JavaScriptの実行環境を提供するソフトウェアのこと。
元々Webブラウザ上で動作していたところを、広い範囲で実行できるようにするもの。
以下のような機能を持つ。
-
Webブラウザの中だけでなく、単独での実行を可能にする。サーバー側もJavaScriptでの開発を可能にする。
-
Webサーバープログラムまでつくる。多言語の多くの場合、サーバー上で実行できるようにプラグイン等を追加し、サーバーにアップロードして動かすことが前提。
-
Node.js上で動作するフレームワークのインストール等、フレームワークの管理が簡単にできる機能がそろっている。
使用できるようにするには、Node.jsのページでインストーラーをダウンロード
※偶数verがLTS（Long Term Support）のため偶数を選ぶ
実行はコマンドプロンプトから
node
または
node 実行ファイル名(.js)
実行後、JavaScriptを記述しEnter/Returnを押下すると実行される。
Node.jsのポート番号はデフォルトで3000番が使用される。
npmパッケージマネージャー
コマンドから必要なプログラムパッケージをインストールできる仕組み。
npm install パッケージ名
でインストールできる。
node-modulesフォルダにインストールしたパッケージが保管される。
React
Facebookにより開発されたオープンソースのフロントエンドフレームワーク。
以下のような機能を持つ。
-
リアクティブ・プログラミング
値が変化するとすぐに反映される仕組みのこと。
Reactは値がどのように伝わっていくかが重要視され、元の値が更新されると利用部分がすべて更新されていく。 -
仮想DOM
JavaScriptでHTMLの表示内容など要素の操作をする際はDOMを使用するが、遅く表示に負荷が掛かる場合も…。(DOM…Document Object Model)
Reactでは、仮想DOMの仕組みを用意し、プログラム上で仮想のDOMを用意し、仮想DOMを用意した後に本来のDOMに反映されることで高速になっている。
従来
JavaScript → DOM → HTML
React
JavaScript(FW) → 仮想DOM → DOM → HTML -
拡張機能の豊富さ
Reactではコンポーネントという形でプログラムを作成していく。
（UI関係は特に）多数の既成コンポーネントが流通しており、それらを組み込んで利用することができる。先達に感謝。
Node.jsでプロジェクト開発
ここで出てくるのがNode.js。
Reactの開発を行うためのソフトウェアもNode.jsを利用して用意するようになる。
Reactのアプリケーション作成
Node.jsに組み込まれたCreate React Appというプログラムを使用する。
コマンドプロンプトから以下を実行する。
npx create-react-app プロジェクト名
もしくは
npm init react-app プロジェクト名
実行するとカレントディレクトリにプロジェクト名のフォルダを作成し、その中にファイルやフォルダを作成していく。
このプロジェクト名のフォルダがReactアプリケーションのプロジェクトになる。
React Developer Tools
Reactでは、表示時点でHTMLは書き換えられた後のものになり、開発者ツール等を使用しても確認ができない場合がある。
ChromeやFirefoxではデバッグ用のツールが用意されている。
インストールすると、開発者ツールの上部メニューからComponentといった、Reactによって生成された表示の内容を確認できるようになる。
※画像はChrome上での表示
Reactのレンダリング
Reactで値の更新をする基本としては、
-
レンダリング元要素取得
let dom = document.querySelector('#root');※標準的なDOM取得 -
仮想Element作成
let rendElement = React.createElement(タグ名, 属性, 要素の中身); -
レンダリング実行
ReactDOM.render(仮想Element, DOM);
上で例として作成した変数を使用すると
ReactDOM.render(rendElement, dom);
となる。
ただこれだと、置き換えたい要素が複雑な階層構造を有した要素の場合など、記述が大変になる。
そこでもっと簡単に記述できる仕組みがJSX。
JSXとは
JSXとは、HTMLのタグを直接Javascriptに記述できる仕組みのこと。
これを利用することで、複雑なタグ構造などをシンプルに記述することが可能になる。
スクリプト内に記述されたHTMLの値を更新したい箇所に{変数}として埋めこみ、レンダリングを実行することで、レンダリング時点での最終的な値がHTMLに埋め込まれ生成される。