何の話かと言うと
上記の記事を自分用のメモ程度の気分で公開したら、思いの外に多数のブックマークやコメントが付いて驚いた上に、「この内容では結局 React やっている人にしか理解できないのでは？」という趣旨のコメントを目にして残念な気持ちになったので、あらためて、React をまったく知らない方を前提とした React の入門記事を書いてみることにしました。特別に「バックエンドエンジニアのため」という要素はないかもしれませんが、私自身がバックエンドの経験の方が長いので、そこはかとなく、バックエンドエンジニアに伝わる雰囲気が醸し出せればよいかなと・・・と思いつつ書き進めていきます。
今回は、まずは、Mac OS を前提として開発環境を用意します。（今後、バックエンドとの連携まで含めた実装をする際は、Google Cloud を使うつもりなので、別途、Cloud Shell 上の開発環境も用意するかもしれません。）
開発環境の準備
Mac OS に git, node.js, yarn をインストールします。
ここでは、Homebrew を用いずにインストーラーからインストールする手順を示しておきます。（Homebrew が使える方は、そちらでも構いません。）
git のインストール
ターミナルで git を実行すると、「"git" コマンドを実行するには、コマンドライン・デバロッパ・ツールが必要です。ツールを今すぐインストールしますか？」というポップアップが表示されるので、「インストール」をクリックしてインストール処理を進めます。
yarn のインストール
下記の yarn 公式ページにいくつかのインストール方法が記載されています。
ここでは、Alternatives -> Installation Script に記載されている、下記のコマンドでインストールします。
curl -o- -L https://yarnpkg.com/install.sh | bash
この記事の執筆時点では、それぞれ、下記のバージョンがインストールされました。
% git --version git version 2.37.1 (Apple Git-137.1) % node -v v18.15.0 % yarn -v 1.22.19
動作確認
ツールが正しくインストールされた事を確認するために、サンプルアプリケーションを作成して動作確認します。まずは、作業用のディレクトリーを作成して移動します。（ここでは、~/Documents/work を作業用ディレクトリーとしていますが、任意のディレクトリーで構いません。）
% mkdir ~/Documents/work % cd ~/Documents/work
次のコマンドを実行します。
% npx create-react-app example
ディレクトリー「example」以下にサンプルアプリケーションが用意されているので、次のコマンドで、ローカルの開発用サーバーで実行します。
% cd example % yarn start ---- Output ---- Compiled successfully! You can now view example in the browser. Local: http://localhost:3000 On Your Network: http://192.168.1.56:3000 Note that the development build is not optimized. To create a production build, use npm run build. webpack compiled successfully
ブラウザの新しいタブが開いて、下記の画面が表示されれば成功です。（自動で開かない場合は、URL 「localhost:3000」を開いてみてください。）
これで動作確認は完了です。ターミナルで起動中の開発用サーバーは Ctrl + C で停止しておきます。
