鹿野さんに聞く！『TypeScriptコードレシピ集』で磨く実践力

2026年06月30日（火）に開催された、Findy「鹿野さんに聞く！『TypeScriptコードレシピ集』で磨く実践力」で発表した資料です。

https://findy.connpass.com/event/396860/

Transcript

2. 株式会社Ubie Staff Product Engineer @tonkotsuboy_com 鹿野 壮（かの たけし）
3. 01 『TypeScriptコードレシピ集』とは
5. 技術評論社 / 2026年5月28日発売 TypeScriptやJavaScriptの「〜したい」から 引ける逆引き形式 全14章・177レシピ・640ページ TypeScript 7対応 『TypeScriptコードレシピ集』とは
7. 640ページ・742gあります
8. 初学者〜中級者を対象 TypeScriptはもちろん、JavaScriptをこれから学ぶ人も 使えるように 基礎レシピも充実
9. JavaScriptの基本的な書き方と実行方法を知りたい（003） TypeScriptの環境構築の方法について知りたい（005） 関数とは何か？（078） TypeScriptの型を明示したい（028） 配列に型注釈をしたい（060） 基礎レシピ例
10. 配列の要素を並び替えたり、逆順にしたい（069） toSorted() , toReversed() 非同期処理を途中でキャンセルしたい（107） AbortSignal.timeout() 配列やオブジェクトをディープコピーしたい（076） structuredClone() 絵文字を崩さずに文字数を数えたい（058） Intl.Segmenter 新しいJavaScriptの事例
11. 02 手を動かして学べるように
12. 書籍は、読むだけではなく自分の手で書くことで学べる 書籍内のコードはすべてサンプルコードとして実行可能 1,000ファイル超え ZipまたはGitHubから入手できる 充実したサンプルコード
13. 実例の掲載：現場でよくあるシーンを再現
14. とはいえ環境構築が面倒
15. 最初はTS Playgroundがオススメ https://www.typescriptlang.org/play/
16. Microsoft公式のプレイグラウンド https://www.typescriptlang.org/play/ ブラウザだけで実行可能 型エラーもリアルタイム表示 最初はTS Playgroundがオススメ レシピ004「TypeScriptをオンラインで手軽に試したい」 （第1章）
17. クリックするだけで起動 本書の全サンプルにPlayground用リンクを掲載
18. 03 推しレシピ
19. 1 配列を並び替えたり、逆順にしたい 第5章 レシピ069
20. const nums = [10, 2, 30]; nums.sort((a, b) => a - b); console.log(nums); // [2, 10, 30] sort() は元の配列を壊す
21. const nums = [10, 2, 30]; const sorted = nums.toSorted((a, b) => a - b); sorted; // [2, 10, 30] nums; // [10, 2, 30] ← 元はそのまま toSorted() なら非破壊 Playgroundで動かす
22. 元の配列を壊さないので、 共有データを意図せず書き換えない 新しい参照が返るのでReactで再描画され、 コピーの手間も不要 toSorted() のメリット
23. 2 型述語を推論させたい 第9章 レシピ115
24. :value is number という「型述語」を書かないと number[] にならない const result = [12, null, 24, undefined, 48] .filter( (value): value is number => value != null, ); 配列のnull を除外するケース
25. const result = [12, null, 24, undefined, 48] .filter( (value) => value != null, ); result; // number[] ← 自動で推論される 5.5 から自動で推論される レシピ115（第9章） 　 Playgroundで動かす
26. 3 存在しない可能性がある配列の インデックスアクセスを型安全にしたい 第14章 レシピ174
27. 指定したインデックスの最初の文字（at(0) ）を取得する foods[0] ・foods[1] ・foods[2] はstring と推論される foods[2] は実際は存在しない（undefined ）なのでエラー const foods: string[] = ["カレー", "うどん"]; console.log(foods[0].at(0)); // 「カ」 console.log(foods[1].at(0)); // 「う」 console.log(foods[2].at(0)); // ランタイムエラー 文字列型の配列
28. 配列のプロパティにインデックスアクセスする際、要素が存在す るかのチェックを要求 // tsconfig.json { "compilerOptions": { "noUncheckedIndexedAccess": true } } noUncheckedIndexedAccess を有効にする
29. ?. で要素の存在チェックをしないとエラーになる foods[0] など明らかに存在する要素もチェックが必要 const foods: string[] = ["カレー", "うどん"]; console.log(foods[0]?.at(0)); // 「カ」 console.log(foods[1]?.at(0)); // 「う」 console.log(foods[2]?.at(0)); // undefined noUncheckedIndexedAccess が有効なとき Playgroundで動かす
30. 04 TypeScript 7への対応
31. tsc をGo ネイティブ実装に移植 ビルド・型チェックを約10倍高速化 2026/6/18RCが公開 「tsgo」と呼ばれていたコンパイラがtscに統合 2026年7月ごろ正式リリース予定 TypeScript 7 レシピ008「TypeScriptのネイティブコンパイラーについて知りたい」 （第1章）
32. TypeScript 7の前の安定版6、RC版のTypeScript 7で動作を確認 息の長い書籍を目指した 本書のサンプルはTS7対応 TS7 互換チェックレポートを開く
35. 05 AI時代に書籍を学ぶ意義
36. 誰でも大量・高速にコードを書ける時代 広範囲の本質的・基礎的な知識が要ると感じる 元々私はフロントエンドだった バックエンド・モバイルアプリ開発・データ分析・ インフラ周りなどあらゆるリポジトリを横断してコードを 読み書きするようになった 「速く書く」より、AIのコードを素早く理解し、判断する力 求められる力が変わった
37. 分野によってはYESだが、基本的には私はNO 前職でFinTech（金融） 、 現職ではHealthTech（健康・医療）の分野にいる 自分の作ったサービスでユーザーが不利益を被ったとき、 「AIが全部作ったのでわかりません、責任をとりません」 とは言えない AIがコードを書こうが、 成果物の最終責任者は我々である 全部AIに任せ、コードは理解しなくていいか？
38. 学び直したくて放送大学に通ってます
39. XでフロントエンドとAIの情報を発信しています @tonkotsuboy_com