VuePressを使ってみた所感
先週、毎週最低1記事を書くチャレンジを再スタートさせたんですが、どうせだからブログシステム自体をリニューアルしようと考えています。そこでVuePressはどうかな？ と思って使ってみた所感。
VuePress
Vue.jsベースの静的サイトジェネレータ。Vue.jsの開発者であるEvanさん自ら開発しています。
Vue系のドキュメントはもともとHexoという別の静的サイトジェネレータで作られていたんですが、それを載せかえようという背景があるみたいですね。
現在の最新バージョンは1.0alpha34。つまりv1代はアルファリリースという位置付けなのでまだまだ鋭意開発中という感じです。
所感
Gatsby.jsやNuxt.jsよりももっと純粋な静的サイトジェネレータ。開発中はVue.jsとホットローディングでサクサク開発していけて、最終的にbuildコマンドで出力されるのは完全に静的なサイト。Nuxt.jsのgenerateに似ている感じがしますね。
公式、非公式含めすでに幾つかの主要なプラグインやテーマは存在して、必要最小限の環境はありそうです。ただしブログ特化というわけではなく、むしろドキュメント特化方向なのでブログとしては自分でいろいろ手をかけてあげる必要がありそうです。
Vue.jsと同じように公式ドキュメントが良くできているので、Vue.jsやNuxt.jsをすでに触っている人ならかなり楽に入っていくことができますね。しかも自分で拡張するにあたって簡単にVue.jsのコンポーネントを増やして使うことができるのでサクサク行けます。
拡張はテーマ、プラグイン、エンハンサー（ミドルウェア的な位置付け？）と十分なレイヤーが整っています。テーマのカラースキームはオーバーライド可能な前提で作られてたり、いろいろと気が効いてる感じです。
1つのコンテンツ（ブログで言えば1記事）はMarkdownで書けます。Frontmatterも使えるので本文以外の付加情報を持たせることももちろん可能です。記事内で自作Vue.jsコンポーネントを使うこともできるので、ウィジェット的な用法もできそうです。例えば外部の参考リンクをブログカード的に表示するコンポーネントとか楽に作れそうですね。
めちゃくちゃ高機能を求めない、Vue.jsのコンポーネントを自分で作るスキルがある、という条件下であれば十分に実用可能な選択肢として入ってくるように思いました。
他と比較してみる
Hexo
今のこのブログでも使われているHexoですが、Hexoは静的サイトジェネレータの中でもブログ特化しています。HugoのNode.js版とかそういう位置付けでしょうね。上にも書きましたがVuePressはまだそこは弱そうですね。
通常インデックスページに載るような投稿の一覧は自分で作る必要があります。とはいえ、全投稿を必要に応じてフィルタして、日付などで並び変えて、という感じで配列を作りv-forで回してやれば良さそうです。
Hexoはすでにある程度成熟していて便利なプラグインもいろいろ出そろっています。VuePressはVue.jsをすでに扱える人にとっては楽に拡張していける感じがすごいです。Vue.jsの単一ファイルコンポーネントによる、テンプレート、ロジック、スタイルがスコープに閉じているものとして開発できるのは楽ですね。
また将来性を考えてもEvanさん自ら開発しているという点も強いですね。Hexoはいつまで開発が継続されるかわかりませんし、まだこれからもJS系の技術はかなりのスピードで移り変わっていきそうです。Vue.jsの仕組みにのっかっているVuePressも完全に保証があるわけではないですが、コアな部分はVue.jsのレールに乗れる恩恵は大きそうですね。
個人的には、これから新しく作るならVuePressでやるかなあ。という感じですね。現に僕も今、冒頭で言ったようにHexoからVuePressに移行するためにシコシコ書いています。もちろんHexoの機能や、プラグインをそのまま実現しようとすると、機能がけっこう足りませんし、デフォルトのテーマではしっくり決ませんね。もともとそこまで高機能なブログにしてたわけではないですが、ちょっと頑張ればそこまで苦労なく移行できそうな気がします。
ちなみに現段階での移行はこんな感じです。
全くVuePress触ってない状態から1日程度でガワだけは移行できたのは
- Vue.jsは普段から触っててそれなりにわかる
- Hexoの時、Pugでコンポーネント的にテンプレートファイルを分割して作ってた
- Hexoの時、Stylusで書いてた（VuePressのデフォルトCSSはStylus）
という条件が上手く噛み合わさったからかな、と思います。
とはいえ、まだ関連記事の実装とかメニューとか細ごまとしたものを実装しなければですし、今後の記事に有用そうな画像やブログカード的なコンポーネントも作っていかなきゃなあという感じですね。
Nuxt.js
Nust.jsはVue.jsベースのアプリケーションフレームワークでSPA的なサイトを作るのが得意です。ですが、generateコマンドがあり、これはサーバーサイドを使わずに静的サイトとしてファイルを生成できます。
VuePressはのNuxt.jsのgenerateにかなり近い感じはします。ただし、Nuxtはそもそもが静的サイトジェネレータではないので、そこは注意したほうが良いかも。逆に言えば静的サイトが欲しいだけでNuxt.jsのgenerateを使っててそれがオーバースペック気味ならば、VuePressを検討してみても良いかもしれません。
ただ、Nuxtのほうがノウハウが共有されているのでその面では分があるかもしれません。
Gatsby.js
Gatsby.jsはちょっとだけしか触ってないので厳密な比較は難しいことさきにお断りしておきます。Reactを日常的に使っていない身からしたらGatsbyは自分でカスタマイズしていくのに少々学習コストがかかるなぁという印象でした。とはいえ、Gatsby自体の仕組みがとてもよくできていて、少しの気概があればそれほど苦にならない気もしていますが。
なので日常的にReactを触る人にはGatsby.jsは非常にオススメだし、そしてなによりBlazing Fastです。ホントに。これはすごい。
カスタマイズは非常に柔軟な反面、テーマという仕組みがまだ成熟してなく、その変わりに各種StarterのようなScaffoldがいろいろ存在しているようです。これのツライところはテーマよりも深く違う部分が作れてしまうので、自分の思い通りになかなかカスタムできない。もしくはイチから作ろうとするとなかなか学習コストが高そう。という印象を受けました。
再度になりますが、このへんはReactに精通していれば大した障壁にはならなそうです。
まとめとこれからの方針
そんなわけで、まずHexoからVuePressに移行するのにトライしてみようと考えています。述べたようにVuePressはブログに適切なようにはまだ出来てないので、エクササイズがてらブログ的になるように自分でカスタムしていこうと思います。
それは自分のプロジェクト内で閉じた開発でも良いんですが、せっかくPluginやThemeという仕組みがあるので上手く切り出して自分で使うとしても外部モジュール扱いとして作っていこうと思います。
参加させていただいてるコミュニティにはGatsby.jsにコミットしてる猛者の方々がいたりしてGatsbyにはかなりそそられるんですが、得意なVueでひとまずはやってみようと思います。まだ発展途上なのでモジュールをどんどん作れる余地もあるでしょうし。
やっていこう！