Shopifyは、ノーコードでオンラインショップを構築できるサービスを提供しています。他にも外部開発者向けのAPIも提供されており、拡張機能を開発できるような働きもあり、多くの方が利用しています。数あるAPIの中で注目を集めているのが「GraphQL」です。
この記事ではGraphQLとは何なのか？GraphQLを使用してできることなどについて詳しく解説しています。ぜひ参考にしてください。
Contents
- 1 Shopifyとは？
- 2 GraphQLとは？
- 3 GraphQLのメリット・デメリット
- 4 Admin APIはインターフェイスとして2つ用意されている
- 5 GraphQLとRESTの違いとは？
- 6 GraphQL admin APIでできることとは？
- 7 ShopifyでGraphQLを利用するためのツールについて
- 8 開始時に必要なこととは？
- 9 Shopify GraphQL統合開発環境（IDE）について
- 10 スタンドアロンHTTPクライアントを使用
- 11 GraphQLはさまざまなサービスで利用されている
- 12 まとめ：ShopifyでのGraphQLについて～できることや利用のためのツールとは？～
無料Shopify相談
ご希望の方はこちら
Shopifyとは？
公式サイト Shopify
Shopifyとは、簡単にECサイトを開設できるECプラットフォームです。専門知識がなくてもサイトの解説や運営でき、国内だけでなく海外でもオンライン販売ができます。多言語・多通貨に対応しているため、175か国以上で運営され、Amazonに次ぐ売上のシェアを誇ります。ECサイトだけでなく、実店舗の情報も一括管理ができ、オムニチャネルへの対応が可能な点が一番の特徴です。
デザインもテンプレートが豊富にあり、初めてやる方や専門知識がない方でもデザインや機能の拡張性を使用して多店舗との差別化を図れます。他のECモールでは制限が多い中、Shopifyは自由度が高く自社ブランドを確率しやすいことから、多くの方に支持をうけています。
GraphQLとは？
GraphQLとは、クライアントからWebサーバーに対するリクエストを行うAPIの一種です。例えば、日頃わからないことがあるとスマホやパソコンで検索をかけて調べると思います。そのときに検索窓に知りたいキーワードを入力して検索をかけます。この検索をかけたときに使われるのが「API」なのです。GraphQLは2012年にFacebook社が開発し、2015年にオープンソース化されました。
一番の特徴は、JavaScriptやRubyなど様々な言語に対応し、データを過不足なく取得できることです。GraphQLの開発に至った経緯として、Facebook社はRESTとFacebook Quert Languageを運用していました。その中のRESTは、特定のデータだけを参照するのが難しく、処理が複雑化し速度が遅くなることが見られました。
特定のデータを参照しつつ、マルチに言語を対応し、処理速度を速めることが課題として上げられ、これらを解決するためにGraphQLが開発されました。
GraphQLのメリット・デメリット
GraphQLを採用しているところがありますが、メリット・デメリットは他のAPIと比較してどのようなものがあるのかみてみましょう。
GraphQLのメリット
GraphQLのメリットは以下の通りです。
- 通信効率がいい
- 少ないリクエストで複数のリソースにアプローチできる
- 既存のクエリを残しつつAPIの更新ができる
GraphQLはHTTP構造に依存しないので、複数のページに必要なデータを得られます。そのためリクエストが少なく済み、ハードウェアにかかる負担が最小限で抑えられるため、結果的に通信効率がよくなるのです。他にもフィールドの削除を自ら行わない限りクエリが損なわれないため、既存の状態を残しつつAPIの更新ができます。
GraphQLのデメリット
GraphQLは既存のAPIの問題・課題点を克服できましたが、デメリットもあります。GraphQLは誕生してから日が浅いため、GraphQLに関するノウハウが少なく、関連情報が少ないことです。
例えばキャッシュやパフォーマンス分析では他のAPIではエンドポイント毎での対応ができますが、GraphQLはエンドポイントが1つしかなく、試行錯誤の状況です。他にもGraphQLはキャッシュの実装が難しいのもデメリットの一つです。
RESTful APIでは、URLをキーとしてレスポンスをキャッシュは可能ですが、GraphQLではクエリごとに異なるレスポンスを返すため、URLだけではキャッシュの判断ができません。
また、複雑なクエリを実行する際にパフォーマンスの問題が発生する可能性があり、サーバー側で多くの処理やデータベースへのアクセスが必要になります。これらの問題を解決するためには、GraphQLサーバーの設計や最適化に注意を払う必要があります。
Admin APIはインターフェイスとして2つ用意されている
ShopifyはいくつかのAPIを扱いますが、商品や注文情報はAdmin APIを使用します。Admin APIは「GraphQL」と「REST」の２つが用意されています。
2つが用意されている理由として、商品の在庫管理や情報の書き込みを行う時は「REST」、さらに必要な情報のみを抽出し、処理速度を加速させるために「GraphQL」を採用しているのです。2つの違いや細かい点について次の章で詳しく説明します。
GraphQLとRESTの違いとは？
2つの違いについて表にまとめました。
| GraphQL | REST | |
| 設計に関する考え方 | クライアントが必要なデータを指定 | サーバーが提供するリソースにアクセス |
| エンドポイント | 1つ | 複数 |
| データ取得 | 必要なデータだけ取得 | 1度に全てのデータを取得 |
| リクエスト数 | 1度のリクエストで複数のデータを取得 | 各リソースごとにリクエストが必要 |
簡単にまとめるとGraphQLはピンポイントで情報を取得するのに対し、RESTは広範囲に情報を取得するという違いがあります。
お互いに足りない部分を補うようなイメージがあるGraphQLとREST。効率的に情報を引き出すにはGraphQLが優位だと考えられます。
GraphQL admin APIでできることとは？
GraphQL admin APIでできることは以下の通りです。
- 在庫管理など量が多ければ多いほど、一括処理で効率的に行える
- 翻訳APIはGraphQLのみ
- 商品メディアや動画、3Dモデルを使えるのはGraphQLのみ
- リクエストが長くて多い機能や注文編集はGraphQLだけで可能
- 関税と税金のAPI・開発者プレビューはGraphQLのみ
今後もGraphQLのみでできる機能は沢山増えてきます。Shopify APIリリースはShopifyの開発者チェンジログで確認できます。
ShopifyでGraphQLを利用するためのツールについて
ShopifyでGraphQLを利用するためのツールとして
- リファレンス
- Shopify GraphQL Admin API explorer
の2つがあります。
リファレンス
リファレンスは、Admin APIを使用するとShopify管理機能を拡張および強化するアプリとして統合を構築できます。リソース取得に使う「query」や追加・更新・削除などの取得に「mutation」に使われます。
Shopify GraphQL Admin API explorer
Shopify GraphQL Admin API explorerは、queryやmutationのテストが行えます。Explorerタブをクリックすると、画面左側にGraphQLが表示されます。
使用したいGraphQLクエリやレスポンスに欲しい数値を入力することで、GraphQLクエリを作成できます。他にもPreviewタブをクリックすると、GraphQLクエリの整形も可能です。完成したら再生タグをクリックすると、サンプルのレスポンスを確認できます。エラーがあれば併せて確認することも可能です。
開始時に必要なこととは？
上記に必要なツールの一つとして紹介した「Shopify Admin API GraphiQL Explorer」が必要です。GraphQLを使ったShopify内にあるAdmin APIを探索してくれます。「Shopify Admin API GraphiQL Explorer」内にある「エクスプローラー」をクリックします。クリックすると「チェックボックス」と「フィールド」が表示され、これら2つを使用した GraphQL クエリを構築できます。
他にもスキーマを検索することで、説明やサポートがされているフィールドを表示することも可能です。
Shopify GraphQL統合開発環境（IDE）について
Shopify GraphQL統合開発環境（IDE）はShopifyのAPIを使用し、アプリやテーマを開発するために使われるツールです。Shopify GraphQL IDEは、GraphQLクエリや変数を「作成」「実行」「テスト」の3つをそれぞれ行え、Shopifyのスキーマやドキュメントにも簡単にアクセスできます。
他にもブラウザやデスクトップアプリとしての利用も可能で、開発者はより効率的にShopifyのAPIを利用することが可能です。
スタンドアロンHTTPクライアントを使用
スタンドアロンHTTPクライアントを使用すると、Webサーバーに対してHTTPリクエストを送信したり、HTTPレスポンスの受信が可能です。Webブラウザや他のアプリケーションとは独立して動作するプログラムを果たします。
スタンドアロンHTTPクライアントの例としては、curlやwgetなどがあり、コマンドラインからHTTPリクエストを作成したり、ファイルをダウンロードしたりするのに便利です。
GraphQLはさまざまなサービスで利用されている
GraphQLは、Facebookを筆頭に多くの企業が利用しています。
GraphQLを利用している企業は
- 楽天
- Netflix
などがあげられます。楽天はインターネット関連サービスを手掛ける企業の一つで、日本ではGraphQLに移行した先駆者といってもいいでしょう。GraphQLに関する情報が少ない中導入を済ませ、ECの中でもトップを走る大企業です。NetflixはもともとRESTを使用していました。
しかし、サービス内容が大きくなるにつれ、サービス過程で生じる課題が複雑化しました。
複雑化したサービスを簡略化するためにGraphQLを導入し、問題を解決と同時に、フロントエンジニアとバックエンドエンジニアの連携を強化しました。
TwitterもGraphQLを導入した企業の一つです。ツイートやトレンドなど常にデータをやり取りする機会も増え、データ量を抑えて通信効率の改善を強いられました。利用者に対するストレスを軽減させるためにもGraphQLを導入し、より多くのサービスの導入に努められるようになりました。
まとめ：ShopifyでのGraphQLについて～できることや利用のためのツールとは？～
ShopifyでのGraphQLは、RESTで処理しきれない部分や問題点を解決できる術をもっています。GraphQLはレスポンスが速く、全てのクエリに対して1つのエンドポイントで効率よくデータアクセスができます。
数多くの企業がGraphQLを導入を進めていく中で、まだまだ発展途上のGraphQLですが、これからもさらなる進化を遂げていきます。RESTの方が性能が悪いというわけではないですが、それぞれの長所・短所を理解し、上手く使分けることでアプリの向上性が見えてくるはずです。実際に使用してみて、GraphQLの魅力を体験してみてください。
無料Shopify相談
ご希望の方はこちら
Shopify制作のお見積もり・ご相談
また、初めてのお取組みで不安のある方などもご不明点などはお気軽にご連絡ください。
に相談する
