HAKODATE Developer Conference＠函館 でGraphQLの話をしてきました

こんにちは。Zennチームの和田です。最近はもっぱらZennへ投稿しているのですが、イベントレポートということでこちらに。2022年2月19日、函館ディベロッパーカンファレンスへ登壇しました。

イベントは、現地とオンラインのハイブリッドで開催されました。登壇メンバーも私含め現地組、リモート組と混合です。開催にあたっては企画および運営の皆様のご尽力のおかげだったと痛感します。消毒の徹底、セッション間の換気、配信機材の設置など素人目で見てもプロフェッショナルな運営でした。ありがとうございました。飯村さんのFlutterのお話、細川さんのソフトウェア考古学の話、松井さんがバビ肉した状態でのバーチャルキャストの登壇すべて面白かったです。

現地登壇って、いいよね…

自分の手の届かない、思いもよらない話を聞くことができます。私が現地登壇を好む理由に、どうやら「控室で他の登壇者を質問攻めにする」というものがありそうでした。t_wadaさんがおっしゃっていたまさにこれです。

講演資料は後日公開されるし、なんなら動画も公開される。技術カンファレンスに参加しないと得られない価値は「廊下で話す」こと。 https://t.co/DqNuHJhHsj

— Takuto Wada (@t_wada) October 17, 2019

現状、現地開催は、運営の皆様と、参加者の皆様の負担が大きいです。早く状況が落ち着くか、VR技術が表情筋を再現できるレベルまで発達してくれることを願っています。

登壇資料

私はGraphQLの話をしました。

GraphQL でブログサイトを構築する例

GraphQL は、AWS AppSync をはじめ、さまざまなプロダクトが第一線で活躍しています。しかし自分の中で振り返った時、「これってどこまでがGraphQLの話で、どこからがプロダクト/ライブラリ固有の話なんだっけ？」と迷子になるこがよくありました。そこで、あえてGraphQLバックエンドとGraphQLフロントエンドに分け、個人のブログサイトを構築しながら仕様を把握しようとしました。この資料は、そうして少しずつ紐解いていく様を記録したものです。

そもそもGraphQLサーバーってどうやってたてるのってところからはじめました。

NestJSでバックエンドをたててみる

概観を把握したあと、NestJSというNode.jsサーバーのフレームワークを使ってGraphQLバックエンドをたてました。

できることは豊富ですが、 Schemaとデータを用意してResolverで紐付けるという基本構成はどれだけアプリが大きくなっても変わりません。

Next.jsでフロントエンドをたててみる

あえてGraphQLバックエンドとGraphQLフロントエンドをわけることにしました。フロントエンドはNext.jsにします。

GraphQLの仕様を眺めながらブログサイトを実装

その後は、Alias、FragmentsといったGraphQL仕様を使いながらブログ一覧画面をつくりました。

詳細画面

Field Resolver（フィールドごとの個別のResolver）を使って、MarkdownファイルをCloudStorageから取得する例を示しました。

コメント欄

最後に、Mutationを使って記事にくっつくコメント欄を実装しました。レンダリング後の、フォーム送信時に発生するイベントなので、ブラウザからNestJSサーバーへの経路が発生する点に注意です。

実例を通してGraphQLの仕様を把握した

GraphQLはあくまでクエリ言語の仕様なのでさまざまな実装が存在します。仕様がどのようなシーンで活躍するかを知るために、具体的な構築作業を通して俯瞰しました。

函館、いいよね…

塩ラーメンとイカがあまりにもうまい。あと今回、運営の方に話を聞いて、函館市はIT人材の育成にとても力を入れていらっしゃるということがよくわかりました。IT業界はいい意味で場所を選ばないので、私も東京からお手伝いできることを探して積極的に関わっていきたいです。

さいごに Zennのスクラップで質問やご意見を！

資料に関してご指摘やご質問がありましたら、Zennのスクラップにスレッドを用意していますのでご自由にコメントしていただければ反応します！よろしくおねがいします。

GraphQL スターターパック 兼 函館スレッド