こんにちは。OPTiMの白木、佐川です。今回はTSKaigi 2025に協賛・参加してきましたので、当日の雰囲気をお伝えします。
TSKaigi運営対応のため1人写っていませんが、有志の正スタッフ6人と1人の学生のアルバイトスタッフが参加しました。
また、学生旅費支援制度を活用して現地に参加しました。
TSKaigi 2025について
TSKaigi 2025はベルサール神田で 2025年5月23日〜2025年5月24日の2日間開催されました。
なんと306件ものプロポーザルから厳選されたセッションが行われ、専門的でTypeScriptの最前線を体感できる充実した内容でした。
また、弊社は去年に引き続きシルバースポンサーとして協賛させていただきました。
TSKaigi 2025 カンファレンスレポート
白木
1. 興味深かったセッション
講演日: 2025年5月24日
セッション名: TypeScriptとVercel AI SDKで実現するLLMアプリケーション開発：フロントエンドからバックエンド、そしてChrome拡張まで
講演者: 加瀬健太 さん
概要:
このセッションでは、TypeScriptとVercel AI SDKを活用したLLM（大規模言語モデル）アプリケーション開発の全体像が紹介されました。Vercel AI SDKを使ってフロントエンドからバックエンド、さらにChrome拡張機能までの実装例を紹介されました。
特に印象的だったのは、Vercel AI SDKがさまざまなLLM（例: ClaudeやChatGPT）へのインターフェースを用意している点です。これにより、バックエンド側では用途や要件に合わせて好きなLLMプロバイダーを選択できる柔軟性があることを知りました。また、フロントエンドはNext.jsに限られますが、React hookが提供されているため、チャットUIの実装が非常に簡単だと感じました。
OPTiMでは社内ハッカソンを開催しているため、このような短期間の開発で活かせそうな知見を得られたのが大きな収穫でした。
2. 業務の改善に使えそうなセッション
講演日: 2025年5月23日
セッション名: 堅牢なデザインシステムをつくるためのTypeScript活用
講演者: takanorip さん
概要:
このセッションでは、「堅牢なデザインシステム」を構築するためのTypeScriptの活用方法について紹介されました。デザインシステムを単なるコンポーネントの集合体にせず、「ルールセット」「ドキュメント」「実装」の3点を揃え、プロダクトらしさを再現しやすくするための工夫が解説されています。
特に、TypeScriptを用いることでコンポーネントの自由度を適切にコントロールし、サジェストやコンパイラによる型安全性を担保することで、デザインルールの逸脱を防止できる点が印象的でした。また、デザイントークン管理にはStyle dictionaryやBranded Typesを活用し、VSCode拡張やJSDocエディタ機能を組み合わせることで、コーディングルールが守られるようにしているようでした。
さらに、Figmaでのデザイン変更を起点に、デザイントークンの自動変換・CI化を実現し、AIを活用したドキュメント更新の効率化も提案されていました。
OPTiMでもデザインシステムを運用しているため、デザインシステムとMCPを使った実装が参考になりました。
デザインシステム関連の記事があるので、是非読んでください。
佐川
1. 興味深かったセッション
講演日: 2025年5月23日
セッション名: AI Coding Agent Enablement in TypeScript
講演者: Yuku Kotani さん
概要:
このセッションでは、ClineのようなAIコーディングエージェントでTypeScriptのコーディングを実施する際に、より大きい単位で自走させるための工夫やテクニックが紹介されました。
AIから出力される回答の解空間をプロンプトやドキュメントで事前に狭めておくことで、より少ないやり取りで解に向かわせつつハルシネーションを防ぐ手法を聞くことが出来ました。
また、特に印象的だったのは、Linterをドキュメントとして利用することで解空間を狭める手法です。 一般的なルールに加えて、プロジェクト固有のルールを追記することで、望ましくないコードに大してルールベースで制御することができます。 気になった出力が返された場合にエージェントにフィードバックをした後「今のコードを二度と再現しないようにESLintにルールを作って」と指示する、といったように、フィードバックベースで詰めることで二度と繰り返さないルールに出来るとのことでした。 また、AIのルール整備にLinterを導入することで、今まであまり重要視されていなかったLinterの作業速度の重要性が高まる、という点が興味深かったです。AIは作業速度も試行回数も人間と比較にならないため、効率化にあたって人間の作業速度では問題にならなかった部分がボトルネックになる可能性は考慮しなければなりません。
2. 今後使ってみたいセッション
講演日: 2025年5月24日
セッション名: 機能的凝集の概念を用いて複数ロール、類似の機能を多く含むシステムのフロントエンドのコンポーネントを適切に分割する
講演者: NoritakaIkeda さん
概要:
このセッションでは、複数のロールや類似機能を多く含んでいるコンポーネントを作成する際の、機能的凝集の観点から見る適切な分割の判断基準について紹介されました。
一つのモジュールが単一の明確な目的のために構成されている、「凝集度が高い」状態を「機能的凝集」と呼び、 似たような処理を論理的な分岐で切り替えて一つにまとめている、「凝集度が低い」状態を「論理的凝集」と呼びます。 （厳密にはもっと多くに区分がありますが、この分野ではこの二つが主に使われるそうです） 凝集度とは、モジュール内の要素が単一の目的にどの程度集中しているか、どれだけ密接に関連し、共通の目的を持っているかを表す指標です。
コーディングの上では同じ処理を共通化した方がコード量も削減できるため、似たような処理を条件によって異なる部分だけフラグ・条件でUIを切り替える論理的凝集のコンポーネントは多くなりがちです。 しかし、論理的凝集はプロダクトの成長に伴い分岐が増えやすい他、更新に際して他機能への影響を考慮する必要が発生します。 機能的凝集を満たしたコンポーネント設計にすることで、更新が発生した際に似た別機能への影響が発生しづらく、更新するべき機能に集中することが出来るようになり、要件とコードが一致しているかの確認もしやすくなる、という説明は納得感がありました。 ただし、差分が非常に小さい場合にもむやみに単機能化してしまうと、持つ役割や責務が薄いコンポーネントが生まれてしまい、可読性を落としてしまう点には注意が必要です。
このセッションを聞いたことで、コンポーネントの凝集度を高めるイメージが付きました。今後のコンポーネント設計に積極的に取り入れていきたいです。
懇親会
懇親会ではビールスポンサーとしてDiniiのビール提供があったり、お寿司が提供されていました。
来年のTSKaigiではOPTiMで スマート米 というスマート農業で作ったお米を提供しているため、お米スポンサーとして提供できたら嬉しいなと思いました。
総括
非常に刺激的で有意義なカンファレンスでした。参加したセッションから多くのインスピレーションを得ることができました。今後、これらの学びを業務に活かしていき、更なる改善と革新を目指していきたいと思います。
OPTiMにはTypeScriptが好きなメンバーが集まり、日々開発に励んでいます。新卒・中途採用も積極的に行っております。エンジニアとして技術を深めたい方、チャレンジしたい方のご応募をお待ちしています。 また、学生アルバイトの募集も行っています。技術が好きな学生の皆さん、私たちと一緒に成長しませんか？
