C
JavaScript 一覧
前へ1 / 21次へ
JavaScript//Lesson 01

JavaScript

30分·theory

JavaScript

🎯 このlessonを読み終えたら

このlessonを読み終えると、以下の3つを自信を持ってできるようになります。

  • ▸✅ JS (JavaScript · Webページを動的にする言語) の標準パターン
  • ▸✅ 3つの落とし穴 (this (関数が呼び出されたときに指し示す対象) · イベントループ (非同期処理の順序を管理する仕組み) · クロージャ (関数が外側の変数を記憶すること)) + 回避方法
  • ▸✅ AIがよく生成するコードの語彙

学習目標をチェックリストとして持ち、すべてに答えられたらlessonを閉じてください。

👨‍💻 JavaScriptを作った人たち — 4人4コマ

01
Brendan Eichブレンダン・アイク
Creator of JavaScriptNetscape → Mozilla → Brave1961~現在

10日で作った言語が世界で最も使われる言語になった

  • 1995 Netscape入社後わずか10日でMocha（LiveScript → JavaScript）を作成
  • 1997 ECMAScript 1の標準化 — Javaとは無関係であることを明確化
  • 1998 Mozillaを共同設立、CTOを歴任
  • 2016 Braveブラウザをリリース、CEOに就任 — 広告ブロック＋暗号通貨BAT
JavaScript · SpiderMonkey · Brave — 30年のWebの動的な動作のすべてFATHER OF JS · 創始者
02
Lars Bakラース・バク
Creator of V8 EngineSun (HotSpot) → Google (V8) → Toitware1965年〜現在

JavaScriptを100倍速くしたデンマークのVM天才 — Chromeの心臓部

  • 1990s Sun HotSpot JVMのコアエンジニア — JITコンパイラを設計
  • 2006 Googleに入社。デンマーク・オーフスにV8チームを設立
  • 2008 V8＋Chromeの同時リリース — JS実行速度が100倍向上
  • 2017 IoTスタートアップToitwareを創業 — 次世代VMへの挑戦
V8 — Chrome · Node · Electron · Deno共通エンジンV8 ENGINE · JIT の天才
03
Ryan Dahlライアン・ダール
Creator of Node.js & DenoJoyent → Google Brain → Deno Land1981~現在

JSをブラウザの外へ連れ出した人 — そして自分の発明を作り直した

  • 2009 JSConf EUで発表 — V8 + libuv = Node.jsを公開
  • 2010 npmが登場。JSフルスタック時代の幕開け
  • 2018 JSConf EUで「10 Things I Regret About Node.js」を発表 — Denoを公開
  • 2020 Deno 1.0リリース — TypeScript・セキュリティ・標準ライブラリをデフォルトで搭載
Node.js · Deno — サーバーサイドJavaScriptの誕生と進化NODE & DENO · フルスタック JS の父
04
Anders Hejlsbergアンダース・ヘルスバーグ
Creator of TypeScriptBorland → Microsoft1960~現在

Turbo Pascal · Delphi · C#に続きTypeScript — 一人が作った4つの言語

  • 1983 Borlandに入社、Turbo Pascalを作成 — 当時最速のコンパイラ
  • 1996 Microsoftに移籍、C#言語設計をリード
  • 2012 TypeScript 0.8を公開 — JS＋漸進的型システム
  • 2024 TypeScript 5.x — JSの新規プロジェクトの標準。npm採用数1位
TypeScript — JS大規模コードベースの事実上の標準TYPESCRIPT · 4つの言語の設計者
👥
一言で
Eich(1995年創始) → Bak(2008年 V8) → Dahl(2009年 Node · 2020年 Deno) → Hejlsberg(2012年 TS)。4人がJavaScriptの30年を牽引してきた。

JavaScript — *世界で最も使われている言語*

核心の一言

1995年に10日間で作られた言語が、30年後に世界で最も使われる言語になりました。Webの事実上唯一のクライアント言語 + サーバー · モバイル · デスクトップへも拡張。

どこで使われるか

領域ツール
ブラウザすべてのWebページの動的な動作 — DOM (ブラウザがHTMLを扱うオブジェクトツリー) 操作
バックエンドNode.js · Deno · Bun (ブラウザ外でJSを動かす実行環境)
モバイルReact Native · Expo (JSでiOS · Androidアプリを作る)
デスクトップElectron (JSで作ったデスクトップアプリ — Slack · VS Codeもこれ)
ビルドツールVite · esbuild · webpack (コードをブラウザ用にまとめるツール)
ビッグデータ · AI一部 (可視化 · インターフェース)

同じ言語でフロント · バック · モバイル · デスクトップすべてに対応。それがJSの圧倒的な強みです。

このカテゴリでは

基礎から非同期 (複数の処理を待たずに同時に処理すること) · DOM · イベントまで。一度習得すれば React · Vue も自然に身につきます。

なぜJavaScriptがWebの標準言語なのか

一言で: ブラウザ唯一の言語 → サーバー · モバイル · デスクトップへ。どこにでもある言語。

ツールマッピング — 各セルの英語はツール名に過ぎません。隣の説明だけ見てください

領域JS標準
ブラウザES2024 (JSの最新標準文法) · DOM · Web API
バックエンドNode.js · Deno · Bun (ブラウザ外でJS実行)
モバイルReact Native · Expo (JSでiOS · Androidアプリ)
デスクトップElectron · Tauri (JSでデスクトップアプリ)
ビルドVite · esbuild · Turbopack (コードをまとめるツール)
型TypeScript (JSに静的型を追加した言語)
日付標準Temporal (2024+標準 — Dateの後継、タイムゾーン安全)

5つの重要な理由

理由意味
ブラウザの唯一性WebページのインタラクションはJSのみ可能。代替ゼロ
シングルスレッド + イベントループ (タスク順序管理機)非同期処理の標準モデル。Promise (将来届く結果を入れる器) · async/await (非同期コードを同期のように書ける文法) が直感的
TypeScript静的型の追加で大規模アプリが可能に
npmエコシステム200万以上のパッケージ — モジュール (コードのまとまり) どんな機能も npm install
Universal同じ言語でフロント · バックエンド · モバイル · デスクトップ

核心: JSの基礎 (型 · スコープ · this (関数呼び出し時に指す対象) · Promise) を理解すること = すべてのフロントエンドツールを原理から扱う力。

🤖 AIにこう依頼してみましょう

このlessonの概念を知ると、AIに具体的に指示できます。漠然とした「直して」ではなく、語彙を持った依頼 — それがトークン(AIが一度に処理する文字単位)節約の出発点です。

  • ▸「このJS (JavaScript)コードをasync/await (非同期コードを同期のように書ける文法) パターンにリファクタリング(同じ動作 · よりクリーンな構造)して」
  • ▸「このコールバック地獄をPromise (将来の結果を入れる器) チェーンに整理して」
  • ▸「このコードのクロージャ (関数が外側の変数を記憶すること) · this (呼び出し時に指す対象) 関連のアンチパターンを検査して」

なぜこれがトークンを減らすのか

概念を知らないと、AIの回答を受け取っても「それは何ですか?」と再度聞かなければなりません。その「再質問」がトークンを消費します。概念を一度覚えておくと、会話が一度で完結します。

先に読むとよい概念: CSS変数・アニメーション — モダンUIに欠かせない基本語彙
次のおすすめ: JavaScriptとは？
前へ一覧次へ
JavaScript 学習ガイド - JavaScript