TypeScript × ES6の連携まとめ！安全でモダンなJavaScript開発の鍵

1. TypeScriptとES6（ESNext）の関係とは？

1. TypeScriptとES6（ESNext）の関係とは？

プログラミングを始めたばかりだと、用語がたくさん出てきて混乱しますよね。まずは、言葉の整理から始めましょう。ES6（イーエスシックス）とは、JavaScriptというプログラミング言語が2015年に大きくアップデートされた時のバージョンの名前です。別名で「ECMAScript 2015（エクマスクリプト 2015）」とも呼ばれます。ESNextは、それよりもさらに新しい、未来のJavaScriptの機能全般を指す言葉です。

TypeScriptは、このES6以降の便利な書き方をすべて取り入れた上で、さらに「型（データの種類）」というルールを追加して、ミスを防ぎやすくした言語です。つまり、TypeScriptを学ぶことは、最新のモダンなJavaScriptを学ぶこととほぼ同じなのです。

パソコンの操作に例えると、JavaScriptが「普通のノート」だとしたら、ES6は「多機能なシステム手帳」、TypeScriptは「書き間違いを自動で修正してくれる魔法のペンがついたシステム手帳」というイメージです。初心者の方でも、この連携を知ることで、より効率的にプログラムを書けるようになります。

2. 変数宣言の進化：letとconstを使いこなす

2. 変数宣言の進化：letとconstを使いこなす

昔のJavaScriptでは、変数（データを入れる箱）を作る時に var という言葉を使っていました。しかし、今の主流（ES6以降）は let と const です。TypeScriptでもこれらを使います。

• let（レット）： 後から中身を書き換えられる箱です。
• const（コンスト）： 一度入れたら二度と中身を変えられない「定数」という箱です。

TypeScriptでは、これらに「型」を組み合わせることで、さらに強力なガードをかけることができます。

const userName: string = "たろう";
let userScore: number = 80;

// userScoreは書き換え可能
userScore = 95;

// userNameはconstなので書き換えようとするとエラーになります
// userName = "じろう"; 

プログラムを作るときは、できるだけ const を使い、どうしても書き換える必要があるときだけ let を使うのが、安全なコードを書くための鉄則です。

3. アロー関数でスッキリ書く

3. アロー関数でスッキリ書く

ES6で導入されたアロー関数は、関数（命令のまとまり）を短く書く方法です。「=>」という矢印のような記号を使うので、アロー（矢）関数と呼ばれます。TypeScriptでは、このアロー関数に引数（渡すデータ）と戻り値（返ってくる結果）の型をしっかり指定します。

「引数（ひきすう）」とは、関数という機械に放り込む材料のこと。「戻り値（もどりち）」とは、その機械から出てくる完成品のことです。これを明確にすることで、機械が壊れる（バグが起きる）のを防ぎます。

// ES6のアロー関数の書き方に、TypeScriptの型を追加
const sayHello = (name: string): string => {
    return "こんにちは、" + name + "さん！";
};

const message = sayHello("花子");
console.log(message);

こんにちは、花子さん！

このように書くと、「この関数は文字を受け取って、文字を返すんだな」と一目でわかります。初心者の方にとっては、最初は少し複雑に見えるかもしれませんが、慣れると非常に読みやすく感じられるようになります。

4. テンプレートリテラルで文字列を結合する

4. テンプレートリテラルで文字列を結合する

文字列の中に変数を埋め込みたいとき、昔はプラス記号 + をたくさん使ってつなげていました。これがES6からは、バッククォート `（キーボードの「Shift + @」あたりにある記号）を使うことで、非常に楽に書けるようになりました。これをテンプレートリテラルと呼びます。

${変数名} と書くだけで、その場所に中身が入り込みます。TypeScriptなら、変数の型が保証されているので、予期せぬデータが紛れ込む心配もありません。

const itemName: string = "リンゴ";
const price: number = 150;

// バッククォートを使って文字列を作る
const info: string = `${itemName}の価格は${price}円です。`;

console.log(info);

リンゴの価格は150円です。

文章が長くなればなるほど、この書き方のありがたみがわかります。プラス記号だらけの読みにくいコードから卒業しましょう。

5. 分割代入（Destructuring）で必要なデータだけ取り出す

5. 分割代入（Destructuring）で必要なデータだけ取り出す

オブジェクト（複数のデータがまとまったもの）や配列から、中身の一部をサッと取り出したいときに便利なのが分割代入です。これもES6の目玉機能の一つです。

例えば、会員情報のオブジェクトがあったとき、その中から「名前」と「年齢」だけを別の変数として使いたい場合に便利です。TypeScriptではオブジェクトの構造（型）をあらかじめ定義できるため、存在しないデータを間違って取り出そうとするとすぐに教えてくれます。

interface UserProfile {
    id: number;
    nickname: string;
    email: string;
}

const user: UserProfile = {
    id: 1,
    nickname: "タロウ",
    email: "taro@example.com"
};

// 分割代入を使って、nicknameだけを取り出す
const { nickname } = user;

console.log("こんにちは、" + nickname + "さん");

こんにちは、タロウさん

わざわざ user.nickname と何度も書かなくて済むので、コードがとてもスッキリします。これを覚えると、プロレベルのコードに一歩近づきます。

6. スプレッド構文でデータを展開・コピーする

6. スプレッド構文でデータを展開・コピーする

ドットを3つ並べる ... という記号をスプレッド構文と言います。「スプレッド（Spread）」には「広げる、散らす」という意味があります。これを使うと、配列やオブジェクトの中身をバラバラにして、別の場所に広げることができます。

例えば、古い名簿に新しい人を追加して、新しい名簿を作りたいときなどに使います。TypeScriptでは、元のデータがどんな形をしているかを知っているので、展開した後のデータも安全に扱うことができます。

const originalFruits: string[] = ["バナナ", "オレンジ"];
// スプレッド構文で展開しつつ、新しい要素を追加
const newFruits: string[] = [...originalFruits, "メロン"];

console.log(newFruits);

["バナナ", "オレンジ", "メロン"]

元の originalFruits を壊さずに、新しい配列を作れるのがポイントです。データを壊さない（イミュータブルと呼びます）プログラミングは、不具合を減らすための非常に重要な考え方です。

7. 非同期処理の味方：Promiseとasync/await

7. 非同期処理の味方：Promiseとasync/await

「インターネットからデータをダウンロードする」といった、時間がかかる処理を待っている間、プログラムが止まってしまったら困りますよね。そういった「待ち時間が発生する処理」をうまく扱うのがPromise（プロミス）やasync/await（エイシンク・アウェイト）です。

ES6でPromiseが登場し、その後のアップデートでasync/awaitが追加されました。TypeScriptを使うと、この「いつか返ってくるデータ」が、具体的にどんな型なのかを予約しておくことができます。

// 疑似的にデータを取得する関数（Promiseを返す）
const fetchData = (): Promise<string> => {
    return new Promise((resolve) => {
        setTimeout(() => resolve("データ取得完了！"), 2000);
    });
};

// async/awaitを使って、スッキリ書く
const showResult = async () => {
    console.log("読み込み中...");
    const result: string = await fetchData(); // ここで待つ
    console.log(result);
};

showResult();

await を使うことで、「データが返ってくるまで、ここでちょっと待っててね」という命令を、まるで普通の処理のように上から下へ順番に書くことができます。TypeScriptなら、受け取った result がちゃんと string（文字列）であることも保証されるので、その後の処理も安心です。

8. なぜTypeScriptとES6を一緒に使うのか？

8. なぜTypeScriptとES6を一緒に使うのか？

ここまで紹介してきたES6以降の機能は、どれも非常に便利ですが、JavaScript単体だと「自由すぎてミスに気づきにくい」という弱点があります。たとえば、数字を期待しているところに文字が入ってしまっても、実行するまでエラーに気づけません。

TypeScriptを組み合わせることで、最新の便利な書き方（ES6/ESNext）を楽しみつつ、プログラムを実行する前に「あ、そこは型が違いますよ！」とパソコンが優しく注意してくれるようになります。これが、安全でモダンな開発の鍵なのです。

また、古いブラウザ（インターネットを閲覧するソフト）では、最新のES6の書き方が動かないことがあります。TypeScriptを使えば、書くときは最新の書き方で、公開するときは古いブラウザでも動く形に自動で変換（コンパイル）してくれるという素晴らしいメリットもあります。これにより、開発者は常に最先端の技術を使ってプログラミングを楽しむことができるのです。