#94 GraphQL & 英語弱者の話

どうも、esuiです。
今日の発表のために、夜なべをしてきたので変なテンションでしたw
金曜開催だと多少の無理が出来るのが良いですね。




本日の1本目は、自分のネタから。

GraphQL


スクリーンショット 2017-08-28 20.18.36.png
最近流行のGraphQLを調べてみた、という内容でした。

Web APIの歴史


GraphQLを説明する前に、Web APIの歴史を超ざっくりとおさらいしました。
この分類はかなり適当ですw

- XML‐RPC
- SOAP
- ATOM
- REST + XML
- REST + JSON
- GraphQL

XML-RPC


- https://ja.wikipedia.org/wiki/XML-RPC
- 1998年策定
- XMLを利用
- HTTP POST

- Movable Type 3.3 マニュアル - XML-RPC API
  - https://www.sixapart.jp/movabletype/manual/3.3/03_blog_admin_guide/customizing_blogs/xmlrpc_api.html

- シーサーブログでもMT互換のXML-RPCをサポート
  - http://faq.seesaa.net/article/376863567.html

SOAP


- SOAP (プロトコル) - Wikipedia
- XML-RPCから発展
- XMLベース
- HTTPだけではなく他のプロトコルも使用可能
- 仕様が複雑で周囲ではあまり流行らなかった感

Atom API (Atom Publishing Protocol)


- https://ja.wikipedia.org/wiki/Atom_(%E3%82%A6%E3%82%A7%E3%83%96%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E9%85%8D%E4%BF%A1)#Atom_Publishing_Protocol
- 2005年頃誕生?
- XML-RPCがあったので、あまり流行らなかった
- So-net blogの例
  - http://blog-help.blog.so-net.ne.jp/atom

REST


- https://ja.wikipedia.org/wiki/REST
- REST : REpresentational State Transfer
- HTTPの4つのメソッドでリソースを制御
  - GET : 表示
  - POST : 投稿
  - PUT : 更新
  - DELETE : 削除
- URI設計がエンドポイントと密接に関係

REST + XML


- 2005年Ajaxの登場により脚光を浴びた
- 名前空間など、仕様が複雑
- 型の指定が複雑
- XMLの衰退と共に廃れていった

REST + JSON


- https://ja.wikipedia.org/wiki/JavaScript_Object_Notation
- 現在の主流
- integer, boolean, nullなどの型が仕様に含まれている
- Github api v3
  - https://developer.github.com/v3/
- シーサーブログのアプリ用の某APIも一応これだが…型の指定などが結構アレだったり。。

GraphQL


そしていよいよGraphQLです。
- https://en.wikipedia.org/wiki/GraphQL
- http://graphql.org/

- 2012年 Facebookが開発
- これからの主流になる流れ
- クエリー言語 : QueryLanguage

GraphQLのメリット


- 必要なデータだけ受け取れる
  - 不要なペイロードを省略できるので省エネ、特にスマホなど
- 関連オブジェクトを1クエリで取得できる
  - [N + 1問題](http://qiita.com/shunsukekyuwa/items/074a7dfdd6d7ed84aecf)
- クエリの型バリデーションが容易
  - ドキュメントとAPI仕様が異なる問題が無くなる
- エンドポイントが1つだけで済む
- GraphiQLがとても便利
- レスポンスのjsonの型が明確、ドキュメントを見なくても良い

GraphQLのデメリット


- サーバサイド実装が複雑
- クライアント側で何が必要化をすべて明示する必要がある
- パフォーマンス?
  - リクエストのクエリが毎回異なるため、キャッシュが難しい(かもしれない)

RESTとの比較


- RESTとの比較ですが、ここがとても参考になりました
http://qiita.com/193/items/bf9842af0e1df8fb7226#graphql-is-%E4%BD%95-4
スクリーンショット 2017-08-25 22.53.24.png

GraphQLのRequest/Response


GraphQLでは以下のようなクエリを投げると、

- Request
    query {
viewer {
login
name
websiteUrl
}
}


以下のようなレスポンスがJSONで返ってきます。
- Response
    {
"data": {
"viewer": {
"login": "XXXXX",
"name": "esui XXXXX",
"websiteUrl": "http://techdev.seesaa.net/"
}
}
}


JSONでリクエスト


$ curl -s -H "Authorization: bearer XXXXXXXXXXXXXX" \
> -X POST -d '{"query": "{viewer {login name websiteUrl}} "}' \
> https://api.github.com/graphql | jq .
{
"data": {
"viewer": {
"login": "XXXXX",
"name": "esui XXXX",
"websiteUrl": "http://techdev.seesaa.net/"
}
}
}



GraphiQL


GraphiQLというGUIのクライアント
https://github.com/graphql/graphiql
が備わっており、慣れるとめちゃくちゃ使いやすいです。

- GraphQLのGUIクライアント
- Schema情報からコード補完、型チェックしてくれる
- ショートカットキー
  - Auto Complete : Ctrl+Space
  - Run Query: Ctrl-Enter
スクリーンショット 2017-08-25 23.00.04.png

Github GraphQL API v4


Github APIは、v3まではREST APIでしたが、v4からはGraphQLになりました。
https://developer.github.com/v4/explorer/
Github GraphQL API v4を使うと、
例えばこんなクエリでissueの一覧を取得することが可能となっています。

# Request
    query { 
repository(owner: "seesaa", name: "bl") {
id,
name,
description,
issues(first: 3, states: OPEN) {
totalCount
edges{
node{
number
title
publishedAt
assignees(first:10) {
edges {
node {
name
}
}
}
}
}
}
}
}


# Response
{
"data": {
"repository": {
"id": "XXXXXXXXXXXXX",
"name": "bl",
"description": "Seesaa blog ",
"issues": {
"totalCount": 16,
"edges": [
{
"node": {
"number": NNNN,
"title": "issueのタイトル",
"publishedAt": "2017-06-07T06:00:05Z",
"assignees": {
"edges": [
{
"node": {
"name": "XXXXXXXXX"
}
},
{
"node": {
"name": "YYYYYYYY"
}
}
]
}
}
},
~~~


スキーマ・型


GraphQLでは、以下のような型を使うことが可能です。

http://graphql.org/learn/schema/#scalar-types

### Scalar型
- Int
- Float
- String
- Boolean
- ID

http://graphql.org/learn/schema/#enumeration-types

### その他

- enum
- type
- interface
- union

更新(Mutation)


http://graphql.org/learn/queries/#mutations

スクリーンショット 2017-08-25 23.07.15.png


ライブラリ


既に主要なライブラリが揃っています。

- http://graphql.org/code/

- perlは只今準備中…
  - https://metacpan.org/search?size=20&q=graphql

Hello World(JavaScript)


- http://graphql.org/code/#javascript
- https://github.com/graphql/graphql-js/

    $ cat hello.js
var { graphql, buildSchema } = require('graphql');

var schema = buildSchema(`
type Query {
hello: String
}
`);

var root = { hello: () => 'Hello world!' };

graphql(schema, '{ hello }', root).then((response) => {
console.log(response);
});
$ node hello.js
{ data: { hello: 'Hello world!' } }


とりあえず試してみる

ということで簡単なデモ。

https://gist.github.com/teckl/ecb7d0f5feeda82becc079cc8155fc99
- shops
- blogs
などの簡易APIを簡単に型付きで定義することができました。

その他の利用例


# Star Wars API with GraphQL
スターウォーズのデータベースをGraphQLで試したり、
http://graphql.org/swapi-graphql/

# Pokémon API with GraphQL
ポケモンのデータベースをGraphQLで。
個人的にはポケモンGOのデータさえあればポケモンGOバージョンを遊びで作ってみたいですねぇ。。

https://github.com/BarakChamo/PokeQL
  - http://graph.pokeql.win
  - 実際にクエリを入れてみた例

まとめ


- RESTがこの後「すぐには」GraphQLに変わることはまだ無さそう
- しかしこの先Facebook/Github/Netflixなどが先導していくことで流行る可能性は高そう
- REST原理主義者と争わなくて済むようになるのは良さそう

参考


- [アプリ開発の流れを変える「GraphQL」はRESTとどう違うのか比較してみた](https://www.webprofessional.jp/rest-2-0-graphql/)
- [GraphQLはWeb APIの次のフロンティアか?](http://postd.cc/api-paradigms/)
- [YAPC::Fukuoka 2017 HAKATA で「Web API の未来」を話してきた](https://blog.comewalk.com/2017/07/yapcfukuoka-2017-hakata-web-api.html)
- [graphql-rubyの話](http://qiita.com/193/items/bf9842af0e1df8fb7226)
- [GraphQL勉強会発表資料(補足)](http://qiita.com/n-oshiro/items/d294dac42df7b70a73f9)

- [スライド:App::reverlup](https://github.com/perl-entrance-org/workshop-2017/#%E8%B3%87%E6%96%99%E3%81%AE%E8%A6%8B%E6%96%B9)

ということで、ちょっと触ってみたところでは結構よさそうな感触だったので、
早く普及して欲しいなぁと思いました。





さて、第二部は、

英語弱者の話


スクリーンショット 2017-08-28 20.14.05.png

ということで、英語について。
いくら英語が苦手であっても、エンジニアをやっていく時に避けて通れない英語ですが、
英語が出来るようになるとどれだけ世界が変わるか、
英語学習に最適なアプリやWEBサービス、
若手に対しての英語に対しての心構えなどを発表されていました。

本当は詳細を紹介したかったのですが、手元に資料が上がってないのでまた別の機会にでも・・・。

この記事へのコメント