JavaScriptとは?初心者向け解説

SNSの「いいねボタン」を押した瞬間にハートが赤く変わる、地図アプリでマウスを動かすと景色が動く──これらの背景で動いている代表的な言語がJavaScript(ジャバスクリプト)です。ブラウザ生まれの言語で、中高生が「動くものを作りたい」と思ったとき、最初に出会いやすい言語の1つです。

そもそもJavaScriptとは?

JavaScriptは、1995年にネットスケープというアメリカの会社で作られた言語です。Webページに「動き」を与えるために設計され、ブラウザ(Chrome・Safari・Firefox等)の中でそのまま実行されます。特別な開発環境を入れなくても、ブラウザの開発者ツールを開けば、短いコードを試せます。

名前にJavaが入っていますが、Javaとは別物です。当時の流行に合わせて似た名前が付いた歴史があり、文法や用途は大きく違います。検索するときは「JavaScript」と最後まで書くと、Javaの記事と混ざりにくくなります。

仕組み:ブラウザに3点セット

HTML・CSS・JavaScript の役割(同じカウンタアプリで比較) 3つを組み合わせて初めてWebアプリが動く HTML:骨組み 「何を表示するか」 <h1>カウンタ</h1> <p id="count"> 0 </p> <button onclick="add()"> +1 </button> ▶ 何があるかを書く ▶ 見た目はまだ素っ気ない ▶ ボタン押しても何も起きない CSS:見た目 「どう見せるか」 h1 { color: #1abc9c; font-size: 32px; } button { background:#1abc9c; padding: 10px 20px; border-radius:8px; } ▶ 色・サイズ・配置 ▶ きれいな見た目に ▶ でもまだ動かない JavaScript:動き 「何が起きるか」 let count = 0; function add() { count = count + 1; document .getElementById ("count") .innerText = count; } ▶ ボタンを押すと数字+1 ▶ HTML要素を書き換える ▶ ここで初めて「アプリ」になる
図1:HTML・CSS・JavaScriptの役割をカウンタアプリで対比。3つが揃って初めてインタラクティブなWebになる

Webサイトは「HTML(骨組み)」「CSS(見た目)」「JavaScript(動き)」の3つで成り立っています。HTMLは家の柱、CSSは内装、JavaScriptは家電の役割。ボタンを押すと反応する、入力するとリアルタイムで結果が変わる、といった動きを担当します。

何に使われている?

JavaScriptの広がり:プロ開発者の利用率(2025年調査) 出典:Stack Overflow Developer Survey 2024 の傾向値 JavaScript(言語そのもの) 62%(11年連続1位) HTML/CSS(セットで使う) 52% TypeScript(JS拡張) 38% React(JSフレームワーク) 40% Node.js(サーバー側JS) 40% JavaScriptで作れるもの(実例) SNSのいいねボタン・無限スクロール X / Instagram の動的UI Google マップ・Discord 大規模Webアプリ VS Code・Slack デスクトップアプリ(Electron) React Native アプリ スマホアプリ(iOS/Android両対応) Node.js でサーバー Netflix・LinkedIn の裏側 Three.js でブラウザ3D 商品紹介サイト・ミニゲーム
図2:JavaScriptは11年連続でプロ開発者の利用率1位。Webだけでなく、デスクトップ・モバイル・サーバーまで幅広く使える

SNS・地図・ゲーム・チャット・動画再生・入力フォーム・グラフ表示まで、Webで「動く」ものの多くにJavaScriptが関わっています。Node.jsという仕組みを使うと、ブラウザだけでなくサーバー側のプログラムも書けます。つまり、画面の動きから裏側の処理まで、同じ言語で学びを広げやすいのが特徴です。

最初の1行を書いてみる

ブラウザを開いて F12(または右クリック → 検証)を押すと「開発者ツール」が出ます。「Console」タブで alert("こんにちは") と打ってEnterすれば、画面にメッセージが出ます。これが最初のJavaScript体験になります。学校や共用PCでは、先生や管理者のルールに従って試しましょう。

変数は let name = "ゆうき"、画面に表示は console.log(name)。Pythonを触ったことがある人は似ている部分を見つけられますが、同じではありません。特に、HTMLのボタンや入力欄とつなげて初めて面白さが出るので、HTML・CSSとセットで練習しましょう。

気をつけたい落とし穴

初心者がハマる3つ
  • エラー文を読まずに閉じる。Consoleの赤い文字は、直す場所を教えてくれるヒント
  • Javaと混同する。名前は似ているが、別の言語として学ぶ
  • HTML・CSSを飛ばしてJavaScriptだけ学ぶ。HTML/CSSと組み合わせないと、動きを実感しづらい

将来どう役立つ?

JavaScriptはWebの世界で広く使われています。フロントエンドエンジニア(Webサイトの見た目を作る職種)はもちろん、バックエンド・モバイルアプリ・デスクトップアプリ・ゲーム開発まで、応用範囲が広い言語の1つです。Web制作に興味がある人にとって、早めに触っておく価値があります。

今日からできること

3ステップで始めよう
  1. このページをChromeで開いたまま F12 を押して開発者ツールを表示
  2. 「Console」タブで alert("Hi") を実行してみる
  3. let x = 5; console.log(x * 2); を実行して 10 が表示されることを確認する

まとめ

JavaScriptはWebサイトに「動き」を加える言語です。HTML(骨組み)・CSS(見た目)と並ぶ3点セットの中で、ボタン・送信・アニメーションを担当します。ブラウザだけでも短いコードを試せて、Web制作からサーバー側の学習まで広げられます。Webサイトを動かしてみたい人にとって、最初に触りやすい言語の1つです。