Slide 1
Slide 1 text
Vueで静的ブログを作りたい！
Ishikawa Naruto
@garypippi
Slide 2
Slide 2 text
Vueで静的ブログを作りたい！
Slide 3
Slide 3 text
Vueで静的ブログを作りたい！
Slide 4
Slide 4 text
Markdownで記事を書きたい！
Vueで静的ブログを作りたい！
Slide 5
Slide 5 text
Markdownで記事を書きたい！
記事はデータベースを使わず
ファイルで管理したい！
Vueで静的ブログを作りたい！
Slide 6
Slide 6 text
Markdownで記事を書きたい！
記事はデータベースを使わず
ファイルで管理したい！
とにかくVueで作りたい！
Vueで静的ブログを作りたい！
Slide 7
Slide 7 text
Markdownで記事を書きたい！
記事はデータベースを使わず
ファイルで管理したい！
とにかくVueで作りたい！
自作したい！
Vueで静的ブログを作りたい！
Slide 8
Slide 8 text
Nuxt.jsで作ってみる
Slide 9
Slide 9 text
Nuxt.js
Vue.jsベースのフレームワーク
SSR（サーバーサイドレンダリング）
SPAモード（SSRしないモード）
静的ファイル生成！
https://nuxtjs.org/guide
Slide 10
Slide 10 text
nuxt generate
Nuxt.jsが提供するコマンド
静的ファイル生成
関数を使って動的ルートにも対応
データをページコンポーネントに渡すことが可能
https://nuxtjs.org/api/configuration-generate
Slide 11
Slide 11 text
２通りの方法で作ってみました
A
B
Slide 12
Slide 12 text
PLAN A の概要
PLAN A の概要
静的ファイル生成の設定で
動的ルートを生成しつつ
記事情報をページコンポーネントに渡す
Slide 13
Slide 13 text
PLAN A
PLAN A
記事
Nuxt.js設定ファイル（nuxt.config.js）
ルート生成
記事情報処理
nuxt generate
HTML
Slide 14
Slide 14 text
PLAN A のいいところ
PLAN A のいいところ
静的サイトは生成できる
Slide 15
Slide 15 text
nuxt generate --watch
Slide 16
Slide 16 text
そのようなオプションはありません
Slide 17
Slide 17 text
静的ファイル生成ではコードの変更を監視して
自動的に再生成する機能はない
Slide 18
Slide 18 text
A ボツ
Slide 19
Slide 19 text
PLAN B の概要
PLAN B の概要
記事情報を提供するコンテンツサーバーを用意し
ページコンポーネント内で記事情報を取得
Nuxt.jsの開発サーバーが使える
Slide 20
Slide 20 text
PLAN B
PLAN B
Nuxt.js設定ファイル
（nuxt.config.js）
記事
コンテンツサーバー
ページコンポーネント
記事一覧
記事本文
日付...etc
ルート生成
nuxt generate
（静的サイト生成）
nuxt
（開発時）
HTML
Slide 21
Slide 21 text
PLAN B のいいところ
PLAN B のいいところ
静的サイトは生成できる
コードの変更を監視できる
サイトを確認しながら記事を書ける
Slide 22
Slide 22 text
PLAN B の気になる点
PLAN B の気になる点
手元に記事ファイルがあるのに
コンテンツサーバーを立てている？
サイト生成時のみ使うコードが
ブラウザ用にもバンドルされる（Aも同様）
Slide 23
Slide 23 text
B ボツ
Slide 24
Slide 24 text
Vue Server Renderer と Webpackプラグイン
を使って作ってみる
Slide 25
Slide 25 text
Vue Server Renderer
Vue.jsでのサーバーサイドレンダリングを提供
import Vue from 'vue'
import { readFileSync } from 'fs'
import { createRenderer } from 'vue-server-renderer'
const renderer = createRenderer({
template: readFileSync('/path/to/template').toString()
})
const vm = new Vue({ render: h => h('div', 'hello') })
renderer.renderToString(vm, {}).then(html => {
console.log(html) // => hello
})
https://ssr.vuejs.org/
Slide 26
Slide 26 text
Webpackプラグイン
import { Compiler } from 'webpack'
export default class {
apply(compiler: Compiler) {
compiler.hooks.run.tap('MyPlugin', compilation => {
console.log('Build process is starting!!!');
});
}
}
https://webpack.js.org/concepts/plugins/
Slide 27
Slide 27 text
PLAN C の概要
PLAN C の概要
ルート生成
記事情報の取得と処理
静的ファイルの保存
上記やその他もろもろWebpackプラグインで実装
Slide 28
Slide 28 text
PLAN - C
PLAN - C
記事
Webpackプラグイン
ルート・記事情報の取得と処理
HTML描画 HTML
編集の監視
index.js
webpackビルド
Slide 29
Slide 29 text
PLAN C のいいところ
PLAN C のいいところ
静的サイトは生成できる
各種監視できる
静的サイト生成に関するコードは
バンドルに含まれない
最終的にこの方法で作りました
Slide 30
Slide 30 text
やったー！
Slide 31
Slide 31 text
Vueで静的ブログ制作のまとめ
Nuxt.jsはオーバスペックかもしれない
Webpackプラグインで作るのがよさそう
Slide 32
Slide 32 text
静的ブログ自作の課題
記事読み込み処理の省メモリ化
ブログに関する様々な機能の実装
（次・前の記事へ...etc）