paiza開発日誌paiza開発日誌IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。ITエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。開発ネタ-Webサービス紹介Tweetどうも、まさとらん(@0310lan)です!今回は、誰でも手軽にノーコードでGraphQLを利用したAPIを自作できるWebサービスをご紹介します!APIの骨組みをマウスでポチポチと設定していくだけの簡単操作が特徴で、無料でホスティングもしてくれるので別途サーバを用意する必要もありません。ヘッドレスCMSのような使い方や、Jamstackなどにも活用できるサービスとなっています。free】ボタンをクリックして無料のユーザー登録をしておきます。ユーザー名、メールアドレス、パスワードを設定すれば登録完了です。(※Google、GitHubアカウントからでも登録可能)登録したメールアドレス宛に認証リンクが送られてくるので、リンクをクリックして画面に表示される【CONTINUE】ボタンをクリックすればOKです!以下のようなダッシュボード画面が表示されるはずです。この画面からGraphQLを利用した独自のAPIを構築したり、複数のプロジェクトを管理したりできるようになります。■独自のAPIを作ってみよう!「Apirocket」の基本的な使い方を解説するために、単純なデータ構造を持ったAPIを1つ作成してみましょう。今回は、サンプル例としてさまざまなプログラミング言語の情報を返してくれるAPIを作ってみます。最初にダッシュボードから新規プロジェクトを作成しましょう。プロジェクトの名称・概要などを入力して緑色のボタンをクリックします。Collection】ボタンをクリックして新しいコレクションを追加しましょう。name」を設定します。name」は何でも構いませんが、今回はプログラミング言語の情報を返すAPIなので「言語データ」としました。name」は、あとでクエリを記述する際に利用するので英文字で設定するようにしましょう。次に【Model】タブをクリックして、どのような情報(データ)を含めるのかを決めていきます。今回は以下のような情報を返すAPIを作ってみることにします。field】ボタンをクリックすると、追加できるフィールドが表示されます。プログラミング言語の名称を追加したいので、【String】ボタンをクリックして文字列データを追加しましょう。name」を設定するのですが、今回は【Name】としました。同じように他のフィールドも次のように追加していきましょう。collection】ボタンをクリックして完了です!たったこれだけの作業ですが、APIの骨組みはすでに完成しています。■サンプルデータを入力してみよう!ここまでの作業で独自のAPIを作成しましたが、中身のデータが入っていないので空っぽの状態になっています。そこで、いくつかサンプルのデータを入力してみましょう。コレクションのトップ画面にある【New】ボタンをクリックします。するとさきほど設定したフィールドの項目が入力できるようになっています。プログラミング言語の名称、リリース年、関連URLなどを設定していきましょう。画像については項目にファイルをドラッグ&ドロップするか、ボタンをクリックして画像ファイルを選択できます。最後にプログラミング言語の概要を入力して【Save】ボタンをクリックしましょう!これで最初のデータが登録されました。コレクションの画面を見てみるとデータが1つ登録されているのが分かります。表示されているのがIDだけなので何のデータなのか分かりにくいですね。そこで表示設定を少し変えてみましょう。画面右上にある【Settings】ボタンをクリックしてください。【Settings】タブが表示されていることを確認します。Columns】の項目で、「Name」の項目を追加してみましょう。changes】ボタンをクリックします。コレクションの画面を見ると、登録したプログラミング言語の名称が表示されているのが分かります。これで何のデータが登録されているのか分かりやすくなりました。あとは同じようにデータをどんどん登録していくだけです!いくつかプログラミング言語のデータを登録したら、実際に動作するかを確認していきましょう。■APIをテストしよう!「Apirocket」を利用すると、自分で作成したAPIが正しく動作するかをグラフィカルなエディタを利用してテストできるのでご紹介しておきます。Explorer】ボタンをクリックするだけです!GraphQLを利用したAPIのテストができるエディタが表示されます。画面左側のエクスプローラーで取得したい項目を選択すると、画面右側のエディタにGraphQLのクエリが自動的に生成される仕組みです。(※クエリは自分で記述したり編集したりすることも可能)そして、画面上部にある実行ボタンをクリックすると、取得した結果が表示されます。登録したデータが表示されていたら、正しく動作していることになります。自動的に生成されたクエリは、実際にプログラムの中で利用できるのでコピーして使うことができます。そこで、簡単なサンプル例としてJavaScriptから利用する方法について見ていきましょう!■JavaScriptからAPIを使ってみよう!「Apirocket」で作成したAPIは、さまざまなプログラミング言語から利用できます。今回はサンプル例としてJavaScriptを利用したデータの取得方法についてご紹介します。JavaScriptの基本は、paizaラーニングの「JavaScript入門講座」で学ぶことができます。JavaScriptをこれから学んでみたいという方はぜひごらんください。最初にプログラムから利用するために専用の「APIキー」を取得する必要があります。これはプロジェクト画面のトップページから【Settings】ボタンをクリックします。Only」と記載されているAPIキーになります。これは読み込み専用のAPIキーで、単純にデータを取得するだけの目的に最適です。console.log(json.data))APIキーは「Authorization」プロパティに「Bearer」を付与して空白を挿入したあとに貼り付けるようにしましょう。「body」プロパティにGraphQLのクエリを指定するのですが、これは「Apirocket」のテストをしたときに生成されたクエリをコピペすればOKです!たとえば、登録されているプログラミング言語の「id」「name」「url」をすべて取得する場合は以下のようなクエリになります。}}`;このプログラムを実行すると、コンソールログに取得したデータが出力されます!これで自分で作成したAPIが正しく動作していることが確認できましたね。このように「Apirocket」を利用すると簡単にGraphQLを利用したAPIを構築できるようになります。ホスティング自体も提供してくれるので開発〜運用までこのサービス1つで完結できるのも便利な点でしょう。今回のサンプルプログラムは以下のリンクからすべて閲覧できますので、ぜひ参考にしてみてください!<参考リンク>「Apirocketを利用したサンプルプログラム」GitHub■動画&ゲームでプログラミングが学べる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開発に役立ててみてください!<参考リンク>「Apirocket」公式サイト「paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。詳しくはこちらそしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。記事内に記載している情報は、記事公開時点でのものとなります。reserved.引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。