このブログを含むEY-OfficeのサイトはJekyllというスタティック・サイトジェネレーター(SSG: Static Site Generator)を使って作っています、とくに不満はないのですがGatsbyなどのJavaScriptベースのStatic Site Generatorに乗り換えてJamstackブームに乗ってみようかと思います ^^)
なぜ乗り換えるの？
自分専用の TODO+メモ アプリを作るにも書いたように、新技術習得のためにです！
現在の自分にあまり関係ない技術なら、記事を読む程度かHello word(Tutorial)を試す程度で良いと思います。
しかしSSGやSSRなどReactの周りで起きている事なので、正しく知っておきたいと思います。それにはHello word(Tutorial)レベルではなく仕事に近いレベルで試すことが必要です。
このような時に自分のサイトで試すのが手軽です。それによって色々な知見が得られますし、上手く行かなければ元に戻せは良いので低リスクです。
いろいろなSSG(Static Site Generator)
上の画像のStaticGenサイトはSSGソフトの（人気順）一覧サイトです。
ここで、JavaScriptで実装されているSSGソフトのうち人気のあるもの勝手に分類してみました
| ソフト | 分類 | テンプレート |
|---|---|---|
| Next.js | SSRフレームワーク | React |
| Gatsby | フルスタックSSG | React |
| Nuxt | SSRフレームワーク | Vue |
| Docusaurus | シンプルSSG | Markdown |
| Docsify | シンプルSSG? | Markdown, Vue |
| Sapper.js | SSRフレームワーク | Svelte |
| VuePress | シンプルSSG | Vue |
| Gridsome | フルスタックSSG | Vue |
分類名は私の考えたもので：
- SSRフレームワーク : 本来はサイト作成ソフトでなくServer Side Rendering(SSR)を行うフレームワークです、しかしこの機能はSSGのベースです
- シンプルSSG : 通常のホームページやブログ作成に特化したシンプルなSSG
- フルスタックSSG : GraphQLによるデータ取得やプラグインなど高度な機能を持つSSG
このように、SSGといってもかなり特徴の異なるものがあり単純には比較でません。分類はSSGソフト選択基準のベースになるものだです。
React、Vueは使えるフロントエンド・エンジニアが多くなり、それぞれのコンポーネントや開発経験がテンプレートに活かせるメリットは大きいです。
さて何を使おうか？
Reactを使っているのでテンプレートがReactのものを選ぶと、Next.jsかGatsbyですね。
Gatsby
StaticGenのランキングではGatsbyはNext.jsに負けてますが、Next.jsは純粋にSSRとして使っている人もいるのでGatsbyが一番人気のSSGだと思います。ネット上にも英語・日本語のたくさんの情報があります。
Gatsbyの特徴は
- プラグインで機能が拡張でき、すでに多数のプラグインがある
- 日本語の書籍が出るほどの人気 「Webサイト高速化のための 静的サイトジェネレーター活用入門」
- 基本Reactでページやレイアウトを作成する。しかしコンテンツはMarkdownやいろいろなものが使える
- インストールもNode.jsがインストールされていれば
npm install -g gatsby-cliだけで直ぐ使える - コンテンツはGraphQLを経由して取得するという高尚なアーキテクチャになっている
情報もたくさんあり、プログラマー以外でも最近のJavaScript環境を使ったことのある方なら直ぐにサイト作成に使えるので、第2のWordPressと呼ばれているようです。
プラグインで機能を拡張するのはWordPressと同じで、バージョンアップが止まったり、出来の良くないプラグインが出たりしなのか少し不安。
Next.js
以前 Next.js は、Server Side Renderingも行える便利React開発環境でした。しかしホームページを見ると最近はSSGなどのJamstackを強調しているようです。
ある程度ルールはありますが、Reactに慣れている開発者に取っては必要な部分を自由に作れるのでJekyllからの移行はやりやすそうです、今回はNext.jsを使う事にします。
JekyllではMarkdown, HTMLの中にLiquidテンプレートが使え、さらにLiquidをRubyで拡張できます。これらをNext.js(React)に置き換えて行く事にします。
次回に続きます・・・・
