「Laravel + Vue.jsではじめる 実践 GraphQL入門」の全貌を大公開します！〜概要編〜

はじめまして、こんにちは。kzkohashi と申します。
FISM という会社でCTOをやっております。
（FISM社のことは、別の回で詳しくお話ししますね！）

実は、今年4月に「Laravel + Vue.jsではじめる 実践 GraphQL入門」という技術書籍を出版し、5月に勉強会も開催しました。

Laravel + Vue.jsではじめる 実践 GraphQL入門 - fisminc - BOOTH

GraphQLは、Facebook社によって2012年頃に「クエリ言語」+「スキーマ言語」で開発された 問い合わせ言語 です。
特に、GitHubが2017年に公開した GitHub API v4 がGraphQLを採用していたことで、一気に注目を集めはじめたという印象がありますね。

※FISM社では現在、GraphQL + Laravel + Vue.js + Swift で開発を進めております。ただいま絶賛 開発メンバー 募集中です！

本誌では、もっとGraphQLのすごさを知ってもらうべく入門書として執筆しました。そしてこのたび、本noteにて無料公開いたします！ドンッ！！

少しずつ公開していきますので、ぜひ最後までご覧ください。

✂︎ ---------------------

Introduction

この本を手に取った人は、GraphQLに興味がある人が大半だと思います。
私達も、なんとなくの興味からGraphQLを学び始めました。その後実装していく中で、GraphQLが強力なツールの一つになり得ると筆者全員が確信し、もっと世に広めたいという思いからこの本が生まれました。
GraphQLの凄さと未来の可能性を少しでも感じ取っていただけたら幸いです。

本の構成としては実装がメインになっていますので、手を動かしながら覚えやすいように工夫してあります。
実装するコードは、こちらにアップロードしています。

fisminc/laravel-vue-with-graphql-for-beginner

GraphQLとは

概要
GraphQLとはFacebook社によって2012年頃に開発された問い合わせ言語です。
2015年にLinux Foundationの傘下になり、「GraphQL Foundation」が設立され、オープンソースとして公開されました。GraphQLが注目を浴びたのは、2016年に GitHubのAPI の移行が有名です。

すべての中心となるスキーマ
スキーマについて話すには、GraphQLはそもそもどういう思想で作られたのか、を知るべきです。 公式ページから引用すると

Graphs are powerful tools for modeling many real-world phenomena because they resemble our natural mental models and verbal descriptions of the underlying process. With GraphQL, you model your business domain as a graph by defining a schema; within your schema, you define different types of nodes and how they connect/relate to one another.

引用: https://graphql.org/learn/thinking-in-graphs/

GraphQLのGraphとは、現実世界の現象(ビジネスドメイン)をモデル化するためのツールとしての意味を持ちます。それらを具体的にモデリングしていくのが、スキーマです。スキーマ内では、様々な種類のノードを定義し、それらが互いにどのように接続/関連するかを定義します。

例えば、ヒーロー(Hero)が友達達(Friends)を持っている状態を定義したい場合には以下のように定義します。

type Query { // 予約語 ここが起点
   hero: Hero // 独自の型が定義できる						
}
						
type Hero {
   name: String
						
friends: [Friend] // 配列も定義可能}
						
type Friend {
   name: String
   age: Int
   address: String
} 

エンジニアとして勘が良い方は、上記のスキーマを見るだけで、先ほどの図を思い浮かべることができると思います。それほどまでにスキーマは簡単で、様々な表現が可能です。
スキーマを定義することで、それに関わるバックエンドやフロントエンドの開発者がどういうデータ構造で、何が必要なのかを確認ができます。
ネット上では「スキーマ駆動開発」、「スキーマファースト」や「APIと問合わせ言語仕様がセット」など言われており、私たちも「バックエンドとフロンドエンドの契約」などと呼んでいました。要は、ここが最初の起点となる場所であり、中心となる存在です。

呼び出し側が自由にデータを取得できるクエリ
クエリとは先ほどスキーマで定義したデータを取得するための方法です。
非常にシンプルですので、以下の例を見て見ましょう。

{
 hero {
   name
   friends {
     name }
    }
  }
}

ヒーローの名前と友達達の名前を取得しています。こちらも勘が良い方はすぐに理解しやすいものとなっています。呼び出し側は欲しいデータを取得でき、必要がないデータは書かなければレスポンスに返ってきません。
詳しいやり方などについては、サーバーサイドの章で具体的に触りますので、ここでは割合させていただきます。

データの追加/更新/削除をするミューテーション
データの追加/更新/削除については、ミューテーションで定義します。

extend type Mutation {
   createHero(
       name: String
       friends: [Friend]
       ): Hero @create
}

例では、ミューテーションで定義した関数に対してどういった値を渡すべきかが定義されています。
こちらも後ほど説明があるので割合させていただきます。

[発展] GraphQLにおけるページネーション

今回私たちの本では、ページネーションについては現状は実装しておりません。 (執筆後、実装する可能性はあります)
ただ、触れないのも気になると思うので簡単に説明いたします。
以下が 公式ページ に書いてある例です。

{
  hero {
    name
    friendsConnection(first:2 after:"Y3Vyc29yMQ==") { // Connection
      totalCount
      edges { // Edge
        node { // Node
          name
        }
        cursor
      }
      pageInfo {
        endCursor
        hasNextPage
      }
    }
  }
}

上記はクエリの例で、私たちの方でスキーマに定義し直したのが以下になります。

interface friendsConnection {
  totalCount: Int
  pageInfo: PageInfo
  edges: [Edge]
}
interface Edge {
   cursor: String
   node: Node!
}
interface Node {
  name: String!
}
type PageInfo {
  startCursor: String
  endCursor: String
  hasNextPage: Boolean!
  hasPreviousPage: Boolean!
}

概念として、 Connection 、 Edge 、 Node の3つが存在します。 は、データの最小構成であり、ここでいうと友達の情報になります。Edge は、Node を複数持ち、固有のIDを振ります。
Connection は Edge をまとめ、さらにページネーションの位置や全体のページ数などを持ちます。

✂︎ ---------------------

こんな感じで十数回に分けて内容を公開していきます。
全編無料公開予定ですので、どうぞお付き合いくださいませ。

Fin.

▼ Twitterもやってます。よければフォローもお願いします🙇🏿‍♂️

大橋一樹/FISM (@kzkohashi) | Twitter

▼ FISM社についてはこちら💁🏿‍♂️

FISM株式会社 – インフルエンサーマーケティングのFISM|国内・海外へのプロモーションならFISM株式会社

▼ 現在Wantedlyにて開発メンバー募集中です！GraphQL + Laravel + Vue.js + Swift で開発しております🙋🏿‍♂️

GraphQL+Laravel+Vue.jsで開発中！テックリード募集！ by FISM株式会社