React+TypeScriptの環境構築 Windows
最近寒いですね～
冬に入る前に、紅葉を見に行けて大満足です！
紅葉が真っ赤なタイミングで見に行けたのが本当に良かったですね～
さて、そんな事はさておき
今回はWindows11を使用して、React+TypeScriptを使用した環境構築をご紹介します。
忘備録的な形で書いています。
ReactとTypeScriptについて
Reactとは
WebサイトやWebアプリのUI部分を開発する際に活用するJavaScriptライブラリです。
ReactはFacebook社が開発し、後にオープンソース化されました。
そして、ReactはWebサイト・Webアプリだけでなく、
Reactであれば、1つの開発環境でAndroid・iOS両方のアプリを開発可能です。
物凄く便利です。
TypeScriptとは
JavaScriptを拡張して開発された新しいプログラミング言語です。Microsoftが公開しました
TypeScriptで書いたコードをコンパイルするとJavaScriptのコードへと変換されるため、
JavaScriptの開発環境や実行環境があればすぐに使えます。
そしてJavaScriptの開発環境や実行環境があれば構築せずにそのまま使えます。
JavaScriptで作られたファイルを呼び出して使うことも可能です。
物凄く便利ですね。
それではこれから本格的に環境構築していきましょう！
開発環境の準備
Node.js
React,TypeScriptの環境構築にはNode.jsを使います！
特徴についてなどは、また別機会に説明出来ればと思っています。
まだダウンロードが出来てない方はダウンロードしてください。
公式からインストーラーダウンロードするか、Homebrewを使ったインストール方法があります。
ダウンロード出来ているかの確認方法は下記コマンドを使ってみて下さい。
node -v今回のNodeのバージョンはv20.9.0からお送りします。
TypeScript
TypeScriptのインストールが完了していない方は、
お使いのターミナルからTypeScriptコンパイラをインストールします。
npm install -g typescriptそしてダウンロード出来ているかの確認方法は下記コマンドを使ってみて下さい。
tsc -v
今回のTypeScriptのバージョンは5.3.2からお送りします。
準備は出来てきたので、後はプロジェクトを作成していきましょう！
プロジェクト作成
まず、npxコマンドでReactプロジェクトのひながたを生成します。
コマンドは下記の様になっています。
npx create-react-app プロジェクト名 --template typescriptプロジェクト名の箇所に任意の名前を入れて下さい、今回の記事でのプロジェクト名はsample_appとさせてもらいます。
そして、--template typescriptを使用する事によって、同時にtypescriptのアプリケーションを同時作成してくるようになっています。
実行が完了したら下記フォルダ構成になっているかと思います。
sample-app
└node-module
└public
└src
└.gitignore
└packege-lock.json
└packge.json
└README.md
└tsconfig.json上記フォルダ構成になっていれば問題無しです！
さぁそれでは先程作ったプロジェクトの階層に移動して下記コマンドを実行してください！
npm start
上記コマンドを実行して、エラーが出なかったら環境構築完了です！
表示されたlocalhostの番号にアクセスすれば下記画面が表示されるかと思います。
これで環境構築の方は完了ですね！
最後に
これで皆さん、無事に環境構築出来ましたかね？？
まだ最初のひな型を作っただけなので、Reactの良さとTypeScriptの良さはまだ書ききれてないですが、また今度記事を書く際には良さをビッチリ伝えればと思います！
それでは皆さん良い一日を！！！
過去記事