概要
JavaScript（略してJS）は、Webページに動きとインタラクションを追加するプログラミング言語です。 ボタンをクリックしたときの処理、フォームの入力チェック、アニメーション、データの取得など、ユーザーの操作に応じた動的な機能を実現します。
JavaScriptの仕組みを体験してみよう
下のエディタでJavaScriptコードを入力して、実行ボタンを押してみましょう！ 実際に手を動かすことで、JavaScriptの動作が理解しやすくなります。
コードを書いてみよう
実行結果
ここに実行結果が表示されます
試してみよう：
• console.log("Hello") でメッセージを出力
• const x = 5 + 3; console.log(x); で計算結果を表示
• alert("こんにちは") でアラートを表示
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の違い
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ベースのフルスタックフレームワーク
詳しくはMDN Web Docs - JavaScriptやECMAScript公式仕様で確認できます。
