今回の記事はWindows環境にtypescriptベースのReact開発環境を構築する手順に関してご紹介します。最近の流行りである、Reactを用いて開発を行おうと考えている方は是非参考に、開発環境を構築してみてください。
WindowsでtypescriptベースのReact開発環境構築流れ
今回のメインテーマとなるReact環境構築ですが、下記手順で環境構築を行います。
- node.jsのインストール
- 開発環境（VSCode）インストール
- 開発環境（VSCode）に拡張機能追加
- Reactプロジェクト環境構築
順番にご紹介していきます。
node.jsのインストール
まずは下記URLより「node.js」をインストールします。こちらはReactを動かすうえで必要です。
推奨版（今回は16.15.0）をダウンロードします。ここは皆さんが環境構築する段階での推奨版で問題ないです。
インストーラーがダウンロードされるので、そちらをクリックし、メッセージ通りに何も変更せずにインストールしましょう。
Finishの表示が出るまで進めばインストール完了です。
コマンドラインなどで下記コマンドを押下し、バージョンが表示されればOKです。
node --version
v16.15.0次はVSCodeのインストールに進みます。
開発環境（VSCode）インストール
VSCodeのインストールも簡単です。下記URLより最新版をインストールしましょう。
「https://azure.microsoft.com/ja-jp/products/visual-studio-code/」
こちらもnodeと同様メッセージボックスが表示されるのですべて何も変更せずに進んでください。
インストール完了後VSCodeが無事開けます。
Reactプロジェクト環境構築
ではVSCodeが開かれている前提で話を進めます。
VSCodeのターミナルを開き、Reactプロジェクトを配置するフォルダまで移動します。その後下記コマンドを実行します。
npx create-react-app --template typescript SampleAppSampleAppというReactプロジェクトができます。これでいつでも開発できる環境になりました。
では、最後にVSCodeに開発用に拡張機能を追加します。
開発環境（VSCode）に拡張機能追加
拡張機能は必須ではないですが、開発を行う上で追加しておくと便利です。というかするのが普通です。下記は必須で追加しておきましょう。
- ESLint
- ES7
- Prettier
Reactプロジェクトを起動
では最後に、上記までの工程で作成したReactプロジェクトを起動してみましょう。
まずは、作成したアプリのフォルダにVSCodeのターミナルで進みます。
cd SampleApp次に下記でReactプロジェクトを起動します。
npm start下記画面がブラウザで開かれ、下記画面が表示されるはずです。
これで、開発環境としては構築完了です。では今回の記事は以上です。ほかにもtypescriptベースのReact関連の記事を記載しているので気になる方は是非参考にしてみてください。
コメント