【JS/TS社内勉強会第1回】こわくないJavaScript(全3回)
本記事は社内勉強会(約50分+質疑)向けに用意した補足資料を、Web上で順に読める記事として書き直したものです。
はじめに:この記事の位置づけ
読み終えたときのゴール
この記事のゴールは、JavaScript(JS)とTypeScript(TS)の概観をつかみ、「触ってみよう」と思えることです。書けるようになるためのチュートリアルではありません。
想定する読者
主に次の2種類の方を想定しています。
-
(デザイナー、コーダー、あるいは別職種の方)
-
他の言語は触ったことがあるが、JavaScriptがよくわからないエンジニアの方
前半は主に前者向けに、「なぜ難しく見えるのか」をほどいていきます。後半は後者向けに、JavaScript固有の性質(動的型付け・関数型的性質・歴史的な複雑さ)を掘り下げ、TypeScriptによる補い方につなげます。読者の前提がそろっていない前提で書いているため、前半で安心感を、後半で少しだけ専門性と知的好奇心を、というバランスになっています。
(ちなみに)Java と JavaScript は別物
名前が似ているのは、1995年当時の Netscape と Sun Microsystems のマーケティング上の提携に由来します。LiveScript から JavaScript へ改名された経緯については、Brendan Eich 自身も「Java の名前を冠したのはマーケティング上の判断」と述べています。
実際には、メロンとメロンパンくらい、JavaとJavaScript は別の言語です。
なぜ JavaScript は「難しい」と誤解されやすいのか
「JS が難しい」という声と、世界での利用実態
Stack Overflow Developer Survey 2025 では、JavaScript は回答者の 66% が使用しており、同調査で最も使われているプログラミング言語の座を長年維持しています。(2024 年調査では「12 年連続 1 位」と表現)世界中で最も使われている言語が本質的に「誰にも読めないほど難解」なら、開発者はとっくに別の言語へ移っていたはずです。
一方で、「JavaScript は難しい」「セミナーを受けたがよくわからなかった」という声もよく聞きます。(とくにデザイナーやコーダー出身の方から)
ここには難しさの対象の取り違えが関わっていると私は考えています。
難しさの正体:周辺技術との一体体験
初学者が JavaScript を学ぶとき、言語仕様だけを切り離して学ぶことはほぼありません。次のような周辺技術とセットで登場します。
| 周辺技術 | 具体例 | 何が難しいか |
|---|---|---|
| DOM(Document Object Model) | document.getElementById(), addEventListener() |
ツリー構造、イベント伝播(バブリング/キャプチャリング) |
| HTTP 通信 | fetch(), XMLHttpRequest |
非同期、リクエスト/レスポンス、CORS |
| ブラウザ API | localStorage, Canvas, Web Audio |
実装差、仕様の広さ |
| フレームワーク | React, Vue, Angular | コンポーネント、仮想 DOM など独自の抽象化 |
| ビルドツール | Webpack, Vite, Babel | 設定、モジュールバンドル |
| パッケージ管理 | npm, yarn | 依存関係、node_modules |
初学者はこれらすべてを「JavaScript」として体験します。境界が見えないため、全部が言語のせいに見えます。実際には JavaScript 本体は上表のどれでもなく、これらを操作するための言語です。
なぜ境界が見えにくいのか
-
教材の典型パターン 多くの入門が「HTML → CSS → JavaScript で動き」の流れのため、DOM 操作がいきなり「JS 学習の初手」になり、言語と API の区別がつかないまま進みがちです。
-
ブラウザが実行環境である Python ならインタプリタ、Java ならコンパイルという「言語の環境」が意識されますが、JavaScript はブラウザという汎用環境の中で動き、どこまでが言語でどこからが環境かが見えにくいです。
-
グローバルオブジェクトの混在
window,document,consoleなどホスト由来のものと、Array,Math,JSONなど言語組み込みが、区別なく同じ空間に並びます。
他言語との比較:核は小さく、周辺は大きい
C 言語ではポインタやメモリ管理が「C は難しい」と言わせる要因になりますが、制御構造そのものは JavaScript と同様に素朴です。どの言語も核は小さく、周辺は大きい。JavaScript の場合、周辺が Web という巨大領域なので、この錯覚が特に強く出るのでしょう。
ありのままの JavaScript──データと制御構造
周辺をいったん取り払うと、JavaScript の核は「データを持つ」と「処理を制御する」の二つに集約できます。
データ:プリミティブ型と変数宣言
ECMAScript 2015 以降の仕様では、プリミティブ型は次の 7 つですecma-262。
| 型 | 例 | 説明 |
|---|---|---|
string |
"こんにちは" |
文字列 |
number |
42, 3.14 |
整数も浮動小数点もこの型(IEEE 754 倍精度) |
boolean |
true, false |
真偽値 |
undefined |
undefined |
未定義 |
null |
null |
意図的な空 |
symbol |
Symbol("id") |
一意の識別子(ES2015〜) |
bigint |
9007199254740991n |
任意精度整数(ES2020〜) |
入門の段階では string, number, boolean と配列(Array)に絞ってよい内容です。symbol や bigint は「他にもあるが、ここでは省略」と割り切って問題ありません。
変数宣言は、歴史的には var でしたが、スコープの挙動(関数スコープと巻き上げ)が直感に反しやすいため、ES2015 以降は const / let(ブロックスコープ)が推奨されます。
const name = "太郎"; // 再代入不可
let age = 25; // 再代入可
制御構造:順次・分岐・反復
計算可能性の理論的基盤の一つにチューリング機械があります。1966 年、Böhm と Jacopini は、順次・分岐・反復の三つの制御構造の組み合わせだけで、あらゆる計算可能な関数を表現できることを証明しました。これは構造化プログラミングの基盤となり、現代のほとんどの言語に共通する骨格です。JavaScript も例外ではなく、以下のように書きます。
// 1. 順次(Sequence)
const price = 1000;
const tax = price * 0.1;
const total = price + tax;
// 2. 分岐(Selection)
if (total > 1000)
{
console.log("1000円を超えました");
} else {
console.log("1000円以下です");
}
// 3. 反復(Iteration)
for (let i = 0; i < 5; i++) {
console.log(i + "回目の処理");
}
イメージの補助: プログラムは大げさに言えば、「順番に実行する」「条件で分ける」「繰り返す」の三パターンだけです。レシピの手順に近いところがあります。
この三つが揃えば、理論上はチューリングマシンと同等の計算能力を持ちます。ただし「原理的に書ける」と「大規模に読み書きしやすい」は別で、関数・オブジェクト・モジュールなどの抽象化は、計算力を増やすというより人間のための仕組みです。
JavaScript は味方である
誤解の構造を整理する
「JSが難しい」という体験 ├── 実態:周辺技術(DOM・HTTP・FW 等)が難しい ├── 錯覚の原因:言語と周辺の境界が見えない └── JS の核:データ(プリミティブ型)+制御(三つの構造)
入門向けである理由
| 観点 | JavaScript の特性 | 比較のイメージ |
|---|---|---|
| 環境構築 | ブラウザだけで動かせる | Java の JDK、C のコンパイラなどと対比 |
| 結果の可視性 | HTML と組み合わせると画面にすぐ反映 | C のターミナル出力など |
| 最低限の文法 | const, if, for だけで動く |
C の #include, main() などの儀式 |
| フィードバック | DevTools で即実行・確認 | コンパイルが要る言語との対比 |
味方としての JavaScript
JavaScript は周辺を扱う道具であり、敵ではありません。DOM が難しいのは DOM の仕様が複雑だからで、HTTP が難しいのはプロトコルの理解が要るからです。切り分けができると、周辺はJavaScript を使って各個撃破していけばよいのです。
次回記事
株式会社オートプロジェクトでは、中小企業向けのシステム・アプリケーション開発 / 外注サービスを提供しております。
貴社のニーズに応じた柔軟なサポートを行いますので、ぜひお気軽にご相談ください。

EC用公式アカウント
