Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

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

虎の穴ラボ株式会社

December 15, 2022
Tweet

More Decks by 虎の穴ラボ株式会社

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide