EY-Office ブログ

EY-OfficeサイトもJamstackブームに乗ってみようと思う(1)

このブログを含むEY-OfficeのサイトはJekyllというスタティック・サイトジェネレーター(SSG: Static Site Generator)を使って作っています、とくに不満はないのですがGatsbyなどのJavaScriptベースのStatic Site Generatorに乗り換えてJamstackブームに乗ってみようかと思います ^^)

https://www.staticgen.com https://www.staticgen.comより

なぜ乗り換えるの?

自分専用の 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)に置き換えて行く事にします。

次回に続きます・・・・

- about -

EY-Office代表取締役
・プログラマー
吉田裕美の
開発者向けブログ