WordPress と SSG(Static Site Generator) が織りなす、WordPress ウェブフロントの新世界

作成
2019-11-18

概要

WordPress は世界で最も使われているコンテンツ管理のシステムでありウェブサイトです。 そのウェブサイト部分を SSG だけで実現できたら、どうなるでしょうか。 それは WordPress テーマとは異なる、静的なウェブサイト化でパフォーマンス、スケーラビリティ、セキュリティの向上が図れます。何よりフロントエンド技術者が、そのままに開発を担えます。WordPress の世界を飛躍的に広げる新しい技術の導入といえます。

本セッションでは、WordPress + SSG として、WordPress テーマと異なる 全く新しい WordPress ウェブフロントの新しい世界をお伝えします。

スピーカー

Riotz.works 江藤 武司さん

スライド

PDF:https://riotz.works/slides/2019-wordcamp-tokyo/

内容

ウェブフロント

  • JAM Stack

    • あらかじめHTML化されたウェブサイトを配信する形式のフロント開発技術
    • 動的な要素はWebAPIを利用してJSで描画する
  • 明確な定義が存在する

    • クライアントサイドはJavaScript
    • 再利用可能なAPI
    • 構築済みマークアップ
  • メリット

    • すべてCDNに置ける
    • セキュリティ面の局所化
    • 開発者エクスペリエンスUP
      • データとマークアップの分離

WPとの組み合わせ方

  • REST API経由でSSG連携できる
  • 敢えてWPと組み合わせるメリット
    • エディタとコンテンツ管理をそのまま生かせる
    • フロントはJAMStack化によるメリットを享受
    • フロントのBetter Developer Experience(データとマークアップの分離・職務の明確化)
  • SSGは技術習得がしやすい
  • フロントエンド技術者がそのまま参入できる
  • WordPressと密なテーマ開発に加えて、SSGのウェブフロント系が加わり裾野が広がる

その後の展開

  • オンプレやEC2などではNodeが必要
  • サーバーレスアーキテクチャ
  • フロントをもたないようなHeadless CMS
    • APIで記事データを取得する

Headless CMSとしてのWordPress

コンテンツを書くのは?

  • WordPressは世界でもっとも多く使われているCMS
  • 多くの情報が書籍やウェブサイトで流れる
  • 使ったことがある人が多い

感想

  • 単純なブログであればSSGの実装は比較的簡単そう
  • 動的サイトのこれができないんだけど、、、みたいなソリューションはブログで積極的に書いたほうが需要がありそう