ヘッドレスCMSは、近年ウェブ開発において注目を集めています。フロントエンドとバックエンドを切り離すことで、より高度な制御、オムニチャネルアプリケーション、そして最新技術の活用が可能になります。
ヘッドレスCMSを利用して、Vue.jsやReact.jsのようなフレームワーク、あるいはDjangoやRuby on Railsのようなウェブフレームワークの可能性を探っている開発者はたくさんいます。
ヘッドレスWordPressサイトでスムーズに動作するフレームワークは数多くありますが、今回取り上げたいのはSvelteKitです。SvelteKitは、簡潔で美しいコードでウェブアプリを開発することを目的としたUIフレームワークです。通常であれば切り離された環境でうまく動作しない機能を簡単に統合することができます。
まずは、ヘッドレスWordPressについてご説明した後、SvelteKitの特徴やWordPress環境に統合する方法をご紹介します。
ヘッドレスWordPressサイトとは
WordPressのフロントエンドとバックエンドの違いは、すでにご存知かもしれません。バックエンドとは投稿や固定ページの作成、プラグインのインストール、テーマのデザイン、設定の変更など、CMSの基本的な操作を行う場所です。
フロントエンドは通常、訪問者に表示される「サイトの外観」です。WordPressは、テーマやプラグインと並んで、get_posts()などの様々な関数を使用し、必要なデータを取得して表示します。
例えば、ブログのトップページに表示される「最近の投稿」ウィジェットも、関数を使用してバックエンドからデータにアクセスし、公開しているフロントエンドに最新の投稿を表示します。
WordPressのバックエンドとフロントエンドは密接に連携しており、多くの点で互いに依存し合って機能していますが、かと言って切り離せないわけではありません。
そこで登場するのが、「ヘッドレスWordPress」という概念です。WordPressのバックエンド（胴体）をフロントエンド（頭）から切り離すことで、PHPだけでなく、あらゆるウェブ開発フレームワークやアプリケーションなど、好きなのフロントエンド技術を使用することができます。
さらに、ヘッドレス化によってWordPress CMSを複数のチャネルで使用することも可能です。ブログ記事やその他の要素を複数のサイトやモバイルアプリなど、任意の場所に配置することができます。
ヘッドレスWordPressは、CMSのすぐれた制御感、そして互換性のない技術の使用を実現することができます。また、WordPress組み込みの機能を活用することで、ゼロからアプリ全体を記述する手間も省けます。
REST APIとは
ヘッドレスWordPressサイトを動作させるには、API（Application Programming Interface）を使ってアプリケーションを接続します。APIは、異なる2つのアプリケーション（今回の例ではWordPressのバックエンドと独自のフロントエンドアプリ）を連携させる役割を担います。
APIには多数の種類がありますが、REST APIはWordPressに組み込まれているもので、外部アプリケーションが管理画面を経由することなく、WordPressのバックエンドから安全にデータを取得することを可能にします。
REST APIはブロックエディターを含むWordPressのさまざまな公式の機能で使用されており、APIを必要とするテーマやプラグインのほとんどはこのAPIを使用しています。
また、これはヘッドレスアプリケーションにも該当します。多くはREST APIを使用してWordPressと接続し、バックエンドからデータを取得してフロントエンドアプリで動的にレンダリングします。
REST APIは、投稿、固定ページ、ユーザー、カテゴリーなど、WordPressのさまざまなリソースを表すエンドポイントを提供します。このエンドポイントにアクセスすることで、フロントエンドにデータを表示することができます。
このようにREST APIを使用することもできますが、SvelteKitはその機能の多くをGraphQLに依存しています。
GraphQLとは
GraphQLはAPIそのものではなく、APIクエリ言語です。従来のREST APIでは、関連するデータを取得するためにクライアントは異なるエンドポイントに複数のリクエストを送信する必要がありましたが、GraphQLでは1回のリクエストですべてのデータを取得可能です。
総合的に、GraphQLは高速かつ最適化されたフレームワークで、簡潔なクエリを作成できるように設計されています。また、REST APIよりも習得が簡単です。
このような理由から、ヘッドレスWordPressフレームワークの多くは、REST APIではなく（あるいはREST APIと並行して）GraphQLを使用しています。GraphQLはREST APIのようにWordPressに組み込まれていませんが、プラグインを使用すれば統合できます。
GraphQLはまた、優れた最適化によりデータの過小取得や過剰取得を回避します。1回のクエリで必要なデータを正確に取得できるため、ネットワークやサーバーの負担が劇的に軽減されます。
SvelteKitとは
SvelteKitは、Next.jsやReactに似たオープンソースのフロントエンドフレームワークであるSvelteをベースに構築されたウェブフレームワークです。ウェブアプリの開発プロセスを合理化することが目的であり、ヘッドレスWordPressサイトに特化しているわけではありませんが、様々な機能を揃えています。
SvelteKitはHTML、CSS、Javascriptのみで構築されているため、他のフレームワークと併用して完全に動的なフロントエンドアプリを作成したり、静的サイトを構築したりすることができます。
Svelteは2016年にリリースされ、現在も継続的に更新が行われています。ウェブフレームワークであるSvelteKitは、その数年後の2020年に開発されました。どちらもシンプルで美しいコードが書けることから、ウェブ開発業界で高く評価されています。
ヘッドレスWordPressにSvelteKitを使用する利点
ヘッドレスWordPressサイトには、動作が複雑な部分がいくつかありますが、SvelteKitのシンプルな設計のおかげで、これらの問題を最小限に抑えることができます。これにより、ヘッドレスWordPressのセットアップがスムーズになります。
その他にも、SvelteKitには以下のような特長があります。
- JavaScriptのみ─他のフレームワークとは異なり、依存関係や複雑なセットアップを懸念する必要はほぼなし。多くの場合設定は不要で、Javascriptが動作する場所であればどこでも動作する。
- フレームワークの制限なし─そのシンプルさゆえに他のフレームワークとも相性が良好。ヘッドレスWordPressサイトにあらゆる技術を使用することができる。
- 拡張可能─自分の環境でシームレスに動作しない場合も、拡張して簡単に修正できる。
- 軽量で習得が容易─Javascript、HTML、CSSのみで書かれているため、従来のフレームワークと比べてかなり軽量で使用も簡単。コンパクトで簡潔なコンポーネントでクリーンかつ美しく、シンプルなコードを書くことができる。
- シンプルなデータ取得─SvelteKitと相性の良いGraphQLによって、WordPressからのデータ取得プロセスが簡素化され、シンプルで効果的なクエリを作成できる。
- 認証が簡単─最近ではNextAuth.jsのサポートも実装。
- サーバーサイドレンダリング（SSR）と静的サイトジェネレーター（SSG）─複数のページレンダリング方法を提供しているため、静的サイトの生成も簡単。静的サイトか動的アプリケーションのいずれかを簡単に作成できる。
- サイトマップ─ヘッドレスサイトのサイトマップ作りは時に複雑になることも。SvelteKitの場合は、エンドポイントを使用してサイトマップを動的にレンダリングできる。
- 活発なコミュニティ─SvelteKitを愛用している開発者は多数存在し、ヘルプが必要な場合や意見交換を行いたい場合は、インターネットやSNSで簡単に仲間を見つけることができる。6万人以上が参加するDiscordサーバーもあり。
SvelteKitを使用してヘッドレスWordPressサイトを構築する方法
それでは、ここからはSvelteKitを使用したヘッドレスWordPressサイトの構築方法を見ていきます。ローカル環境でWordPressをセットアップし、マシンにSvelteKitをインストールして、ヘッドレスWordPressサイトをKinstaにデプロイするという手順になります。
1. WordPressサイトをセットアップする
マシンにローカルWordPress環境をセットアップする方法は多数あります。すでにMyKinstaアカウントをお持ちの場合は、MyKinstaまたはKinsta APIを使用して作成可能です。
今回は例として、ローカルWordPress開発ツールであるDevKinstaを利用します。DevKinstaは、Kinstaを利用していなくても無料で使用できます。
上のリンクからDevKinstaをダウンロードしてください。インストール手順やその他の情報は、DevKinstaの公式ドキュメントをご覧ください。
DevKinstaをインストールして設定したら、以下の手順に従ってローカルのWordPress環境を作成します。
- PHPバージョンやマルチサイトなどの設定を変更するには、「新規WordPressサイト」または「上級設定」を選択する。
- サイト名やユーザー名、パスワードなどの情報を入力して、「サイト作成」をクリックし、ローカルのWordPress環境が設定されるのを待つ。
- 「サイト情報」画面に移動して「サイトのホスト」（サイトにアクセスするためのローカルURL）をメモしておく。
- 「サイトを開く」をクリックして、http://<yoursite>.local/wp-adminに移動するか、「WP管理画面」をクリックしてページを開き、設定した認証情報でログインする。
2. WordPressをヘッドレス化する準備をする
アクセスした管理画面で、WordPressをヘッドレス化する前にいくつかの作業を行います。
まずはSvelteKitの機能の多くを支えるGraphQLのために、WPGraphQLをインストールする必要があります。このプラグインを使用すると、NextJS、Gatsby、そしてSvelteKitのようなヘッドレスJavaScript技術との接続にGraphQLフレームワークを使用できます。
「プラグイン」＞「新規追加」でWPGraphQLをインストールすると、管理画面の左側に「GraphiQL IDE」メニューが出現し、WordPress内でGraphQLクエリを書くことができるようになります。
次に、パーマリンクを修正します。デフォルトでは「基本」になっていますが、これはRESTが依存するJSON APIや、Next.jsの制約によりSvelteKitで動作しません。
「設定」＞「パーマリンク設定」に移動し、「基本」を「投稿名」に変更します。
ローカルサイトのURLに「/wp-json」を追加すると、サイトのコンテンツがJSONデータとして出力されるため、変更がうまくできているかを確認できます。
また、後でRedirectionやAll In One SEO Proなどのプラグインを使用して、URLを構築したフロントエンドアプリに紐付ける必要があります。ユーザーをSvelteKitアプリにリダイレクトする準備ができたら、リダイレクトプラグインをインストールしてください。
3. SvelteKit環境のセットアップ
SvelteKitにはNode 18.13以上という基本的なシステム要件があります。フレームワークは非常に軽量なので、ほぼすべてのシステムで問題なく動作しますが、Nodeと一緒に必ずnpmもインストールしてください。
これでSvelteKitをシステムにインストールできます。詳しい手順はこちらをご覧ください。今回はかいつまんで手順をご紹介します。
まずは、create-svelteパッケージを使用してSvelteをインストールします。プロジェクト名（「my-svelte-app」）は任意のものを割り当ててください。このコマンドを実行すると、基本設定が行われたSvelteアプリが生成されます。
npm create svelte my-svelte-app様々なプロンプトが表示されるため、「Yes」または「No」でSvelteKit環境を作成していきます。
インストールが必要なnpmパッケージがいくつかあります。以下のコマンドでプロジェクトのルートにアクセスしてください（「my-svelte-app」は実際のプロジェクト名に置き換える）。
cd my-svelte-app/次に以下のコマンドを実行して、必要なパッケージをインストールします。
npm install最後に、このコマンドで開発サーバーを実行します。
npm run devサーバーが起動したら、http://localhost:3000でアプリを確認しましょう。
また、ここでデフォルトのページレンダリングではなく、静的レンダリングに切り替えて、静的SvelteKitサイトを生成することも可能です。
以上で、SvelteKitの設定が完了です。続いて、ヘッドレスサイトを構築していきます。
4. GraphQLを使用してSvelteKitとWordPressを統合する
GraphQLとSvelteKit環境を試す際には、以下のヒントを念頭に置いてください。
- Svelte/SvelteKitに関する基本情報を確認し、フレームワークの機能をよく理解する。今回の手順は対話形式になっているため、自分でコードを試すことができる。
- GraphQL APIの設定が難しい場合は、SvelteKit GraphQLパッケージをインストールする。
- WPGraphQLの一部として、標準プラグインに付属しているwp-graphql-gutenbergを介してGutenbergのブロックを使用することもできる。
- REST APIはSvelteKitでもある程度使えるが、最も相性が良いのはGraphQLの拡張機能。REST APIを使用したい場合は、GitHubのSvelteKitのヘッドレスWordPressデモをチェック。
SvelteKitとWordPressを統合する際のデータの読み込みとルーティングについてはこちらをご覧ください。WordPressに接続してヘッドレスアプリを構築する方法は多数あります。
5. WordPressとSvelteKitをKinstaにデプロイする
ヘッドレス環境を設定してデプロイする準備ができたら、WordPressをデプロイし、フロントエンドを静的サイトにプッシュします。
前者は非常に簡単で、DevKinstaの「サイト情報」画面の「Kinstaに反映」ボタンをクリックします。MyKinstaの認証情報でログインすればすぐに完了します。
SvelteKitアプリケーションに関してもシンプルです。Kinstaでは静的サイトホスティングを無料提供しており、SvelteKitでビルドされたあらゆるアプリをホストすることができます。手順は以下のとおりです。
- SvelteKitアプリケーションをBitbucket、GitHub、またはGitLabにプッシュする。
- MyKinstaアカウントを作成し、MyKinstaにログインする。
- 選択したGitサービスにログインして、Kinstaを認証する。
- MyKinstaで「静的サイト」＞「サイトの追加」を選択。
- アプリケーションのリポジトリを選択し、適切なビルド設定を追加する。
- 「サイトを作成」をクリックする。
静的サイトでは対応できない複雑なアプリケーションを開発する場合は、アプリケーションホスティングでのデプロイがお勧めです。
以上がヘッドレスWordPressサイトをデプロイする手順です。
まとめ
ヘッドレスCMSは、近年注目を集めていますが、その設定は必ずしも簡単ではありません。SvelteKitはウェブ開発をよりクリーンでシンプルにするために設計されたフレームワークで、ヘッドレスWordPressサイトの構築にお勧めです。
ローカルのWordPress環境を作成し、SvelteKitと連携して、最後にKinstaにデプロイしたら、ヘッドレスWordPressサイトを強化していきましょう。
静的サイト、動的ウェブアプリケーションのいずれを開発するにしても、SvelteKitは理想的な選択肢になります。また、Kinstaのアプリケーションホスティングまたは無料の静的ホスティングは、Google CloudとCloudflare上に構築された光速インフラストラクチャ上に構築されており、静的サイトや動的なアプリケーションの運用にぴったりです。
SvelteKitを使用したことはありますか？ご質問やご意見がありましたら、以下のコメント欄でお知らせください。
コメントを残す