Webフロントエンド勉強会 〜Nuxt.jsを使って静的サイトを作ろう〜

2019年10月2日に開催された Web フロントエンドの勉強会で使われたスライドです。Nuxt.js というフレームワークを使って静的なサイトを作る手順がまとめられています。

Transcript

1. Webフロントエンド 〜Nuxt.js を使って静的サイトを作ろう〜
2. 自己紹介 中村 耕一朗 東京工芸大学 3年 フロントエンドエンジニア / UI・Webデザイナー
3. Nuxt.js とは？
4. Nuxt.js とは？ Nuxt.js は Vue アプリケーションを作成するフレームワークです。ユニバーサルアプリケーション、静的に生成されるアプリケーショ ン、シングルページアプリケーションの中から作成するアプリケーションを選ぶことができます。 はじめに - Nuxt.js
5. Vue.js のはなしを少し Vue.js とは JavaScript フレームワークの1つで、データバインディングという仕組みを使 うことで、フロントエンドのコーディングをより便利に書くことができる。 React というフレームワークも人気。
6. Vue だけじゃだめなの？ Vue や React 単体でも Web サイトを作ることはできる。 じゃあなぜ Nuxt や Next （React でいうところの Nuxt）を使う必要があるのか？
7. Nuxt でできること 1. SPA の作成 シングルページアプリケーションを作ることができる。これだけだったら Vue だけで も可能。 2. SSR アプリの作成 サーバーサイドレンダリングアプリケーションを作ることができる。詳しくは後ほど。 3. SSG として使うことができる 静的サイト（スタティックサイト）ジェネレーターとして使うことができる。詳しくは後ほ ど。
8. SPA と SSR と SSG SPA（Single Page Application） サーバーは静的ファイルを返すだけ。ページのレンダリングやルーティング（ページ間の遷移）はすべてクライア ント側（ブラウザ内）で JavaScript を使って行う。 SSR（Server Side Rendering） ユーザのリクエストに応じてサーバー側でページをレンダリングする。ログインしているユーザの権限に応じて 表示内容を変えたりする場合に有用。 SSG（Static Site Generator） SPA と似ているが、ブラウザでページの中身をレンダリングするのではなく、全てのページの HTML ファイルを 事前に生成しておく点で異なる。
9. SPA と SSR と SSG それぞれのメリット・デメリット https://qiita.com/nishinoshake/items/f42e2f03663b00b5886d https://qiita.com/seya/items/2688dc539af217b7b111 たとえば… SPA だとページごとに OGP が設定できない。First Contentful Paint が遅い。など。 （※First Contentful Paint とは：ページの読み込みが始まってから最初に意味のあるコンテンツが表示されるま での時間の指標。SPA だと最初に返すファイルのすべてのページ情報が含まれているので、どうしても FCP が 遅くなりがち、らしい。）
10. Nuxt を使うメリット いろんな面倒なことをいい感じに包み込んでくれる
11. create-nuxt-app の紹介
12. create-nuxt-app とは？ Nuxt アプリケーションの環境構築を簡単に行うために公式が用意しているツール。これ を叩くと秒で Nuxt アプリケーションが立ち上がる。 使うまでの手順 1. Node（JavaScript の汎用的な実行環境）をインストール 2. NPM（Node Package Manager）が勝手にインストールされる 3. npxコマンドも勝手にインストールされる npx create-nuxt-app <アプリ名> ※npxはパッケージをローカルにインストールせずに実行することができるコマンド
13. 各種モードとコマンド mode（nuxt.config.js 内で指定） - universal（SSR or 静的ページとしての開発の場合） - spa （SPA 開発の場合） コマンド - npm run dev : 開発サーバーを立ち上げる - npm run build && npm run start : SSRとしてビルドして本番サーバーを立ち上げる - npm run generate : 静的ページとして書き出し
14. 余談ですが… create-nuxt-app で作られる雛形から結構同じいじりかたをすることが多かったので、 Nuxt オレオレテンプレートを作成しています。 現在はプライベートリポジトリで作成していますが、ある程度まとまったら公開しようと思 います。
15. コーポレートサイトの解説
16. 項目 1. アニメーション a. 訪問時アニメーション b. スクロール出現時のアニメーション 2. もろもろ実装 a. フォントファイルの作成・指定 b. スムーススクロールの実装 c. メタ情報の指定 d. 環境変数の指定
17. 前提として JavaScript で（あるいはプログラミング全般において）何かを実装するときに、「これよく ありそうだけどちょっと実装面倒そうだな…」と思ったらパッケージを探すのが大切 - JavaScript → npm - Python → pip - Ruby → gem などなど。
18. 前提として Nuxt で開発している時にパッケージを探すと大きく3つの選択肢がある 1. ピュアな JavaScript のパッケージ 2. Vue 製（ピュアなパッケージを Vue 用にラップしたものが多い） 3. Nuxt 製（ピュア or Vue 製パッケージをラップしたものが多い） Nuxt 製となると公式のレジストリにあるもの以外は、GitHub のスター数なども少ないも のが多い → 使っていいのか不安…
19. 前提として 個人的肌感 - Vue 製まででみると結構使えるものが多そう - シンプルなロジックのものはピュアな JavaScript しか無い場合も多いので、自分で 読み込んで使う - Nuxt 製は公式レジストリ以外のものは要検討
20. 項目 1. アニメーション a. 訪問時アニメーション b. スクロール出現時のアニメーション 2. もろもろ実装 a. フォントファイルの作成・指定 b. スムーススクロールの実装 c. メタ情報の指定 d. 環境変数の指定
21. 訪問時のアニメーション サイト訪問時（厳密には index.html の閲覧時）にふわっとロゴが出現したあとに、背景 が横にスライド、その後にタイトルメッセージがふわっと出現する →実際に見たほうがわかりやすい
22. 訪問時のアニメーション おおまかなアニメーションの流れ 1. mounted フックを利用してページを読み込んだ際に処理を開始する 2. anime js のコールバックの仕組みを利用して、ロゴの表示が完了した後に背景の アニメーションを開始する 3. 同様に、背景のアニメーションが完了したタイミングでタイトルメッセージのアニメー ションを開始する 詳しい実装は実際のコードで
23. スクロール出現時のアニメーション 公式サイトに参考例が載っている カスタムスクロールディレクティブの作成 - Vue.js カスタムディレクティブを作成することにより実装 カスタムディレクティブとは v-model や v-show など予め用意されているディレクティブ の他に、独自のディレクティブを作成して登録することができる仕組み。 今回は v-inview というカスタムディレクティブを実装
24. スクロール出現時のアニメーション v-inview の効果 - スクロールに合わせて表示したい DOM に対して付与、その際にコールバック関数 を与える - スクロールされて一定数値以上表示されたときにコールバック関数を呼び出す - 関数内にアニメーションを定義しておいてそれを呼び出す 詳しい実装は実際のコードで
25. フォントファイルの作成・指定 Webフォントの話 - ランディングページやコーポレートサイトなど、内容が静的に決まっているサイトは、 できるだけフォントを決め打ちでいきたい（フォントの差異によって改行が起きてレイ アウトが変わる可能性などがあるため） - ユーザのローカルフォントは読み出しが早い一方で、確実ではない（指定したフォン トが存在しない場合、別のフォントに置き換わってしまう） - Google Fonts を使おう！！ ただし…
26. フォントファイルの作成・指定 Google Fonts のフォントといえば Noto Sans が有名で、Noto Sans JP が日本語バー ジョン ただし、現行の最新版（？）は Noto Sans CJK JP でこちらは Google Fonts には存在 しない。（Noto Sans 開発に関わっていたという知り合いに聞いたけど、そもそも管理部 署が違う（？）だかなんだかんだ…） Noto Sans CJK JP を Web サイトで使用するには、自分でダウンロードしてファイルと して配置する必要がある…！
27. フォントファイルの作成・指定 フォントファイルの作成 - 参考サイト（https://heysho.com/webfont/） - 手順は2段階 - ダウンロードしたフォントのサブセット化 - サブセット化とは…元のフォントから使用する文字のみを切り出す（サブセット化する）こと。特 に日本語フォントは漢字によってもとのフォントのファイルサイズが結構大きいので、使う文字 種（一般的には第一水準の漢字まで）に絞る。 - サブセット化したフォントの woff 化 - woff, woff2 形式は Web ブラウザに最適化されたフォントファイルの形式。 oft 形式など、通 常の形式でも Web 上で表示することはできるが、 woff のほうが軽い&早い（多分）
28. フォントファイルの作成・指定 フォントファイルの指定 - フォントの指定は base.scss 内に記述。nuxt.config.js 内にこのファイルをグロー バルに読み込むように記述を追加する。 詳しい実装は実際のコードで
29. スムーススクロールの実装 vue-scrollto というライブラリを使用。Nuxt 上での使い方もわかりやすい解説記事が あったのでそれを参照。 参考サイト https://qiita.com/amishiro/items/f70aca4797cd57bc51b5 https://hafilog.com/vue-scrollto
30. メタ情報の指定 nuxt.config.js 内に記述。head オブジェクトの中に指定することで設定できる。 詳しい実装は実際のコードで
31. 環境変数の指定 Nuxt 公式レジストリにある dotenv というライブラリを使用。 npm install --save-dev @nuxtjs/dotenv env ファイルを別途用意し、npm scripts 内に、コマンドによって読み込む env ファイル が変わるようにコマンドを追加 詳しい実装は実際のコードで