モダン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のDateは昔から扱いにくいことで有名だったけど、それを置きかえる新しい日時計算の仕組みがTemporal。TC39（JavaScriptの仕様を決める会議）で2026年3月に正式採用が決まったばかりの新機能だよ。
// Temporalが使えるようになったら、こんな書き方になる予定
const today = Temporal.Now.plainDateISO();
console.log(today.toString());2026年7月時点ではChrome・Firefox・Edgeには搭載されているけど、Safariはまだ対応していないので、このサイトでは体験コーナーを用意していないよ。