viteで作る、React環境構築 with fnm

Node.js環境構築とReact

前提

OSはWindow11を想定しています。
おそらく、Windows10でも同様の手順で構築可能かと思います。
記事を読んで、できた方はご一報くださると幸いです。

諸事情でNode.jsの古いバージョンをインストールしており、最新のバージョンを使えない場合でも問題ありません。

FNMという、Rust製のNode.jsのバージョン管理ツールを使います。
シンプルな操作感で、複数のNode.jsのバージョンを共存させることができます。
Windowsの場合、Powershellの使用が必須です。

この記事で解説している手順には、一部管理者権限が必要な場合があります。

使う技術

1. Node.js
2. FNM
3. vite
4. React
5. (TypeScript)

概要

1. 会社の新プロジェクトでReactとTypeScriptを使いたいけど、環境構築はどうすればいいかわからない...
2. 会社で使っているパソコンのNode.jsのバージョンが古くて動かない...

このような背景、前提があり、つまずきポイントがあったので記事にしました。

この記事のゴールは、Node.jsのバージョン管理をし、React+TypeScriptのコンパイル、開発環境を整えることです。

vite、Reactの詳しい解説は本記事ではいたしません。
(別記事で書こうと思います。)

想定する読者

1. TypeScriptを知らない
2. Reactを触ってみたい
3. Node.jsのバージョン管理をしていない

解説

Q1. FNMってなに?

A. Node.jsのバージョン管理システムです

FNMを使うことで、複数のバージョンのNode.jsを使うことができます。

Q2. なぜNode.jsが必要なの?

A. ReactやTypeScriptをコンパイルするため、viteを使うためです

viteはNode.jsで動作するため、Node.jsのインストールが必須です。

Q3. viteってなに?

A. JavaScriptのモジュールバントラー+開発サーバー

非常に高速、豊富な機能が特徴。

モジュールバンドルとは、CSSやJavaScriptを一つにまとめることをいいます。
モジュールバンドルの詳細はこの記事では解説しません。

参考記事
【JavaScript】モジュール...バンドル...webpackとかって結局何なんだい？

Q4. なぜviteを使うの?

A. Reactの環境構築が容易におこなえるため、本記事で使用することにしました。
viteを使わない場合、React公式の環境構築ツールを使うこともできます。
(本記事では解説しません)

Q5. Reactってなに?

A. 保守性が高く、よりインタラクティブなアプリケーションを構築するため
小難しく書きましたが、HTMLをコンポーネントという単位で開発、管理することで保守性を上げます。

コンポーネントの状態やコンポーネント間のデータの受け渡しを制御することで、保守性を上げています。

Q6. TypeScriptってなに?

A. Microsoftが作った、JavaScriptに型を追加した言語です

型(Type)を追加することで、開発段階でプログラムのエラーを発見することができます。
JavaScriptであった実行時のエラーを限りなく減らすことができます。

TypeScriptはブラウザではサポートされていないため、JavaScriptへの変換(コンパイル)が必要です。

手順

1. Node.jsのバージョン管理をする
2. viteプロジェクトを作成する
3. Reactを学ぶ

Node.jsのバージョン管理をする

Node.jsのv20以降を使う場合、この手順は省略しても問題ありません。

github | FNM

公式のガイドに従って、インストールします。

Chocolateyを使う

WIP

choco install fnm -y

Github Releaseから実行ファイルをダウンロードする

Windows用のFNMをzipファイルをダウンロードします。
Zipファイルを解凍して、実行ファイルを環境変数Pathの通ったディレクトリに保存します。

インストールができているか、確認しましょう。

# FNMが認識しているNode.jsの一覧を表示
>fnm list
system

# オプションの解説などを表示
>fnm -h

「文字で名前が認識されません。」以外の表示がされればインストール成功です。

fnm : 用語 'fnm' は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。

このように表示された場合、Pathの通った場所に実行ファイルがありません。
もしくは、実行中のPowershellにPathが反映されていません。
Pwoershellを一度終了し、再度、コマンドを実行してください。

これで、インストールは完了しましたが、実際に使えるようにするには、もう一つの手順が必要です。(後述します)

FNMでNode.jsをインストールする

# 最新版のNode.jsをインストールする
>fnm install lts-latest

>fnm list
* v20.15.1 default,lts-latest
* system

最新版のNode.jsをインストールすることができました。
system以外に表示されているものがあればOKです。
バージョンは、記事執筆時、筆者の環境のバージョンです。

FNMをインストールしたとき、実際に使えないと言いましたが、使えない機能というのは、Node.jsのバージョンを切り替える機能のことです。

エラーになることを確かめましょう。

> fnm use lts-latest
error: We can't find the necessary environment variables to replace the Node version.
You should setup your shell profile to evaluate `fnm env`, see https://github.com/Schniz/fnm#shell-setup on how to do this
Check out our documentation for more information: https://fnm.vercel.app

これは、PowershellにFNMの設定を追加していないことで発生しています。
試しに、FNMの設定を追加してみましょう。
この設定追加は、プロセス中のみ有効なため、FNMを使うたびに実行が必要です。
設定の永続化は、後ほど解説します。

# Node.jsの現在のバージョンを確認する
>node -v
もともとインストールされているNode.jsのバージョン

# FNMの設定を反映する
# 実行しても何も表示はされません
>fnm env --use-on-cd | Out-String | Invoke-Expression

# Node.jsのバージョンをlts-latestに切り替える
>fnm use lts-latest
Using Node for alias lts-latest

>node -v
lts-latestのバージョンが表示

Powershellの設定

FNMを使うたびに、使えるようにするコマンドを打つのは現実的ではないため、Powershellを実行したときに自動で反映するようにします。

powershellのプロファイルが、Powershellを実行するときに、自動で呼ばれるスクリプトです。
プロファイルが格納されているパスを確認し、プロファイルに追記しましょう。
ない場合は、ファイルを作成して追記します。

# プロファイルのパスを確認
>$profile
powershellのプロファイルのパス

# メモ帳でプロファイルを開く
>notepad $profile

これをプロファイルに書く

fnm env --use-on-cd | Out-String | Invoke-Expression

Powershellはセキュリティの都合により、実行ポリシーに則り、スクリプトの実行を制限しています。
プロファイルもスクリプトの一種のため、セキュリティの設定を確認します。
これだからMicrosoftは...

Powershellで以下のコマンドを実行して、出力を確認します。

> Get-ExecutionPolicy
RemoteSigned

Restricted: 全て実行不可
Undefined: 未定義
RemoteSigned: ローカルスクリプトと署名付きのリモートスクリプトのみ実行可

RemoteSigned になっていれば、FNMの設定を永続化できます。

セキュリティを重視する場合、Powershellを実行しているプロセスの間だけ変更することもできます。
(本手順では解説を省略します)

# プロセスの間だけ変更する
>Set-ExecutionPolicy RemoteSigned -Scope Process -Force

本手順では、セキュリティポリシーを永続的に変更する手順を解説します。

>Set-ExecutionPolicy RemoteSigned -Scope CurrentUser -Force

もう一度、セキュリティポリシーを確認し、RemoteSignedになっていればOKです。

参考サイト
PowerShellの実行ポリシー変更

今実行しているPowershellを終了し、新しくPowershellを起動します。

>fnm use lts-latest
Using Node for alias lts-latest

>node -v
lts-latestのバージョンが表示

バージョンの切り替えができれば成功です。

FNMを使わない場合

FNMを使用せず、直接インストールする場合、この手順に沿ってNode.jsのインストールをします。

WIP

Chocolateyを使う

WIP

インストーラーを使う

WIP

viteプロジェクトを作成する

viteの読み方は「ヴィート」

vite | 公式ドキュメント

viteのプロジェクトを作成します。

プロジェクト名は学習目的のため、デフォルトを使います。
TypeScriptのReactを選択して学習します。

$ npm create vite@latest

作成したディレクトリに移動して、node_modulesをインストールしていきます。

# vite-projectというプロジェクト名の場合
cd ./vite-project
$ npm install

開発用のサーバーを起動します。

$ npm run dev

localhost: にお好みのブラウザでアクセスして、サンプルのアプリケーションが表示されているか確認します。

Reactを学ぶ

Reactの開発環境が整ったので、あとは学ぶだけです。
ReactやTypeScriptは複雑です。

しかし、人気の言語、ライブラリであるため、インターネット中にサンプルコードや解説記事はたくさんあります。

自らの手で色々と触ってみて、知見を広げって言ってください。

React | 公式ドキュメント(旧)
このドキュメントは内容が古く、今後更新されない。
新しい公式ドキュメントを参照する

React | 公式ドキュメント(新)
Reactのパラダイムなどはここを順に読むことで理解できる。

React | Blog
チャレンジ問題を解いて、理解度をチェック。

まとめ

会社から支給されたPCで開発する場合、使っているソフトのバージョンをあわせるなどが必要になると思います。

また、管理者権限が常に使えるとも限らないため、Node.jsのバージョン管理に一苦労することも多いです。
Node.jsのバージョン管理は、シンボリックリンクを作る実装のものが多い印象を受けました。
Windowsの場合、シンボリックリンクを作るには特権が必要です。
FNMの場合、普段の使用では特権を要求しないことが魅力の一つです。

viteやReact、TypeScriptなど、フロントエンド開発は昨今、非常に複雑です。
学んだことをアウトプットして、日本のシステムエンジニア不足の解消に少しでも貢献したい思いです。

さいごに

プログラミングを学ぶ人にとって、開発環境の構築はハマりポイントの一つです。

この記事を読み、環境構築にハマる人が少しでも減れば幸いです。

記事の内容で間違っている点などございましたら、後学のためにも指摘くださると幸いでございます。

最後までご覧いただき、ありがとうございました。

付録

fnmコマンド早見表

# バージョンの切り替え
>fnm use <バージョン>

#Node.jsのインストール
>fnm install <バージョン>

#最新のNode.jsをインストール
>fnm install lts-latest

#インストールされているNode.jsの一覧
>fnm list

#インストールできるNode.jsの一覧
>fnm list-remote

#インストールされているNode.jsのアンインストール
>fnm uninstall <バージョン>

参考記事

fnm (Fast Node Manager) のインストール方法と使い方