JSConf JP 2019で「GraphQLを用いたサイトにおけるパフォーマンス改善」について発表しました

JSConf JPで「GraphQL を用いたサイトにおけるパフォーマンス改善（EC サイトを題材に）」というタイトルで発表を行いました。

発表の一番の趣旨は GraphQL の APM の読み方と GraphQL を使う際にはきちんと GraphQL にそった設計をしようというもので、 具体的には GraphQL の query は component に紐づく（component で描画したいものを取得する）ので、 Fragment と Colocation を使ってそれらを実現しようというものでした。

前日まで

実はかなり発表については難産しました。内容自体は実務に紐付いていることで、現場感もある内容なのですが、技術的にすごく尖っているわけではなく、 きちんと GraphQL を運用している人は知っている内容である一方で、GraphQL をこれから触るような人には幾分難しい（なじみのない）設計について紹介しているので、 どのように発表するかかなり迷いました。

社内の発表練習や元同僚にも feedback をもらって、最終的には

• 設計の重要さに力点を置いてはなす
• GraphQL 固有の用語（resolver, Fragment, Colocation）や起きやすい問題（N+1）などについては 1 つずつ説明したりサンプルコードも交えながら詳しく説明する
• プロジェクトの全体感がつかめるようなスライドを何枚か追加する
• パフォーマンス改善の発表だったので、「計測 => 課題の特定 => 修正 => 恒久対応」という流れが分かる形にする

という形で修正を加えました。

当日

結果前々日までトークの時間が 20 分だったのが、前日で 40 分まで増えることになり、GraphQL 固有ではない部分は削る形で発表しました。

詰め込んだこともありうまく伝わるかかなり不安だったのですが、面白かったという声を人づてに聞いたりすることができました。

当日まとめを書いてくださいっている方やJSer.infoにも載せていただいて、 わりと反響をいただけたかなと思っています。

わりと当日は発表して終わりみたいになってしまったので、Ask the speaker 的な時間があるとよりよかったかなと感じました。

個人的にはもう少し最後の方に話した cache などのより踏み込んだパフォーマンス改善を行っていきたいと思っているので、更に進んだらどこかでまた発表したいと思います。

その他役立ったもの

code snippet を画像に変換する web アプリを見つけました。twitter とかでたまに見かけるので、どういうものかと思ったら carbon というアプリでした。 いつも code snippet の楽な貼り方に迷っていたのですごくはかどりました。

https://carbon.now.sh/

また、類似の機能をもつ VS code の extension もありました。

https://github.com/octref/polacode

これらのおかげで途中からスライドがきれいになり、説明もしやすくなりました。

JSConf JP 2019 について

前日までスライドの修正をしていたせいもあり、あまり多くのトークを聞けなかったのですが、Node 学園祭と比べて全体的に Web とはなにか web でできることみたいな話が多かったような印象をうけました。

jxck さんの web の自重や Benjamin Gruenbaum さんのクリックイベントについて解説した Anatomy of click などは非常に面白かったです。

聞きたい発表がたくさんあったのですが、準備不足で聞けなかったので後日キャッチアップしたいと思います。

まとめ

一度は発表してみたいと思っていた大きな勉強会だったので、こうして発表の機会をいただけたことは大変貴重な経験になりました。

この場を借りて貴重な機会をくださったスタッフの方やオーガナイザー、スポンサーの方に感謝いたします 🙏

note: speakerdeck を埋め込むに当たり oEmbed があることをしりました