僕が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で書いています。

他の選択肢

  • Pug

選定理由

  • ウェブにおける事実上の標準言語である
  • 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と連携して自動ビルドが走るのでデプロイが楽

導入方法

公式ドキュメントを参照してください。


Nuxt.jsビギナーズガイド

Nuxt.jsビギナーズガイド

  • 作者:花谷拓磨
  • 発売日: 2018/10/17
  • メディア: Kindle版