ブログ構築 2. 開発環境にNuxt.jsを立ち上げる #01
2020年07月27日に更新

Nuxt.jsを動かす環境を構築する

Nuxt.jsを動かすためのツールたち

前提として、OSはmacです。

Nuxt.jsを動かすには

下の2つが必要です。

  • Node.js

    • Nuxt.jsを動かすために必要な開発環境
  • yarn

    • Node.jsの環境上で、パッケージを導入するためのツール

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

方法は色々ありますが、ここでは下記ツールを使って、Node.jsをインストールしていきます。

  • NodeBrew
    • Node.jsのバージョンを簡単に管理できるツール

NodeBrewをインストールするには

このツールが必要です。

  • Homebrew
    • mac上でのプログラミングに必要なツールを、インストールしたり、アンインストールする時に使うもの

もし、インストールがまだの場合はこの辺りの記事を参考にすると良いです。

Homebrewのインストールから操作まで - Qiita
macOSにHomebrewをインストール - Qiita

すでにインストールしている場合は、状況に応じてスキップしてください。

NodeBrewのインストールとセットアップ

それではターミナルを開いてコマンドを実行していきましょう。

1. Homebrewがmacにインストールされているか確認

Homebrewのバージョンが表示されたらOKです。次に進みましょう。

$ brew -v

Homebrew 2.1.8
Homebrew/homebrew-core (git revision e15ccd; last commit 2019-07-24)

2. Homebrewをupdateする

最新のツールを入れるためにupdateしておきましょう。

$ brew update

3. NodeBrewをインストールする

nodebrewをインストールしましょう。

$ brew install nodebrew

こんな画面でインストールが始まります。

==> Downloading https://github.com/hokaccha/nodebrew/archive/v1.0.1.tar.gz
==> Downloading from https://codeload.github.com/hokaccha/nodebrew/tar.gz/v1.0.1
######################################################################## 100.0%

4. NodeBrewのセットアップ

インストールが完了したら、次はセットアップです。

$ nodebrew setup

nodebrewのpathが表示されます。

....

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

5. NodeBrewのPATHを通す

2020年7月27日追記

現在のmacデフォルトシェルはzshです。$ vi ~/.zshrc を実行してください。

macの設定ファイル「.bashrc」に先ほどのpathを記入します。

ちなみに、PATHを通すって?と思った方は、この方が分かりやすく説明してくれています。
PATHを通すとは? (Mac OS X) - Qiita

$ vi ~/.bashrc

# 2020年7月27日追記

# 現在のシェルを確認して
$ echo $SHELL
/bin/zsh

# zshの場合は下記コマンドを実行してください
$ vi ~/.zshrc

viコマンドは、ファイルを開けというコマンドです。

ここで指定するファイル名は、「.bash_profile」もしくは「.zshrc」の場合もあります。

自分のmacの環境に合わせてファイル名を指定してください。

何もいじっていなければ、「.bashrc」のはずです。

波波線が表示されますので、先ほどのpathを記入します。

# nodebrewのpath設定
export PATH=$HOME/.nodebrew/current/bin:$PATH
~                                                                                                      
~                                                                                                      
~  
"~/.bashrc" 5L, 154C

そして、設定を反映させるためのsourceコマンドを実行します。

$ source ~/.bashrc

OK!完璧です。次へ進みましょう。

補足. .bashrcファイルへの編集コマンド

ファイルを開きます。

$ vi ~/.bashrc

キーボードの「i」を押すと、編集モードになり、一番下「"~/.bashrc" 5L, 154C」の文字が「-- INSERT --」になリます。

INSERTの「i」と覚えましょう。

~                                                                                                      
-- INSERT --

この状態でpathを記入します。下記のようにコメントも記入できます。コメントは「#」から始めてください。

# nodebrewのpath設定
export PATH=$HOME/.nodebrew/current/bin:$PATH

「esc」キーを押して、編集モードを終了します。「-- INSERT --」の表示が消えます。

これではまだ保存できいないので、編集を保存しましょう。

「:wp」 … 保存をして終了

~                                                                                                           
:wq

記入を誤った場合は、保存せず終了しちゃいましょう。

「:q」 … 保存せず終了します

~                                                                                                           
:q

個人的に、この程度のコマンドを覚えておけば十分だと思いますが、もっと知りたいという方は下記の記事が参考になります。
viコマンド(vimコマンド)リファレンス - Qiita

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

さあ、次はNodeBrewを使って、Node.jsをインストールしていきます。

1.安定板を指定してNode.jsをインストール

  • stable => 安定板をインストール
  • latest => 最新版をインストール
$ nodebrew install-binary stable

次のようにInstalled successfullyが出たら成功です。

Fetching: https://nodejs.org/dist/v12.7.0/node-v12.7.0-darwin-x64.tar.gz
######################################################################## 100.0%
Installed successfully

2. インストールしたNode.jsの確認

バージョンが出てこればインストールが成功しています。

$ nodebrew list

v12.7.0

current: none

インストールしただけでは、Node.jsは使えません。もう少しです。

3. NodeBrewにNode.jsのバージョン指定

current: noneのまま「$ node -v」のコマンドを打ってもcommand not found(nodeのコマンドは無いよ)と言われます。

そこでNodeBrewにNode.jsのバージョンを指定してあげます。

$ nodebrew use stable

下記のコマンドを打ってバージョンが指定できているか確認しましょう。

$ node -v

v12.7.0

OK!バージョンが出てきました。やっとNode.jsが使えるようになりました。

yarnのインストール

2020年7月27日追記

--ignore-dependenciesオプションをつけるとエラーがでます。

こちらの記事を参考にyarnをインストールしてください。

brew install yarn --ignore-dependenciesコマンドの「not present or broken」エラーに対応する

yarnはHomeBrewを使ってインストールできます。

そう、brewコマンドです。

$ brew install yarn --ignore-dependencies

–ignore-dependenciesはbrewコマンドのオプションです。

yarnはNode.jsが無いと動きません。

しかし、NodeはNodebrewでインストールしており、Homebrewではインストールしていません。

このまま、HomeBrewにNode.jsがない状態でyarnをインストールしようとすると怒られます。

その問題を解決するのが–ignore-dependenciesオプションです。

インストールが始まります。

Warning: --ignore-dependencies is an unsupported Homebrew developer flag!
Adjust your PATH to put any preferred versions of applications earlier in the
PATH rather than using this unsupported flag!

==> Downloading https://yarnpkg.com/downloads/1.17.3/yarn-v1.17.3.tar.gz
==> Downloading from https://github-production-release-asset-2e65be.s3.amazonaws.com/49970642/114f8b80-a477-11e9-9a08-70f1f8027b9e?X-Amz-Algorithm=
######################################################################## 100.0%
....

インストールできたか確認しましょう。

バージョンが出てくればインストール成功です。

$ yarn -v
1.17.3

以上でNuxt.jsを動かすツールたちのインストールが完了しました。

まとめ

  1. Homebrewのインストール
  2. NodeBrewのインストール
  3. Node.jaのインストール
  4. yarnのインストール

次の記事では、Nuxt.jsをインストールしていきます。(やっと)

お疲れ様でした。

参考

install nodebrew, node and yarn - Qiita

↑こちらの方がすっきりとまとまっています。

あなたの力になれること
私自身が独学でプログラミングを勉強してきたので、一人で学び続ける苦しみは痛いほど分かります。そこで、当時の私がこんなのあったら良いのにな、と思っていたサービスを立ち上げました。周りに質問できる人がいない、答えの調べ方が分からない、ここを聞きたいだけなのにスクールは高額すぎる...。そんな方に向けた単発・短期間メンターサービスを行っています。下のサービスへお進みください。
独学プログラマのサービス
次の記事はこちら
Udemy
SPA開発
0. 更新情報 #01
ブログ構築カテゴリーの記事修正、更新情報【2020/05/19追記: このカテゴリーの更新を一旦終了といたします】
0. 更新情報 #02
Nuxt.js v2.13.0新機能メモの公開とv2.12.2にダウングレードする方法
1. 今回作るアプリケーション #01
Nuxt.jsとContentfulで作るマイブログ
2. 開発環境にNuxt.jsを立ち上げる #01
Nuxt.jsを動かす環境を構築する
2. 開発環境にNuxt.jsを立ち上げる #02
Nuxt.jsのプロジェクトを作成する
2. 開発環境にNuxt.jsを立ち上げる #03
Hello Nuxtを表示する
3. Nuxt.jsアプリを公開する #01
Nuxt.jsをデプロイする前の事前準備を行う
3. Nuxt.jsアプリを公開する #02
Netlifyの初期セットアップとNuxt.jsのデプロイを行う
3. Nuxt.jsアプリを公開する #03
NetlifyにデプロイしたNuxt.jsに独自ドメインを設定する
4. Contentfulのセットアップ #01
【Nuxt.js Universal】Vuetify2.0にバージョンアップしよう
4. Contentfulのセットアップ #02
【画像で説明】Contentfulの使い方。初期設定と各メニューについて学ぶ
4. Contentfulのセットアップ #03
Contentfulにブログ記事モデルを作成していこう
4. Contentfulのセットアップ #04
ContentfulからAPIを取得してNuxt.jsで記事一覧を表示する
5. ブログ記事周りの構築 #01
Nuxt.jsにContentfulのブログ記事を表示する
5. ブログ記事周りの構築 #02
Contentfulから取得した下書き記事を開発環境に表示する
5. ブログ記事周りの構築 #03
Nuxt.jsのgenerateプロパティに動的なルーティングを追加する
5. ブログ記事周りの構築 #04
【Nuxt.js】middlewareを活用しブログ記事取得のパフォーマンスを改善する
6. カテゴリーページの構築 #01
【Contentful】カテゴリーモデルとブログ記事モデルの関連付け
6. カテゴリーページの構築 #02
【Nuxt.js × Contentful】ブログ記事に関連付くカテゴリーを表示する
6. カテゴリーページの構築 #03
【Nuxt.js × Contentful】カテゴリー記事一覧ページを作成する
7. タグ機能の構築 #01
Contentfulにタグモデルを作成し関連付けを行う
7. タグ機能の構築 #02
【Nuxt.js × Contentful】タグに関連付いたブログ記事を表示する
7. タグ機能の構築 #03
Contentfulのincludesを使って関連モデルを取得しタグ一覧ページを作成する
7. タグ機能の構築 #04
Vuetify2のdata-tableの使い方を学んで、タグ一覧ページをレイアウト
99. Nuxt.jsブログカスタマイズ #01
Twitterシェアボタン、フォローボタンの作り方【Nuxt.js Universalモード編】
99. Nuxt.jsブログカスタマイズ #02
Contentfulの全文検索を使ったNuxt.jsブログ内検索の実装
小ネタ集