write-modern-javascript

モダンな JavaScript を書く

概要

TypeScript は JavaScript にコンパイルされ、その出力の品質はターゲット設定とコーディングスタイルによって異なります。モダンな JavaScript（ES2020 以降）を書き、互換性への対応はダウンレベルコンパイルによって TypeScript に任せましょう。モダンな機能を使うと、フォールバックを手動で実装するよりも、コードをすっきり効率的にできることがよくあります。

標準のモダンな機能がある場合は、コンパイル後に冗長な JavaScript になる TypeScript の機能を避けましょう。

このスキルを使う場面

• JavaScript にコンパイルされる TypeScript を書くとき
• tsconfig.json の target を設定するとき
• 使用する言語機能を選ぶとき
• コンパイルを通じて古いブラウザーをサポートするとき
• バンドルサイズを最適化するとき

絶対原則

モダンな JavaScript（ES2020 以降）を書き、古い環境向けのダウンレベルコンパイルは TypeScript に任せましょう。冗長なコードにコンパイルされる TypeScript 固有の機能より、標準機能を優先してください。

検出

古いパターンに注意してください。

// RED FLAGS - Outdated patterns
var x = 1;                    // Use const/let
function Person() { }         // Use class
Promise.resolve().then(...);  // Use async/await
Object.assign({}, obj);       // Use spread: { ...obj }

優先すべきモダンな機能

// Use const/let instead of var
const PI = 3.14159;
let count = 0;

// Use arrow functions for callbacks
const doubled = numbers.map(n => n * 2);

// Use destructuring
const { name, age } = person;
const [first, ...rest] = items;

// Use spread instead of Object.assign
const merged = { ...defaults, ...options };
const combined = [...arr1, ...arr2];

// Use async/await instead of Promise chains
async function fetchData() {
  const response = await fetch('/api/data');
  const data = await response.json();
  return data;
}

// Use optional chaining
const street = user?.address?.street;

// Use nullish coalescing
const value = input ?? 'default';

ターゲットを適切に設定する

// tsconfig.json
{
  "compilerOptions": {
    "target": "ES2020",      // Modern target for modern output
    "lib": ["ES2020", "DOM"], // Include modern APIs
    "module": "ESNext",      // Use ES modules
    "moduleResolution": "node"
  }
}

互換性への対応は TypeScript に任せる

// Write modern code:
class Person {
  name: string;
  #age: number;  // Private field
  
  constructor(name: string, age: number) {
    this.name = name;
    this.#age = age;
  }
  
  async celebrate() {
    return `${this.name} is ${this.#age}!`;
  }
}

// TypeScript compiles for target: ES2015
// or passes through for target: ES2022

冗長な TypeScript のパターンを避ける

// AVOID: TypeScript parameter properties
class Point {
  constructor(public x: number, public y: number) {}
}
// Compiles to verbose code with assignments

// PREFER: Standard class fields (ES2022+)
class Point {
  x: number;
  y: number;
  
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
}
// Cleaner output, standard JavaScript

プレッシャーに負けないためのプロトコル

TypeScript を書くときは、次の点に従ってください。

1. 最新のターゲットを使う：target を ES2020 以降に設定します
2. モダンな JS を書く：現在の JavaScript 機能を使います
3. 互換性への対応は TS に任せる：コンパイラーを信頼します
4. 出力を確認する：コンパイル後のコードをときどき確認します
5. TS 専用機能を避ける：必要な場合を除き、使わないようにします

注意すべき兆候

アンチパターン	問題	解決策
var 宣言	古く、スコープの問題があります	const／let を使います
手動の Promise チェーン	読みにくくなります	async／await を使います
Object.assign	冗長です	スプレッド演算子を使います
Array.prototype のメソッド	冗長です	モダンな配列メソッドを使います

よくある自己正当化

「古いブラウザーをサポートする必要があります」

実際には：target を適切に設定し、ダウンレベルコンパイルは TypeScript に任せましょう。古いコードを手動で書かないでください。

「昔のやり方に慣れています」

実際には：モダンな JavaScript はよりすっきりしていて、保守しやすいものです。現在のパターンを学ぶ時間を取りましょう。

「同じものにコンパイルされます」

実際には：そうならないこともよくあります。モダンな機能を使うと、より効率的なコードを生成できる場合があります。

クイックリファレンス

代わりに	使うもの	メリット
var	const／let	ブロックスコープになり、巻き上げの問題がありません
function コールバック	アロー関数	this がレキシカルに決まり、コードもすっきりします
.then() チェーン	async／await	読みやすく、エラー処理も簡単になります
Object.assign()	スプレッド {...obj}	すっきりしていて、標準的です
arr.indexOf() !== -1	arr.includes()	意図がより明確になります
手動のループ	map、filter、reduce	宣言的で、関数型です

要点

モダンな JavaScript を書き、互換性への対応は TypeScript に任せましょう。モダンな機能によってコードがすっきりし、TypeScript のダウンレベルコンパイルによって必要な環境で動作するようになります。

参考資料

• Dan Vanderkam 著『Effective TypeScript, 2nd Edition』
• 項目 79：モダンな JavaScript を書く