NuxtJSをターミナルを使ってMacに開発環境の構築する手順を紹介していきます。
▼この記事は動画でも視聴できます！
目次
インストールツール
- nodenv：フォルダごとにnode.jsを管理するツール
- anyenv：〇〇env系のツールを管理するツール
初心者がつまずきがちな注意点
開発環境でうまく行かない場合は、個人の環境の問題などもあり、自分で対処する必要があります。
そのため昔からプログラミング学習でつまずきやすいのが、開発環境構築だったりします。
これから開発環境を構築するにあたり、つまずいた時の「解決方法3つ」を先に紹介しておきます、
1.ツールがちゃんとインストールされているか確認する
各ツールをインストールしたら、必ずちゃんと入ったか確認するほうがスムーズです。
確認はバージョンチェックコマンドを打てば確認できます。
例）nodenvのバージョンチェック
$ nodenv versions
2.シェルを再起動
正しいコマンドを打ってインストールしているにも関わらず、挙動がおかしいときは一度シェルを再起動してみてください。
$ exec $SHELL -l
3.一度使っているツールをアンインストールしてみる
もし今回の講座の前になにかツールをインストールしている場合は、一度アンインストールするとよいです。
Nuxt.jsの環境構築（Vueフレームワーク）
git確認
// gitが入っているか確認
$ git --version
※コマンドライン・デベロッパーツールのポップアップが出た場合は、それに従ってインストールしてください。
デフォルトシェル確認
$ echo $SHELL
・bashかzshのどちらかが表示されます（Mac OSのバージョンによって変わる）
/bin/bash
/usr/local/bin/zsh
※パスは環境によって変わることがあります。
anyenvをインストール
開発環境構築でよく使う「〇〇env」系のツールを管理するためのツール
// gitからanyenvをインストール
$ git clone https://github.com/anyenv/anyenv ~/.anyenv
デフォルトシェルがbashかzshによって以下のどちらかを実行。
// コマンドを有効化するためpathを通す（デフォルトシェルがbash）
$ echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.bash_profile
$ echo 'eval "$(anyenv init -)"' >> ~/.bash_profile
// コマンドを有効化するためpathを通す（デフォルトシェルがzsh）
$ echo 'export PATH="$HOME/.anyenv/bin:$PATH"' >> ~/.zshrc
$ echo 'eval "$(anyenv init -)"' >> ~/.zshrc
以下続きのコマンド。
// シェル再起動
$ exec $SHELL -l
// anyenv確認
$ anyenv --version
// anyenv-installプラグインをインストール
$ anyenv install --init
nodenvをインストール
// インストールできるツールを確認する
$ anyenv install --list
// 必要なツールをインストールする
$ anyenv install nodenv
// シェルを再起動する
$ exec $SHELL -l
node.jsインストール
// インストール可能nodeバージョン一覧
$ nodenv install -l
// インストール済バージョンを確認するコマンド（今回は打ち込む必要はありません）
$ nodenv versions
// インストール
$ nodenv install 16.9.1
$ nodenv install 14.17.6
// グローバル nodeインストール
$ nodenv global 16.9.1
// nodeバージョン確認→16.9.1と出ます。
$ node -v
node.jsローカルインストール
// プロジェクトディレクトリに移動
$ cd /xxx/
// ローカルインストール
$ nodenv local 14.17.6
// nodeバージョン確認→14.17.6と出ます。
$ node -v
NuxtJSをインストールする
↓以下の「nuxtjs_test」部分はプロジェクトネームを入れます。
// nuxtjs_test部分はプロジェクトネームなので好きなものを
$ npx create-nuxt-app nuxtjs_test
インストールの中で色々質問が出てきますが、とりあえずデモで動かすのであれば初期設定でOKです。
唯一決めないと行けない部分は、レンダーモードの以下の部分。
・Universal（SSR / SSG）
・Single Page App
とりあえずローカルでテストするならSSRで良いです。
※クラウドやローカル環境で動かすならSSR（Server Side Rendering）。
※レンタルサーバーに上げたいなら静的htmlやCSSを書き出せるSSG（Static Site Generator）。
※Webアプリを作りたいなら、SPA（Single Page App）
補足：隠しファイルを常に表示させる
Macはドットから始まるファイルが隠しファイルとして見えない状態なので、プログラミングやる上では見えるようにしておくと良いです。
$ defaults write com.apple.finder AppleShowAllFiles TRUE
$ killall Finder
もしくは、以下のキーを同時押し。
[command] + [shift] + [.(ドット)]
