TL

Language Profile

JavaScript

Brendan Eich / 1995年登場

ブラウザ上で動く唯一の言語Node.js でサーバ側でも動き、Web 開発の中心どこでも動く反面、弱い型付けの落とし穴も多い

TL;DR要点だけ先に
  • 1.ブラウザで動く唯一の言語で Web の中心。
  • 2.npm の巨大エコシステムで前後両方を1言語で。
  • 3.大規模で型が欲しくなれば TypeScript へ。

Specifications

基本情報

Introducing

JavaScript のロゴ
JavaScriptブラウザ上で動く唯一の言語。Node.js でサーバ側でも動き、Web 開発の中心。どこでも動く反面、弱い型付けの落とし穴も多い。
型付け
動的弱い型付け
実行方式
インタプリタJIT エンジン)
パラダイム
マルチパラダイムイベント駆動 / 関数 / OOP)
登場
1995年Brendan Eich
この言語の強み
ブラウザ標準どこでも動く巨大なエコシステム(npm)
活躍する領域
Web フロントエンドNode.js バックエンド / ツール・全般

Decision Guide

選定ポイント

採用する理由と、事前に受け入れるべきトレードオフを分けて確認します。

Why It Fits

選ぶ理由

  1. ブラウザ標準・どこでも動く
  2. 巨大なエコシステム(npm)
  3. フロント/バック両方を1言語で

Trade-offs

考慮すべき点

  1. 弱い型付けで実行時エラーが出やすい
  2. 歴史的な落とし穴(暗黙の型変換等)
  3. 大規模では型が欲しくなる → TypeScript

Best Fit

こんな用途に向く

Web フロントエンドNode.js バックエンドツール・全般

Deep Dive

もっと詳しく

どんな言語か

JavaScript は 1995 年に登場した、もともと ブラウザの中で動かすため に作られた言語です。今では Web ページに動きをつけるだけでなく、Node.js によってサーバ側でも動き、フロントエンドからバックエンド、デスクトップアプリ(Electron)まで 1 つの言語でカバーできます。

名前に Java と入っていますが、Java とは別物です。動的型付けで、関数を値として扱える(第一級関数)柔軟な言語であり、async / await による非同期処理が言語に深く組み込まれているのが特徴です。

ブラウザで動く唯一の言語

Web フロントエンドで「動き」をつけられるのは、実質 JavaScript(とそれにコンパイルされる言語)だけです。ボタンを押したときの処理、サーバとの通信(fetch)、画面の書き換え(DOM 操作)はすべて JavaScript の仕事です。React・Vue・Svelte などのフレームワークも、最終的には JavaScript として動きます。

非同期が前提の言語

// 「待つ」処理を直線的に書ける async/await
async function loadUser(id) {
  const res = await fetch("/api/users/" + id);
  if (!res.ok) throw new Error("not found");
  return res.json();
}

ネットワークやファイルの読み込みなど「時間のかかる処理」を、他の処理を止めずに 扱うのが得意です。古くはコールバック地獄と呼ばれた書き方が、Promise と async / await で読みやすくなりました。

つまずきやすいところ

  • 弱い型付け / 暗黙の型変換"5" + 3"53""5" - 32。意図しない変換に注意。
  • =====:型変換ありの == は避け、厳密比較の === を使うのが定石。
  • this の挙動:呼び出し方で this が変わる。アロー関数で固定するのが基本。
  • 規模が大きくなると型が欲しくなるTypeScript へ。実務の大規模開発では TypeScript がほぼ標準。

エコシステム

npm(パッケージ管理)には世界最大級の数のライブラリがあり、たいていのことは既存パッケージで解決できます。一方で 選択肢が多すぎて構成が分散しがち という裏返しの悩みもあります。まずは素の JavaScript で基礎を押さえ、規模に応じて TypeScript やフレームワークを足していくのが王道です。

Language Decision

JavaScriptを実務で読む

TL;DRは入口です。実際に選ぶ・使う段階では、何を解決するか、何と比較するか、導入後にどこで詰まるかまで見る必要があります。

解決すること

Web フロントエンド

比較で見る軸

型付け: 動的・弱い型付け / 実行方式: インタプリタ(JIT エンジン) / パラダイム: マルチパラダイム(イベント駆動 / 関数 / OOP)

導入後に効く点

巨大なエコシステム(npm)

先に潰すリスク

弱い型付けで実行時エラーが出やすい

数字・仕様の読み方
型付け
動的・弱い型付け
実行方式
インタプリタ(JIT エンジン)
パラダイム
マルチパラダイム(イベント駆動 / 関数 / OOP)
登場
1995年
Brendan Eich

判断チェックリスト

  • 自社の用途が「Web フロントエンド / Node.js バックエンド」に近いか確認する。
  • 強みである「ブラウザ標準・どこでも動く」が本当に評価軸になるか確認する。
  • 注意点の「弱い型付けで実行時エラーが出やすい」を運用で吸収できるか確認する。
  • 公開値や仕様値は、対象プラン・対象機種・対象リージョンまで確認する。
  • 既存システム、ID、ネットワーク、監視、バックアップとの接続方法を先に洗い出す。
  • 小さく試してから、本番移行、権限設計、障害時手順、コスト監視を決める。

次に確認する観点

Web フロントエンドNode.js バックエンドツール・全般

First Step

Hello, World!

console.log("Hello, World!");
公式ドキュメント