Last updated at
warning
この記事は最終更新から3年以上経っています。情報が古くなっている可能性が高いです。
この技術ブログは、Nuxt.jsに移行する前はVue.js(2系)を用いたSPAをNetlify上でホスティングして動いていました。
この記事ではその構築を通してわかったことや、 ブログのようなシンプルなコンテンツサイトのSPA化のメリット、デメリットについて紹介したいと思います。
フローは以下のような形になっています。
npm run build
)を実行posts.json
(記事一覧),各記事のJSONファイルが生成されて、log.pocka.io
から閲覧可能になるnpm run build
では記事のJSONを生成する自作スクリプト(Node)と記事一覧を生成する自作スクリプト(Node)、そしてVue.jsアプリケーションとHTMLファイルをビルドするwebpackのビルドタスクを実行しています
[build] -> [build posts] -> <post>.json
-> [build post list] -> posts.json
-> [build app] -> index.html, bundle.js
今世の中にはJekyllやHugo、Gatsbyといった様々なSSG(静的サイトジェネレータ)があります。 それにも関わらず自作のスクリプトを使う理由はなんでしょう?
一つはSPA向きのそういったツールがないことです。
SSGはStatic Site Generatorという名前の通り、テンプレートと記事を元に静的で完成されたHTMLを吐き出します。 これらはHTMLを吐き出す為に作られており、好きなフォーマットのデータファイルのみ生成するということが(当たり前ですが)難しくなっています。
また、Gatsbyの場合はランタイムがReact限定になり、バンドル処理が全てGatsbyによって隠蔽されている(SSGを使うメリットではあるが)ためチューニングが難しくなります。
もうひとつの理由としては、「MarkdownをJSONに変換する」処理が大した処理ではない、ということです。
npm上には優秀なMarkdownパーサであるmarked、Yaml Front MatterをJSONに変換するyaml-front-matter、そしてMarkdownの特殊記号を除去してただのプレインテキストに変換するremove-markdownというモジュールが(幸いにも)存在します。 そのため、生成スクリプトとして必要な処理は
のみとなるのです。
基本的にはVue.js+Vuex+vue-routerの普通のSPAです。
Vueは2.xを使い、Single File Componentを用いて記述しています。(コンパイルにはWebpackを使用)
ルーティングにはvue-routerを使用しており、各記事の読み込みはPost
コンポーネントのロード時にfetch
を叩いて実現しています(ソースコード)。
トップページやAboutページは単にコンポーネントを読み込んでいるだけですが、各記事ページではURI内/posts/:name
のname
を元にJSONファイルを取得し、その内容を反映させるようになっています。
各ページの移動時にはfadeのtransitionが走るようになっています。 これはVueのtransition組込コンポーネントを使って実現しています。
ただ、vue-routerの公式ページ通りに実装すると複数のルートを同じページコンポーネントが受ける場合にtransitionが発火しません。
transition
コンポーネントは子要素が変わった場合のみtransitionイベントを発火させる為、プロパティが変わっただけでは発火しないのです(されても困りますが)。
その為、router-view
のkey
に現在のパスである$route.path
を指定し、URIが変更されるとコンポーネントを別のものとして認識させ、強制的にtransitionを発火させています。
<transition>
<router-view :key="$route.path"></router-view>
</transition>
上2つはどちらかというとサイトの静的化に伴うメリット
239KB(gzip 78KB)
)SPA化には確かにデメリットがありますが、いずれも対処して問題ないレベルまで落とし込めるようなものばかりなので、個人的には(フロントエンドエンジニアにとっては)ほぼメリットしかないと思っています。
SPAライブラリもReact+ReduxだけでなくVue(+Vuex)やAngular2、Riot.jsと様々なものがあるので、使い勝手を知ったり、実際に案件で使う前の練習として簡単なSPAブログを構築してみるのもよいかもしれませんね。