M2 Macで最速でNuxt3を使えるようにする

はじめに

今回は、Apple Silicon MacにおけるNuxt3開発環境の構築手順をご紹介します。

大まかな流れ

• Homebrewのインストール
• nodebrewのインストール
• Node.jsのインストール
• nodebrewのパスを通す
• Yarnのインストール
• Nuxt3のプロジェクト作成

Homebrewのインストール

Nuxt3を使うためにはいくつかのパッケージを順番にインストールする必要があります。

最初にMacOS用のパッケージ管理システムであるHomebrewをインストールします。

パッケージ配布ページに行きます。

以下の赤枠のコマンドをコピペし、ターミナルで実行します。

実行すると、以下のようにPCのパスワードを聞かれるので、入力しEnterを押します。

==> Checking for `sudo` access (which may request your password)...
Password:

次に、Press RETURN/ENTER ~と聞かれるので、Enterを押します。

Press RETURN/ENTER to continue or any other key to abort:

Apple Silicon Macだと以下のようなエラーが発生します。

Warning: /opt/homebrew/bin is not in your PATH.
  Instructions on how to configure your shell for Homebrew
  can be found in the 'Next steps' section below.
==> Installation successful!

==> Homebrew has enabled anonymous aggregate formulae and cask analytics.
Read the analytics documentation (and how to opt-out) here:
  https://docs.brew.sh/Analytics
No analytics data has been sent yet (nor will any be during this install run).

==> Homebrew is run entirely by unpaid volunteers. Please consider donating:
  https://github.com/Homebrew/brew#donations

==> Next steps:
- Run these three commands in your terminal to add Homebrew to your PATH:
    echo '# Set PATH, MANPATH, etc., for Homebrew.' >> /Users/wataree/.zprofile
    echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/wataree/.zprofile
    eval "$(/opt/homebrew/bin/brew shellenv)"
- Run brew help to get started
- Further documentation:
    https://docs.brew.sh

以下をターミナルに入力し、実行します。

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/PCのユーザー名/.zprofile

以下をターミナルに入力し、実行します。

eval "$(/opt/homebrew/bin/brew shellenv)"

再度、以下の赤枠のコマンドを実行します。

処理が終わったら以下のコマンドでHomebrewのバージョンが表示されるか確認します。

brew -v

以下のように表示されればHomebrewのインストールは完了です。

nodebrewのインストール

次にNuxt.jsでの開発に必須のNode.jsをインストールするためにnodebrewをインストールします。

以下のコマンドをターミナル上で実行します。

brew install nodebrew

処理が終わったら、以下のコマンドを実行してnodebrewのバージョンが表示されるか確認します。

nodebrew -v

以下のようにバージョンが表示されていればnodebrewのインストールは完了です。

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

以下のコマンドを実行します。

nodebrew install stable

以下のようなエラーが発生することがあります。

Fetching: https://nodejs.org/dist/v18.0.0/node-v18.0.0-darwin-x64.tar.gz
Warning: Failed to create the file
Warning: /Users/PCのユーザ名/.nodebrew/src/v18.0.0/node-v18.0.0-darwin-x64.tar.gz:
Warning: No such file or directory
curl: (23) Failed writing body (0 != 1016)
download failed: https://nodejs.org/dist/v18.0.0/node-v18.0.0-darwin-x64.tar.gz

エラーが発生した場合は、以下のコマンドを実行します。

mkdir ~/.nodebrew/src

無事インストールできたら、Node.jsを有効化します。

まずは以下のコマンドでインストールされているNode.jsのバージョンを確認します。

nodebrew ls

以下のようにNode.jsのバージョン一覧が表示されます。

本講座では、バージョン一覧の中から安定版であるv18.16.0（2023年5月14日現在）を有効化します。

以下のコマンドを実行します。

nodebrew use v18.16.0

完了したら、インストールできたかを確認するため、以下のコマンドでNode.jsと同時にインストールされたnpmのバージョンを確認します。

node -v

npm -v

いずれもバージョンが表示されており、nodebrew useで指定したバージョンとnode -vで表示されたバージョンが一致していればOKです。

vimエディターを使ってnodebrewのパスを通す

もし、nodebrew useで指定したバージョンとnode -vで表示されるバージョンが違う場合、zshにnodebrewのパスが通っていないので、以下のようにしてパスを設定します。

まずは、以下のコマンドを実行します。

vim ~/.zshrc

以下のようにVimエディターが起動します。

Vimエディターはターミナル上で起動するテキストエディターで特殊な操作が必要になります。

まず、前提としてVimにはノーマルモード（プレビューのみ）とインサートモード（編集できる）の2つがあります。ノーマルモードとインサートモードの見た目の違いとして、インサートモードでは下記のようにエディタの下に「INSERT」が表示されている点があります。

また、CLIとVimの行き来はノーマルモードを介して行います。そのため、CLIとVimのモードの遷移をまとめると以下のようになります。

CLI⇄ノーマルモード(vim)⇄編集モード(vim)

それぞれの行き来に必要な操作をまとめます。

• CLIとノーマルモードの行き来
  • CLI→ノーマルモード：vim <ファイルのパス>を実行
  • ノーマルモード→CLI：変更を保存する場合は:wq、変更を破棄する場合は:q!
• プレビューモードとインサートモードの行き来
  • プレビューモード→インサートモード：i
  • インサートモード→プレビューモード：Escキー

それでは、~/.zshrcの編集を行いましょう。iを押して、インサートモードにした上で、以下を追記します。

export PATH=$HOME/.nodebrew/current/bin:$PATH

Escを押し、:wqを押して、変更を保存します。

以下を実行し、変更を適用します。

source ~/.zshrc

再度、以下のコマンドでNode.jsのバージョンが、nodebrewでインストールしたバージョンと一致しているか確認し、一致していればOKです。

node -v

Yarnをインストールする

YarnはNode.jsのパッケージ管理システムの1つです。

以下のコマンドを実行し、インストールします。

brew install yarn --ignore-dependencies

Nuxt3のプロジェクトを作成する

まずはターミナル上でNuxt3のプロジェクトを作成したいディレクトリに移動します。

cd <Nuxt3のプロジェクトを作成したいディレクトリ>

次に以下のコマンドを実行すると、Nuxt3のプロジェクトを作成できます。

Ok to proceed? (y)と聞かれたらyと回答します。

npx nuxi init <プロジェクト名>

以下のようにNuxt Project is created with v3 template. ~と表示されていたらプロジェクトの作成は完了です。

lsコマンドを実行して、プロジェクトが作成されていることを確認したら、cd <プロジェクト名>としてプロジェクトのディレクトリに移動します。

次に、プロジェクトの起動に必要なパッケージをインストールします。

以下の3つのパッケージが使えるが、実務ではyarnを使うことが多いので、本講習でもyarnを使います。

• npm
• yarn
• pnpm

yarn installでパッケージをインストールします。

以下のように表示されればOKです。

これでNuxtを起動するための準備は完了したので、実際に起動してみて表示を確認します。

yarn devを実行します。

以下のような表示になるので、一番上のhttp://localhost:XXXXのリンクをコピペし、ブラウザで開きます。

以下のような画面が表示されればOKです。

プロジェクトに修正を行うとリアルタイムでこの画面に修正が反映されるので、基本的にこの画面をブラウザに表示させたまま開発を行います。

参考文献

• M2 MacにHomebrewをインストール
• Mac (M2) でNodeJSのバージョンを変更する #333日目｜森勇樹
• Node.jsのインストールに失敗する時の解決策（No such file or directory）
• M1 Macのセットアップ・メモ