Nuxt.js Advent Calendar 2019 の 3 日目をお届けします。

言いたいこと

Nuxt.js いいよ!
フロントエンドあまり慣れていない人ほど使うと恩恵が大きい
みんなも触ってみよう

背景

なんやかんやありましてフロントエンドの開発を担当することになりました。
開発者の背景は以下な感じです。

本格的な Web アプリケーション開発は 10 年以上ぶり
- Struts + JSP、Ruby On Rails を少々という経験で時間が止まっている。
- エディタは eclipse で HTML 要素をハイライトするプラグインを入れて書いていたような気がする。
スキップしてきたもの
- HTML5 + CSS3
- Ajax で非同期な API 呼び出し, JQuery
- IE 対応
- Babel? webpack?
主に経験してきたこと
- java による DataSpider の開発
  - C# も少々

フレームワークの検討

開発にあたってフレームワークの採用は必須だと考えていました。
御三家(Angular/React/Vue.js)の存在は知っていたので、そのあたりから何か選べればと調査していき、今回は Nuxt.js + Vuetify を採用しました。
Nuxt.js は Vue.js をベースにしたフレームワークです。

良かったところ

背景に対するカウンターとして Nuxt.js たちの良かったところをあげていきます

やるべきことが明確で最小限なので迷いが少ない

Struts + JSP、Ruby On Rails を少々という経験で時間が止まっている。

Nuxt.js のプロジェクトを作成すると、雛形として様々な設定が組み込まれたファイルツリーが構築されます。
Nuxt.js が用意してくれた流れに乗っていけば良いので、一番最初にどうすれば良いのか?と迷うことが少なかったです。
画面を量産するにあたって pages 配下にディレクトリと .vue ファイルを配置していけば URL に対応するルーティングが自動で構成されるのも楽でした。
- なので軌道に乗ってくると pages 以下のちょっとした修正で機能が追加可能です。

ソースコードの品質が保ちやすい

eclipse で HTML 要素をハイライトするプラグインを入れて書いていたような気がする。

開発環境は Visual Studio Code が最高でした
プロジェクト作成時にソースコードの品質を保つための設定も組み込み済みなので、エディタの環境を整えれば正しい形に矯正してくれます。
以下の拡張を使って、エディタ保存時に自動フォーマットする設定もしました。
- vetur
- EditorConfig for VS Code
- Prettier
ついでにビルドツールは yarn を使っていて、npm よりも早くよかったです。
さらには husky を使ってコミット前に lint を実行していました。

package.json

  "husky": {
    "hooks": {
      "pre-commit": "yarn run lint"
    }
  },

TypeScript も正式サポートしているので採用できればより品質が高まります
- https://typescript.nuxtjs.org/

Vuetify を使うことで UI 実装の大幅な時間短縮と一定の品質を確保

HTML5 + CSS3

UI 実装に採用した Vuetify がとても良かった
- マテリアルデザインの登場と、その実装が使えることのありがたさ。
- 大小コンポーネントが豊富で、今回はカレンダーが必要でサポートしていることも決め手になった。
レイアウト調整に関しては Grid system と Spacing で大体対応できた
- https://vuetifyjs.com/en/components/grids
- https://vuetifyjs.com/en/styles/spacing
CSS を書かなくてもある程度のことは実現できる

axios + async/await でバックエンドとの非同期通信が超簡単

Ajax で非同期な API 呼び出し, JQuery

HTTP クライアントに axios を使い async/await を使って非同期処理を書くことで、とても簡単に見通しよくバックエンドとの通信処理が書けました。

sample.vue

  // 新着イベント取得ページの例
  async asyncData({ $api }: Context): Promise<any> {
    // $api という plugin をインジェクションしている。関数の中で axios を使っている
    return {
      newEvents: await $api.getNewEvents()
    };
  },

非同期処理でありがちなコールバック地獄も async/await 文法のおかげで解決
あとは取得した JSON をページテンプレートの v-for/v-if などで構築すれば DOM を複雑に操作する必要もなかった

IE 対応はあまり苦にならなかった

IE 対応

IE かどうかの if 文などは必要としませんでした
IE でサポートしていない JavaScript 文法を使った場合は?
- ビルド時に Babel が変換(トランスパイル)してくれる
IE でサポートしていない関数を使った場合は?
- polyfill.io で対応

nuxt.config.ts

  /*
   ** Headers of the page
   */
  head: {
    // ...
    script: [
      {
        src:
          'https://polyfill.io/v3/polyfill.min.js?features=es2017%2Ces2015%2CIntersectionObserver'
      }
    ]
  },

CSS の実装差異は?
- そもそも CSS をほぼ書かなかった
- Vuetify の v-menu コンポーネントで回避策が必要だったがそれぐらい

フロントエンドもビルドする時代だが既に整っていた

Babel? webpack?

Nuxt.js のプロジェクトを作った時点で既に設定済み
リリース時に yarn build でビルドすれば勝手にやってくれる
今回デバッグ用に console.log を使っていたがビルド時の削除するなどのカスタマイズも可能