モダンJS × TypeScript🔷
2026年のいまどきなJavaScriptの機能を、TypeScriptの型をつけながら学んでいくよ。TSきほんで学んだ型注釈・関数の型・インターフェースを、実際の機能の中で使い倒していこう。
コードをファイルに分けて、必要な部分だけ読み込めるようにする仕組み。
exportで「他のファイルに渡せるようにする」、importで「他のファイルから受け取る」。このサイトのプレイグラウンドは1ファイルだけなので実際には動かせないけど、複数ファイルに分けるときはこんなふうに書くよ。
// math.ts
export function add(a: number, b: number): number {
return a + b;
}
// main.ts
import { add } from "./math.ts";
console.log(add(2, 3)); // 5<script type="module" src="...">という書き方を使っているよ。type="module"をつけると、その中でimport/exportが使えるようになる。
オブジェクトや配列から、必要な値だけサクッと取り出したり、まとめて広げたりできる書き方。
map・filter・atなど、配列を扱う便利なメソッドたち。
同じ形のオブジェクトをたくさん作るための「型」。たい焼きの型みたいなイメージだよ。プロパティにも型をつけられるよ。
extendsを使うと、既存のクラスをもとにした新しいクラスを作れるよ（クラスの継承）。super(...)で、もとのクラスのconstructorを呼び出せる。
class BabyChick extends Pet {
constructor(name: string) {
super(name, "ピヨッ"); // Petのconstructorを呼ぶ
}
}
const baby = new BabyChick("ぴよ");
console.log(baby.speak()); // "ぴよ: ピヨッ！"配列の中身を、条件でグループ分けできる関数。以前は自分でループを書く必要があった処理が1行で済むよ。
?.と??を使うと、値が無いかもしれないときのエラーを防ぎつつ、きれいに書ける。型の上でも「無いかもしれない」を表せるよ。
非同期「結果が返ってくるまで少し時間がかかる処理」を、他の処理を止めずに進められるようにする仕組みのこと。処理を、まるで順番に実行されるかのように書ける仕組み。実際に外部のAPIからデータを取ってきてみよう。
jsonplaceholder.typicode.comは、練習用に誰でも自由に呼び出せる公開APIだよ。実際のサービスを作るときは、それぞれのAPIの利用規約を確認してね。
オブジェクトや配列を、中身までまるごと複製（ディープコピー）できる関数。
original）は変わらないよ。単純な代入だと同じ配列を指してしまって、コピーを書きかえると元も変わってしまうんだ。structuredCloneはそれを防いでくれる。
💡 型推論と、このプレイグラウンドの限界
毎回: 型名を書かなくても、TypeScriptは値から型を自動で見ぬいてくれることが多いよ（これを「型推論」と呼ぶ）。
let count = 0; // 型を書かなくても number だと自動でわかる
count = "文字列"; // 実際の開発では、ここでエラーになるtscコマンドやVS Codeの機能が必要（かんきょう準備のページでVS Codeを入れたら、TypeScriptのファイルを開くだけで自動的にチェックしてくれるようになるよ）。
📅 新しい日時の扱い方：Temporal API
ブラウザの対応を確認
日付や時刻を扱いやすくするJavaScriptの新しい仕組みがTemporal。TC39（JavaScriptの仕様を決める委員会）で採用が確定した「Stage 4」に到達していて、対応ブラウザではもう使えるよ。
// 今日の日付と、7日後の日付を求める
const today = Temporal.Now.plainDateISO();
const nextWeek = today.add({ days: 7 });
console.log(today.toString());
console.log(nextWeek.toString());
plainDateISO()で今いるタイムゾーンの今日の日付を取り出して、add({ days: 7 })で7日後を計算できるんだ。月や年をまたぐ計算もおまかせ！ 元のtodayは変わらず、新しい日付が返ってくるよ。
2026年11月9日確認：Chrome・Edgeは144以降、Firefoxは139以降で対応しているよ。Safariの正式版はまだ未対応で、開発者向けのSafari Technology Previewでは対応が進んでいるところ。最新の状況はMDNの対応表、仕様の進み具合はTC39の公式資料（英語）で確認できるよ。
typeof Temporalで、今使っているブラウザが対応しているか調べられるよ。未対応の環境でも使いたいときは、機能を補う「ポリフィル」というライブラリを使う方法もあるんだ。