当サイトで使用している技術【VuePress編1】~VuePressとは~
当サイトはVuePress で作成されています。 この記事では、VuePressについての基本事項を紹介します。 インストールや簡単な導入方法の説明は、次回のVuePress編2で行います。
VuePressとは
名前からも分かる通り、最近人気が出ているVue.js というWebフレームワークを用いた、静的サイト作成モジュールです。
構成
Vueを用いたと書いてありますが、Vueの知識ゼロでも簡単に静的サイトを作る事ができます。ページの大部分はMarkdownによって記述されていて、必要な場合にのみVueのコンポーネントを挿入することができます。ヘッダー、フッター、左側のナビメニューや検索窓は、設定ファイルに数行追加するだけで簡単に導入できるので、自分は記事を書くことだけに集中できます。
メリット・デメリット
メリット
- 見た目がきれい（しかもレスポンシブ）
- Markdown（最悪、プレーンテキスト）だけ書ければページが作れる
- Vueのコンポーネントが使えるので、ページの部分的な拡張性が高い
- 外部サービスの利用も容易（Google Adsense等）
デメリット
- 型がある程度決まっているので、ページ全体の拡張性が低くやカスタマイズが難しい
- Node.jsや、そのパッケージ管理ツールであるnpm等の知識が多少必要
- プラグイン周りが未熟
メリットを見たら分かる通り、簡単に整ったサイト（ブログ等）を作りたい場合にはかなり良い選択肢になると思います。npmやyarnと聞いてなんのことだかわかる程度に知識がある人に障壁はありません。設定ファイルの書き方とディレクトリ構造を理解するだけで十分です。
一方、それらの単語を聞いたことのない人が、自力で最初から最後まで自力で作成するのは、すこし難しいと思います。ただ、この記事や公式サイトを見て、そこに書いてある通りにやれば、（多少ブラックボックスになる部分はあるにせよ） 比較的容易にサイトを作成できます。
拡張性に関しては、ページのどの部分にもVueのコンポーネントが使えるので、部分的には問題ありません。ただ、あくまで静的なサイトであり、レイアウトもある程度決まっているので、完全に自由に作るのは難しいです。（そもそも完全に自由なサイトならVuePressを使う理由はないです。）
一点だけ、全員に共通する不安な点をあげるとすれば、VuePress自体が未熟であることです。2019年2月現在リリースされているバージョンは0.x（1.xはアルファ版）です。1.x系でないと使えないプラグインがあったり、0.x系と1.x系で互換性のない箇所があったりします。
その他の選択肢
最後に、VuePress以外の選択肢を紹介して、この記事を終えたいと思います。 どのフレームワークを選んでも、メインで編集するのはマークダウンファイルなので、違いはほぼないと言って良いです。環境を整えるのが一番面倒であると考えるならば、使い慣れた言語のフレームワークを用いるのが最善策でしょう。
- Jekyll Ruby系
- Hugo Golang系
- Gatsby React（Node.js）系
- Hexo Node.js系
- Cactus Django（Python）系
- Pelican Python系
「Static Site Generator」で検索すると、これ以外にもたくさん出てきます。 また、stackshareという、プログラミング言語や、webフレームワーク等の技術が、どの企業のどのサービスで使われているかを掲載しているサイトがあります。使用する技術を選択する際に重宝するので、知っておくと良いと思います。 蛇足ですが、Vueの公式ページはVuePressではなく、似たような静的サイトジェネレーターであるHugo を使っている模様です。