WordPress REST APIの使い方：外部連携・フロント開発の基礎

RREST APIとは何か？

REST API（Representational State Transfer API）は、HTTPリクエストを介してサーバーのリソースにアクセス・操作するための仕組みです。WordPressでは、標準機能としてREST APIが組み込まれており、特別なプラグインを導入しなくても以下のようなエンドポイントが利用可能です：

• 投稿一覧取得：GET /wp-json/wp/v2/posts
• 特定投稿の取得：GET /wp-json/wp/v2/posts/{ID}
• 投稿の作成：POST /wp-json/wp/v2/posts
• 投稿の更新：PUT /wp-json/wp/v2/posts/{ID}
• 投稿の削除：DELETE /wp-json/wp/v2/posts/{ID}

これらは、JavaScriptや他言語のアプリケーションからも簡単にアクセスでき、SPA（Single Page Application）やヘッドレスCMSとしての活用にも適しています。

認証の方法とセキュリティの注意点

REST APIでデータの作成や更新などを行う場合、認証が必要になります。代表的な認証方法は以下の通りです：

1. Cookie認証（ログインユーザーのみ）

通常のWordPressログインセッションを使う方法です。主に管理画面と同じドメイン内で使用されます。

2. Application Passwords（推奨）

WordPress 5.6以降で利用可能。ユーザー設定画面からアプリケーション用のパスワードを発行できます。

curl --user "your-username:application-password" \
     -X POST -H "Content-Type: application/json" \
     -d '{"title":"新規投稿","status":"publish"}' \
     https://example.com/wp-json/wp/v2/posts

3. JWT認証（プラグイン導入が必要）

より高度なAPI連携をしたい場合に便利なトークンベースの認証方式です。

セキュリティ上の注意： REST APIを通じて投稿の作成やユーザー情報の取得・更新を行う場合は、必ずHTTPSを使用し、認証情報が漏洩しないように対策を講じましょう。また、必要のないエンドポイントは無効化し、認可されたユーザーのみに操作を許可するように設計してください。

JavaScriptからの活用例（fetch API）

フロントエンド開発でよく使うのがfetchを用いた非同期リクエストです。以下は投稿一覧を取得する例です：

fetch('https://example.com/wp-json/wp/v2/posts')
  .then(response => response.json())
  .then(data => {
    data.forEach(post => {
      console.log(post.title.rendered);
    });
  });

投稿をHTMLに描画することも簡単です：

const container = document.getElementById('post-list');
fetch('https://example.com/wp-json/wp/v2/posts')
  .then(res => res.json())
  .then(posts => {
    container.innerHTML = posts.map(post => `
      <article>
        <h2>${post.title.rendered}</h2>
        <div>${post.excerpt.rendered}</div>
      </article>
    `).join('');
  });

カスタム投稿タイプ・タクソノミーとの連携

REST APIは、カスタム投稿タイプ（CPT）やカスタムタクソノミーもサポートしています。CPTをAPIで公開するには、register_post_type()の設定で'show_in_rest' => trueを指定します。

register_post_type('book', [
  'label' => 'Books',
  'public' => true,
  'show_in_rest' => true,
  'supports' => ['title', 'editor', 'thumbnail']
]);

これにより、/wp-json/wp/v2/book のようなエンドポイントが利用可能になります。

まとめ：WordPress REST APIは可能性の宝庫

WordPress REST APIは、フロントエンドとバックエンドを分離したモダンな開発スタイルや、外部システムとの柔軟な連携を可能にする強力なツールです。認証方法やエンドポイントの構成、JavaScriptからの操作方法を理解すれば、WordPressを単なるCMSとしてではなく、強力なバックエンドAPIとして活用することができます。

セキュリティ対策を怠ると、REST APIを経由して不要な情報が公開されたり、改ざんされるリスクがあります。開発時には、最小限の公開設定、堅牢な認証、HTTPSの使用を基本として、安全性にも十分に配慮しましょう。

今後は、GraphQLとの比較や、VueやReactとの統合例なども紹介していきたいと思います。

WordPress 5.6以降で利用可能。ユーザー設定画面からアプリケーション用のパスワードを発行できます。

curl --user "your-username:application-password" \
     -X POST -H "Content-Type: application/json" \
     -d '{"title":"新規投稿","status":"publish"}' \
     https://example.com/wp-json/wp/v2/posts

3. JWT認証（プラグイン導入が必要）

より高度なAPI連携をしたい場合に便利なトークンベースの認証方式です。

JavaScriptからの活用例（fetch API）

フロントエンド開発でよく使うのがfetchを用いた非同期リクエストです。以下は投稿一覧を取得する例です：

fetch('https://example.com/wp-json/wp/v2/posts')
  .then(response => response.json())
  .then(data => {
    data.forEach(post => {
      console.log(post.title.rendered);
    });
  });

投稿をHTMLに描画することも簡単です：

const container = document.getElementById('post-list');
fetch('https://example.com/wp-json/wp/v2/posts')
  .then(res => res.json())
  .then(posts => {
    container.innerHTML = posts.map(post => `
      <article>
        <h2>${post.title.rendered}</h2>
        <div>${post.excerpt.rendered}</div>
      </article>
    `).join('');
  });

カスタム投稿タイプ・タクソノミーとの連携

REST APIは、カスタム投稿タイプ（CPT）やカスタムタクソノミーもサポートしています。CPTをAPIで公開するには、register_post_type()の設定で'show_in_rest' => trueを指定します。

register_post_type('book', [
  'label' => 'Books',
  'public' => true,
  'show_in_rest' => true,
  'supports' => ['title', 'editor', 'thumbnail']
]);

これにより、/wp-json/wp/v2/book のようなエンドポイントが利用可能になります。

まとめ：WordPress REST APIは可能性の宝庫

WordPress REST APIは、フロントエンドとバックエンドを分離したモダンな開発スタイルや、外部システムとの柔軟な連携を可能にする強力なツールです。認証方法やエンドポイントの構成、JavaScriptからの操作方法を理解すれば、WordPressを単なるCMSとしてではなく、強力なバックエンドAPIとして活用することができます。

今後は、GraphQLとの比較や、VueやReactとの統合例なども紹介していきたいと思います。