Nuxt.jsのインストール手順

環境詳細
■ MacBook Air(2015年)
■ macOS Catalina

1. まずはNode.jsをインストール

■ Node.jsとは
JavaScriptは本来サーバーサイドで動くプログラムではありませんが、
Node.jsはサーバサイドでも動くJavaScriptと呼ばれ、その中でも代表的なのがNode.jsです。現状は、他にそこまで有名なものもないので、「Node.js = サーバサイドJavaScript」だと認識しておけば良いと思います。
Vue系のフレームワークでは、必ずNode.jsなるものをインストールしておく必要があります。　

■ Node.jsをインストール
Node.jsをインストールするにあたって、様々なツールをインストールする必要になります。私は初めてインストールする際に、あれやこれや右往左往してテンパってしまいました。下記の参考サイトは大変参考になったのでリンクを貼っておきます。

うかい@代表取締役兼エンジニア様
参考サイト：https://blog.u-chan-chi.com/post/setup-mac-node/

2. Nuxtをターミナルでインストール

① まずは新たなフォルダーを任意の場所に作成しましょう。
(フォルダー名は任意の名前で問題無し)

② 次にターミナル を起動し、先ほど作成したフォルダー内に移動しましょう。（iTermやVsCodeでも問題ありません）
※ Launchpad（デスクトップ下のロケットアイコンです） > 検索で「ターミナル 」で出ます。

コマンドを叩いて先ほど作成したフォルダー内に移動します。
例) cd /Users/ユーザー名/Desktop/任意フォルダー

③ npxを使用してNuxtをいざインストール

// 下記のコマンドをターミナルに入力してください。

npx create-nuxt-app <project-name>

※ <project-name>は任意の名前で結構です。
インストールが開始され何をパッケージするのか聞かれます。

? Project name

? Project name (my-project)

任意の名前で結構です。 

? Programming language

> JavaScript
  TypeScript

※ 理由が無い限りJavaScriptで良いと思います。

? Package manager

> npm
  yarn

※ 私はYarnを入れてないためnpmにしました。

? UI framework: (Use arrow keys)

> None
 Ant Design Vue
 Bootstrap Vue
 Buefy
 Bulma
 Element
 iView
 Tachyons
 Tailwind CSS
 Vuetify.js

UIのフレームワークを入れるか聞いています。
BootstrapなどCSSが予め用意されているものを使いたい方は任意で選択してください。

? Nuxt.js modules

○ Axios
○ Progressive Web Apps 
○ content

非同期通信を行う際のオプションを利用するのか聞いているようです。
Axiosは入れておいた方が良いでしょう。Content はブログなど静的サイトジェネレータライクに利用する場合に導入すると良いようです。

? Linting tools

◯ ESLint
◯ Prettier
◯ Lint staged files
◯ StyleLint

コード整形に使用する拡張機能を利用するか聞かれています。
Nuxt.js の公式ドキュメントではESLint & Prettierの併用を推奨されていますので、2点を選んでおきましょう。

? Testing framework 

>None
 Jest
 AVA
 WebdriverIO

コードのテストを行う際のフレームワークを利用するか聞かれています。
練習目的や趣味ならテストフレームワークは要れる必要はないと思います。

? Rendering mode

> Universal (SSR / SSG)
  Single Page App

デフォルトは「universal(SSR)」になっていますが、変更することができます。
nuxtでバックエンドもマルっと作成する場合は、「Universal (SSR)」にしましょう。
フロントエンドのみを開発する場合は「Single Page App」を選択して問題ありません。
特に理由が無い場合はSSRで問題ないかと思います。

? Deployment target

>Server (Node.js hosting)
 Static (Static/JAMStack hosting)

Server (Node.js hosting) はサーバーサイドレンダリングを行う設定です。
Static (Static/JAMStack hosting) は静的サイト用の設定です。
作成するアプリケーションによってどちらを使用するのか選んでください。

? Development tools

>jsconfig.json (Recommended for VS Code)
 Semantic Pull Requests 

こちらはどのような意味なのか解らなかったので、VsCodeを使用しているので jsconfig.jsonにしました。

> Nuxt.jsインストール完了
任意のファイル内にNuxtのパッケージがインストールされた方と思います。

3.最後に

Nuxt.jsインストールまでの過程が多いですが、最初の環境構築は時間が掛かるものだと思って頑張りましょう。
私の最終目的としては、Nuxtを使用してNetlifyとContentfulを連携させてブログアプリを構築したいと考えています。
無知なところが多々ありますので、説明に間違いがありましたらご指摘いただけると大変勉強になります。
次回は、gitでリポジトリを作って管理するまでを書きたいと思います。