JavaScriptとは？初心者向けにわかりやすく解説【実践デモ付き】

概要

JavaScript（略してJS）は、Webページに動きとインタラクションを追加するプログラミング言語です。ボタンをクリックしたときの処理、フォームの入力チェック、アニメーション、データの取得など、ユーザーの操作に応じた動的な機能を実現します。

JavaScriptとは何か？

JavaScriptは、世界で最も広く使われているプログラミング言語の一つです。元々はブラウザ上で動く言語として開発されましたが、現在ではサーバー（Node.js）やスマホアプリ（React Native）など、幅広い用途で使われています。

JavaScriptの特徴

ブラウザで動く: すべての主要ブラウザがJavaScriptをサポート
インタープリタ言語: コンパイル不要で即座に実行可能
オブジェクト指向: 複雑な処理も整理して書ける
イベント駆動: ユーザーの操作に反応して処理を実行
非同期処理: 複数の処理を同時進行できる

JavaScriptでできること

ボタンのクリック処理: クリックしたら色が変わる、メッセージを表示など
フォームの検証: メールアドレスの形式チェック、必須入力チェックなど
アニメーション: 要素をスライドさせたり、フェードイン/アウトさせたり
データの取得: サーバーから最新情報を取得して画面に表示
計算処理: ユーザーが入力した数値を計算して結果を表示

JavaScriptの基本構文

サンプルコードを見る

// 変数の宣言
let name = "田中";
const age = 25;

// 関数の定義
function greet() {
    console.log("こんにちは、" + name + "さん！");
}

// 関数の呼び出し
greet();  // コンソールに「こんにちは、田中さん！」と表示

// ボタンがクリックされたときの処理
document.getElementById("myButton").addEventListener("click", function() {
    alert("ボタンが押されました！");
});

各部分の説明

let / const: 変数を宣言（データを保存する箱）
function: 処理をまとめた関数を定義
console.log(): コンソールにメッセージを表示（デバッグ用）
addEventListener(): ユーザーの操作を監視

HTML、CSS、JavaScriptの違い

技術	役割	例
HTML	構造（骨組み）	見出し、段落、リンクなどの配置
CSS	見た目（デザイン）	色、サイズ、レイアウト
JavaScript	動き（機能）	クリック処理、アニメーション、計算

ES6（ECMAScript 2015）とは？

ES6は、JavaScriptの大きなアップデート版です。以下のような便利な機能が追加されました：

let / const: より安全な変数宣言
アロー関数: =>を使った簡潔な関数記法
テンプレートリテラル: 文字列の中に変数を埋め込みやすく
分割代入: オブジェクトや配列から値を取り出しやすく
モジュール: コードを分割して管理しやすく

ES6のサンプルコードを見る

// アロー関数
const greet = (name) => `こんにちは、${name}さん！`;

// 分割代入
const user = { name: "田中", age: 25 };
const { name, age } = user;

// スプレッド演算子
const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5];  // [1, 2, 3, 4, 5]

JavaScriptフレームワーク

JavaScriptをより効率的に使うためのフレームワークが数多く存在します：

React: Meta（Facebook）が開発したUIライブラリ
Vue.js: シンプルで学習しやすいフレームワーク
Angular: Googleが開発した大規模アプリ向けフレームワーク
Next.js: Reactベースのフルスタックフレームワーク

実際にやってみよう：JavaScriptコードエディタ

下のエディタでJavaScriptコードを入力して、実行ボタンを押してみましょう！

コードを書いてみよう

実行結果

ここに実行結果が表示されます

試してみよう：
• console.log("Hello") でメッセージを出力
• const x = 5 + 3; console.log(x); で計算結果を表示
• alert("こんにちは") でアラートを表示

用語	説明
HTML	JavaScriptで操作する対象となるWebページの構造
CSS	JavaScriptで動的に変更できるスタイル
Node.js	サーバーサイドでJavaScriptを動かす実行環境

よくある質問

JavaScriptとは何ですか？

JavaScriptは、Webページに動きとインタラクションを追加するプログラミング言語です。ボタンのクリック処理、フォームの入力チェック、アニメーション、データの取得など、ユーザーの操作に応じた動的な機能を実現します。世界で最も広く使われているプログラミング言語の一つです。

JavaScriptとJavaの違いは何ですか？

名前は似ていますが、JavaScriptとJavaは全く別の言語です。JavaScriptは主にブラウザで動くスクリプト言語で、Webページの動的な機能を担当します。一方、JavaはサーバーサイドやAndroidアプリなど幅広く使われるコンパイル言語です。

JavaScriptの基本的な使い方を教えてください

JavaScriptは変数の宣言（let, const）、関数の定義（function）、イベントリスナー（addEventListener）などの基本構文から始めます。HTMLファイルに<script>タグで記述するか、外部ファイル（.js）として読み込みます。console.log()を使えば結果を確認できます。

ES6とは何ですか？

ES6（ECMAScript 2015）はJavaScriptの大きなアップデート版です。アロー関数（=>）、テンプレートリテラル、分割代入、クラス構文など、コードをより簡潔に書ける機能が多数追加されました。現在ではES6の機能が標準的に使われています。

JavaScriptの学習におすすめの方法は？

基本構文を学んだら、実際に手を動かして小さなプロジェクトを作るのが効果的です。ボタンクリックで色が変わる、簡単な計算機、ToDoリストなど、身近な機能から始めましょう。ブラウザのコンソールで試しながら学ぶのもおすすめです。

概要