React＋Next.js＋TypeScriptの環境構築
今回はタイトル通り適当に、簡単に。
React＋Next.js＋TypeScriptの環境の構築を記載しようと思います。
3月からReactの案件にアサインすることになったので
自分の自作PCに環境構築しながら記事にしようと思いました！
今回はWindowsで構築します。
MacBookでも構築済みなのですが、そちらもまた別でいじりながらかければなと思っています！
更新ステータス
記事を書いた日時：2022年2月頃
更新日：なし
筆者知識：未経験レベル（実務で未経験でPLやっていた程度）
更新内容：
Node.jsのインストール
Node.jsのバージョン管理
nodist
WindowsでMacOSのNodebrewのような使い方ができる。
色々と使っている際に不具合やエラーなどが発生して環境によっては苦戦する。
更新がなくなってきた。。。？
nvm
昔からよく使われているもの。
ドキュメントや使い方の解説サイトなどが多く、
理由がなければこれを使用しておけば問題がないという選択肢。
volta
比較的新しく、ドキュメントが整備されていないが、
色々と便利な機能が入っている。
今回はこれを使いたいと思っています。
理由としては新しい技術に手を出す習慣をつけたいこと、
機能は豊富で使い勝手は良さそうなので、今後主流になる可能性も考えて。
Voltaのインストール
上記のURLから公式サイトに行き、
「Get Started →」ボタンを押します。
上記画像の黄色マーカーの部分をクリック。
（Macの場合はその上のコマンドをターミナルだったと思います。）
「volta-<version>-windows-x86_64.msi」
がインストールされるので、そちらを実行します。
インストールの際はそのままデフォルトで進めました。
（すでにインストールしていたため、違う画面が出てしまったため、画像割愛。）
インストール確認
インストールが正常にできているか
Windows powershellを開いて下記コマンドを実行して確認
>volta -v
voltaのバージョンが表示されればインストール完了です。
Node.jsのインストール
voltaのインストールができていればNodeのインストールは簡単、早い！
>volta install node@latest --nodeの最新をインストールするコマンド
>volta install node@[バージョン] --指定したバージョンの安定板をインストール
例：volta install node@17
>volta install node@[バージョン詳細] --指定したバージョンをインストール
例：volta install node@17.1.0
yarnやnpmのインストールも上記のようにインストール可能です。
今回は「yarn」を使うので、下記の「yarn」インストールを行ってください。
>volta install yarn
>volta install npm
Nodeの確認
インストールができているか、下記コマンドで確認
>node -v
指定したバージョンが表示されたらインストールができています。
（voltaの確認もしている画像になってしまいました。。。）
React＋Next.js＋Typescriptのインストール
まずは「Windows powershell」を起動し、
プロジェクトを作成する場所まで移動します。
>cd プロジェクトを作成したい場所のパス
移動した場所で下記コマンドを実行
>yarn create next-app [作成するプロジェクト名] --typescript
Successと表示されていたら、
>cd [上記で指定したプロジェクト名]
で作成したプロジェクトのフォルダに移動します。
そこにプロジェクトが生成されていればOKです。
起動確認
プロジェクトのフォルダ内にいる状態で、
下記コマンドを実行
>yarn dev
にアクセスし、
この画面が表示されていたらおしまいです。
おわりに
Reactはまだ経験半年程度であまり詳しくはないですが、
今回環境構築のお話をしてみました。
また、今後経験を積んでいった際にこちらの記事も修正していければと思います。
*1:ここに更新内容を記載します。
