私はこれまでjQueryを使用してきましたが、ここ近年「React」がjQueryにとって代わろうとしています。
Reactとはjavascriptの派生言語であり、javascriptと比較して格段にコーディングやデバッグがしやすくなっています。但し、Reactと言ってもブラウザ上で直接稼働する言語ではなく、コンパイラを経て最終的にはjavascriptに変換され、ブラウザはあくまでコンパイルされたjavascriptを読み込み、それを実行します。
ここではまず React の開発環境のセッティングを行い、ローカル環境でReactの簡単なプログラム(c言語で言う printf("Hello World!!"); みたいなもの)を起動させてみましょう。
開発環境設定というもの一度行ってしまえばそうそう再度行うことではありませんが、ここでは自分自身の覚書という意味合いでなるべく簡素に記載していきます。また開発環境というものは様々な手法があり、ここではあくまで私が行った手法を紹介しています。
それでは、Get Started!! (なお、私の開発環境はWindowsです、MacOSやLinuxでは異なりますことを御承知下さい。そちらの開発環境の設定には良い動画が公開されていますので、後ほどご紹介させていただきます。)
Reactのインストール
まず、React 本体のインストールを行います
こちらから「Node.js」というソフトウェアをダウンロードしてください。
このとき必ず「推奨版」を選択してください。「最新版」はどんなバグがあるか分かりませんからね。
node-v16.16.0-x64.msi をダウンロードしました(2022/07/07現在)。
自分は React をやりたいんであって、Node.js などというわけわからんものを入れこまなにゃならんのだ？ という方。ごもっとも。Node.js については追々説明する予定ですので、とにかく騙されたと思ってインストールして下さい。
インストールします。node-v16.16.0-x64.msi を叩きます。
上記の画面が表示されます。「Next」をクリック
ライセンス条項です。英語の読める方はよく読んでおいて下さい。「Next」ボタンがデフォルトでは活性化されていませんが、左下のライセンス条項にチェックを入れれば活性化します
「Next」ボタンが活性化されました。ここでまた「Next」をクリック
インストールフォルダを選択します。Program FIles フォルダを汚したくない方は適当なフォルダを作成、入力して下さい。ここでまた「Next」をクリック
ここはデフォルトでいいでしょう。「Next」をクリック
npm(後ほど説明します)モジュールの一部は、c言語などでコンパイルする必要があります。それを行うかのチェックですね。空でも問題ありませんが、今後 React でがんがんソフトウェアを開発するぜ！という方はチェックボタンを選択してください。ここでは空のままでインストールします。「Next」をクリック。
さてようやくインストール画面です。ここではWindowsの管理者権限が必要となります。「Install」をクリック
この画面からしばらく画面がスタックしたかなと思った瞬間！
画面がスパッと切り替わって、「このアプリがデバイスに変更を加えることを許可しますか」という画面が表示されるので、「はい」をクリック
ようやくインストールが完了画面です。「Finish」をクリックすればNode.jsのインストール完了です。お疲れ様でした。
と、その前に。Node.jsが正確にインストールされたのか確認しましょう。
まず、Windowsのコマンドプロンプト(ターミナル)を起動してください。
node -v と入力してください。v16.16.0と表示されていれば正常にインストールされています。とりあえずお疲れ様でした。
エディタの選択
たった今ファイルの修正を行いましたが、ソフトウェアの開発にはエディタは必須です。現在有償無償様々なエディタが世に放たれていますが、私の選択は「Visual Studio Code」一択ですね。
理由：①様々な言語（当然 React も含む）のデバッガとして利用できる ②エメットが優秀 ③ターミナルをエディタ内で起動できる 等々、これほどのものが無償でいいのか！と感銘を受けたエディタです。以下、Visual Studio Code（以下 VSCode と表記） を使用する条件で記載1 していきます。
まずはVSCodeのインストールを行います
こちらからダウンロードして下さい。VSCodeUserSetup-x64-1.69.0.exeが落ちてまいりました。さっそく実行。
VSCodeはマウスでも様々な機能を使用することが可能ですが、ショートカットも多々ありますので、それらを覚えていけば手をあまり移動せずに開発が可能となりますので是非覚えて下さい。
React のインストール（というか、プロジェクトの作成）
エディタで話がそれてしまいましたが、React のインストールはまだ完了していません。現在のままでは React のソフトウェアどころか、当初の目的であった（Hello World!!）すら記述することもできません。そこで、まずプロジェクト名（基本、名称はなんでもいいです）を決め、その専用フォルダを作成し、そこへ React の開発環境を生成します。
注釈： npm start というコマンドは、React プログラムをコンパイル（この場合 javascriptへ変換）し、簡易なHTTPサーバも起動します。その結果、localhost上のポート3000番にアクセスするとブラウザでそれを見ることができるわけですね。
"Hello World!!" の表記
さて、一応の React プログラムは起動したわけですが、これを早速編集してみたいと思います。まずはシンプルに先ほど生成されたプログラムの "Edit src/App.js and save to reload." の個所を "Hello World!!" に置き換えてみます。
ではVSCodeを立ち上げて、今回作成した test プロジェクトのソースを手繰ってみましょう。
React では、"src" 内のコードをコンパイルして "public" へ移動し、公開モードにしている訳です。これらは単純なフォルダ構成になっており、エクスプローラー等でも内容を確認することができます。ここで注意点は "public" はコンパイルの結果であり、編集すべきは "src" であり、"public" は編集すべきではないということです。
では、"Hello World!!" の世界へ！
極端なことを言えば、"public"フォルダ内のindex.html ファイルを修正すれば事足りてしまいます。しかし、それでは React を使った意味がありません。React はコンポーネントと呼ばれる部品（"src" 、最終的には "public" 内の各ファイル）を作成、変更することで最小限の効力で完全かつ最速であるソフトウェアを生成することを目的としています。index.html ファイルを修正することでは、それは成しえないのです。例えば、フッターを考えてみてください。（Copyright © 2022 hoge, Inc.みたいなやつですね）フッターは内容が更新され、かつ西暦など表記する際には毎年変更されるべきですが、このフッター部分を持つ HTML ファイルが100あったとしたら、100回フッター部分を書き換える必要があるわけです。そんな無駄な努力はせずに、仮に Footer.js を作成し、そこへコピーライト等を表記する React を記載しておき、100個の HTML ファイルからコンポーネントを呼び出した方が圧倒的に効率が良いですよね。
そこで、まず各コンポーネント（しつこいようですが、"src" 、最終的には "public" 内の各ファイル）がどのように記載されているかを探索し、"Hello World!!" の世界へ進みましょう。
- ァイル群の探索
・index.html 内容は下図の様になっています。index.html はデフォルトでは、HTTPサーバが最初に読み込むファイルです。最も重要なファイルと言って良いでしょう。
このファイルを見てまず気になるのは、
%PUBLIC_URL%の部分ですか。ただこれは、
Notice the use of %PUBLIC_URL% in the tags above.It will be replaced with the URL of the `public` folder during the build.Only files inside the `public` folder can be referenced from the HTML.とあるように、"%PUBLIC_URL%" は、（プロジェクトフォルダ配下の）"public" フォルダに置き換えられます。
次に、気になるのはですが、こちらは
<!--manifest.json provides metadata used when your web app is installed on auser's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/-->とある様に、ユーザ側のモバイル端末やデスクトップにインストールされた場合に提供されるメタデータですね。
<body><div id="root"></div></body>
index.htmlファイルで一番重要な個所は、ここですね。今、あなたのブラウザでは
この画面になっているはずです。それでは、index.htmlファイルから、<div id="root"></div>
を削ってみてください。（VSCode では、当該行に移動して、ctrl + x）
結果、画面が真っ白になり何も表記されなくなります。
では、戻してみましょう。（VSCode で、ctrl + z）
元の画面に戻りました。
要するに HTML 上の id="root" が何らかの処理を行っている訳です（div タグはHTML上では何の意味を為さないので）。さて、では id の "root" の処理は何処で行われているのでしょう。
その前に重要なことがあります。"src" フォルダと "public" フォルダの関係です。この依存関係はどのようになっているのでしょうか。論より証拠。"src" の index.js を開いてみてください。
これは javascript ではなく、JSX と言う React の表記言語です。
記述10行目に <App /> との表記がありますが、これは App.js を呼び出しています。これを削ってみてください。
先ほどと同様にブラウザの画面が真っ白になりました。つまり、"src" を変更するとリアルタイムで React のプログラムに反映されることになります。
つまり、/public/index.html => /src/index.js => /src/App.js の依存関係がリアルタイムで成り立ち、"src" のファイル群も /public/index.html へ直接影響を与えることが証明されました。
話が飛びましたが、結局 id の "root" の処理は何処で行われているのでしょう。 答えは、もう出ていますね。/src/index.js 内に以下の表記があります。
const root = ReactDOM.createRoot(document.getElementById('root'));
getElementById('root') とある様に、id（HTML内では唯一無比）が 'root' であるオブジェクトを、変数 root にDOM（HTMLのツリー構造ですね）として取得しています。この構文はやはり JSX で書かれており、ここではふんわりとイメージが掴めればOKです。
root.render(<React.StrictMode><App /></React.StrictMode>);次の行の、この部分でレンダリングの処理をおこなっています。これも JSX 構文です。内容は、Appコンポーネントを呼び出しているだけですね。それでは、App.jsの内容を見てみましょう。
10行目を見てください。そのまんま「Edit src/App.js and save to reload.」と表示をする JSX が書かれているではないですか。
この部分を "Hello World!!" に置き換えましょう。9から11行目ですね。
無事、"Hello World!!" と表示されました。変わらない場合には、リロードしてみてください。
これにて、React の環境設定から簡単なプログラムの変更までが終わりました。お疲れ様でした。
React は JSX（javascript + XML）で記載する必要がありますが、HTML、javascriptライクな表記であり、ざっと言ってしまうと javascript をよりシンプルに、簡易に書ける言語であると思っています。無論、他の言語同様難解な部分（class コンポーネント、Functionable コンポーネントとは何よ？ とか）も多々ありますが、慣れるとUIを作成するうえでこれ以上良い言語は無いと勝手に思っております。
それでは、最後に参考にさせていただいた動画等をご紹介します。
Windows上で開発を行ってみたいなという方、必見です。
MacOS Linux の方、そして Windowsの方でも（環境構築部分は残念ながら使えませんが） React の基本から簡単なプログラムの作成までを学びたい方はこちらの動画が非常に勉強になります。
こちらのサイトも非常に有益でした。Hello world!! を出力するという目的が合致したのは偶然なんですけどね（笑）
