業務ではJava+SpringBoot、jQuery等しか使ったことがないエンジニアです。
TypeScript+Reactを学ぶ過程を記録として残していきます。
あとから来る人の参考の１つとしてハマったところも書いていければと。
概要
この記事では、TypeScript+Reactで開発するためのローカル環境を構築するところまでやります。
後々のことも考えて、anyenv+nodenvで環境をつくっていきます。
筆者の環境は以下に記載しておきます
- macOS Catalina 10.15.7
- node.js
- TypeScript
- React
anyenvとnodenvのインストール
JavaScript(TypeScript)のパッケージ管理システムとしてyarnを使うためにNode.jsをインストールします。今後、場合によってはバージョンの違うNode.jsを使う可能性もあるため、バージョンマネージャを使います。
今回は他の言語(pyenvなど)のパッケージマネージャもまとめて管理できるanyenvを使って、Node.jsのバージョンマネージャであるnodenvを入れていきます。
// Homebrewを使ってanyenvをインストールする
brew install anyenv
// ご自身が使っているシェルに合わせて設定ファイルにanyenvの設定するコマンドを追記する
echo 'eval "$(anyenv init -)"' >> ~/.bash_profile
// 起動中のシェルに再ログインしてanyenvを有効化する
// exec・・・現在のプロセスを上書きしてコマンドを実行
// $SHELL・・・現在起動中のシェルのパス
// -l・・・bashのオプション。ログインを意味する
exec $SHELL -l
// anyenvコマンドでnodenvをインストールする
anyenv install nodenv
// シェルを再起動
exec $SHELL -l
Reactプロジェクトを作成
プロジェクトを作成したいディレクトリにて下記コマンドを実行します。
// npx・・・npmパッケージで提供されているコマンドを実行するコマンド
// create-react-app・・・React用のテンプレートプロジェクトをいい感じにつくってくれるコマンド
// --template typescript・・・TypeScriptでReactのプロジェクトを作成するオプション
npx create-react-app <プロジェクト名> --template typescript
Reactプロジェクトを起動
create-react-appで作成したプロジェクトを起動します。
コマンドが正常に完了すると以下のようなメッセージが表示されるのでそのとおりに実施すればOKです。
We suggest that you begin by typing:
cd hello-world
yarn start
Happy hacking!
以下のような画面が表示されれば成功！！
