新しいMacでNode.jsのインストールからVue.js + nuxt.js + Vuetifyで開発環境手順(zsh対応版)

概要

macOS Catalina におけるフロントエンドの開発環境作成
Catalinaからbashからzshが標準になったため、zshでの環境構築方法を記載
※ バージョンは全て2020年6月30日時点のものです
新しいものが入っていても基本的には問題ないはず

brew

Mac用のパッケージ管理ソフト

インストール

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

coreutils

GNUコマンドを使用する

インストール

$ brew install coreutils

jq

JSONを成形、絞り込みを行う

インストール

$ brew install jq

例

$ echo ‘[{“hoge”: “hoge”, “fuga”: “fuga"}]’ | jq

xz

圧縮、解凍

インストール

$ brew install xz

例

$ xz -z hoge
$ xz -d hoge.xz

wget

ファイルのダウンロード

インストール

$ brew install wget

例

$ wget -r http://………/download.zip

確認

上記でインストールしたパッケージが表示されることを確認

$ brew list

nvm

Node.jsのバージョン管理ツール

nvmのGitHubを参照して最新バージョンをインストールする
https://github.com/nvm-sh/nvm#install-script

インストール

$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

環境設定

$ vim ~/.zshrc

vimが起動するので~/.zhrcに下記を追加

~/.zshrc

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

ターミナルを再起動

バージョン確認

$ nvm --version

0.35.3

Node.js

JavaScript実行環境

インストール可能なバージョンを確認

$ nvm ls-remote --lts | grep Latest

v4.9.1 (Latest LTS: Argon)
v6.17.1 (Latest LTS: Boron)
v8.17.0 (Latest LTS: Carbon)
v10.21.0 (Latest LTS: Dubnium)
v12.18.1 (Latest LTS: Erbium)

お好きなバージョンをインストール
基本的には最新で良いと思います。

インストール

$ nvm install v12.18.1

バージョン確認

$ node -v

v12.18.1

npm

JavaScriptのパッケージ管理システム

yarn

npmと同じくパッケージ管理システム
今回はyarnを使用する

インストール

$ npm install -g yarn

serverless

Serverless Application(AWS, Azure, GCPなど)を構成管理デプロイするためのツール

インストール

$ npm install -g serverless

npmのライブラリを確認

バージョン確認

$ npm ls --depth=0 -g

/Users/[ユーザー名]/.nvm/versions/node/v12.18.1/lib
├── npm@6.14.5
├── serverless@1.74.1
└── yarn@1.22.4

Nuxt.js

vueのフレームワークの1つ
Routerの記述をする必要がなくなってめっちゃ便利

インストール

// プロジェクトを作成したいフォルダに移動
$ cd ***/*** 
$ yarn create nuxt-app <my-project>

上記コマンドを入力すると対話型のインストーラーが起動します
入力内容は下記を参考に自分に適したものを選択してください

? Project name: (my-project)

? Programming language: (Use arrow keys)
> TypeScript

? Package manager: (Use arrow keys)
> Yarn

? UI framework: (Use arrow keys)
> Vuetify.js

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ Axios
 ◉ Progressive Web App (PWA)
 ◯ Content

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◉ ESLint
 ◉ Prettier
 ◯ Lint staged files
 ◯ StyleLint

? Testing framework: (Use arrow keys)
> None 

? Rendering mode: (Use arrow keys)
> Single Page App 

? Deployment target: (Use arrow keys)
> Server (Node.js hosting) 

? Development tools: 
 ◉ jsconfig.json (Recommended for VS Code)
 ◯ Semantic Pull Requests

インストールが完了したら下記のコマンドを実行

$ cd <my-project>
$ yarn dev

? Are you interested in participation? (Y/n) 
n

http://localhost:3000/
アクセスしてVueのアイコンが表示されれば構築完了

あとはかっこいいWebサイトを作ってください！