Zenn
🧳

JavaScript と TypeScript: どっちがよりカオスか

に公開
JavaScript
TypeScript
npm
Web
frontend
idea

警告: 過度の誇張・事実の脚色を含みます。精神的ダメージは自己責任でハンドルしてください。責任の所在は undefined で宣言済みです。
In JavaScript we trust; in TypeScript we verify; in production we panic.[1]

0. TL;DR を長々と書く矛盾

  • JavaScript (JS): ｢動いたら奇跡｣[2] を体現するブラウザ常駐型スクリプト言語。型？それってフロントエンドの新しい UI ライブラリですか？
  • TypeScript (TS): JS に "静的型" という防弾チョッキとリント警察を着せた亜種。｢コンパイルは通った。あとは祈れ｣[3] が合言葉。
  • どちらも npm install 後に node_modules は銀河の質量 と噂される。[4]

結論先取り: JS は｢早く壊れてみせる芸｣、TS は｢壊れる前に逐語検閲する芸｣。好きな 芸 をどうぞ。[5]

1. 起源という名の混沌

1.1 JavaScript ― 10日間サバイバル開発

1995 年、Brendan Eich は Netscape 社の会議室で 10 日 で言語を作成。寝る間を惜しんで実装した結果、今日も我々は｢=== と == の違い｣で深夜の Stack Overflow を彷徨う羽目になった。[6]

1.2 TypeScript ― Microsoft の "後付け安心パック"

2012 年、Anders Hejlsberg が｢JS くん…そのままじゃ保険が利かないよ｣と呟き誕生。以後 "型安全の味方" と PR されるが、実際は 型体操 という新たな筋トレ器具を開発者に配布しただけという説も濃厚。[7]

2. 典型的な言い訳集 (抜粋)

2.1 JS 開発者の十戒（抜粋）

  1. ｢動くから OK｣
  2. ｢ブラウザごとに違うのは仕様だから｣
  3. NaN !== NaN? 知らんがな
  4. ｢レガシー IE？ ま、Polyfill 祭りで踊ろうぜ｣
  5. ｢async/await? Promise? callback? とりあえず全部使う｣
  6. null, undefined, void 0 の三位一体を崇拝
  7. ｢テストはユーザーがやってくれる｣
  8. left-pad が消えたら世界も消える[8]
  9. ｢クライアントもサーバも JS 一択。人類統一言語！｣
  10. ｢つまりバグは特徴です｣

2.2 TS 信者の十戒（抜粋）

  1. ｢any を使うくらいなら JS に帰れ｣
  2. ｢型体操は朝のルーティン｣
  3. never 型を見ると悟りを開く
  4. ｢ジェネリクスのネストが四重？ 美しい……｣
  5. ｢as キャストは敗北宣言｣
  6. unknown で世界を平和に
  7. ｢デコレータはまだ実験的？ だからロマンがある｣
  8. ｢enum は黒魔術、literal-union が正義｣
  9. ｢型定義のために 100 行追加？ 健康的だ｣
  10. "型さえ通れば実行時エラーは他人事"[9]

3. npm 地獄ツアー

$ npm init -y          # 儀式その1: 空の package.json に祈りを
$ npm install left-pad # 儀式その2: 500 行のコードに 2 行の依存を
$ npm audit fix        # 儀式その3: 400 件の脆弱性 (High) を生成

翌朝: node_modules は 2 GB に膨張。デザイナーが Photoshop 用に残しておいた SSD 領域が謎の @types/lodash に占拠され、社内 Slack は "犯人は誰だ" 祭りに。[10]

4. コンパイル vs. 解釈 ― 永遠の腕相撲

  • JS: "動かしてみてから考える" スタイル。バグは動的デバッガが捕まえる。捕まえられなかったら運命。
  • TS: "コンパイル時に怒られてから泣く" スタイル。エラー 0 件の画面は一瞬のオアシス、すぐに別の型が暴走する。[11]

ワンポイント: TS で型を厳密に書き切ったつもりでも、結局 JSON.parse() はあなたの型宇宙を木端微塵に砕く。人生と一緒だ。[12]

5. ランタイム異聞

5.1 JS in the Wild

  • 冷蔵庫のタッチパネルから国際宇宙ステーションまで JS が内蔵。
  • だが 時差ボケした Date API は 2025 年現在も昭和の香り。[13]

5.2 TS の実行時は JS

  • TS は最終的に JS に 降格 される。
  • つまり｢JS が嫌いだから TS へ逃げる｣は……大回りして JS に帰還するトリックアート。[14]

6. フレームワーク依存症

  1. React: ｢JSX が読めるなら JS は読めるはず｣という逆説を証明。
  2. Vue: ｢何でも書ける｣が故にチームのコーディング規約が 30 ページに膨張。
  3. Svelte: コンパイル時最適化の完璧主義。結果ビルドツール難民続出。
  4. Angular: DI と RxJS の組体操で新人が逃げ出す。
  5. NestJS: Angular の魂をサーバサイドへ移植。新人は再び逃げ出す。[15]

総評: どのフレームワークも｢次こそはシンプル｣と宣言する。直後にプラグイン沼が現れ、輪廻は続く。[16]

7. ここまで読んだあなたへ（選択ガイド）

  • "動けばそれでいい" 派 → JS。一番の推しツール: console.log() と勇気。
  • "死ぬ前にコンパイルで怒られたい" 派 → TS。推しツール: tsc --noEmit と涙。
  • "人柱になりたい" 派 → Deno, Bun, esbuild のカオス三兄弟へどうぞ。
  • "もう疲れた" 派 → 伝統芸 jQuery で癒やされるか、Rust/Wasm に亡命。[17]

8. 未来予想 (大外れ保証)

  1. JS は import brain from 'ai' で自己最適化する。結果、開発者は昼寝専門職へ。
  2. TS は 型推論 AI が全コードを never 型に収束させ、バグも機能も消滅。
  3. npm は node_modules をブラックホールとして宇宙物理学会に認定される。
  4. 前述の全予想が 1 週間で廃れ、新たなフレームワークが誕生する。[18]

9. おわりに

JavaScript と TypeScript は 愛憎劇 そのもの。｢どちらかが正義｣ではなく、｢どちらもカオス｣という真理を受容した瞬間、あなたは一人前のフロントエンド芸人である。[19]

型の有無より大切なのは、読めるコードと寝る前のバックアップ。

さあ、npm run chaos で今日もビルドを回そう。[20]

脚注

  1. パニック経験値はダークマターのように増殖するという非公式研究がある。 ↩︎

  2. Ctrl+R を 3 回押した時点で奇跡は雲散霧消する。 ↩︎

  3. デプロイ後のクラッシュログは概念的にはおみくじ。 ↩︎

  4. 銀河の質量と node_modules を比較する論文が査読に通らなかったのは容量不足のせい。 ↩︎

  5. 拍手は CLI 上で鳴り響くだけで Git 記録には残らない。 ↩︎

  6. 三重比較に疲れた開発者専用の癒やし BGM が Spotify で人気。 ↩︎

  7. 型体操 30 分で燃えるのはカロリーではなく開発時間と言われる。 ↩︎

  8. 16 文字分の虚無に世界が震えた歴史的事件。 ↩︎

  9. 実行時エラーは「想定外の機能」と呼び替えるとハッピーになれるらしい。 ↩︎

  10. npm audit の脅迫状を真に受けると睡眠不足が加速する。 ↩︎

  11. "エラー 0 件" は Fata Morgana――実在しない蜃気楼。 ↩︎

  12. JSON.parse() が成功した時点で既に負けているという哲学。 ↩︎

  13. JS の Date は西暦と和暦とユリウス暦を同時に生きる三刀流。 ↩︎

  14. 結局 JS に戻る壮大なオセロ。 ↩︎

  15. Nest ではなく Nesting と読んで巣作りを始めた新人がいる。 ↩︎

  16. プラグイン沼はカルマ輪廻説を実証するシリコンのサイクル。 ↩︎

  17. Rust/Wasm 亡命組は "ownership" に疲れて再び JS に帰還する予感。 ↩︎

  18. 未来は予定不調和、Issue で再スケジュール予定。 ↩︎

  19. 笑う門にはバグ来たる。 ↩︎

  20. ビルドが通った瞬間、隣のタブで新しいエラーが出るのが宇宙の気まぐれ。 ↩︎

Discussion