おいちゃんと呼ばれています

ウェブ技術や日々考えたことなどを綴っていきます

Vue Fes Japan 2019 サイトのソースコードを公開した

Nuxt.js Vue.js JavaScript

この記事は Nuxt.js Advent Calendar 2019 - Qiita の最終日（25日）の記事です。

Vue Fes Japan 2019 の Web サイトのソースコードを公開したので、お知らせします。

概要

Vue Fes Japan 2019 は Nuxt.js の静的サイトジェネレート機能（nuxt generate）によって作成している。

生成した静的ファイルを Netlify でホスティングしている。

スポンサー情報などのコンテンツをヘッドレス CMS である Contentful で管理している。いわゆる JAMstack 構成。

ポイントをピックアップ

Vue Fes Japan 2018 サイトのソースコードについては下記で解説しており、2019 のものと共通している点も多いので、あわせて参考にしていただきたい。

以下は 2019 になって変更した点に絞って、いくつかポイントをピックアップしていく。

SVG アニメーション

まず、何と言っても目を引く、ヘッドのメインビジュアルの SVG アニメーション。

f:id:inouetakuya:20191225200627g:plain

ここは Vue.js 日本ユーザーグループが誇る SVG 芸人の @hashedrock さんが担当した。実装についてはソースコードを見ていただいたほうが良いと思う。

ヘッドレス CMS の導入

アーキテクチャの大きい変更点はこれ。ヘッドレス CMS である Contentful を導入し、スポンサー情報やタイムテーブル情報などのコンテンツをそこで管理するようにした。

これは Vue Fes Japan 2018 のときの反省にもとづく。

スポンサー担当班から、スポンサーのロゴや PR 文章などが渡されるたびに、それを反映させるプルリクエストを作成するのが面倒だったという課題を解決するためにヘッドレス CMS を導入した。

また、公式モバイルアプリも用意したので、モバイルアプリと Web サイトで配信するコンテンツを一元管理するうえでも役に立ってくれた。

関連リンク

Issue も公開したので詳細はこちらで。

ヘッドレス CMS を提案してくださった @ryamakuchi さんによる、各種ヘッドレス CMS の調査及び比較も見ることができる。

運用フロー

スポンサー情報を例にとると、スポンサー担当班が Contentful でスポンサー情報を更新し Build ボタンをポチッと押すと、Netlify のビルドが実行されて、コンテンツの更新が反映されるという運用フロー。

Web サイトを運用する人と、Web サイトのコンテンツを管理する人とが異なるケースで、特に相性が良いと思う。

また、繰り返しになるが、モバイルアプリと Web サイトへ配信するコンテンツを一元管理できた点もよかった（ただし、ヘッドレス CMS 導入を決めた時点では、モバイルアプリの提供は予定されていなかった）

TypeScript の導入

さらにひとつ大きな変更として TypeScript の導入がある。

クラススタイルの記述

Vue コンポーネントは クラススタイル で記述した。

nuxt-property-decorator を入れている。これは内部で

を使っている。

Class API と Composition API

vuefes-2019 リポジトリは Vue コンポーネントをクラススタイルで記述した例として参考にする意義はあるかもしれないが、Class API は RFC から外されてしまい、Composition API がアクティブな RFC という状況なので注意が必要。

Nuxt TypeScript

また、Nuxt.js 向けの TypeScript サポートが Nuxt.js v2.9 以降から大きく変わったが、vuefes-2019 ではそこに追従できていない。この点も注意が必要。

Vuex ストアの型定義

Vuex ストアでは

  • ゲッターの型定義が any åž‹
  • ミューテーションやアクション の payload が any åž‹

など、型定義に関する課題があるが、それらについても型推論がはたらくような書き方をした。

実践 TypeScript を大いに参考にさせていただいた。

実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義~

実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義~

実装しながら詰まった点を著者の @takepepe さんに助けていただいた。

ほんとうにつよい人はやさしい

話が逸れるけど。@takepepe さんにはリアルでもやり取りさせてもらう機会があって。まとっている穏やかな空気にほんと感心する。

子どもの頃、母親に「ほんとうにつよい人はやさしいものよ」と言われてきたけど、こういう人のことを言うんだなあと思う。

TypeScript を導入してどうだったか

閑話休題。前述のように Vue Fes Japan 2019 サイトではコンテンツを Contentful で管理していて API 経由でリソースを取得している。

このときに取得できるリソースのスキーマを TypeScript の型として書くことで「生きたドキュメント」（= Living documentation. 実装と乖離せずにメンテナンスされ続けるドキュメントのこと）として機能した、というのが一番よかった点だと思う。

コードレビューもしやすかったし、下記の例のように、モデリングをするときのコミュニケーションも捗った。

開催年ごとにディレクトリを分けた

vuefes-2018 は最初の Vue Fes Japan だったため https://vuefes.jp/ として公開したが、開催年が増えたため、

という具合にディレクトリを分けて公開するようにした。

また、開催年ごとに新しい技術などを採り入れてみたい、そのときに過去のコードが足かせになってほしくない、というモチベーションもあり、リポジトリも分けるようにした。

異なるリポジトリの静的サイトを同一ドメインで配信する方法として、Netlify の Proxy 機能を使うようにした。

Netlify の Proxy 機能

Netlify の Proxy 機能のドキュメントは下記。

vuefes-2018 と vuefes-2019 リポジトリそれぞれに netlify.toml ファイルを置く。

その他

他にも

などを行った。Prettier や Stylelint については @yinm（ぬまっち) さんがガンガン進めてくれた。

今後の TODO

Vue Fes Japan 2019 は終了したが、実は一部 Contentful からデータを取得するようになっていなかったり等の残タスクがある。気持ち的にモヤモヤするので、時間を見つけて片付けておきたい。

以上です。参考になれば幸いです。メリークリスマス！