TypeScript初心者がDeno+Freshで GraphQLエンドポイントを作成した話

toranoana.deno #10で話した内容です。
https://yumenosora.connpass.com/event/265961/

TypeScript初心者がDeno+FreshでGraphQLエンドポイントを作成したお話について発表しました。

Transcript

1. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
   TypeScript初心者がDeno+Freshで
   GraphQLエンドポイントを作成した話
   虎の穴ラボ 原 (hk220)
   1
   

   View Slide

2. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
   自己紹介
   ● 原 一貴（Kazuki Hara）
   ● hk220
   ● 虎の穴ラボ インフラエンジニア
   ● オタク：創作同人誌
   ● 今期推しアニメ：ぼっち・ざ・ろっく！
   ● 趣味：プログラミング（Python/Golang）
   2
   

   View Slide

3. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
   まえおき
   ● 2022年8月時点の情報を基に構成
   ● 作ったGraphQLエンドポイントはHello Worldレベル
   ● 初心者：ブルーベリー本を一通り読んだ程度
   ● Freshを選定した理由は技術検証のため
   3
   

   View Slide

4. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
   アジェンダ
   1. GraphQLの特徴
   2. やってみた理由
   3. 作ったもの
   4. これからやりたいこと
   5. まとめ
   6. 所感
   4
   

   View Slide

5. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
   GraphQLの特徴
   ● クエリ言語
   ○ SQLはデータベースのクエリ言語
   ○ GraphQLはインターネットのためのクエリ言語
   ● スキーマ言語とクエリ言語のセットで構成
   ● “/graphql”という単一のHTTPエンドポイントを使って
   クエリの実行
   ● POSTメソッドだけを使用
   5
   

   View Slide

6. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
   やってみた理由
   6
   

   View Slide

7. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
   フロントエンドとバックエンドの間の通信で
   GraphQLが採用される例が増えてきた
   ● mercari
   ● Netflix
   ● Twitter
   ● Github
   etc…
   7
   

   View Slide

8. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
   フルでDenoを使ったWebアプリケーションの
   構成も提案されている
   8
   https://speakerdeck.com/toranoana/toranoanaraho-deno-dao-ru-noqu-rizu-mi?slide=30
   

   View Slide

9. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
   Denoを使った
   Webアプリケーションに
   GraphQLを導入できる？
   9
   

   View Slide

10. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    やってみた
    10
    

    View Slide

11. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    できた
    11
    

    View Slide

12. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    FreshとGraphQL
    ライブラリを使って実現可能
    12
    

    View Slide

13. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    作ったもの
    13
    GraphQLエンド
    ポイント
    （Fresh）
    query helloworld {
    greeting(name: "Bob")
    }
    {"greeting":"Hello Bob!"}
    

    View Slide

14. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    コード①
    14
    

    View Slide

15. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    コード②
    15
    

    View Slide

16. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    これからやってみたいこと
    ● 実際にWebアプリケーションを作る
    ● 複雑なGraphQLエンドポイントを試す
    ● JSONが不完全の場合にFreshから返されるメッセージが
    分かりづらいことを改善する
    16
    

    View Slide

17. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    つまり・・・
    17
    https://speakerdeck.com/toranoana/toranoanaraho-deno-dao-ru-noqu-rizu-mi?slide=30
    

    View Slide

18. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    まとめ
    ● フルでDenoを使ったWebアプリケーションでGraphQL
    を導入できる？
    ○ FreshとGraphQLライブラリを使って実現可能
    ○ 複雑なGraphQLエンドポイントを作れるのか今後試
    す予定
    18
    

    View Slide

19. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    所感
    ● Denoのインストールが楽だった
    ○ TypeScript初心者が使う実行環境として良い感じ
    ○ tsc/tsconfigとかnpmを意識しなくて良いのは神
    ● GraphQL周りのライブラリがまだ動かないのもあるので今
    後のDenoの普及に期待
    ○ apollo-serverとか
    ● deno-jaに投稿して👍を貰えたのが嬉しかった
    19
    

    View Slide

20. Copyright (C) 2022 Toranoana Inc. All Rights Reserved.
    ありがとうございました
    20
    

    View Slide