JavaScript入門｜はじめの一歩をわかりやすく解説

JavaScriptはWebサイトに動きをつけるためのプログラミング言語です。ボタンをクリックしたときの動作や、ページの内容を動的に変えるなど、私たちが日常的に目にするWebの機能の多くはJavaScriptで実現されています。この記事では、JavaScriptの基本文法をゼロから解説します。

JavaScriptとは

JavaScriptは、Webブラウザ上で動作するプログラミング言語として誕生しました。現在ではサーバーサイド（Node.js）やスマホアプリ開発にも使われ、世界で最も広く使われている言語の一つです。

JavaScriptを始めるのに特別な準備は不要です。お使いのブラウザ（Chrome、Firefox、Edgeなど）に開発者ツールが内蔵されており、すぐにコードを試すことができます。

開発者ツールの開き方

ブラウザで任意のページを開く
F12キーを押す（Macの場合はCmd + Option + I）
「Console」タブを選択する

ここにJavaScriptのコードを入力してEnterを押せば、すぐに実行結果を確認できます。

変数の宣言と使い方

JavaScriptで変数を宣言するには、let、const、varの3つのキーワードがあります。現在の主流はletとconstです。

// let: 後から値を変更できる変数
let score = 0;
score = 100;  // OK: 値を変更できる

// const: 値を変更できない定数
const MAX_SCORE = 1000;
// MAX_SCORE = 2000;  // エラー: 再代入できない

// var: 古い書き方（現在は非推奨）
var oldStyle = "使わない方がよい";

基本のデータ型

// 数値（整数も小数も同じNumber型）
let age = 25;
let pi = 3.14;

// 文字列（シングルクォート、ダブルクォート、バッククォート）
let name = "田中太郎";
let greeting = 'こんにちは';
let message = `${name}さん、${greeting}`;  // テンプレートリテラル

// 真偽値
let isActive = true;
let isDeleted = false;

// undefined（値が未定義）
let x;
console.log(x);  // undefined

// null（意図的に空を設定）
let data = null;

テンプレートリテラル（バッククォート）は、文字列の中に変数を埋め込むときに便利です。${}の中に変数や式を書けます。

関数の基本

関数は、処理をまとめて名前をつけたものです。同じ処理を何度も書かなくて済むようになります。

関数宣言

// 関数を定義する
function greet(name) {
  return `こんにちは、${name}さん！`;
}

// 関数を呼び出す
let result = greet("田中");
console.log(result);  // こんにちは、田中さん！

アロー関数

ES6以降で使える、より短い書き方です。

// アロー関数
const add = (a, b) => {
  return a + b;
};

// 処理が1行なら中括弧とreturnを省略できる
const multiply = (a, b) => a * b;

console.log(add(3, 5));       // 8
console.log(multiply(4, 6));  // 24

関数の活用例

// 税込み価格を計算する関数
const calcTaxIncluded = (price, taxRate = 0.1) => {
  return Math.floor(price * (1 + taxRate));
};

console.log(calcTaxIncluded(1000));       // 1100
console.log(calcTaxIncluded(1000, 0.08)); // 1080

// 配列の合計を求める関数
function sum(numbers) {
  let total = 0;
  for (let num of numbers) {
    total += num;
  }
  return total;
}

console.log(sum([10, 20, 30]));  // 60

taxRate = 0.1のように、引数にデフォルト値を設定できます。引数が渡されなかった場合にデフォルト値が使われます。

条件分岐とループ

プログラムの流れを制御する基本的な構文を見ていきましょう。

if文

let score = 75;

if (score >= 80) {
  console.log("優秀です");
} else if (score >= 60) {
  console.log("合格です");
} else {
  console.log("不合格です");
}
// 出力: 合格です

比較演算子の注意点

// == は型変換してから比較（非推奨）
console.log(1 == "1");   // true（文字列"1"が数値に変換される）

// === は型も含めて厳密に比較（推奨）
console.log(1 === "1");  // false（型が異なるのでfalse）
console.log(1 === 1);    // true

// 常に === を使うことを推奨

==と===の違いは、JavaScript初心者がつまずきやすいポイントです。基本的には常に===（厳密等価演算子）を使いましょう。

for文

// 基本のfor文
for (let i = 0; i < 5; i++) {
  console.log(`${i + 1}回目のループ`);
}

// 配列をループ
const fruits = ["りんご", "みかん", "ぶどう"];

for (let fruit of fruits) {
  console.log(fruit);
}

// forEachメソッド
fruits.forEach((fruit, index) => {
  console.log(`${index + 1}: ${fruit}`);
});

while文

let count = 0;

while (count < 3) {
  console.log(`カウント: ${count}`);
  count++;
}
// カウント: 0
// カウント: 1
// カウント: 2

初心者が注意すべきポイント

ポイント1: セミコロンの扱い

// JavaScriptではセミコロンは省略可能だが、つける方が安全
let a = 1;
let b = 2;

// 省略しても動くが、予期せぬ動作の原因になることがある
let c = 1
let d = 2

チームで開発する場合は、ESLintなどのツールでルールを統一するのが一般的です。

ポイント2: constを優先的に使う

// まずconstで宣言し、再代入が必要な場合だけletを使う
const API_URL = "https://api.example.com";
const MAX_RETRY = 3;

let currentRetry = 0;  // ループで更新するのでlet

constを優先することで、意図しない値の変更を防げます。

ポイント3: console.logを活用する

// デバッグの基本はconsole.log
let data = { name: "太郎", age: 25 };
console.log(data);           // オブジェクト全体を表示
console.log(typeof data);    // "object"（型の確認）
console.log(data.name);      // "太郎"（プロパティの確認）

コードの動きがわからないときは、要所にconsole.logを入れて値を確認しましょう。地道ですが、最も確実なデバッグ方法です。

実践へのステップ

JavaScriptの基礎を学んだら、次のステップとして以下のことに挑戦してみましょう。

HTMLファイルに<script>タグを使ってJavaScriptを埋め込んでみる
ボタンのクリックイベントを処理してみる
配列やオブジェクトの操作に慣れる
DOM操作でページの内容を動的に変えてみる

まずはブラウザの開発者ツールで、この記事のコード例を実際に動かしてみることをおすすめします。