この記事は Nuxt.js #2 Advent Calendar 2018 - Qiita の最終日（25日）の記事です。
Vue Fes Japan 2018 の Web サイトのソースコードを公開したので、お知らせします。
概要
Vue Fes Japan 2018 は Nuxt.js の静的サイトジェネレート機能（nuxt generate）によって作成している。
生成した静的ファイルを Netlify でホスティングしている。
なぜ nuxt generate 機能を使っているのかを含めて、このサイトの解説については既にいくつかの勉強会で発表しているので資料を貼っておく。
このサイトの速度改善を行ったことについても発表した。
ポイントをピックアップ
いくつかポイントをピックアップしていく。詳細については上の発表資料及びソースコードを参照してほしい。
src ディレクトリ
Nuxt のデフォルトでは、ソースを src ディレクトリにまとめる方法を採用していないが、
- https://github.com/vuejs-templates
- https://github.com/facebook/create-react-app
- https://github.com/angular/angular-cli
などは src ディレクトリにまとめているので、ソースを、ビルドしたものやデプロイ設定などとは分けて管理するのが一般的だと考える。また、そうしたほうが管理しやすいと自分自身も考えるため。Vue Fes サイトでも src ディレクトリにまとめるようにした。
CSS
- コンポーネントで閉じたいもの
- アプリケーション全体で共通させたいもの
を使い分けた。
Vue.js のスタイルガイドに準拠した
Vue.js のスタイルガイド に準拠した。
基底コンポーネント（アプリケーション固有のスタイルやルールを適用するもの）の例としては BaseSection.vue がある。
余白の設計
原則として、コンポーネントに margin を持たせない。
コンポーネントの配置に責任を持つコンポーネント（例: BaseSection.vue）が padding を使ってイイ感じに配置するという考え方を採用している。
詳しくは https://www.slideshare.net/manabuyasuda1/ss-71261608 の Inset パターンを参照。
画像の最適化
画像ファイルを追加または編集した際には、コミット時に当該ファイルを対象として imagemin による画像の最適化が実行される。
画像の遅延読込
ファーストビューに入っていない画像については、原則として遅延読込するようにしている。
PWA
サイトのユースケースとして、当日の会場内や地下鉄内でもよく使われることが想定された。ネットワークが繋がりにくくなる可能性を考慮して、オフラインでも閲覧できるように対応した。
今後の TODO
Vue Fes Japan 2018 は終了したが、次は 2019 があるし、それに向けていくつか整えておきたいところがある。具体的には下記のようなことを考えている。
- src/stores/index.js に書いているスポンサー情報を Vuex モジュールに切り出すリファクタリング
- テストツールを Jest に乗り換える
- Nuxt.js のバージョンを 2.x に上げる
以上です。参考になれば幸いです。メリークリスマス！