misspelling

  • 日本語
  • English

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

December 13, 2019

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

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

前日まで

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

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

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

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

https://twitter.com/qsona/status/1200791943510315009

当日

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

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

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

https://twitter.com/tkdn/status/1201014338372325376

わりと当日は発表して終わりみたいになってしまったので、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があることをしりました


nobuhikosawai

Personal blog by nobuhikosawai
who lives and works in Japan.