僕がNuxt.jsでアプリケーションを作るときに使用している技術 2020 Spring

2020年4月現在、僕がNuxt.jsでアプリケーションを作るときによく使用している技術と、その選定理由や導入方法を紹介します。

Vuetify.js

Vuetify.jsは、マテリアルデザインに準拠したVue.js用のUIフレームワークです。
Vue.js用のUIフレームワークは他にもありますが、初めて使ったのがVuetify.jsだったこともあって愛用しています。

他の選択肢

Element
Onsen UI

など

選定理由

コンポーネントを一から作るのはつらいので、なんらかのUIフレームワークを使用したい
コンポーネントの種類が豊富
コンポーネント名がイケてる（<v-btn>のようにv-が接頭辞になっている）

導入方法

以下の記事を参照してください。

HTML

Nuxt.jsではテンプレートの記述にHTML以外の言語を使用することもできますが、僕はHTMLで書いています。

他の選択肢

選定理由

ウェブにおける事実上の標準言語である
HTMLの記法が好き

導入方法

デフォルトでHTMLで書くことになります。

JavaScript

Nuxt.jsではスクリプトの記述にJavaScript以外の言語を使用することもできますが、僕はJavaScriptで書いています。
最近はVue.js/Nuxt.jsでもTypeScript対応が強化されているので、そろそろTypeScriptに移行してもいいかもしれません。

他の選択肢

TypeScript

選定理由

ウェブにおける事実上の標準言語である
最近までVue.js/Nuxt.jsとTypeScriptの相性があまりよくなかった

導入方法

デフォルトでJavaScriptで書くことになります。

Sass

Sassは、CSSのメタ言語です。
オリジナルのSASS記法とCSSの記法に近いSCSS記法がありますが、僕はSCSS記法を使用しています。
SCSS記法はCSSのスーパーセットなので、基本的にはCSSの文法で書きつつ、Sassの機能を使いたいときだけ使うというスタンスです。

他の選択肢

CSS
Less
Stylus

選定理由

生のCSSでスタイルを書くのはつらいので、なんらかのメタ言語を使用したい
CSSのスーパーセットであり、段階的に導入できる

導入方法

以下の記事を参照してください。

ESLint

ESLintは、JavaScriptのリンターです。

他の選択肢

なし

選定理由

JavaScript/TypeScriptの構文をチェックをすることでバグを回避したい
スタイルガイドを適用してソースコードの書き方を統一したい

導入方法

以下の記事を参照してください。

stylelint

stylelintは、CSSのリンターです。

他の選択肢

なし

選定理由

CSS/Sassの構文をチェックをすることでバグを回避したい
スタイルガイドを適用してソースコードの書き方を統一したい

導入方法

以下の記事を参照してください。

nuxt-i18n

nuxt-i18nは、Nuxt.js用のi18nライブラリです。

他の選択肢

vue-i18n

選定理由

アプリケーションで使用するテキストリソースをハードコーディングしたくない
多言語対応を可能にしたい

導入方法

以下の記事を参照してください。

Netlify

Netlifyは、静的ウェブサイトホスティングサービスです。
Nuxt.jsで静的に生成したアプリケーションのデプロイ先として使用しています。

他の選択肢

GitHub Pages
Firebase

など

選定理由

基本的に無料で使用できる
デフォルトのURLがhttps://<project-name>.netlify.app/のようなサブドメイン形式である（https://<user-name>.github.io/<repository-name>/のようなディレクトリ形式ではない）
独自ドメインが使用できる
GitHubと連携して自動ビルドが走るのでデプロイが楽