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と連携して自動ビルドが走るのでデプロイが楽
導入方法
公式ドキュメントを参照してください。
- 作者:花谷拓磨
- 発売日: 2018/10/17
- メディア: Kindle版