【Nuxt.js】Nuxt.jsアプリケーションを生成する

2020年7月19日2020年11月9日

Nuxt.jsでアプリケーションを生成する方法です。Nuxt.jsとはみたいなのはここには記載しません。

環境情報

OS: Windows10

node.js: version 12.18.0

npm: version 6.14.4

Nuxt.js: version 2.13.0

Nuxt.jsでアプリケーションを作成する

コマンドで作成できる

任意の場所で以下のコマンドを実行するとNuxt.jsのアプリケーションが作成できます。

npx create-nuxt-app sample-nuxt-client

実行したらいくつかの質問がでてきます

実行すると対話モードで質問がでてくるので、答えていきましょう。

projectの名前は？

? Project name: (sample-nuxt-client)

そのままEnterを押すと最初のコマンドで指定した名前になります。

JavaScriptかTypeScriptのどちらで開発するか？

? Programming language: (Use arrow keys)
  JavaScript 
&gt; TypeScript

私の場合はTypescriptですね。

パッケージマネージャーはYarnかNpmのどちらを使うか？

? Package manager: (Use arrow keys)
  Yarn
&gt; Npm

私はいつもNpm使っているのでNpmにしています。

UIフレームワークは何を使用するか？

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

私はBuefyを最近使ってみているのでBuefyにしていますが、良く分からない場合は無難にBootStrap Vueにするのが良いと思います。

Nuxt.jsに入れるモジュールは？

? Nuxt.js modules: (Press &lt;space&gt; to select, &lt;a&gt; to toggle all, &lt;i&gt; to invert selection)
&gt;(*) Axios
 (*) Progressive Web App (PWA)
 ( ) Content

AxiosはHTTPクライアントです。一般的に使われているので入れておくのが良いと思います。

PWAはスマホなどでネイティブアプリっぽく動かすことができる（プッシュ通知等）ようにするためのものです。スマホアプリっぽいものを作ってみたいと思う場合は入れると良いと思います。ちなみに、PWAモジュールを入れても普通にWEBページとして開発することができるので、とりあえず入れておいても良いと思います。

ContentはCMSです。（詳しくはよく知らない。。。）例えばブログのようなものを作ってみたいと思っている場合は入れておくと作成が簡単になると思います。私は普通のアプリを作るので入れませんでした。

Linterとしてつかうものはどれか？

? Linting tools: (Press &lt;space&gt; to select, &lt;a&gt; to toggle all, &lt;i&gt; to invert selection)
&gt;(*) ESLint
 (*) Prettier
 ( ) Lint staged files
 (*) StyleLint

Linterは本当に好みですが、私はESLintとPrettierとStyleLintを入れますが、特にESLintとPrettierは定義の競合が起きやすいので一緒に入れない方が良い可能性もあります。

テストフレームワークはどれを使うか？

? Testing framework: (Use arrow keys)       
  None
&gt; Jest
  AVA
  WebdriverIO

とりあえず使うか分かりませんが、一般的に使われているJestを選びました。試しにWebアプリを作ってみたいだけという場合は入れなくても良いと思います。クライアント側のテストって結構書くのがしんどいです・・・。

レンダリングモードはどれにするか？

? Rendering mode: (Use arrow keys)
&gt; Universal (SSR / SSG)
  Single Page App

Nuxt.jsではページのレンダリング方式を二つから選択できます。

SSR/SSGはサーバサイドでページの一部を生成してブラウザへ返す方式で、初期表示が早い等もメリットはあるのですが、ページを公開するためにはサーバが必要になります。

SPA(Single Page Application)はページへのアクセス時にすべてのページ情報をブラウザに返す方式で、初期表示が遅いですが、静的なページとして扱えるメリットがあります。なので、S3などで簡単にページを公開することができます。

※SPAとSSR/SSGは話始めると長くなりそうなので上では簡単に書いています。そのうち記事を書こうかと思います。

デプロイで使用するものは？

? Deployment target: (Use arrow keys)  
&gt; Server (Node.js hosting)
  Static (Static/JAMStack hosting)

これは良く分かってないのですが、Node.js hostingで良いと思います。Static/JAMStackは静的なページを配信するものらしいので。Node.js hostingにするとexpressを使用するようになるのだと思います。

開発に使用するツールは？

? Development tools: (Press &lt;space&gt; to select, &lt;a&gt; to toggle all, &lt;i&gt; to invert selection)
&gt;(*) jsconfig.json (Recommended for VS Code)
 ( ) Semantic Pull Requests

これは良く分からなかったのでVS Codeとなっているjsconfig.jsonを選択しました。