JavaScriptって何？わかりやすく解説

「ウェブサイトってどうやって動いてるんだろう？」って思ったことない？ボタンを押したらメニューが開いたり、文字を入力したら自動で候補が出てきたり、あのなんか「動く感じ」の正体、気になるよね。実はそれ、ほとんどが JavaScript っていうプログラミング言語のしわざなんだよ。この記事を読めば、JavaScriptがどんなものか・なにができるか・どうして大事なのかが丸ごとわかるよ。

これ、めちゃくちゃよくある勘違いなんだけど、JavaとJavaScriptは全然別物だよ！名前が似てるだけで、関係はほぼゼロ。よく「インドとインドネシアくらい違う」って言われるね（笑）。JavaScriptはWebブラウザの中で動かすために作られた独自の言語だよ。

料理で例えると、HTMLは「食材」、CSSは「盛り付け・見た目」、JavaScriptは「調理の動き」みたいなイメージだよ。HTMLで「見出しがあってボタンがある」って構造を作って、CSSで「青いボタンにしよう」って見た目を整えて、JavaScriptで「ボタンを押したらメニューが開く」って動きをつけるんだよ。

ほぼそうだよ！インターネット上のウェブサイトのうち、97%以上がJavaScriptを使っているって調査結果があるくらいなんだ。YouTubeも、Twitterも、Amazonも、全部使ってる。動きのある現代のウェブサイトはJavaScriptなしには作れないって言っても過言じゃないよ。

実はJavaScriptって、プログラミング初心者にめちゃくちゃ優しい言語なんだよ。特別なソフトをインストールしなくても、パソコンのブラウザ（ChromeとかSafari）さえあればすぐに試せるんだ。「Hello, World!」って画面に表示するだけなら、たった1行で書けちゃうよ。

もうちょっと詳しく

JavaScriptは1995年に「ブレンダン・アイク」という人がたった10日間で作ったプログラミング言語だよ。もともとはNetscapeっていうブラウザ専用に作られたんだけど、今ではブラウザの中だけじゃなくて、サーバーの中でも動くようになってるんだ。つまり、ウェブサイトの「見える部分」だけじゃなくて、裏でデータを管理する部分まで、JavaScriptひとつで作れちゃう時代になってるってこと。プログラミング言語って世の中にたくさんあるけど、「ブラウザで直接動く」のはJavaScriptだけっていうのが、この言語の最大の強みだよ。Web開発をやりたいなら、まず触っておくべき言語ナンバーワンって言われてるのもそのためなんだ。

⚠️ よくある勘違い

[toc]

JavaScriptとは？まずここから押さえよう

ウェブページを「生きて動かせる」言語

JavaScriptとは、つまり「ウェブページに動きや反応をつけるためのプログラミング言語」のことだよ。プログラミング言語というのは、コンピューターへの命令を書くための特別な文字の書き方のこと。人間が日本語や英語でコミュニケーションするように、コンピューターにはコンピューターが理解できる専用の言語が必要なんだ。

ウェブページというのは、基本的に3つの言語で作られてるよ。HTMLがページの「骨格」を作り、CSSが「見た目・デザイン」を整えて、JavaScriptが「動き・反応」を追加する。この3つがそろって、はじめて現代のウェブサイトが完成するんだよ。

身近な例で考えてみよう。Twitterのいいねボタンを押すとハートが赤くなってカウントが増えるよね？あれはJavaScriptが「ボタンが押されたことを検知して→ハートの色を変えて→数字を1増やす」っていう命令を実行してるんだよ。ページ全体をリロード（再読み込み）しないで、部分的にパッと変わるのが、JavaScriptならではの動きだよ。

名前の由来と歴史

JavaScriptは1995年、アメリカの「Netscape」という会社がリリースしたブラウザ「Netscape Navigator」のために作られたよ。開発したのはブレンダン・アイクという技術者で、なんと最初のバージョンを10日間で完成させたという伝説がある。当時は「Mocha（モカ）」「LiveScript（ライブスクリプト）」という名前で呼ばれていたんだけど、当時大人気だった「Java」という別の言語の名前を借りて「JavaScript」に改名されたんだ。これがJavaとJavaScriptが混同される原因になってるんだよね。

その後JavaScriptは世界中に広まって、今では「ECMAScript（エクマスクリプト）」という国際的な標準規格でルールが決められるようになったよ。毎年新しい機能が追加されて、どんどん進化し続けてる言語なんだ。

JavaScriptで何ができるの？具体例を見てみよう

ウェブサイトの「動き」をぜんぶ作れる

JavaScriptで一番よく使われるのが、ウェブページの中身をリアルタイムに変えること。つまり「ユーザーが何かしたら、ページがそれに反応して変わる」という動きを作ることだよ。具体的にはこんなことができる：

• ボタンを押したらメニューが開く・閉じる
• スクロールするとアニメーションが動き出す
• フォームに入力した内容をリアルタイムでチェックして「パスワードが短すぎます」と表示する
• 画像をドラッグして並び替える
• カーソルを合わせると説明がポップアップで出てくる

これらは全部、ページを再読み込みせずに「その場でパッと」変わるのが特徴だよ。昔はこういった動きを作るのに、ページ全体をサーバーから再取得する必要があったけど、JavaScriptのおかげで一気にウェブの体験が良くなったんだ。

サーバーサイドでも使える「Node.js」

もともとJavaScriptはブラウザの中だけで動く言語だったんだけど、2009年に「Node.js（ノードジェイエス）」というものが登場してから大きく変わったよ。Node.jsとは、つまり「ブラウザの外＝サーバーの中でもJavaScriptを動かせる仕組み」のこと。

これがどれだけすごいかというと、料理人の例で考えてみよう。以前は「ホールでお客さんに料理を出す係（ブラウザ側）」と「厨房で料理を作る係（サーバー側）」が別の言語を使う必要があったんだ。でもNode.jsのおかげで、JavaScriptひとつで両方できるようになったんだよ。エンジニアがひとつの言語だけ覚えれば、ウェブサービス全体を作れるようになったから、JavaScriptの人気は一気にさらに高まったんだよ。

スマホアプリも作れる？

「React Native（リアクトネイティブ）」や「Ionic（アイオニック）」といった技術を使えば、JavaScriptでスマホアプリ（iOSとAndroid両方）を作ることもできるよ。つまり、JavaScriptを覚えておけばウェブもサーバーもスマホアプリも全部対応できる、すごくコスパのいい言語なんだ。

JavaScriptの基本的な考え方を覗いてみよう

変数って何？

プログラミングの基本中の基本が「変数（へんすう）」だよ。変数とは、つまり「データを入れておく箱」のこと。たとえば「名前」という箱に「田中さん」と入れておけば、後でいつでも「名前の箱を開けて田中さんを取り出す」ことができるんだよ。JavaScriptでは変数を作るときに「let」や「const」という単語を使う。

• let：後から中身を変えられる変数（例：スコアは試合中に変わるからletで作る）
• const：一度入れたら変えられない変数（例：自分の名前は変わらないからconstで作る）

これだけ知っておくと、JavaScriptのコードを見たときに「ああ、ここでデータを入れてるんだな」とわかるようになるよ。

関数って何？

関数（かんすう）というのは、つまり「命令のセットに名前をつけたもの」のことだよ。「ピザを作る」という手順（生地を伸ばして→ソースを塗って→具材を乗せて→焼く）を一まとめにして「ピザ作り」と名前をつけておけば、次から「ピザ作り！」って一言で全部の手順を実行できるよね。JavaScriptの関数も同じで、よく使う処理をまとめて名前をつけておくことで、何度も書かなくて済むようになるんだよ。

イベントとは？

JavaScriptで特に大事な概念が「イベント」だよ。イベントとは、つまり「ユーザーが何かをした瞬間」のこと。クリックしたとき、マウスを動かしたとき、キーボードを押したとき、ページが読み込まれたとき……こういった「何かが起きた瞬間」を検知して、JavaScriptが反応する仕組みなんだ。「ボタンをクリックしたらメニューが開く」というのも、「クリックというイベントが発生したら開くという処理を実行して」とJavaScriptに命令してるんだよ。

JavaScriptを学ぶにはどうすればいい？

ブラウザだけで今すぐ試せる

JavaScriptの最大の魅力のひとつが、特別なソフトを一切インストールしなくても試せること。ChromeやEdgeなどのブラウザには「開発者ツール（デベロッパーツール）」という機能がついていて、そこにJavaScriptを直接打ち込んで実行できるんだよ。

Chromeを開いて、キーボードの「F12」を押してみて。画面の右か下にツールパネルが開くはず。そこの「Console（コンソール）」というタブをクリックして、こう入力してみよう：

• alert(“こんにちは！”) と打ってEnterを押す

「こんにちは！」というポップアップが出てきたら成功！これがJavaScriptの最初の一歩だよ。プログラミングスクールに通わなくても、参考書を買わなくても、今すぐパソコンのブラウザで試せるのがJavaScriptのすごいところだよ。

おすすめの学習ステップ

「よし、JavaScriptを本格的に学ぼう！」と思ったら、こんな順番で進めると効率がいいよ：

• ステップ1：HTMLとCSSを先に少し理解する　JavaScriptはHTMLと一緒に使うものだから、「タグ」「要素」といった基本的な用語だけ先に知っておこう
• ステップ2：JavaScriptの基本文法を学ぶ　変数・関数・条件分岐（もし〇〇なら△△する）・繰り返し処理の4つが基礎中の基礎
• ステップ3：実際に何か作ってみる　「計算機を作る」「TODOリストを作る」など、小さくてもいいから動くものを作ることが一番の近道
• ステップ4：フレームワークを学ぶ　「React」「Vue」などの便利な道具（フレームワーク）を学ぶと、より大きなものを作れるようになる

「MDN Web Docs」というMozilla（Firefoxを作ってる会社）が無料で公開してる日本語の公式リファレンスがあって、これがものすごく丁寧に書かれてるからおすすめだよ。

JavaScriptを学ぶメリット

JavaScriptを学ぶことのメリットは「すぐに結果が目に見える」こと。コードを書いたらブラウザでパッと確認できるから、「ちゃんと動いてる！」っていう達成感を味わいやすい言語なんだよ。プログラミング初心者が最初に挫折する原因のひとつが「自分の書いたコードが何をしてるかわからない」という状態なんだけど、JavaScriptはブラウザで目に見える変化を起こすから、学習のモチベーションが続きやすいよ。さらに、世界中で一番使われてるプログラミング言語のひとつだから、情報量も多いし、仕事として需要があるという点でも学ぶ価値が高い言語だよ。

まとめ：JavaScriptはウェブの「魔法」だった

JavaScriptとは、ウェブページに動きや反応を加えるためのプログラミング言語のことだよ。1995年に生まれて以来、ウェブの世界を大きく変えてきた言語で、今やインターネット上のほぼすべてのサイトで使われてる。HTMLが「骨格」、CSSが「見た目」なのに対して、JavaScriptは「動き・インタラクション」を担当してる。

JavaとJavaScriptは全然別物で、名前が似てるのは歴史的な事情があったから。ブラウザだけで今すぐ試せる手軽さと、ウェブ・サーバー・スマホアプリと幅広く使えるポテンシャルを持った、初心者にもプロにも人気の言語だよ。

「ウェブサイトを作ってみたい」「プログラミングに興味がある」という人にとって、JavaScriptは最初に学ぶ言語としてベストな選択のひとつだよ。まずはブラウザのコンソールで alert(“hello!”) を打ってみるところから始めてみよう！