✅JavaScriptとTypeScriptの違いから理解しよう
まず、そもそもJavaScriptとTypeScriptって何が違うの？というところから整理しましょう。
| 項目 | JavaScript | TypeScript |
|---|---|---|
| 型指定 | なし（動的型付け） | あり（静的型付け） |
| エラー検出 | 実行時にわかる | コーディング中・ビルド時にわかる |
| 学習コスト | 低い | やや高い（JSの知識が前提） |
| コンパイル | 不要（すぐ動く） | JSに変換（トランスパイル）が必要 |
| 主なメリット | 書きやすい、柔軟性がある | 安全で大規模開発に強い |
💡 TypeScriptは「型付きのJavaScript」
TypeScriptはJavaScriptをベースにした上位互換の言語で、number や string などの型を明示的に書けるようになります。
✅ 例：数値を2倍にする関数
JavaScriptの場合
function double(num) {
return num * 2;
}
console.log(double('10')); // → "1010"（文字列結合になってしまう！）TypeScriptの場合
function double(num: number): number {
return num * 2;
}
console.log(double('10')); // ❌ エラー（型が違う）TypeScriptでは間違いを事前に防げるのが大きな強みです。
✅ map と forEach の基本的な違い
| 項目 | map() | forEach() |
|---|---|---|
| 用途 | 配列を変換して新しい配列を作る | 各要素に処理を行う（副作用） |
| 戻り値 | 変換後の新しい配列 | undefined（何も返さない） |
| 使用シーン | データ変換（表示用リストなど） | 初期化、ログ出力、API呼び出しなど |
| 関数の return | 必須（返さないと undefined 配列） | 任意（返しても無視される） |
✅ mapの例と使い方
📌 例1：数値を2倍にする
const numbers = [1, 2, 3];
const doubled = numbers.map(n => n * 2);
console.log(doubled); // [2, 4, 6]📌 例2：文字列を大文字にする
const names = ['taro', 'hanako'];
const upper = names.map(name => name.toUpperCase());
console.log(upper); // ['TARO', 'HANAKO']📌 例3：オブジェクトから別の形に変換する
type User = {
id: number;
name: string;
};
const users: User[] = [
{ id: 1, name: 'Sato' },
{ id: 2, name: 'Tanaka' }
];
const nameList = users.map(user => `${user.id}: ${user.name}`);
console.log(nameList); // ['1: Sato', '2: Tanaka']✅ forEachの例と使い方
📌 例1：各要素を初期化する（副作用）
users.forEach(user => {
user.name = '初期名';
});📌 例2：ログ出力に使う
const logs = [101, 102, 103];
logs.forEach(log => {
console.log(`ログ番号: ${log}`);
});📌 例3：HTMLの描画（例：ReactやVueでも応用可能）
const fruits = ['🍎', '🍌', '🍇'];
fruits.forEach(fruit => {
document.body.innerHTML += `<p>${fruit}</p>`;
});✅ よくあるミス：mapで return を忘れる
const nums = [1, 2, 3];
const result = nums.map(n => {
n * 2;
});
console.log(result); // [undefined, undefined, undefined]これは return をしていないためです。
👉 正しい書き方：
const result = nums.map(n => {
return n * 2;
});または
const result = nums.map(n => n * 2);✅ まとめ：使い分けの早見表
| シーン | map | forEach |
|---|---|---|
| 新しい配列を作る（値の変換） | ✅ | ❌ |
| 各要素に処理をする（副作用のみ） | ❌ | ✅ |
| 返り値を使いたい | ✅ | ❌ |
| ループの途中でbreakしたい（→できない） | ❌ | ❌ |
✅ さらに理解を深めたい人へ
filter()：条件に合う要素だけに絞り込みreduce()：配列を集計したいときに便利some()/every()：条件判定系
const hasEmpty = users.some(user => user.name === '');🎯 結論
- TypeScript を使えば
mapやforEachの使い方をより安全に実装可能！
mapは変換専用
forEachは処理専用
- 用途に応じて正しいツールを選ぶことが大事
コメント