どうも、まさとらん（@0310lan）です！
今回は、誰でも手軽にノーコードでGraphQLを利用したAPIを自作できるWebサービスをご紹介します！
APIの骨組みをマウスでポチポチと設定していくだけの簡単操作が特徴で、無料でホスティングもしてくれるので別途サーバを用意する必要もありません。
ヘッドレスCMSのような使い方や、Jamstackなどにも活用できるサービスとなっています。ご興味ある方はぜひ参考にしてみてください！
【 Apirocket 】
■「Apirocket」の使い方
それでは「Apirocket」をどのように使えばいいのか詳しく見ていきましょう！
まずは、サイトにアクセスして画面上部にある【Try for free】ボタンをクリックして無料のユーザー登録をしておきます。
ユーザー名、メールアドレス、パスワードを設定すれば登録完了です。
（※Google、GitHubアカウントからでも登録可能）
登録したメールアドレス宛に認証リンクが送られてくるので、リンクをクリックして画面に表示される【CONTINUE】ボタンをクリックすればOKです！
以下のようなダッシュボード画面が表示されるはずです。
この画面からGraphQLを利用した独自のAPIを構築したり、複数のプロジェクトを管理したりできるようになります。
■独自のAPIを作ってみよう！
「Apirocket」の基本的な使い方を解説するために、単純なデータ構造を持ったAPIを１つ作成してみましょう。
今回は、サンプル例としてさまざまなプログラミング言語の情報を返してくれるAPIを作ってみます。
最初にダッシュボードから新規プロジェクトを作成しましょう。
プロジェクトの名称・概要などを入力して緑色のボタンをクリックします。（「Locales」の項目はJapaneseを選択）
プロジェクト画面が表示されるので、【New Collection】ボタンをクリックして新しいコレクションを追加しましょう。
コレクションの【Info】タブが表示されるので、「Display name」「Database name」を設定します。
「Display name」は何でも構いませんが、今回はプログラミング言語の情報を返すAPIなので「言語データ」としました。
「Database name」は、あとでクエリを記述する際に利用するので英文字で設定するようにしましょう。
次に【Model】タブをクリックして、どのような情報（データ）を含めるのかを決めていきます。
今回は以下のような情報を返すAPIを作ってみることにします。
- プログラミング言語の名称
- リリース年
- 関連WebサイトのURL
- イメージ画像
- 言語の概要
【Add new field】ボタンをクリックすると、追加できるフィールドが表示されます。
まずはプログラミング言語の名称を追加したいので、【String】ボタンをクリックして文字列データを追加しましょう。
「Display name」を設定するのですが、今回は【Name】としました。
同じように他のフィールドも次のように追加していきましょう。
- 【プログラミング言語の名称】→String
- 【リリース年】→Integer
- 【関連WebサイトのURL】→String
- 【イメージ画像】→Image
- 【言語の概要】→TextArea
以下のように追加できたら【Create collection】ボタンをクリックして完了です！
たったこれだけの作業ですが、APIの骨組みはすでに完成しています。
■サンプルデータを入力してみよう！
ここまでの作業で独自のAPIを作成しましたが、中身のデータが入っていないので空っぽの状態になっています。そこで、いくつかサンプルのデータを入力してみましょう。
コレクションのトップ画面にある【New】ボタンをクリックします。
するとさきほど設定したフィールドの項目が入力できるようになっています。
プログラミング言語の名称、リリース年、関連URLなどを設定していきましょう。
画像については項目にファイルをドラッグ＆ドロップするか、ボタンをクリックして画像ファイルを選択できます。
最後にプログラミング言語の概要を入力して【Save】ボタンをクリックしましょう！
これで最初のデータが登録されました。
コレクションの画面を見てみるとデータが1つ登録されているのが分かります。
ただし、表示されているのがIDだけなので何のデータなのか分かりにくいですね。
そこで表示設定を少し変えてみましょう。
画面右上にある【Settings】ボタンをクリックしてください。
【Settings】タブが表示されていることを確認します。
画面下部にある【Data Grid Columns】の項目で、「Name」の項目を追加してみましょう。
追加されたら「Name」の項目をドラッグ＆ドロップで上部に配置するようにして【Save changes】ボタンをクリックします。
コレクションの画面を見ると、登録したプログラミング言語の名称が表示されているのが分かります。
これで何のデータが登録されているのか分かりやすくなりました。
あとは同じようにデータをどんどん登録していくだけです！
いくつかプログラミング言語のデータを登録したら、実際に動作するかを確認していきましょう。
■APIをテストしよう！
「Apirocket」を利用すると、自分で作成したAPIが正しく動作するかをグラフィカルなエディタを利用してテストできるのでご紹介しておきます。
使い方は簡単で、画面上部にある【API Explorer】ボタンをクリックするだけです！
GraphQLを利用したAPIのテストができるエディタが表示されます。
画面左側のエクスプローラーで取得したい項目を選択すると、画面右側のエディタにGraphQLのクエリが自動的に生成される仕組みです。
（※クエリは自分で記述したり編集したりすることも可能）
そして、画面上部にある実行ボタンをクリックすると、取得した結果が表示されます。
登録したデータが表示されていたら、正しく動作していることになります。
自動的に生成されたクエリは、実際にプログラムの中で利用できるのでコピーして使うことができます。そこで、簡単なサンプル例としてJavaScriptから利用する方法について見ていきましょう！
■JavaScriptからAPIを使ってみよう！
「Apirocket」で作成したAPIは、さまざまなプログラミング言語から利用できます。今回はサンプル例としてJavaScriptを利用したデータの取得方法についてご紹介します。
なおJavaScriptの基本は、paizaラーニングの「JavaScript入門講座」で学ぶことができます。JavaScriptをこれから学んでみたいという方はぜひごらんください。
まず最初にプログラムから利用するために専用の「APIキー」を取得する必要があります。
これはプロジェクト画面のトップページから【Settings】ボタンをクリックします。
【API Keys】タブを開くと専用のAPIキーが2つ表示されますが、利用するのは「Read Only」と記載されているAPIキーになります。
これは読み込み専用のAPIキーで、単純にデータを取得するだけの目的に最適です。
APIキーをコピーしたら、fetch()を利用して以下のようなJavaScriptプログラムを作ってみましょう！
fetch("https://graphql.apirocket.io", { "method": "POST", "headers": { "Content-Type": "application/json", // 以下にAPIキーを貼り付けてください "Authorization": "Bearer J3t**********Sr6G", }, "body": JSON.stringify({query: myQuery}) }) .then(response => response.json()) .then(json => console.log(json.data))
APIキーは「Authorization」プロパティに「Bearer」を付与して空白を挿入したあとに貼り付けるようにしましょう。
また、「body」プロパティにGraphQLのクエリを指定するのですが、これは「Apirocket」のテストをしたときに生成されたクエリをコピペすればOKです！
たとえば、登録されているプログラミング言語の「id」「name」「url」をすべて取得する場合は以下のようなクエリになります。
const myQuery = `query MyQuery { AllLanguages { id name url } }`;
このプログラムを実行すると、コンソールログに取得したデータが出力されます！
これで自分で作成したAPIが正しく動作していることが確認できましたね。
このように「Apirocket」を利用すると簡単にGraphQLを利用したAPIを構築できるようになります。また、ホスティング自体も提供してくれるので開発〜運用までこのサービス1つで完結できるのも便利な点でしょう。
今回のサンプルプログラムは以下のリンクからすべて閲覧できますので、ぜひ参考にしてみてください！
＜参考リンク＞
■動画＆ゲームでプログラミングが学べるpaizaラーニング
動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。
「Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
また、paizaでは『コードクロニクル』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください！
■まとめ
今回はノーコードでGraphQLを利用したAPIを自作できるWebサービスをご紹介しました。
「Apirocket」を利用すれば誰でも手軽に自分だけのAPIを構築できるうえ、複数のコレクションを連携させたり、ブログコンテンツを作成したり、Webhookを利用してワークフローを自動化したりなども可能になります。
API開発にご興味ある方も含めて、ぜひみなさんもWeb開発に役立ててみてください！
＜参考リンク＞
「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。
詳しくはこちら
そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。
詳しくはこちら
