# DrupalのJSON:API入門
December 11, 2021 2 分で読めます
[Share this blog post on LinkedIn
](https://www.linkedin.com/sharing/share-offsite/?url=https://www.acquia.com/index%2Ephp/jp/markdownify/node/26221) [Share this blog post on Twitter
](https://twitter.com/intent/tweet?text=DrupalのJSON:API入門&url=https://www.acquia.com/index%2Ephp/jp/markdownify/node/26221&via=acquia) [Share this blog post via Email
](mailto:?subject=DrupalのJSON:API入門&body=https://www.acquia.com/index%2Ephp/jp/markdownify/node/26221)
DrupalをContent as a Service（CaaS）として活用する上で欠かせない「JSON:API」モジュールの概要から使い方、既存のREST APIとの違いなど、JSON:APIを使用してシステム間でデータを渡す方法についてご紹介します。
DrupalをContent as a Service（CaaS）として活用する上で欠かせない「JSON:API」モジュールの概要から使い方、既存のREST APIとの違いなど、JSON:APIを使用してシステム間でデータを渡す方法についてご紹介します。
過去にウェビナーでも取り上げた内容です。同内容を動画でもご覧いただけます。
[](https://youtu.be/z3V5cBKPgwk "Watch でぶちゃんねる vol.11 JSON:API入門 on YouTube.")
## DrupalはAPI-First、ヘッドレスアーキテクチャに力を入れている！
まず世の中のトレンド変化として、スマートフォンアプリ、スマートウォッチ、IoT機器、スマートスピーカー、デジタルサイネージが登場し、Drupalが誕生した2000年当初では、CMSはHTMLファイルを吐き出すだけだったものが、今では同じデータをマルチチャネルに配信する基盤やソリューションが求めれています。
また技術的なトレンドとして、React、Vue、Angularなどの強力なJavaScriptフレームワークの登場により、複雑で大規模なアプリが構築できるようになりました。JavaScriptは[プログラミング言語ランキング](https://octoverse.github.com/)でも数年前から首位をキープしており、JavaScriptエンジニアの市場は急速に成長し続けています。
チャネルの増加とJavaScriptの人気に対して、Drupalは「API-First」を掲げて最高の構造化データエンジンおよびWebサービスプラットフォームに対応させる取り組みが始まっています。
Drupalでは、さまざまなWebサイトやサービスのコンテンツを1つの場所で管理し、マルチチャネルにデプロイすることが可能です。これはデカップルド・アーキテクチャ（Decoupled Architecture）およびヘッドレス（Headless）と呼ばれ、DrupalをヘッドレスCMSとして、モダンなJavaScriptアプリケーションはもちろんのこと、静的サイトジェネレーターとの組み合わせ（JAMStack）、チャットボット、スマートスピーカーなどで活用することができます。
## DrupalのWeb API
Drupalでは、コア機能に「RESTful Web Services」と「JSON:API」という二つのREST APIが存在します。どちらもコアモジュールでREST形式ということで、一体何が違うのか最初は私も疑問に思いました。
どちらを使うべきなのか、[公式ドキュメント](https://www.drupal.org/docs/core-modules-and-themes/core-modules/jsonapi-module/jsonapi-vs-cores-rest-module) では以下のように説明されています。
> Choose REST if you have non-entity data you want to expose. In all other cases, choose JSON:API.
> （公開するエンティティ以外のデータがある場合は、RESTを選択します。それ以外の場合はすべて、JSON:APIを選択します。）
JSON:APIは、従来のRESTful Web Servicesよりもシンプルに簡単にAPIを扱えることが特徴です。DrupalのコンテンツやユーザーデータなどをJSONでGET、POSTするならばおおよそJSON:APIを利用できます。
REST形式の他に、コアモジュールではないですが、コントリビュートモジュールとして公開されている「[GraphQL](https://www.drupal.org/project/graphql)」モジュールも非常に人気です。
## JSON:API とは
[JSON:API](https://www.drupal.org/docs/core-modules-and-themes/core-modules/jsonapi-module)は2016年から開発が開始され、[Drupal 8.7](https://www.drupal.org/project/drupal/releases/8.7.0)で安定版としてコアモジュールに導入されました。JSONでAPIを作成するためのオープンスタンダードな仕様「[JSON API](https://jsonapi.org)」に準拠しており、共有された規約に従うことでRESTful APIを迅速かつ一貫して作成することが可能になります。
## モジュールを有効化する
DrupalでJSON:APIを使い始めるには、まずJSON:APIの利用に必要なコアモジュールを有効にする必要があります。管理画面の拡張機能ページにて、2つのモジュールにチェックを入れ、インストールします。
- JSON:API：エンティティをJSON:API仕様に準拠したWeb APIとして公開します。
- Serialization：JSON、XMLなどの形式との間でデータをシリアライズします。
## JSON:API のURL構造
まず手始めに、JSON:APIのエントリポイント(/jsonapi)にGETリクエストを送信してみます。全てのリソースが配置されている場所を示すリンクのリストが表示されます。
```
$ curl http://drupal-9-project-9-0-1.dd:8083/jsonapi
```
```
{
"jsonapi": {
"version": "1.0",
"meta": {
"links": {
"self": {
"href": ""
}
}
}
},
"data": [],
"links": {
"action--action": {
"href": ""
},
"base_field_override--base_field_override": {
"href": ""
},
"block--block": {
"href": ""
},
"block_content--basic": {
"href": ""
},
...（省略）...
```
リソースの指定方法は、次のパターンに従います。
```
/jsonapi/{entity_type_id}/{bundle_id}[/{entity_id}]
```
以下はリソース取得の一例です。
- /jsonapi/node/article ...全ての記事(article)リソースを取得
- /jsonapi/node/article/xxx ...UUID=xxx の記事を取得
- /jsonapi/node/article/xxx/uid ...記事(UUID=xxx)と紐付く投稿者(ユーザー)リソースを取得
## JSON:API の CRUD オペレーション
JSON:APIで受け付けるHTTPメソッドは以下の4種類で、PUTは未対応です。GETのみ複数リソースを扱うことができます。
メソッド 説明 GET リソースの取得（単一 or 複数） POST 新しいリソースを作成 PATCH 既存のリソースの更新 DELETE 既存のリソースの削除 ## 高度なリソース取得方法
### その1. フィルタリング
記事一覧から、タイトルが「react」に完全一致する記事を絞り込む場合の例です。直感的で非常にシンプルに指定できます。
```
GET /jsonapi/node/article?filter[title]=react
```
実は上記は、次のように指定することもできます。 `path` は絞り込み対象のフィールドを指定します。 `operator` は比較方法を指定します。 `label-a` でKey-Valueをグループ化します。
```
GET /jsonapi/node/article?filter[label-a][condition][path]=title
&filter[label-a][condition][operator]=%3D <- "="のエンコード
&filter[label-a][condition][value]=react
```
こちらは完全一致ではなく「react」が含まれるタイトルで絞り込む場合の例です。
```
GET /jsonapi/node/article?filter[label-a][condition][path]=title
&filter[label-a][condition][operator]=CONTAINS
&filter[label-a][condition][value]=react
```
### その2. ソート
タイトルを昇順でソートする例です。
```
GET /jsonapi/node/article?sort[sort-title][path]=title
```
降順でソートする場合は次のようになります。
```
GET /jsonapi/node/article?sort[sort-title][path]=title
&sort[sort-title][direction]=DESC
```
### その3. ページネーション
記事が100件、1,000件存在するような、一度のリクエストで取ってこれない場合にページネーションを使って、10ページずつ取得する例です。
```
GET /jsonapi/node/article?page[offset]=20
&page[limit]=10
```
## ReactとDrupalのデモアプリ
ここまで基本的なJSON:APIの使い方を紹介しました。実際にJSON:APIを使用して、バックエンドにDrupal、フロントエンドにReactが採用されたサンプルアプリがDrupalize.meのgihubリポジトリに掲載されていたので、ここで紹介します。
APIの認証方法など参考にできる部分がたくさんあると思います。
## 最後に
DrupalのWeb APIが非常にアツいです！ぜひみなさんもDrupalをCMSとしてだけではなくAPIサーバーとしてもご活用ください。
[Share this blog post on LinkedIn
](https://www.linkedin.com/sharing/share-offsite/?url=https://www.acquia.com/index%2Ephp/jp/markdownify/node/26221) [Share this blog post on Twitter
](https://twitter.com/intent/tweet?text=DrupalのJSON:API入門&url=https://www.acquia.com/index%2Ephp/jp/markdownify/node/26221&via=acquia) [Share this blog post via Email
](mailto:?subject=DrupalのJSON:API入門&body=https://www.acquia.com/index%2Ephp/jp/markdownify/node/26221)
## 関連記事
[全て表示する](/index%2Ephp/jp/resources)
[Image
Blog Article 5 分
###### Drupalが20周年を迎えました
20年前の2001年1月15日に、Drupal 1.0.0がリリースされました。 Drupalの生みの親であるDries BuytaertがDrupalの歴史を振り返ります。
](/index%2Ephp/jp/blog/drupal-celebrates-20-years)
[Image
Blog Article 1 分
###### 技術書典11で『Drupal 9 おいしいレシピ集』新刊発売
技術書典10に続き、7月10日(土)から25日(日)の間で開催される技術書典11に、Drupalコミュニティの界隈の人たちでサークル出展して本を執筆しました。
](/index%2Ephp/jp/blog/published-drupal-book-in-techbookfest11)
[Image
Blog Article 2 分
###### Drupalでカスタムモジュールを作るときはExamplesモジュールを参考にしよう
開発者がモジュール開発を行う際どのようなコードを書けば良いのかの例を示すDrupalのコントリビュートモジュールとして、Examples for Developersモジュールというのもがあります。
](/jp/blog/introduction-to-examples-for-developers-module)