こんにちは、かつコーチです。
これまでJavaScriptについて100記事ほど書いて来ました。
ここで一度立ち返って、もう一度JavaScriptの基礎からご紹介します。
新しくアップデートされている内容もあるので、それも含めて随時解説します。
「JavaScriptって聞いたことはあるけど、結局何をする言語なの？」
プログラミング学習を始めようとすると、真っ先に候補に挙がるのがこのJavaScriptです。
React・Vue.js・Node.jsなど関連する名前も多く、最初は混乱しやすい分野でもあります。
今回はJavaScriptにまったく触れたことがない人にも伝わるように、基本からかみ砕いて解説していきます。
JavaScriptとは？
正式名称と読み方
JavaScriptは、そのまま「ジャバスクリプト」と読みます。
名前に「Java」が入っていますが、Javaという別のプログラミング言語とはほとんど関係がありません。
登場した1995年当時、話題になっていたJavaの人気にあやかって名付けられた、というのが実際のところです。
ひとことで言うと、Webページに「動き」や「反応」を加えるためのプログラミング言語です。
HTML・CSSとの役割の違い
Webページは、主に3つの技術の組み合わせでできています。
- HTML：文章や画像など、ページの「構造」を作る
- CSS：色やレイアウトなど、ページの「見た目」を整える
- JavaScript：クリックや入力への「反応」を作る
たとえば、ボタンを押すとメニューが開いたり、フォームに入力した内容をその場でチェックしたりする動きは、すべてJavaScriptが担当しています。
私が最初に学び始めたときも、「HTMLとCSSだけでは画面は動かないんだ」と気づいた瞬間が、JavaScriptの必要性を実感した最初のきっかけでした。
HTMLとCSSで「静止画」を作り、JavaScriptで「命を吹き込む」とイメージすると整理しやすいです。
JavaScriptでどんなことができるの？
身近な使用例
代表的なところだと、こんな動きがJavaScriptで作られています。
- ハンバーガーメニューの開閉
- 画像スライダー・カルーセル
- 入力フォームのリアルタイムバリデーション
- スクロールに合わせたアニメーション
普段何気なく操作しているWebサイトの「動く部分」は、ほぼすべてJavaScriptだと考えて差し支えありません。
ブラウザ以外でも動くようになった
JavaScriptはもともと「ブラウザの中だけで動く言語」でした。
しかし今では、Node.jsという実行環境を使うことで、ブラウザの外（サーバー側）でも動かせるようになっています。
このおかげで、フロントエンド（画面側）とバックエンド（サーバー側）の両方をJavaScriptだけで開発できるケースも増えています。
混同しやすい関連技術との関係を整理する
JavaScriptエコシステムの技術マップ
JavaScriptを学び始めると、TypeScript・React・Vue.js・Node.jsなど、似たような名前がたくさん出てきて混乱しがちです。
ここで一度、それぞれの関係性を簡単に整理しておきましょう。
JavaScript（言語本体）
├── TypeScript … JavaScriptに「型」を追加した言語
├── jQuery … JavaScriptを簡単に書くためのライブラリ
├── React … UIを部品化して作るためのライブラリ
│ └── Next.js … Reactに機能を足したフレームワーク
├── Vue.js … 学習しやすい設計のフロントエンドフレームワーク
│ └── Nuxt.js … Vueに機能を足したフレームワーク
└── Node.js … ブラウザの外でJavaScriptを動かす実行環境
└── Express … Node.js上でサーバーを作るための軽量フレームワーク
「本体」と「拡張」の関係を押さえる
この図で特に注目してほしいのが、React⇄Next.jsとVue.js⇄Nuxt.jsが、どちらも同じ関係性になっている点です。
ReactはUIを部品化して作るための「本体」で、Next.jsはそのReactに「ページ移動の仕組み」や「表示を速くする仕組み」を足した拡張版という位置づけです。
Vue.jsとNuxt.jsも、まったく同じ関係にあります。
Vue.jsが「本体」、Nuxt.jsがそこに機能を足した拡張版です。
つまり「React系を選ぶか、Vue系を選ぶか」を決めれば、その先の「素の状態で使うか、拡張版を使うか」という考え方は共通しているということです。
TypeScriptだけは少し毛色が違って、これらのライブラリ・フレームワークと並列の選択肢ではなく、「JavaScriptの書き方」そのものを拡張する存在です。
JavaScriptで書いたコードに型のルールを追加できる言語、とイメージしておいてください。
今回のシリーズで学ぶのはどこか
このシリーズで扱うのは、図の一番上にあるJavaScript本体の部分です。
React・Vue.js・Node.jsなど、この先に広がる技術はすべてJavaScriptの文法や考え方を土台にしています。
つまり、今JavaScriptの基礎をしっかり固めておくことが、将来どの技術に進むにしても一番の近道になります。
JavaScriptが今も選ばれ続ける理由
動かせる環境が特別
JavaScriptは、パソコンにブラウザさえ入っていれば、特別な準備なしにすぐ動かせます。
他の言語のように専用のソフトをインストールする必要がなく、学習を始めるハードルがとても低いのが特徴です。
求人・案件の需要が高い
Web制作・Webアプリ開発の現場では、フロントエンドの実装にほぼ必ずJavaScriptが使われます。
React・Vue.jsといった人気フレームワークの土台になっているため、学んでおくと選べる仕事の幅が広がります。
情報量が豊富
長く使われている言語なので、エラーで詰まってもたいてい検索すれば解決策が見つかります。
私自身、独学で触り始めた頃はエラーメッセージをそのまま検索するということを繰り返していましたが、それでも挫折せずに続けられたのは、同じ悩みを持つ先人の記事がすぐに見つかったからです。
JavaScriptを実際に動かすとこんな感じ
シンプルなコード例
イメージをつかんでもらうために、簡単なコードを見てみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>JavaScriptサンプル</title>
</head>
<body>
<button id="greetButton">挨拶する</button>
<script>
const name = "かつコーチ";
document.getElementById("greetButton").addEventListener("click", function () {
alert("こんにちは、" + name + "さん！");
});
</script>
</body>
</html>
このHTMLをブラウザで開いてボタンを押すと、「こんにちは、かつコーチさん！」というポップアップが表示されます。
document.getElementById でボタンを取得し、addEventListener でクリックされたときの処理を登録している、というのが今回のコードの流れです。
難しい単語もありますが、今の段階では「JavaScriptを使うとページに反応をつけられるんだな」という雰囲気だけつかめれば十分です。
具体的な書き方は、次回以降の記事で順を追って解説していきます。
静止画のページと動きのあるページを比べてみる
「動き」のイメージがまだ湧かない人のために、JavaScriptがない場合とある場合を比べてみましょう。
❌ Before：HTMLだけ（クリックしても何も起きない）
<button>挨拶する</button>
このコードは、ボタンを押しても見た目が変わるだけで、画面上には何の反応も起きません。
✅ After：JavaScriptを使った場合（クリックに反応する）
<button id="greetButton">挨拶する</button>
<script>
document.getElementById("greetButton").addEventListener("click", function () {
document.body.insertAdjacentHTML("beforeend", "<p>ボタンが押されました！</p>");
});
</script>
ボタンを押すたびに、画面の下に新しい文章が追加されるようになります。
「HTMLで作った部品に、JavaScriptで反応を後付けする」——これがJavaScriptの基本的な役割です。
まとめ
この記事のポイント
- JavaScriptは、Webページに「動き」や「反応」を加えるプログラミング言語
- TypeScript・React・Vue.js・Node.jsなどは、JavaScript本体から派生した技術
- React⇄Next.js、Vue.js⇄Nuxt.jsは、どちらも「本体＋拡張フレームワーク」という同じ関係性
- このシリーズでは、まずすべての土台になるJavaScript本体の基礎を学んでいく
次に読むべき記事
次回は、実際にJavaScriptのコードを試しながら動かせる「開発者ツール」の使い方を解説します。
手を動かして初めて「わかった」につながるので、ぜひ一緒に進めていきましょう。
→ 次の記事：ブラウザの開発者ツールの使い方：コンソールを使ってみよう
