【ブログサイト開発其の2】
Nuxt.jsの環境準備（Node.js編）
みなさん。こんにちは！
前回は「ブログサイト開発其の1 スキルセットと技術選定」でしたが、今回はNuxt.jsの環境準備ということでNuxt.jsのセットをアップをお伝えしたいと思います！
Nuxt.jsとは？
その前にNuxt.jsとはを簡単に紹介したいと思います。といっても公式サイトを見たほうが理解はできるかと思いますが、、
https://ja.nuxtjs.org/
公式にも書いてある通り、「Vue.jsのフレームワーク」がNuxt.jsになります。
WEBアプリケーションでの開発が主になるようですが、静的サイトジェネレーターも使えるので、今回のブログサイト構築にも使えます。
また、Nuxtはすぐに開発ができるように、必要な機能が組み込まれた状態でインストールできるので、手間になる設定などもありません。
その他にも以下の機能があったりします。
- .vueファイルで記述可能
- サーバーサイドレンダリング（SSR）
- ルーティング機能
- ES2015のトランスパイル
- JS・CSSのバンドル及びミニファイ化
- 要素の管理
細かい設定が不要ですぐに開発ができるよ！と言った感じになりますね。
しかし、Nuxt.jsしかり昨今のフロントエンド環境は開発環境効率化のために様々なフレームワークが使われています。
また、そのフレームワークを使うには「パッケージマネージャー」というツールで管理しており、今回はNode.jsのパッケージマネージャーである「npm」を利用していきます。
npmを使うにはNode.jsのインストールが必要になりますのでそこから初めて行きたいと思います。
Node.jsをインストールするための準備
最初に私の環境はMacですので、Mac前提でインストールを進めていきいます。
Node.jsのインストール方法はいくつかありますが、
私は、Homebrew、nodebrewで行っていますので、同じ方法で進めていきたいと思います。
Homebrew
HomebrewはMac用のパッケージマネージャーです。
ツールのインストールとか諸々を管理してくれます。
後述する、nodebrewをインストールするためにHomebrewを使います。
まずは、Homebrewをインストールしていきます！
https://brew.sh/index_ja.html
上記の公式サイトの「インストール」と書かれている下のコマンドをコピーしましょう。
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
次にMacでターミナルを開きます。
ターミナルは、画面下のDock部分に出ていたら、それをクリックすることで表示できます。
もし、画面下のDock部分にない場合は、command+スペースキーを押して、「Spotlight検索」を表示させて、そこにターミナルと打ち込みましょう！
そうするとターミナルアプリを検索してくれます。
ターミナルを開いたら先程コピーしたコマンドを貼り付けて走らせてください。
そうすることでターミナル画面にいろいろ文字がでてきいますが、これはHomebrewをインストールしている状態です。
また、結構長いので気長に待ちましょう。。
ターミナルが以下のように、入力できる状態になったら、
hogehoge@hogehoge ~ %
今度は以下のコマンドを打ち込み、Homebrewがインストールされているか確認しましょう。
brew -v
ちなみに私は以下のように表示されます。
hogehoge@hogehoge ~ % brew -v
Homebrew 2.5.3
これでHomebrewのインストールは終了です！
次にnodebrewをインストールしていきます。
nodebrew
nodebrewはNode.jsのバージョン管理ツールです。
複数のバージョンのNode.jsをインストールしたり、切り替え等々ができます。
先程から開いているターミナルに以下のコマンドを打ちます
brew install nodebrew
こちらもインストールが結構長いので気長に待ちましょう。。
インストールが終わったら以下のコマンドを打ち、nodebrewがインストールされているかを確認しましょう。
nodebrew -v
私は以下のようになりました！
hogehoge@hogehoge ~ % nodebrew -v
nodebrew 1.0.1
これでNode.jsをインストールできる準備ができましたので、Node.jsをインストールしていきたいと思います！
（な、長い。。）
Node.jsをインストール
では、またターミナルに戻り以下のコマンドを打ちましょう。
nodebrew ls-remote上記を実行するとインストール可能なNode.jsのバージョンが表示されます。
ただ、その中からどれを入れるかですが、、
最新のものをいれるとバグが起こったりする可能性があるので、「現在、安定している・よく使われてる」バージョンを入れたいと思います。
Node.jsのバージョンは以下の公式サイトで確認できます。
https://nodejs.org/ja/
今回は以下のコマンドを打って「安定版」をインストールしましょう。
nodebrew install-binary stable
上記のインストールが終了後、以下のコマンドを打って実際にNode.jsがインストールされているかを確認しましょう。
nodebrew ls
私は何個かNodeのバージョンを入れているので以下のようになります。
hogehoge@hogehoge ~ % nodebrew ls
v10.15.3
v14.5.0
v14.15.4
current: v14.5.0
もしかしたらみなさんは、currentのところが以下のようなっているかもしれません。
current: none
今はNode.jsをインストールしただけなので、どのバージョンを使うかを明示していないので、
currentいわゆる今使用してるバージョンはnone（無い）よ言われています。
そこで、今インストールしたバージョンを使えるようにしていきます。
2021年2月現在で安定版のバージョンはv14.15.5っぽいので、以下コマンドを打ちます。
nodebrew use v14.15.5
上記を実行後に、
nodebrew ls
を打つと、先程のcurrentがv14.15.5になっていると思います！
大分長いですが、もう少しです！
次に、環境パスを通すということをして終了になります！
ターミナルに以下を打ちます
echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile
上記を打ち込んだら一度ターミナルを閉じます。
ターミナルを閉じる場合は、以下のexitコマンド打ってプロセスを終了させてからターミナルを閉じて、
hogehoge@hogehoge ~ % exit
再度ターミナルを開きましょう。
そして、Nodeのバージョンを確認する以下コマンドを打ちバージョンが表示されれば成功です！
node -v
（ここで言うバージョンは先程安定版を使うことにしているので、v14.15.5になるはずです。）
Nuxt.jsをインストール
ここからNuxt.jsをインストールと言いたいところですが、Node.jsのインストールが思ったより長かったので、Nuxt.jsは次回にしたいと思います。。すみません。。
今回インストールしたNode.jsですが、他にもNode.jsを管理するツールがあり、
https://qiita.com/1000ch/items/41ea7caffe8c42c5211c
https://dev.classmethod.jp/articles/node-version-volta/
上記の、nodenvやVoltaも有名です！
nodenvやVoltaはプロジェクトごと（開発環境ごと）にnodeのバージョンを変更できるものらしいので、
もしこちらの方がよいなら試してみてください！
次回はやっとこさNuxt.jsをインストールしていきたいと思います。
それでは次回もゆたしく〜〜
