これからプログラミングを学んでみたいという方に向けて未経験でも理解できるように、プログラミングの基礎を記事にまとめたいと思います。
まずは、プログラミングを実践するための環境が必要となりますので、今回の記事では、WindowsOSでReactの環境を構築する方法を解説します。
MacOSで環境構築を行いたい方はコチラの記事を参考にしてください。
https://build-up.tech/react-preparation-2/
Reactの環境構築に必要なもの
Node.js
本来、JavaScriptはウェブブラウザ上でしか動作しませんが、
Node.jsを使うことにより、JavaScriptをウェブブラウザ以外の場所でも動作させることができます。
Reactは、JavaScriptの開発をサポートして開発の負担を軽減してくれるフレームワークです。
Reactの根本はJavaScriptなので、Reactで開発をするにあたり、
Node.jsをインストールして、ウェブブラウザ以外でもJavaScriptが動作する環境を用意する必要があります。
下記のURLにアクセスするとNode.jsの公式サイトにジャンプします。
推奨版と書かれた方をクリックするとインストーラーをダウンロードすることができます。
ダウンロード後にインストーラーを起動させて、Node.jsをインストールします。
インストーラーを起動するとWelcome to the Node.js Setup Wizardと表示されますので、以下の手順でインストールを開始してください。
（バージョンによって多少異なる可能性があります。）
Nextをクリック
I accept the terms in the License Agreement にチェックをして Nextをクリック
インストール先を選択してNextをクリック
デフォルトのままだとCドライブのProgram Filesの中にnodejsというディレクトリが自動で作成され、そこにインストールされます。
変更不要であればそのままNextをクリックしてOKです。
カスタム設定は必要ないのでそのままNextをクリック
オプションツールをインスト―ルするか聞かれますが、不要ですのでNextをクリック
Installをクリックするとインストールが開始します。
インストールが完了したらコマンドプロンプトを立ち上げて、node -v と入力してEnterキーを押下します。
v18.13.0などのインストールしたNode.jsのバージョンが表示されます。
次にnpm -v と入力してEnterキーを押下します。
こちらも8.5.3 などのバージョンを表す数字がひょうじされればインストール完了です。
create-react-app
Node.jsのインストールが完了したら、次はReact開発のベースを作ります。
開発をTypeScriptにて行いたい方はReact開発のベースを作成する前に、コマンドプロンプトで npm i -g typescript と入力してEnterキーを押下します。
このコマンドにて、TypeScriptがインストールされます。
tsc -vと入力してTypeScriptのバージョンが表示されればインストールは完了しています。
少し難易度は上がりますが、これから学習される方にはTypeScriptにて開発することをオススメします。
次にコマンドプロンプトで npx create-react-app new_app と入力します。
new_appの部分はこれから開発するプログラムのタイトルのようなものなので自由に変更できます。
TypeScriptにて開発をされる方は、タイトルの後ろに「–template typescript」を追加して、
npx create-react-app new_app –template typescript と入力します。
下図ではCドライブ直下にてコマンドを実行しているので、Cドライブにnew_appというディレクトリが作成されて、その中にReact開発のファイルが一式作成されます。
コマンド入力後、コマンドプロンプト上にメッセージがたくさん表示されます。
最後にHappy hacking！と表示されたら開発ベースの作成完了です。
動作確認
開発のベースが無事に作成されているかを確認します。
コマンドプロンプトで先ほど作成した開発ベースのディレクトリに移動します。
先ほどの例で説明すると、コマンドプロンプトにC:￥>が表示されている状態で cd new_appと入力します。
するとディレクトリが移動して、C:￥new_app>に変わります。
ここで npm start と入力します。
started server on 0.0.0.0:3000, url: http://localhost:3000 と表示されたら、
ChromeやEdgeなどのウェブブラウザを立ち上げます。
URL入力でhttp://localhost:3000と入力してEnterキーを押下します。
Reactのロゴマークが画面上に表示されれば開発環境の構築は完了となります。
確認がかんりょうしたら、コマンドプロンプトに戻りCtrlキー＋「C」を押下します。
バッチ ジョブを終了しますか (Y/N)? と表示されるのYを押下して、サーバーを停止させます。
まとめ
- Reactの環境開発にはNode.jsのインストールが必要
- TypeScriptで開発をする場合は、別途インストールが必要
- コマンドプロンプトでcreate-react-app new_appと入力すると開発環境が作られる。
- TypeScriptで開発をする場合は –template typescript を追加する。
- 作成した環境directoryにてnpm startを入力してブラウザを開きhttp://localhost:3000にアクセスして確認する。
この記事は役に立ちましたか？
もし参考になりましたら、下記のボタンで教えてください。
コメント