kickflow Tech Blog

株式会社kickflowのプロダクト開発本部によるブログ

“型”を破りに金沢へ—— TSKaigi Hokuriku 2025 に参加してきました

夜の金沢駅の遠景。鼓門を正面に据え、青緑色のライトアップがされている。奥のガラス張りの構内に垂れ幕と駅名看板が見える。
夜の金沢駅前の鼓門がビグ・ザムみたいでカッコいい

こんにちは。プロダクト開発部でエンジニアをしている秋山です。
カンファレンスの秋も終盤戦。先週の JSConf JP 2025 に引き続き、今週は TSKaigi Hokuriku 2025 に同僚の芳賀と参加してきました!
この記事ではイベントレポートをお送りします。

TSKaigi について

hokuriku.tskaigi.org

TSKaigi は、「学び、繋がり、”型”を破ろう」をミッションに TypeScript に関するテーマを扱う日本最大級の技術カンファレンスです。
これまでは東京と京都で開催されてきましたが、「TSKaigi の盛り上がりを地方にも広げたい!」という運営の熱い想いが、今回の TSKaigi Hokuriku の開催につながっています。

tskaigi.hatenablog.com

今回、kickflow はシルバースポンサーとして TSKaigi Hokuriku 2025 に協賛しました。
kickflow のフロントエンドでは Nuxt と TypeScript で開発しており、今回のカンファレンスで得た学びを、早速プロダクト開発に活かしていきたいと思います。

会場の雰囲気

青空の下、交差点角に立つ「ホテル金沢」の高層ビル外観。ベージュ色の建物とガラス窓がそびえ、手前の車道には車が行き交い、街路樹が画面右側に並んでいる。 会場はホテル金沢の 2 階を貸し切りで行われました。金沢駅から徒歩 3 分の好立地!

 カンファレンス会場のホワイエ。中央のテーブルにトートバッグやパンフレットが積まれ、青いスタッフTシャツの人や来場者が各ブースを回っているにぎやかな様子。 受付を済ませるとすぐに、スポンサーのパンフレットとノベルティが入ったエコバッグをいただけました。ブースを回るときのノベルティの収納に困ったりするので、最初に配布があるのは助かりました。

講演会場の全景。紺色のテーブルクロスを掛けた長机と椅子が規則正しく並び、前方にスクリーンとステージ。少人数の参加者と青いスタッフTシャツの人たちが準備をしている。 セッションルームは椅子もホテル仕様で、長机に対して 2 席と、余裕を持って座れます。空いている席を探したり移動したりするのが容易で、セッション聴講が捗ります。

スポンサーエリアの一角。壁沿いのブース前に来場者が列を作り、テーブルにはノベルティや箱詰めグッズが並ぶ。背景には企業ロゴ入りの縦長バナーが立てられている。 各スポンサーのブースには趣向を凝らした企画があり、楽しめました。セミナールームと隣接しており、コンパクトにまとまっていて、セッションの幕間に無理なく回ることができました。

さまざまな寿司やおかずが詰まった和風弁当の上からの写真。笹寿司や巻き寿司、いなり寿司、焼き魚、海老、煮物、きんぴら風の和え物、あんこのおはぎが仕切りの中に並び、右側に紙パックの  お~いお茶  と箸袋が添えられている。 ランチの提供もあり、スポンサー LT を聴きながら美味しくいただきました。

印象に残ったセッション

ここからは、自分と芳賀が聴講したセッションの中で、特に印象に残ったものをいくつかピックアップしていきます。

TypeScript 6.0で非推奨化されるオプションたち

speakerdeck.com

この基調講演では、将来の TypeScript のバージョンアップ、特に Go 言語で再実装されたコンパイラ「tsgo」の登場を見据えた変更点が解説されました。

tsgo は TypeScript 7.0 から導入予定とされていますが、6.0 が 2026 年 1〜2 月頃、7.0 はその 1 か月後という、予想以上に早いリリーススケジュールが強く印象に残りました。

今回非推奨となるオプションには「プロジェクト内の全ファイルを見ないと挙動が決定できない」ものが複数含まれていました。セッションでは、これらがコンパイラの並列処理を妨げる要因となるためではないかと考察されており、非常に納得感があります。

tsgo によるコンパイル速度の大幅な向上という恩恵を最大限に受けるためには、私たち開発者もこれらの変更に早期に対応していく必要があると感じました。幸いにも、今回の変更は機能の整理が中心で、大きな破壊的変更は少ないとのことです。

tsgo の爆速コンパイルを心待ちにしながら、今のうちからコードベースを整えていきたいです。(芳賀)

フロントエンドにおける「型」の責務分離に対する1つのアプローチ

speakerdeck.com

フロントエンド開発において、型定義はしばしば複雑化します。このセッションでは、その根本的な原因を「ユーザー都合」と「システム都合」という 2 つの異なる外部からの圧力にあると喝破し、その解決策を提示していました。

フロントエンドは、ユーザー(人間)とシステム(機械)という性質の異なる 2 つの要素をつなぐインターフェースです。そのため、本質的に二重性を抱えており、これが型の複雑さを生み出します。

この課題に対し、セッションでは ICONIX プロセス(ユースケース駆動開発プロセス)の考え方を応用し、型の責務を分離するアプローチが紹介されました。

これまで「バックエンドとユーザー操作の 2 つの異なる要求を、いかにして調和させるかがフロントエンド開発の腕の見せ所だ」と漠然と考えていましたが、このセッションは「どのように」分離し、調和させるかという具体的な道筋と、それに伴う型設計について深く示唆を与えてくれました。

早速、自身が関わるプロダクトのコードにもこの考え方を取り入れてみたいと思います。(芳賀)

Nxはいいぞ!monorepoプロジェクトにおける差分検知を活用した型チェック最適化

speakerdeck.com

Nx は、アプリケーションの依存関係の解決と、ビルドやテストといったタスクの並列化・効率的な実行をサポートする、いわゆるモノレポ管理ツールです。セッションでは、Nx の概要について軽く触れられていました。

JSConf JP のときの同社の発表でも取り上げられていましたが、「グラフ構造として依存が偏重しない作りであること」が最適化とパフォーマンス向上の前提条件になるので、Nx を入れたからといって自動的に解決するものではありません。結局は、普段のアプリケーション設計でどれだけそういった考慮がなされているかが重要だなと感じました。(秋山)

type-challenges を全問解いたのでエッセンスと推し問題を紹介してみる

speakerdeck.com

type-challenges は、TypeScript の型システムに関するクイズ形式の演習問題集です。私自身、以前挑戦したものの途中で挫折してしまった経験があり、改めてそのエッセンスを学びたいと思い、このセッションを聴講しました。

セッションでは、厳選された問題が 1 問ずつ丁寧に解説され、聴き進めるうちに自分の型に対する理解が深まっていくのを実感できました。特に、これまで曖昧に理解していた infer キーワードの振る舞いについては、このセッションを通じて腹落ちさせることができたと感じています。

終盤には、型を使って数値の「引き算」を実装するという離れ業も披露され、TypeScript の型システムの表現力の高さと奥深さに改めて驚かされました。非常に面白く、かつ学びの多いセッションでした。(芳賀)

型で守る個人情報:TypeScriptによる静的データガバナンス

※現時点でスライドの公開なし

アプリケーション開発をする上で、個人の名前や住所、電話番号、メールアドレス、IP アドレスなど、個人を特定するための情報を取り扱うことがあります。これらが意図しないタイミングでユーザーへのレスポンスに含まれていると、情報漏洩につながってしまいます。

このセッションでは、こうした個人情報に該当するフィールドの型に Branded Types を使った「個人情報型」を定義し、これらをそのまま参照してレスポンスに含めようとすると型エラーになるようにすることで、意図しない個人情報の混入を防ぐアイデアが紹介されていました。

さらに、個人情報型を変換する mask 関数を用意することで、安全に情報を取り扱うアプローチも提案されていました。

Branded Types は、アイデア次第で TypeScript の型の活用範囲や可能性を拡張できる点が面白いと感じました。(秋山)

アルゴリズムの専門家と挑むフロントエンド実装 − 複雑なロジックを支える設計とパフォーマンス最適化

※現時点でスライドの公開なし

JavaScript では手に余るほど複雑で高度な計算ロジックが必要となったとき、アルゴリズム実装とフロントエンド実装それぞれを専門にもつエンジニアがどのように協働するのか。二重実装を避け、高いパフォーマンスを実現するために、Backend API ではなく Wasm を使って解決するアプローチが紹介されていました。

また、Rust を使った WebAssembly の実装において、wasm_bindgen を使って TypeScript と型連携をしたり、WebAssembly 環境特有のパフォーマンスを保つためのテクニックも合わせて発表されていました。

まだ kickflow では WebAssembly を使った実装はありませんが、選択肢の 1 つとしてカードを持っておくと、やれることがかなり増えると感じています。フロントエンドのエコシステムパッケージに Rust が採用されることは多いですが、WebAssembly 実装言語としての Rust を使ってみたくなる内容でした。(秋山)

参加者体験企画クイズ大会

カンファレンス会場の壇上。スクリーンに「初心者〜上級者まで チームで協力!クイズ大会」「2025.11.23」などの文字とキャラクターイラストが表示され、手前に青いスタッフTシャツを着た登壇者たちが立っている。 クロージングと懇親会の幕間に、参加自由型のクイズ大会があったので参加してきました。

参加者の中からランダムに編成された 5 名ほどのチームで、TypeScript に関する問題に挑戦しました。TypeScript の仕様面の「なるほど」と思わせる内容から、TypeScript 本体のコードの行数といったニッチすぎる設問まで、幅広く楽しめる内容となっていました。

私たちのチームは惜しくも優勝は逃しましたが、初対面の方々と協力して 1 つの目標に取り組む過程で自然と会話が生まれ、その後の懇親会でも話が弾むきっかけとなり、良い企画でした。

懇親会

石川県といえば、やはりカニ!🦀
ちょうど TSKaigi Hokuriku の開催時期と香箱ガニの漁期が重なっているため、なんと懇親会の食事にはたくさんの香箱ガニが並びました!

ビュッフェ台に並ぶ香箱ガニ。甲羅にぎっしり身を詰めたゆでガニが黒い台の上に並び、周囲にレモンの輪切りとカニ味噌を盛った小皿が配置されている。 ビュッフェ台のそば・天ぷらコーナー。手前に小さなお椀に盛られた蕎麦が何段かに積まれ、横に白い器に入ったつゆ、奥には海老や野菜の天ぷらの大皿と薬味の刻みネギが並んでいる。 大きな銀色トレーに一口サイズの色とりどりのケーキが整然と並ぶデザートビュッフェ。ベリーやチョコレートが乗ったケーキの列の奥に、フルーツを乗せたグラスデザートが並び、手前に取り分け用トングと「各種デザート」の札が置かれている。 ホテルの設備をフルに活かした食事の提供に舌鼓を打ちながら、登壇者や参加者と TypeScript 談義に花が咲く、楽しい時間を過ごすことができました。

まとめ

北陸地方で初開催となった今回の TSKaigi は、参加者の熱気と運営の方々のホスピタリティに満ちた、活気あふれるカンファレンスでした。どのセッションも現場の課題感から生まれた「生きた」知見に溢れており、多くの学びを得ることができました。

スクリーンに映し出されたスライド。上部に「TSKaigi 2026」、中央に「TSKaigi 2026 開催決定!! 2026/5/22-23(2日間) ベルサール羽田空港」と大きく告知文が表示されている。 次回の TSKaigi の開催もすでに決定しているとのことで、今から参加するのが楽しみです。

ホワイトボードに「Thank you for coming to TSKaigi Hokuriku 2025 またお会いしましょう!」と手書きでメッセージが書かれ、周りにカニや魚、波や手を振るイラストが描かれている。 最後になりましたが、素晴らしいカンファレンスを企画・運営してくださったスタッフの皆様に、心より感謝申し上げます。TSKaigi Hokuriku 2025 ありがとうございました!

兼六園の秋景色。左側に黄~橙色に色づいた大きな木、右側に雪吊りを施された松の木や石灯籠が立ち、手前には池と飛び石が連なる穏やかな風景が広がっている。
金沢観光も楽しかったです!(写真は兼六園)

We are hiring!

kickflow(キックフロー)は、運用・メンテナンスの課題を解決する「圧倒的に使いやすい」クラウドワークフローです。

kickflow.com

サービスを開発・運用する仲間を募集しています。株式会社kickflowはソフトウェアエンジニアリングの力で社会の課題をどんどん解決していく会社です。こうした仕事に楽しさとやりがいを感じるという方は、カジュアル面談・ご応募お待ちしています!

careers.kickflow.co.jp