TSKaigi 2024に参加した

こんにちは。

[EDOCODE](https://www.edocode.co.jp/)でエンジニアをしているYutakaです。普段はGoやTypeScriptを使って開発をしています。

[以前PHPerKaigi 2024でスタッフとして参加した](https://qiita.com/Uyutaka/items/824373fdeecd6a48caa9)際に、ある方からTSKaigiの存在を知りました。オフライン参加は有料だったので少し迷いましたが、実際の会場の様子を知りたくて参加してきました。TSKaigiオフラインの雰囲気を知りたい人の参考になれば幸いです。

## TSKaigiとは

[公式サイト](https://tskaigi.org/)より

> TSKaigiは、日本最大級のTypeScriptをテーマとした技術カンファレンスです。
コロナ禍で様々なオフラインイベントが打撃を受ける中、TypeScriptを扱うエンジニアが会場で集まる機会は失われていきました。
新型コロナウイルスが落ち着いた今、各所で蓄積されたノウハウが日の目を浴び、より生き生きとTSエンジニアが働ける世界を目指して、TSKaigiを開催します。


会場はPHPerKaigi 2024と同じ、[中野セントラルパーク](https://www.nakano-centralpark.jp/)でした。

同じ会場でスタッフをやったこともあり、受付フローの違いを知ることが出来て面白かったです。また、PHPerKaigiとは違いTSKaigiでは名札に来場者がペンで一言挨拶を書く欄があり面白いなと思いました。また名札もPHPerKaigiはNFSタグ埋め込みなのに対してTSKaigiは普通の紙でした。

<blockquote class="twitter-tweet" data-media-max-width="560"><p lang="ja" dir="ltr">【<a href="https://twitter.com/hashtag/TSKaigi?src=hash&amp;ref_src=twsrc%5Etfw">#TSKaigi</a> 会場受付開始しました！！！】<br>9:30より、個人スポンサー、登壇者、一般入場者の受付を開始しました✨<br><br>参加QRコードをご用意して受付にお越しください！<a href="https://t.co/rXjqUAOzNh">https://t.co/rXjqUAOzNh</a><br><br>ご来場お待ちしております！ <a href="https://t.co/FA0dpfLZQB">pic.twitter.com/FA0dpfLZQB</a></p>&mdash; TSKaigi (@tskaigi) <a href="https://twitter.com/tskaigi/status/1789090546499428364?ref_src=twsrc%5Etfw">May 11, 2024</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 気になった発表の感想

ここからは実際に発表を聞いて特に印象に残っているものに関しての感想を書いていきます。

### AST(抽象構文木)関連

[AST(抽象構文木)](https://ja.wikipedia.org/wiki/%E6%8A%BD%E8%B1%A1%E6%A7%8B%E6%96%87%E6%9C%A8)関連で印象に残ったのが2つありました。

#### [TypeScript ASTを利用したコードジェネレーターの実装入門](https://tskaigi.org/talks/Himenon)

<script async class="docswell-embed" src="https://www.docswell.com/assets/libs/docswell-embed/docswell-embed.min.js" data-src="https://www.docswell.com/slide/K382Y1/embed" data-aspect="0.5625"></script><div class="docswell-link"></div>

こちらは登壇者が作成したコードジェネレータ[openapi-typescript-code-generator](https://github.com/Himenon/openapi-typescript-code-generator)で得た知見をベースにASTとは何か？コードジェネレータの入門と実装ステップがわかりやすく紹介されていました。この登壇者が作成されたツールは名前の通りOpenAPI SchemaからTypeScriptのコードを生成する物です。
特に印象に残ったのはコードジェネレータの開発者が少ない([46ページ](https://www.docswell.com/s/hireroo/K382Y1-tskaigi-2024-05-11-11-30/46))とコードジェネレータ側に依存した仕様やSchemaがいつか出てくるかも?([47ページ](https://www.docswell.com/s/hireroo/K382Y1-tskaigi-2024-05-11-11-30/47))という２つです。

#### [TypeScript の抽象構文木を用いた、数百を超える API の大規模リファクタリング戦略](https://tskaigi.org/talks/yanaemon169)

<script defer class="speakerdeck-embed" data-id="d73563f505154ae287b53abe3b5a2ab6" data-ratio="1.7777777777777777" src="//speakerdeck.com/assets/embed.js"></script>

私は今までリファクタリングと聞いた際にASTを用いるという発想がなかったため印象に強く残りました。登壇者はExpress.jsのAPIをNestJSに移行するにあたり、正規表現での置換には限界を感じ、ASTを考慮して行うようになったそうです。また大規模移行にあたり、ステップごとにAIと人力を適宜使い分けているのが面白いと感じました([20ページ](https://speakerdeck.com/yanaemon/typescript-nochou-xiang-gou-wen-mu-woyong-ita-shu-bai-wochao-eru-api-noda-gui-mo-rihuakutaringuzhan-lue?slide=20))。


### 関数型関連

#### [TypeScript 関数型バックエンド開発のリアル](https://tskaigi.org/talks/naoya_ito)

<script defer class="speakerdeck-embed" data-id="cb2e31ccf3c44779893bfd4eb0f86dca" data-ratio="1.7777777777777777" src="//speakerdeck.com/assets/embed.js"></script>

個人的に一番楽しみにしていた発表でした。登壇者は[Rebuild](https://rebuild.fm/)でたまにゲストとして参加しているnaoyaさんです。DDDと関数型を扱った書籍([Domain Modeling Made Functional](https://www.oreilly.com/library/view/domain-modeling-made/9781680505481/))を一部ベースにしてTypeScriptで実際のプロダクト開発でどうやって実現しているかの説明がありました。
具体的には1)ドメインオブジェクトで型を定義する。2)Result型を使ってエラー処理を明確にするです([5ページ](https://speakerdeck.com/naoya/typescript-guan-shu-xing-sutairudebatukuendokai-fa-noriaru?slide=5))。TypeScriptには組み込みでResult型がないため[NeverThrow](https://github.com/supermacro/neverthrow)というライブラリを使っているようです。


#### [Step by Stepで学ぶ、ADT(代数的データ型)、モナドからEffect-TSまで](https://tskaigi.org/talks/takezoux2)

<script defer class="speakerdeck-embed" data-id="82a6a832046e4bbfb51cd0a9a2343240" data-ratio="1.7772511848341233" src="//speakerdeck.com/assets/embed.js"></script>

タイトル通りStep by Stepで簡単なユーザー登録の処理([9ページ](https://speakerdeck.com/leveragestech/step-by-steptexue-hu-adt-dai-shu-de-tetaxing-monatokaraeffect-tsmate?slide=9))を下の流れで説明していっていました。手続き型から始まり最終的に[Effect](https://effect.website/)というライブラリでどうやって関数型で実装できるかが紹介されています。

- Step 1 手続き型の書き方　
- Step 2 [ADT(代数型定義型)](https://ja.wikipedia.org/wiki/%E4%BB%A3%E6%95%B0%E7%9A%84%E3%83%87%E3%83%BC%E3%82%BF%E5%9E%8B)導入
- Step 4 [Either](https://gcanti.github.io/fp-ts/modules/Either.ts.html#either-type-alias)導入([fp-ts](https://gcanti.github.io/fp-ts/)使用)
- Step 5 [pipe](https://gcanti.github.io/fp-ts/modules/function.ts.html#pipe)導入([fp-ts](https://gcanti.github.io/fp-ts/)使用)
- Step 6 [TaskEither](https://gcanti.github.io/fp-ts/modules/TaskEither.ts.html#taskeither-interface)導入([fp-ts](https://gcanti.github.io/fp-ts/)使用)
- Step 7 [Effect](https://effect.website/docs/guides/essentials/the-effect-type)導入([Effect](https://effect.website/)使用)

各Stepごとに改善点・問題点を説明して次のstepでどう解決していっているのかを知ることができとてもわかりやすかったです。今後社内勉強会等でTypeScriptを用いて関数型の発表する際には[fp-ts](https://gcanti.github.io/fp-ts/)、[Effect](https://effect.website/)を使うことができるかなと思いました。ちなみにスライドではEffect-TSとありますが、正式名はEffectです。グーグラビリティが低いためTSをつけていると説明がありました。

## 最後に

オンラインより記憶にも残りやすため、今後も積極的にオフラインでの勉強会に参加したいです。また、意外と関数型関連の発表が多いと感じました。以前、関数型に関して社内勉強会や「[なっとく！関数型プログラミング　を読んで関数型プログラミングを学んだ](https://qiita.com/Uyutaka/items/bcd4190e3a844e88e743)」という記事にしたこともあり、理解することが以前より容易になったと実感しました。関数型に関して前回カバーできなかったIO処理等の記事を書く予定があります。自分の理解度を高めるために今後も積極的にインプットだけでなくアウトプットをしていきたいです。