トップ > バックエンド > TSKaigi2025に参加してきました！

TSKaigi2025に参加してきました！

バックエンド フロントエンド イベント

サムネイル

はじめに

オンラインサロン開発部の國分です。 今回、TSKaigi 2025 に参加しました。

ネームプレート
現地で使用したネームプレート

TSKaigi は、TypeScript コミュニティが主催する世界最大のオフライン TypeScript カンファレンスです。
今年は東京のベルサール神田で開催され、TypeScript の最新動向や実践的な開発手法について多くの知見を得ることができました。

このレポートでは、特に印象的だった 3 つのセッションの内容と、そこから得られた学びについて共有いたします。
AI 時代の TypeScript 開発、TypeScript の革新的な性能向上、そして実践的なコンポーネント設計まで、幅広いトピックをカバーできました。

AI Coding Agent Enablement in TypeScript

このセッションでは、AI 時代における TypeScript 開発の新しいアプローチについて、実践的な観点から解説されました。
AI コーディングエージェントを効果的に活用するためのベストプラクティスや、TypeScript の型システムを活用した開発効率の向上について、具体的な手法が紹介されました。

発表スライド

speakerdeck.com

感想

このセッションを通じて、AI 時代の開発における根本的な思考の転換の必要性を強く感じました。

特に印象的だったのは、「解空間を絞る」 という考え方です。AI は膨大な可能性の中から答えを見つけようとするため、適切な制約を与えることで精度を大幅に向上させることができます。これは単純な発想ですが、実際の開発では見落としがちな視点でした。

また、ESLint ルールによる自律的な検査 の概念は非常に実用的でした。LLM の非決定論的な特性を補完する仕組みとして、確実性の高い Linter を活用するというアプローチは、即座に実践できる手法だと感じました。弊チームでも AI コーディング支援ツールを活用する際に、この考え方を取り入れてみたいと思います。

さらに、時間価値の概念 についても考えさせられました。AI が 30 秒で処理できることと人間が 30 秒で処理できることの価値の違いを意識することで、ツールチェインの速度最適化の重要性があらためて浮き彫りになりました。これは開発体験（DX）の向上に直結する重要な観点だと感じています。

TypeScript ネイティブ移植観察レポート

このセッションでは、TypeScript コンパイラの Go 言語への移植プロジェクト「TypeScript Native」について、その技術的な詳細と驚異的な性能向上について解説されました。
従来の TypeScript コンパイラと比較して 10 倍の高速化 を実現した内部実装の工夫や、ネイティブ化によるメリット・デメリットについて、開発者の視点から詳しく紹介されました。

発表スライド

speakerdeck.com

感想

このセッションは技術的な衝撃と同時に、企業の技術戦略について深く考えさせられる内容でした。

まず、10 倍の性能向上 という数字の持つインパクトについてです。単純な最適化では到達困難なレベルの改善を、言語の選択とアーキテクチャの見直しによって実現した点は圧倒的でした。特に、ネイティブ化による 3.5 倍と並列処理による 3.5 倍の組み合わせという明確な内訳が示されており、性能改善のアプローチとして非常に参考になりました。

また、99.999% の互換性 を目指すというコミットメントには驚かされました。10 万件のエラー差分テストの実施や、ハイラムの法則への対応など、単なる性能向上ではなく「完全な置き換え」を目指す姿勢が伺えます。これは OSS に頼ることなく内製でコンパイラを刷新できる Microsoft の技術力の高さを物語っています。

さらに、開発手法の効率性 にも感銘を受けました。AI ベースの一括変換を避けて決定的な移植ツールを選択したり、ある程度の重複処理を許容して並列化を優先するなど、実用的で現実的な判断が随所に見受けられました。これらの意思決定の速度と的確さは、実際のプロダクト開発においても非常に参考になる考え方だと感じています。

今後の開発体験が大きく変わる可能性を秘めた技術革新であり、TypeScript エコシステム全体への影響も含めて注視していきたいと思います。

すでに preview が公開されていますので気になる方はぜひお試しください。

devblogs.microsoft.com

機能的凝集を用いたコンポーネント分割

このセッションでは、React などのフロントエンドフレームワークにおけるコンポーネント設計において、保守性と可読性を向上させるための「機能的凝集」という概念について解説されました。
従来の「論理的凝集」による設計の問題点と、それを解決する「機能的凝集」のアプローチについて、具体的なコード例を交えながら実践的な手法が紹介されました。

発表スライド

speakerdeck.com

サンプルコード generated by Claude4

// User型の定義
interface User {
  id: string;
  name: string;
  email: string;
}

// ❌ 悪い例：論理的凝集
// 似たような処理を条件分岐で切り替える
interface UserFormProps {
  mode: "create" | "edit" | "view";
  user?: User;
  onSubmit?: (user: User) => void;
}

const UserForm: React.FC<UserFormProps> = ({ mode, user, onSubmit }) => {
  const [formData, setFormData] = useState(user || {});
  return (
    <div>
      <h2>
        {mode === "create" && "ユーザー新規作成"}
        {mode === "edit" && "ユーザー編集"}
        {mode === "view" && "ユーザー詳細"}
      </h2>

      <div>
        <label>名前</label>
        {mode === "view" ? (
          <span>{user?.name}</span>
        ) : (
          <input
            value={formData.name || ""}
            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
          />
        )}
      </div>

      {/* モードごとに異なるボタン */}
      {mode === "create" && <button>作成</button>}
      {mode === "edit" && <button>更新</button>}
      {mode === "view" && <button>編集</button>}
    </div>
  );
};

// ✅ 良い例：機能的凝集
// 各モードで明確に分離

// 新規作成フォーム（機能的凝集）
const UserCreateForm: React.FC<{ onSubmit: (user: User) => void }> = ({
  onSubmit,
}) => {
  const [formData, setFormData] = useState({ name: "", email: "" });

  return (
    <div>
      <h2>ユーザー新規作成</h2>
      <input
        placeholder="名前"
        value={formData.name}
        onChange={(e) => setFormData({ ...formData, name: e.target.value })}
      />
      <button onClick={() => onSubmit(formData)}>作成</button>
    </div>
  );
};

// 詳細表示（機能的凝集）
const UserDetail: React.FC<{ user: User; onEdit: () => void }> = ({
  user,
  onEdit,
}) => (
  <div>
    <h2>ユーザー詳細</h2>
    <div>名前: {user.name}</div>
    <div>メール: {user.email}</div>
    <button onClick={onEdit}>編集</button>
  </div>
);

感想

このセッションは、コンポーネント設計における本質的な課題について、深く考えさせられる内容でした。

論理的凝集の落とし穴 について、身に覚えのある部分が多く、非常に耳の痛い内容でもありました。共通化を優先する思考で設計を進めると、確かに「似たような機能だから一つにまとめよう」という発想に至りがちです。しかし、条件分岐が増えるにつれてコンポーネントが肥大化し、最終的には保守性が著しく低下するというリスクをあらためて認識しました。

一方で、機能的凝集のアプローチ は理論的には理解していたものの、実際のコード例を通じて具体的な実装方法を学べたことは大きな収穫でした。重複を恐れずに機能ごとに明確に分離することで、要件とコードの対応関係が明確になり、結果的に保守性の向上に努めている点は、実体験としても納得できました。

現在のプロジェクトを振り返ると、弊チームでもフロントエンドロジックの複雑化を避けるよう努めていますが、徹底しきれていない部分も多々あります。特に、機能追加の際に「既存コンポーネントに条件分岐を追加する」という選択をしてしまうケースも多く散見されるのが実情です。

今回学んだ機能的凝集の原則を、今後のコンポーネント設計やリファクタリングに積極的に活かしていきたいと考えています。短期的には重複コードが増える可能性もありますが、長期的な保守性の観点から見れば必要な投資だと感じました。

全体を通しての感想

TSKaigi 2025 を通じて、TypeScript エコシステムの急速な成熟を感じました。 特に今回はまさかの当日に ts-go の preview が発表されるという展開になり、登壇者の方も驚かれたことと思います。

発表以外のいろいろ

TSKaigi ではさまざまなスポンサーブースが設けられており、各社のサービスや技術的な工夫に触れることができました。TypeScript という共通の技術を使いながらも、その活かし方や注力ポイントに各社の文化やフェーズが色濃く表れており、それぞれ異なる視点で課題に取り組んでいる様子を伺うことができました。

株式会社ダイニー様

株式会社ダイニーさんのレシート

株式会社ダイニー様のブースでは、TypeScript プロジェクトで使用しているツールや技術を紹介する仕組みが用意されていました。 モバイルオーダーを模した UI でツールや技術を選んで入力すると、その場で決済が行われ、レシートが発行されるという体験型の展示でした。 入力内容がリアルタイムでモニターに表示される仕掛けもあり、楽しく参加できる工夫が印象的でした。

株式会社サイバーエージェント様

株式会社サイバーエージェントさんの性格診断アプリ

株式会社サイバーエージェント様のブースでは性格診断のアプリケーションが tapple のような UI で提供されており、出てくる質問に対してスワイプで答えると言うものでした。 最終的に上記のような画面になり、TypeScript にまつわる診断がなされていました。

おまけ

牛タン

お昼ご飯は 2 日間とも 4~5 種類ほどの中から選べる形になっていました。 幕の内弁当や牛タン弁当、そぼろのお弁当など様々な種類が用意されていました。 さらにヴィーガン食やハラルフードのご用意もあり、様々な参加者への配慮がなされていました。

おわりに

TSKaigi 2025 を通じて、多くの学びと刺激を得ることができました。
素晴らしいイベントを開催してくださった、運営チームの皆様ならびに登壇者の皆様に、心より感謝申し上げます。

今回は、DMM の「カンファレンス参加支援制度」を活用して参加しました。
本制度は、最先端の技術や知見に触れることでスキルを高め、その学びを業務やコミュニティに還元することを目的としています。
今後もこうした制度を活用しながら、TypeScript コミュニティの発展に貢献していきたいと考えています。