Why It Fits
選ぶ理由
- ブラウザ標準・どこでも動く
- 巨大なエコシステム(npm)
- フロント/バック両方を1言語で
Language Profile
Brendan Eich / 1995年登場
ブラウザ上で動く唯一の言語。Node.js でサーバ側でも動き、Web 開発の中心。どこでも動く反面、弱い型付けの落とし穴も多い。
Specifications
Introducing
Decision Guide
採用する理由と、事前に受け入れるべきトレードオフを分けて確認します。
Why It Fits
Trade-offs
Best Fit
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" - 3 は 2。意図しない変換に注意。== と ===:型変換ありの == は避け、厳密比較の === を使うのが定石。this の挙動:呼び出し方で this が変わる。アロー関数で固定するのが基本。npm(パッケージ管理)には世界最大級の数のライブラリがあり、たいていのことは既存パッケージで解決できます。一方で 選択肢が多すぎて構成が分散しがち という裏返しの悩みもあります。まずは素の JavaScript で基礎を押さえ、規模に応じて TypeScript やフレームワークを足していくのが王道です。
Language Decision
TL;DRは入口です。実際に選ぶ・使う段階では、何を解決するか、何と比較するか、導入後にどこで詰まるかまで見る必要があります。
Web フロントエンド
型付け: 動的・弱い型付け / 実行方式: インタプリタ(JIT エンジン) / パラダイム: マルチパラダイム(イベント駆動 / 関数 / OOP)
巨大なエコシステム(npm)
弱い型付けで実行時エラーが出やすい
First Step
console.log("Hello, World!");公式ドキュメント