この記事は「さくらインターネット Advent Calendar 2017」の15日目の記事です。
前日のykmr31さんの記事に紹介のあった 「第4部 NUXT.jsでウェブサイトを作れるのか？（未完）」 の内容を改めてまとめたものになります。
後日談になると良かったんですけど、コンポーネントのまとめ方だとか、いろいろ試してみていることが今日までに終わらなかったのでまた今度…
NUXT.js
NUXT.js 全体の説明は公式が充実しているのでそちらを読みましょう。勉強会中でも散々登壇者が口を揃えて言ってたんですが、 Vue 周辺はドキュメントの充実っぷりがいいですね！
NUXT.js 3つのモード
NUXT.js は Vueを使ったウェブアプリを簡単に作るためのフレームワークで、最終的な公開方法が大きく３つ用意されてます。
- SSR (Server Side Rendering)
- SPA (Single Page Application)
- Static Site Generation (静的生成)
これら3つのモードは1ソースで nuxt コマンドの実行方法だけで簡単に切り替えられます。
しかも SSR, SPA の2つについては、 nuxt 自身がウェブサーバにもなるのでとってもお手軽です。
注目しているのは 静的生成
ウェブアプリをつくろう！という文脈だと注目が行くのはSSRなのかなと思いますが、実は個人的に注目しているのは、静的生成だったりします。
ウェブサイト制作で抱える課題
制作環境の抜本的な整備をすすめているのですが、WordPressなどのCMSで全体を構築するのもピンとこず、 Hugo などの静的サイトジェネレータだと規模に合わなかったり、学習コストで躊躇したり…ということが続いていました。
考えを整理してみると
- とはいえ、なんらかのテンプレートなどで構造の整理とか効率化を促進したい
- コメントを受け付けたり、なんらかのデータを元にしているような動的なページは限られているので、基本は静的でいい
- 全体で覚えることはなるべく少なくしたい
- 最近 Vue.js が社内に流行ってきてる
- ウェブサイト上でも実績がある
- 個人的にも気に入っている
…もしかして Nuxt.js？
- JS書ける人は特に問題ない上、モダンなJSが書けて嬉しい
- JSよくわからない人もひとまず
<template></template>にHTML埋めればいける。 - そのページのスタイルはもう
.vueにまとめるルールにしちゃうと実はスタイル管理楽になる気がする - コンポーネント化も促進できる
- 静的生成できる
と、こういう理由で Nuxt.js の静的生成に期待を寄せていたりします。
ただし
踏ん切りがつかない理由というのもいくつかあります。
-
<head>の内容は直接 html で書くことが出来ず、 vue-meta を使う必要があって、若干ハードル - htmlにコンポーネントを追加する時に、
<hoge-ui></hoge-ui>と書くのに加えて、import hoge-ui from 'hoge-ui'って書いたり、components:{}に追加しないといけなかったりちょっと、めんどい
そしてなにより
- この Nuxt.js というフレームワークに乗っかってしまっていいのか
ウェブサイトは規模が大きいと比較的耐用年数が必要になるので、あまり流行りに左右されないもの、長く続くだろうものを選びたい、という思いがどこかにはあります。
それでも、もしかしたら
考えてしまうポイントはありつつも、 Vue.js / Nuxt.js を採用することのメリットが大きいことも間違いないと思っていますし、仮に Vue.js / Nuxt.js に何かが有ったとしても コンポーネント的に諸々を整理することは、今後の為になるだろうとも思うので引き続き可能性を探っていきます。
つづく。