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