Nuxt.jsのインストールオプションを初心者なりに選んでみた

シェアする：

更新日時：2020年6月28日

この記事をおすすめしたい人

  • Node.jsも知らんのにNuxt.jsを始めようとしてる人
  • インストール時に聞かれる項目が意味不明な人
  • つまりオレ

何も知らない超初心者が脱WordPressしたくてNuxt.jsでサイト構築していくシリーズです。

今回はNuxt.jsのインストール時に聞かれる内容を、僕なりに咀嚼していこうと思います。

解説ではありません。 僕が選択した際にどう考えたのかが書いてあります。 きっちり勉強したい人には参考にならないでしょう。

僕と同じく悩める立場で、僕の考えから何かヒントを得たい人。 もしかすると役に立つナニカがあるかもしれません。

今回はそんなだらだらしたお話をお届けします。

WordPressの上でな！

※ このブログはWordPress製です

インストールコマンドを実行

プロジェクト名を「nuxt-test」として、インストールコマンドを実行します。 


$ npx create-nuxt-app nuxt-test

Windowsの場合はコマンドプロンプトや、Node.jsインストール時に追加されるコマンドプロンプトから。

僕はNAS上に開発環境があるので、RLoginというフリーソフトでNASへSSH接続しています。

「nuxt-test」の部分は好きなプロジェクト名に読み替えてください。

実行するとプログレスバーが進んでいき、しばらくすると次のような表示が出ます。 


create-nuxt-app v3.1.0
Generating Nuxt.js project in nuxt-test

ここからがインストールオプションの指定です。

ネット見てるとオプションの内容が違うことがあるので、「v3.1.0」の部分で違いがあるのかもしれません。

Project Name

プロジェクト名を入力します。 


Project name: (nuxt-test)

いやいや、さっきもプロジェクト名を入力したやん？

と思ったんですが、インストールコマンドのプロジェクト名とはちょっと挙動が違うようで、こちらが本当のプロジェクト名です。

インストールコマンドの方はプロジェクト用に生成するフォルダ名のようです。

インストールコマンドの名前と同じでいい場合はデフォルトで入力済みなのでそのまま次へ。 変更したい場合は入力。

プロジェクト名は後で変更可能？

可能みたいです。

インストールしたフォルダに作られる「package.json」。 この中の「name」という項目がプロジェクト名になっていました。

Programming language

プロジェクトで使用するプログラミング言語を選択します。 


Programming language: (Use arrow keys)
❯ JavaScript 
  TypeScript

プログラミング言語は後から変更可能？

可能っぽいです。

デフォルトがJavaScriptなので、最初にTypeScriptを指定してJavaScriptへ変更する場合は、「index.vue」などのスクリプト部分を、 


<script lang="ts">

から「lang="ts"」を削除するだけ。 


<script>

逆の場合は、TypeScript用のモジュールを追加する必要があります。 


npm install --save-dev @nuxt/typescript-build

その後、TypeScriptで記述したい部分で、 


<script lang="ts">

と記述。

TypeScriptって？

変数の型指定ができるJavaScriptらしいです。

僕はJavaScriptもろくすっぽ触れないので、学習コストが同じならと将来性のありそうなTypeScriptを選択しました。 アドバイスをもらっている人(以下、アニキ)からも、その条件ならTypeScriptをおすすめする、と。

しかしこれが後に悲劇を生むことになります…。
(TypeScriptがダメだったという意味ではなく、僕固有の問題です)

Package manager

追加するモジュールなどの管理に使うコマンドを指定します。 


Package manager: (Use arrow keys)
❯ Yarn 
  Npm

「npm」はNode.jsをインストールしたら勝手に付いてくるパッケージ管理コマンドです。

「yarn」はnpmの問題を解決した新しいパッケージ管理コマンドだそうです。

yarnを使用する場合は先にyarnをインストールしとかないとエラーが出ました。

yarnの方が良さそうですが、npm経由でyarnをインストールしてもパスが通っていないのか「command not found」。 パスの通し方も分からなかったので、とりあえず僕はnpmです。

たまにyarnでしかインストールコマンドを紹介していないサイトがあるのでちょっと不便していますが、npmでも問題なく使えています。

UI framework

UIのフレームワークを選択します。 


 UI framework: (Use arrow keys)
❯ None 
  Ant Design Vue 
  Bootstrap Vue 
  Buefy 
  Bulma 
  Element 
  Framevuerk 
  iView 
  Tachyons 
  Tailwind CSS 
  Vuesax 
  Vuetify.js

僕は「UIのフレームワークって何よ？」レベルのポンコツで、アニキへ質問。 「簡単にUIを作るためのCSSと考えればいいよ」と言われたのでそのように。

便利にはなるんでしょうが学習コストが増えそうだったので今回は「None」を選択。

アニキに「管理画面とかさくっと作るのには向いてるから勉強しといた方がいい」と言われたのでいずれ必ず…。

Nuxt.js modules

追加するモジュールを選択。 


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

ここはラジオボタン型の選択じゃなくてチェックボックス型です。

全部選ぶこともできるし、ひとつも選ばないこともできます。 スペースキーで個別に選択、Aキーで全て選択、Iキーで選択の反転。

Axiosって？

ごめん、説明見たけど意味不明でした。

ただ、データベースを参照する場合、API(これもよく分かってない)？Json？からデータを取得するみたいで、そこに必ずと言っていいほど登場していたので、僕は選択しました。

PWAって？

これは名前は見たことあるなー。

ウェブサイトをモバイルアプリとしてどうのって書いてあるけど、意味不明。

Contentって？

ごめん、全然わかんない。

ヘッドレスCMSなんたらとか書いてたので、コンテンツ管理…？

場合によっては僕に必要なものになるかもしれない。

また会おうContentくん。

Linting tools

文法チェックツールですかね。 


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

これも複数選択可。

理解不能だったので、よく見かけるパターンだったESLintのみ導入。

Testing framework

テスト用のフレームワーク？の選択です。 


Testing framework: (Use arrow keys)
❯ None 
  Jest 
  AVA 
  WebdriverIO

Jestというのをよく見かけたんですが、Noneを選択しました。

何も選ばなくても開発テストはできています。

なんなんだろ。

Rendering mode

レンダリングモードの選択。 


Rendering mode: (Use arrow keys)
❯ Universal (SSR / SSG) 
  Single Page App

これはアニキにちょっと教えてもらったのでちょっと分かります。

SPAがJavaScriptによってページ遷移なしに他のページを表示する仕組み。

でもこれだと検索エンジンからはページの中身が見えないから、サーバサイドで先にページをレンダリングしてしまうのがSSR。

今回はSPAは考えていないのでUniversalを選択しました。

Deployment target

僕と同じような知識の人からしたら「アップロード方法」とか「動作モード」の選択、みたいになるんでしょうか。 


Deployment target: (Use arrow keys)
❯ Server (Node.js hosting) 
  Static (Static/JAMStack hosting)

Staticは開発環境でHTMLとして書き出してしまってそれをアップロードする方法。

Serverはおそらく、開発環境と同様にサーバにあるNuxt.jsがHTMLを生成する方法。

第1回目は静的HTMLと決めていて、それ用のテーマのサイトを選んでいたので、Staticを選択しました。

Development tools

開発ツール？の選択。 


Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
❯◯ jsconfig.json (Recommended for VS Code)
 ◯ Semantic Pull Requests

前者VSCode用の設定ファイルのようですが、僕は秀丸なのでよくわかりません。

2つ目の方はもっと分かりません。

無選択。

まとめ

いやー、分かりません分かりませんでまとめるのもなーｗ

見た感じ、ほとんど？全部？が後からでも変更可能そうだったので、初回は必要と分かっているもの以外は最小構成で始めた方がいいんじゃないでしょうか。

いきなりなんでもかんでもはできないからちょっとずつね！

以上、WordPressからお届けしました！

Nuxt.js 開発環境構築編の目次

シェアする：
Nuxt-環境構築編,Nuxt.js