カミナシ × TechBowl 合同勉強会レポート〜TypeScriptからWasmまで、開発のリアル〜

2025年5月30日、カミナシ社オフィスで「TypeScriptの開発環境に絡めた現場の知見」を合言葉に、TypeScript・Next.js・AI・Wasm・Cloudflareなど、それぞれの現場からの実践知が詰まった6本のセッションが繰り広げられた合同勉強会を開催しました。開始前からKAWAII LAB.のBGMが流れるポップな雰囲気でスタートした勉強会。

本記事では、登壇者の技術的エッセンスをギュッと凝縮してお届けします。

登壇トピックまとめ

「そのNext.js(Server Actions)のセキュリティを意識できていますか？」by Ken Watanabeさん

Server Actionsは「便利だけど危うい」──気を抜くと大きな脆弱性につながることを実際の事例も交えてわかりやすく解説。実際のコードやそれを実行するとどうなるのかが話の流れで入ってきやすく学びになるセッションでした。

登壇内容サマリ：

Next.js 14以降で導入された「Server Actions」は、use serverを付けるだけでクライアントからサーバ関数が呼び出せる便利な機能。しかしその気軽さゆえに、セキュリティ面での見落としも起こりやすくなってしまいます。その対策もセットで解説。

実態はfetchによるPOST通信。curlでも実行可能
パストラバーサル、環境変数の露出など、ナイトメアな実装例も紹介
対策として、バリデーションの徹底・ヘッダー設定・リクエストサイズ制限が必須

登壇資料に掲載されているカミナシ社のProduction Readiness Checkについては、以下のテックブログからチェックできます！

「FigmaのMCPを活用したNext.js withTypeScriptの爆速実装ガイド」by スーさん

「理想の状態を定義し、そこに近づけるループを回す」──AIを活用するうえでの実装ガードレール設計について。AI活用は、まだまだTechTrainの中でも模索中！現段階でお伝えできる内容を凝縮して公開。

登壇内容サマリ：

Figmaの構造データをAIが理解可能な形式に変換する「MCP（Model Context Protocol）」を活用し、FigmaとCursor、Next.jsの連携による実装自動化ワークフローを紹介。

Figma → Style Dictionary → 実装に反映
型定義・バリアント・デザインパターンなどを前提に設計することで、AI実装の精度向上
実装後はlinter・型チェックで品質を担保、自動化と品質の両立

「TSで型安全なエラーハンドリング〜まずはBranded Typeから始めてみては？〜」by かわりくさん

小さく導入できてチームにも広げやすい設計。型安全なエラーハンドリングについて話を聞いてすぐに実践できそうなくらい具体的な話が10分に落とし込まれていました。

登壇内容サマリ：

TypeScriptでよくある「try-catchのerrorがunknownで困る」問題に対し、Branded Typeを活用するアプローチ。実際のコードを見せながら、エラーハンドリングとBranded Typeそれぞれについてコンパクトにかつわかりやすくまとめており、話を聞いてからすぐに試してみたくなるような解説。

string & { __brand: 'ErrorName' } のように型にタグを付けて識別
エラーはthrowではなくreturnで返す → 扱いやすく型安全
AIコーディング補完との相性も◎、現場にフィットしやすい導入方法

「「Figma見れば全部わかる」を目指したデザインシステム」by だいちさん

時間が限られている中でブランディングと同時に複数プロダクトを立ち上げるために導入したデザインシステム。参照先をFigmaのみにしたり、用意するコンポーネントをあえて絞ることでフロントとのやり取りの効率化に対する取り組みが主なテーマ。スーさんの登壇内容とも関連が深く、まだまだこれから進化の余地のあるTechTrainのデザインシステムの現在地について発表してくれました。

登壇内容サマリ：

リブランディングとデザインシステムの構築を同時に行う方針・効率化の意思決定
プロダクト制作高速化のための取捨選択・仕組み作り

Figma運用において自動化の前提には“設計の整理”がある。どこまで定義するかも含めて作って終わりにならずプロダクトや環境とともに育てていく必要があるし今後もプロダクトの進化に合わせてやりたいことはまだまだたくさんあります。

FigmaCommunityに公開したTechTrain Terminal. [ UI Design System ]は以下のURLからチェックできます！

https://www.figma.com/community/file/1472050808130527580/techtrain-terminal-ui-design-system

「リアルタイムAIの実装とWasm奮闘記」by Tomohiro Inoueさん

食品ラベル検査AIを実装する中で、Python → TypeScript（OpenCV.js）→ C++（Wasm）と3回プログラムを書いた過程をリアルに紹介。本当は1回の書き直しで完了の予定だったはずが、2回になった背景も含め、実務で試したからこその知見たっぷりのセッションでした。

登壇内容サマリ：

実装変遷そのものが教訓。カミナシ社ならではの現場で実際に活用されるシーンにおける必要事項も加味した上で「最適な技術選定は一発では決まらない」ことを痛感するリアルな開発記録。緊張感がある現場実装の話から最後はチームメンバーみんなで「ロブスター食べた」のオチでほっこりタイムもあった素敵な内容。

OpenCV.jsは手動deleteが必要でメモリリーク多発
C++でWasmに落とし込むことで処理速度・精度・安定性がUP
wasm領域ではマルチスレッドの課題も残るが、エッジAIの可能性は大きい

「Cloudflare Durable Objectsについて」by Ugoさん

今回、TechTrainメンターとして登壇したUgoさんは、Cloudflare Workers + Durable Objectsでリアルタイムチャットを実装した個人開発での事例を紹介。サーバレス × 状態管理 × WebSocketという組み合わせでシンプルかつスケーラブルな構成に。メリットデメリットやその回避方法なども具体的に提示してくださり、今後の技術選定や検証のヒントとして参考になる、実感のこもったセッションでした。

登壇内容サマリ：

Cloudflare Workersだけでは難しい「状態を持つ処理」を、Durable Objectsを活用して丁寧に組み上げていく姿勢が印象的。ユースケースに即した選定と構成により、リアルタイム性や一貫性を担保する上での実装アプローチが参考になる内容。

Durable Objectで各ルームの状態を保持
WebSocketをつなげてリアルタイム通信を管理
ステートフルに見える構成を、ステートレス基盤上でどう作るかが鍵

おわりに

技術の進化と実装の現場感が混じり合った6本のLTは、どれも単なる「知識の共有」にとどまらず、課題への向き合い方や実務上の工夫までを含んだリアルな学びにあふれていました。

「Server Actionsをセキュアに使うには？」「AIとデザインの協業はどこまで自動化できる？」「型安全な設計って、実際どう始めるの？」

そんな問いへの“現場からの答え”が詰まった、刺激的な3時間となりました。また、後半の交流会ではセッションの内容のより細かい部分や、日々の業務で困っている実装についてなどの議論も飛び交っていましたよ！

また、今回はカミナシさんのカルチャーである「現場主義」ということで、TechTrainのアンバサダーを務めてくれている東京海洋大学プログラミングサークルNeppの学生3名をご招待し実際に現場で働くエンジニアからの知見を持ち帰ってもらう機会にもさせていただきました。

▼Nepp公式Xのポスト

株式会社カミナシ様×株式会社Techbowl様(TechTrain)の勉強会に参加させていただきました！
実際に働かれてる社員さんから貴重なお話も聞けてとても勉強になりました！！#TechTrain #勉強会 #東京海洋大学 #プログラミング pic.twitter.com/DWv0t8NHqe
— NePP@海洋大プログラミングサークル (@NePP63975908) June 4, 2025