クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

トップ > JS > 【Vue.js】Nuxt.jsのプロジェクトを作成する

【Vue.js】Nuxt.jsのプロジェクトを作成する

JS Vue.js Nuxt.js

Vue.jsの続きです。前回はNuxt.jsのインストールと簡易ページを作成しました。ハローワールド的なペライチページでした。今回は本式なプロジェクトをつくってみる。それではいきましょう！

【目次】

※参考：前回記事
【Vue.js】Nuxt.jsをインストールして簡易ページを作成した - クモのようにコツコツと

※参考：Vue.jsの習得のためにやったことまとめ
qiita.com

実行するフォルダに移動

今回も書籍「Vue.js & Nuxt.js超入門」を参考に進めてみる。

Vue.js & Nuxt.js超入門

Vue.js & Nuxt.js超入門

書籍では前回の作業から引き続きになっているが、いったんターミナルを閉じているので、まずデスクトップに移動。

$ cd DeskTop

次に実行したいフォルダに移動

$ cd （実行するフォルダ名）

create-next-appコマンドを実行

次にcreate-next-appを実行。

$ npx create-nuxt-app nuxt_app

はて、npxというコマンドは初見かも？npmと名前が似ているが。調べてみた。

npxはnpmパッケージを簡単に実行できるコマンドです。具体的には次のようなことができます。

  • run-scriptを使用せずにローカルインストールしたコマンドを実行する
  • グローバルインストールせずに一度だけコマンドを実行する
  • GitHubやGistで公開されているスクリプトを実行する

※参考：知らないのは損！npmに同梱されているnpxがすごい便利なコマンドだった | Developers.IO

ふむふむ。

実行するとなにやら処理中になる。しばらく待つ…

create-nuxt-app v2.11.1
✨  Generating Nuxt.js project in nuxt_app
? Project name (nuxt_app)

お、成功したようだ！プロジェクト名はを入れてくれと

プロジェクト名などは入力不要？

書籍によるとデフォルトでも値が設定されているそうなのでプロジェクト名などは入力不要らしい。

? Project name 
? Project description My world-class Nuxt.js project

このままエンターで先に進む。

作者名入力

書籍と順番が違うが、次に作者名が聞かれた。

? Author name (イイダリョウ)

初期値で自分の名前が入っているのでこのまま次へ。

※最初にここを空欄で進めたら一番最後にエラーになったので注意！

Error: name length must be greater than zero

パッケージマネージャ選択

次も書籍と順番が変わってパッケージマネージャを聞かれた。

? Choose the package manager (Use arrow keys)
❯ Yarn 
  Npm

YarnかNpmかとのこと。NpmはNode.jsのパッケージマネージャだね。ではYarnとは？

YarnはFacebook、Google、Exponent、Tildeによって開発された新しいJavaScriptパッケージマネージャーです。公式発表に記載されているように、Yarn開発者が直面したnpmの問題解決を目的としています。

  • インストールパッケージの速度および一貫性が不十分である
  • npmではパッケージがインストール時にコードを実行することを許可しているため、セキュリティー上の問題がある

※参考：Yarn：Facebook発のパッケージマネジャーはnpmに代わるスタンダードになるか – WPJ

ふむ、良さそうではある。今回はとりあえず見慣れているNodeのNpmにしておこう。

下矢印でNpmを選択。

? Choose the package manager 
  Yarn 
❯ Npm

実行！

UIフレームワーク選択

実行したら次にUIフレームワークを選べと。

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

ふむ、書籍とは質問の順番が異なるようだ。（書籍では最初の質問とのことだった）

BootStrapやVuetifyなどは既知なフレームワーク。

※参考：【Vue.js】UIフレームワーク「Vuetify」をCDNリンクで事始めた - クモのようにコツコツと

今回は初期の「None」で進んでみる。

サーバーフレームワーク選択

次はサーバーフレームワークの選択

? Choose custom server framework (Use arrow keys)
❯ None (Recommended) 
  AdonisJs 
  Express 
  Fastify 
  Feathers 
  hapi 
  Koa 
  Micro

「Express」はNode.jsのフレームワークだよね。知っているぞ。あとはあまり聞かない名前。

※参考：Node.jsのフレームワーク「Express」とは【初心者向け】 | TechAcademyマガジン

今回は「None」のまま進む。

Nuxt.jsモジュールの選択

次にNuxt.jsモジュールを選べと。

? Choose Nuxt.js modules (Press <space> to select, <a> to toggle all, <i> to inv
ert selection)
❯◯ Axios
 ◯ Progressive Web App (PWA) Support

モジュールとは？

モジュールは、Nuxt.js のコア機能を拡張し、無限のインテグレーションを加える Nuxt.js の拡張機能です。

Nuxt.jsの拡張機能ね。

Nuxt.js 公式モジュール一覧

Nuxt.js チームが提供している 公式 モジュール:

  • @nuxt/http: ky-universal をベースにしており、軽量でユニバーサルな HTTP リクエストを送ります
  • @nuxtjs/axios: セキュアかつ簡単に Axios と Nuxt.js とを統合し、HTTP リクエストを送ります
  • @nuxtjs/pwa: 十分にテストされアップデートされた安定した PWA ソリューションを Nuxt に提供します
  • @nuxtjs/auth: Nuxt.js のための認証モジュールです。さまざまなスキームやストラテジーを提供します

※参考：モジュール - NuxtJS

4つ書いてあるが、ここではaxiosかPWAから選べと。

Axiosは以前も触れたようにJSONデータとのやりとりに使う。

※参考：【Vue.js】axiosでJSONファイルを読み込む（はっぴいえんど編） - クモのようにコツコツと

PWAはブラウザで作るアプリみたいなやつ。以前Glideで作った。

※参考：GlideならPWAを5分で作れるというのでBeatle DBというアプリを作ってみた - クモのようにコツコツと

今回は「Axios」で次に進んでみる。

lintツールを選ぶ

次にlintツールを選べと。

? Choose linting tools (Press <space> to select, <a> to toggle all, <i> to inver
t selection)
❯◯ ESLint
 ◯ Prettier
 ◯ Lint staged files

lint とは、主にC言語のソースコードに対し、コンパイラよりも詳細かつ厳密なチェックを行うプログラムである。静的解析ツールとも呼ばれる。

※参考：lint - Wikipedia

コードをチェックしてくれるツール。

ESLintはよく聞く。

※参考：ESLint 最初の一歩 - Qiita

Prettierもいいみたい

※参考：Prettier 入門 ～ESLintとの違いを理解して併用する～ - Qiita

今回は「ESLint」のまま進んでみる。

テストフレームワークの選択

次はテストフレームワークの選択。

? Choose test framework (Use arrow keys)
❯ None 
  Jest 
  AVA

ジェスト？アヴァ？

Jestは、Facebook社がOSSとして開発を進めている、JavaScriptのユニットテストのためのツールです。

※参考：Jestで始める！ ユニットテスト - 環境の準備とテストの実行 | CodeGrid

JestはFacebookが作っているのか。AVAも流行り気味らしい？

※参考：JavaScriptのテストフレームワークはAVAが流行り気味らしいので調べてみた - Qiita

ユニットテストの解説記事の冒頭にもAVAが挙げられている。

※参考：ユニットテストをしよう | Think IT（シンクイット）

今回はひとまず初期値の「None」のまま進んでみる。

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

次はレンダリングモード。

? Choose rendering mode (Use arrow keys)
❯ Universal (SSR) 
  Single Page App

サーバサイドレンダリング（SSR）かシングルページアプリケーション（SPA）か。

SSRはNuxt.jsを使う目的のメインでもある。

※参考：【Vue.js】Nuxt.jsで何ができるのか調べた（SSR、ルーティング、静的ファイル生成など） - クモのようにコツコツと

今回は初期値の「SSR」で進んでみる。

デベロップメントツール

次はデベロップメントツール。これはなんだろう？選択肢が一つしかない。

? Choose development tools (Press <space> to select, <a> to toggle all, <i> to i
nvert selection)
❯◯ jsconfig.json (Recommended for VS Code)

「 jsconfig.json」はVS CodeでES6を使う時に必要らしい。

※参考：qiita.com

このまま次に進む。

※先ほど書いた「Author Name」を空欄にしていると、この次の段階でエラーになるので注意！

Error: name length must be greater than zero

プロジェクト生成！

上記の質問を選択し終わると実行中になる。しばらく待つと…

🎉  Successfully created project nuxt_app

  To get started:

    cd nuxt_app
    npm run dev

  To build & start for production:

    cd nuxt_app
    npm run build
    npm run start

やた！成功しましたと♪🎉

プロジェクトを起動

まずプロジェクトのフォルダ「nuxt_app」に移動する。

$ cd nuxt_app

次に、プロジェクトを動かす

$ npm run dev

処理中…

こんな画面になる。
f:id:idr_zz:20191101061823j:plain 成功したっぽい！

ブラウザで下記のURLにアクセスする。

http://localhost:3000/

やた！初期画面！

f:id:idr_zz:20191101062005j:plain

「Nuxt_app」フォルダの中にもファイルがたくさん入っている。

f:id:idr_zz:20191101062213j:plain

最後に

ということで、Nuxt.jsの本式のプロジェクトをインストールできました！次回は、プロジェクトの中身を見て行ったり、何か触ってみたく思います。それではまた！

※参考：Vue.jsの習得のためにやったことまとめ
qiita.com