【2025年版】JavaScript基本サンプル集 - 初心者向け実例20選

みなさん、JavaScriptを学んでいて「どんなコードを書けばいいの？」と迷ったことはありませんか？

「理論は分かったけど、実際のコードが思い浮かばない」 「コピペで動かせるサンプルがほしい」

こんな悩みを持っている方、多いですよね。

この記事では、JavaScript初心者向けに厳選した基本的なサンプルコード20選を分かりやすく解説します。 すぐに試せる完全なコード例とともに、一つずつ丁寧に説明していきます。

それでは、一緒にJavaScriptの実践を始めていきましょう！

このサンプル集の使い方

学習の進め方

これらのサンプルは、段階的に学習することをおすすめします。

1. コードを読んで理解する
2. 実際に実行してみる
3. 数値や文字列を変更して実験する
4. 自分なりにアレンジしてみる

この順番で進めれば、確実に理解が深まります。

実行環境

すべてのサンプルは、以下の環境で実行できます。

• ブラウザのコンソール（F12キーで開発者ツールを開く）
• Node.js
• オンラインエディタ（CodePen、JSFiddleなど）

実際に手を動かしてコードを書くことで、理解が深まります。

基本的な変数と演算

1. 変数の宣言と使用

まずは変数の基本的な使い方から見てみましょう。

// 基本的な変数宣言
let name = "太郎";
const age = 25;
let isStudent = false;

// 変数の使用
console.log(`名前: ${name}`);
console.log(`年齢: ${age}歳`);
console.log(`学生: ${isStudent ? "はい" : "いいえ"}`);

// 変数の更新
name = "花子";
// age = 26; // エラー！constは再代入不可

console.log(`更新後の名前: ${name}`);

このコードでは、letとconstの違いを学べます。 letは値を変更できますが、constは変更できません。

${}を使うことで、文字列の中に変数を埋め込めます。 これを「テンプレートリテラル」と呼びます。

2. 数値の計算

数値を使った基本的な計算を見てみましょう。

// 基本的な四則演算
let a = 10;
let b = 3;

console.log(`足し算: ${a} + ${b} = ${a + b}`);
console.log(`引き算: ${a} - ${b} = ${a - b}`);
console.log(`掛け算: ${a} × ${b} = ${a * b}`);
console.log(`割り算: ${a} ÷ ${b} = ${a / b}`);
console.log(`余り: ${a} % ${b} = ${a % b}`);

// 便利な数学関数
console.log(`平方根: √${a} = ${Math.sqrt(a)}`);
console.log(`絶対値: |-5| = ${Math.abs(-5)}`);
console.log(`最大値: max(${a}, ${b}) = ${Math.max(a, b)}`);

四則演算の基本に加えて、Mathオブジェクトの便利な関数も紹介しています。 Math.sqrt()は平方根、Math.abs()は絶対値を計算します。

3. 文字列の操作

文字列を扱う基本的な方法です。

let firstName = "太郎";
let lastName = "田中";

// 文字列の結合
let fullName = firstName + " " + lastName;
let templateName = `${lastName} ${firstName}`;

console.log(`結合結果: ${fullName}`);
console.log(`テンプレート: ${templateName}`);

// 文字列の操作
let message = "Hello, World!";
console.log(`文字数: ${message.length}`);
console.log(`大文字: ${message.toUpperCase()}`);
console.log(`小文字: ${message.toLowerCase()}`);
console.log(`部分文字列: ${message.substring(0, 5)}`);

文字列の結合には+とテンプレートリテラルの2つの方法があります。 テンプレートリテラルの方が読みやすくて便利です。

文字列には.lengthで文字数を取得したり、.toUpperCase()で大文字に変換したりできます。

配列とオブジェクト

4. 配列の基本操作

配列は複数のデータをまとめて扱うのに便利です。

// 配列の作成
let fruits = ["りんご", "バナナ", "オレンジ"];

// 配列の表示
console.log("フルーツ一覧:");
fruits.forEach((fruit, index) => {
    console.log(`${index + 1}. ${fruit}`);
});

// 配列の操作
fruits.push("いちご");        // 末尾に追加
fruits.unshift("メロン");     // 先頭に追加
let removedFruit = fruits.pop(); // 末尾を削除

console.log(`削除されたフルーツ: ${removedFruit}`);
console.log(`現在の配列: ${fruits.join(", ")}`);

forEach()は配列の各要素に対して処理を実行します。 push()とpop()で末尾の操作、unshift()で先頭への追加ができます。

join()を使うと、配列の要素を指定した文字で連結できます。

5. 配列の検索とフィルタリング

配列から条件に合う要素を見つける方法です。

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 条件に合う要素を検索
let evenNumbers = numbers.filter(num => num % 2 === 0);
let oddNumbers = numbers.filter(num => num % 2 !== 0);

console.log(`偶数: ${evenNumbers.join(", ")}`);
console.log(`奇数: ${oddNumbers.join(", ")}`);

// 配列の変換
let doubled = numbers.map(num => num * 2);
let sum = numbers.reduce((total, num) => total + num, 0);

console.log(`2倍した配列: ${doubled.join(", ")}`);
console.log(`合計: ${sum}`);

filter()は条件に合う要素だけを取り出します。 map()は各要素を変換した新しい配列を作ります。

reduce()は配列のすべての要素を一つの値にまとめるときに使います。

6. オブジェクトの操作

オブジェクトは関連するデータをまとめて管理するのに便利です。

// オブジェクトの作成
let person = {
    name: "田中太郎",
    age: 30,
    city: "東京",
    hobbies: ["読書", "映画鑑賞", "プログラミング"]
};

// オブジェクトの表示
console.log("個人情報:");
console.log(`名前: ${person.name}`);
console.log(`年齢: ${person.age}歳`);
console.log(`居住地: ${person.city}`);
console.log(`趣味: ${person.hobbies.join(", ")}`);

// プロパティの追加と削除
person.job = "エンジニア";
person["email"] = "tanaka@example.com";
delete person.city;

console.log("更新後:", person);

オブジェクトの値にアクセスするには、ドット記法（person.name）か角括弧記法（person["name"]）を使います。 プロパティの追加や削除も簡単にできます。

条件分岐と繰り返し

7. 条件分岐の基本

if文を使った条件分岐の例です。

// 年齢による分類
function classifyAge(age) {
    if (age < 0) {
        return "無効な年齢です";
    } else if (age < 13) {
        return "子供";
    } else if (age < 20) {
        return "青少年";
    } else if (age < 65) {
        return "成人";
    } else {
        return "高齢者";
    }
}

// テスト
let ages = [5, 15, 25, 70, -5];
ages.forEach(age => {
    console.log(`${age}歳 → ${classifyAge(age)}`);
});

複数の条件をelse ifで繋げることで、細かい分類ができます。 関数を作ることで、同じ処理を何度でも使い回せます。

8. switch文の使用

switch文は値に応じて処理を分けるときに便利です。

// 曜日による処理
function getDayMessage(dayOfWeek) {
    switch (dayOfWeek) {
        case 0:
            return "日曜日 - ゆっくり休みましょう";
        case 1:
            return "月曜日 - 新しい週の始まりです";
        case 2:
        case 3:
        case 4:
            return "平日 - お仕事頑張りましょう";
        case 5:
            return "金曜日 - もうすぐ週末です";
        case 6:
            return "土曜日 - 楽しい週末です";
        default:
            return "無効な曜日です";
    }
}

// 今日の曜日を取得
let today = new Date().getDay();
console.log(getDayMessage(today));

switch文では、複数のcaseを組み合わせることで、同じ処理をまとめることができます。 defaultは、どのcaseにも当てはまらない場合の処理です。

9. 繰り返し処理

forループを使った繰り返し処理の例です。

// 九九の表を作成
console.log("九九の表:");
for (let i = 1; i <= 9; i++) {
    let row = "";
    for (let j = 1; j <= 9; j++) {
        row += `${i * j}`.padStart(2, " ") + " ";
    }
    console.log(`${i}の段: ${row}`);
}

// 配列の繰り返し処理
let colors = ["赤", "青", "緑", "黄", "紫"];
console.log("
色の一覧:");
colors.forEach((color, index) => {
    console.log(`${index + 1}番目: ${color}`);
});

二重のforループで九九の表を作成しています。 padStart()は文字列の桁数を揃えるのに便利です。

配列の繰り返しにはforEach()が使いやすいです。

関数の作成と使用

10. 基本的な関数

関数の定義方法をいくつか紹介します。

// 基本的な関数
function greet(name) {
    return `こんにちは、${name}さん！`;
}

// アロー関数
const add = (a, b) => a + b;
const multiply = (a, b) => a * b;

// 関数の使用
console.log(greet("太郎"));
console.log(`5 + 3 = ${add(5, 3)}`);
console.log(`4 × 7 = ${multiply(4, 7)}`);

// デフォルト引数
function introduce(name, age = 20) {
    return `私の名前は${name}で、${age}歳です。`;
}

console.log(introduce("花子"));
console.log(introduce("次郎", 25));

アロー関数（=>）は短く書けて便利です。 デフォルト引数を設定すると、引数が渡されなかった場合の初期値を指定できます。

11. 高階関数

関数を引数として受け取る高階関数の例です。

// 配列を処理する高階関数
function processArray(arr, callback) {
    let result = [];
    for (let item of arr) {
        result.push(callback(item));
    }
    return result;
}

// コールバック関数
const double = x => x * 2;
const square = x => x * x;
const addPrefix = x => `番号: ${x}`;

let numbers = [1, 2, 3, 4, 5];

console.log("元の配列:", numbers);
console.log("2倍:", processArray(numbers, double));
console.log("平方:", processArray(numbers, square));
console.log("接頭辞付き:", processArray(numbers, addPrefix));

高階関数を使うと、処理を柔軟に変更できます。 同じprocessArray関数でも、渡す関数によって全く違う結果になります。

12. 再帰関数

関数が自分自身を呼び出す再帰関数の例です。

// 階乗の計算
function factorial(n) {
    if (n <= 1) {
        return 1;
    }
    return n * factorial(n - 1);
}

// フィボナッチ数列
function fibonacci(n) {
    if (n <= 1) {
        return n;
    }
    return fibonacci(n - 1) + fibonacci(n - 2);
}

// 結果の表示
console.log("階乗の計算:");
for (let i = 1; i <= 10; i++) {
    console.log(`${i}! = ${factorial(i)}`);
}

console.log("
フィボナッチ数列:");
for (let i = 0; i < 10; i++) {
    console.log(`F(${i}) = ${fibonacci(i)}`);
}

再帰関数は、問題を小さく分割して解決する手法です。 階乗やフィボナッチ数列のような数学的な計算によく使われます。

日付と時間

13. 日付の操作

JavaScriptで日付を扱う基本的な方法です。

// 現在の日付と時間
let now = new Date();
console.log("現在の日時:", now);

// 特定の日付を作成
let birthday = new Date(2000, 0, 1); // 2000年1月1日
let deadline = new Date("2025-12-31");

// 日付の表示
console.log("誕生日:", birthday.toLocaleDateString("ja-JP"));
console.log("締切:", deadline.toLocaleDateString("ja-JP"));

// 年齢の計算
let age = now.getFullYear() - birthday.getFullYear();
if (now.getMonth() < birthday.getMonth() || 
    (now.getMonth() === birthday.getMonth() && now.getDate() < birthday.getDate())) {
    age--;
}
console.log(`年齢: ${age}歳`);

new Date()で現在の日時を取得できます。 特定の日付を作るには、年、月、日を指定します。

年齢計算では、誕生日前かどうかをチェックして正確な年齢を計算しています。

14. 時間の計算

時間の差を計算する方法です。

// 時間の差を計算
function timeDifference(date1, date2) {
    let diffTime = Math.abs(date2 - date1);
    let diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
    return diffDays;
}

// 現在時刻
let now = new Date();
let futureDate = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000); // 7日後

console.log("現在:", now.toLocaleString("ja-JP"));
console.log("7日後:", futureDate.toLocaleString("ja-JP"));
console.log(`差: ${timeDifference(now, futureDate)}日`);

// 時間のフォーマット
function formatTime(date) {
    return date.toLocaleTimeString("ja-JP", {
        hour: "2-digit",
        minute: "2-digit",
        second: "2-digit"
    });
}

console.log("現在時刻:", formatTime(now));

日付の引き算でミリ秒の差が分かります。 それを日数に変換するには、1日のミリ秒数で割ります。

時間のフォーマットはtoLocaleTimeString()で見やすく表示できます。

文字列処理

15. 文字列の検索と置換

文字列を検索したり置き換えたりする方法です。

let text = "JavaScriptは素晴らしいプログラミング言語です。JavaScriptを学習しましょう。";

// 文字列の検索
console.log("元のテキスト:", text);
console.log("文字数:", text.length);
console.log("'JavaScript'の位置:", text.indexOf("JavaScript"));
console.log("'Python'が含まれる:", text.includes("Python"));

// 文字列の置換
let replacedText = text.replace("JavaScript", "JS");
let allReplacedText = text.replaceAll("JavaScript", "JS");

console.log("最初の置換:", replacedText);
console.log("全体の置換:", allReplacedText);

// 文字列の分割
let words = text.split("。");
console.log("文で分割:", words);

indexOf()で文字列の位置を、includes()で含まれているかを確認できます。 replace()は最初の一つだけ、replaceAll()はすべてを置き換えます。

split()で文字列を分割して配列にできます。

16. 文字列の検証

入力値が正しい形式かをチェックする方法です。

// メールアドレスの簡単な検証
function isValidEmail(email) {
    return email.includes("@") && email.includes(".");
}

// 電話番号の検証（簡単な例）
function isValidPhoneNumber(phone) {
    // 数字とハイフンのみ許可
    return /^[0-9-]+$/.test(phone);
}

// パスワードの強度チェック
function checkPasswordStrength(password) {
    let strength = 0;
    if (password.length >= 8) strength++;
    if (/[A-Z]/.test(password)) strength++;
    if (/[a-z]/.test(password)) strength++;
    if (/[0-9]/.test(password)) strength++;
    if (/[^A-Za-z0-9]/.test(password)) strength++;
    
    const levels = ["非常に弱い", "弱い", "普通", "強い", "非常に強い"];
    return levels[strength];
}

// テストデータ
let testEmails = ["user@example.com", "invalid-email", "test@test.jp"];
let testPhones = ["03-1234-5678", "090-1234-5678", "abc-defg-hijk"];
let testPasswords = ["123", "password", "Password123", "P@ssw0rd!"];

console.log("メールアドレス検証:");
testEmails.forEach(email => {
    console.log(`${email}: ${isValidEmail(email) ? "有効" : "無効"}`);
});

console.log("
電話番号検証:");
testPhones.forEach(phone => {
    console.log(`${phone}: ${isValidPhoneNumber(phone) ? "有効" : "無効"}`);
});

console.log("
パスワード強度:");
testPasswords.forEach(password => {
    console.log(`${password}: ${checkPasswordStrength(password)}`);
});

正規表現（/で囲まれた部分）を使うと、複雑な文字列パターンをチェックできます。 パスワード強度は、条件をクリアするごとに点数を加算しています。

実用的な機能

17. 簡単な計算機

実用的な計算機のクラスを作ってみましょう。

// 基本的な計算機
class SimpleCalculator {
    constructor() {
        this.result = 0;
    }
    
    add(num) {
        this.result += num;
        return this;
    }
    
    subtract(num) {
        this.result -= num;
        return this;
    }
    
    multiply(num) {
        this.result *= num;
        return this;
    }
    
    divide(num) {
        if (num !== 0) {
            this.result /= num;
        } else {
            console.log("エラー: 0で割ることはできません");
        }
        return this;
    }
    
    clear() {
        this.result = 0;
        return this;
    }
    
    getResult() {
        return this.result;
    }
}

// 使用例
let calc = new SimpleCalculator();
let result = calc.add(10).multiply(2).subtract(5).divide(3).getResult();
console.log("計算結果:", result);

クラスを使うことで、データと処理をまとめて管理できます。 各メソッドがreturn thisすることで、メソッドチェーンができます。

0で割ろうとしたときのエラーハンドリングも含まれています。

18. 配列のユーティリティ

配列を便利に扱うためのユーティリティ関数集です。

// 配列のユーティリティ関数
const ArrayUtils = {
    // 配列の最大値
    max(arr) {
        return Math.max(...arr);
    },
    
    // 配列の最小値
    min(arr) {
        return Math.min(...arr);
    },
    
    // 配列の平均値
    average(arr) {
        return arr.reduce((sum, num) => sum + num, 0) / arr.length;
    },
    
    // 配列の重複を削除
    unique(arr) {
        return [...new Set(arr)];
    },
    
    // 配列をランダムに並び替え
    shuffle(arr) {
        let shuffled = [...arr];
        for (let i = shuffled.length - 1; i > 0; i--) {
            let j = Math.floor(Math.random() * (i + 1));
            [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
        }
        return shuffled;
    }
};

// テスト
let numbers = [1, 2, 3, 4, 5, 3, 2, 1];
console.log("元の配列:", numbers);
console.log("最大値:", ArrayUtils.max(numbers));
console.log("最小値:", ArrayUtils.min(numbers));
console.log("平均値:", ArrayUtils.average(numbers));
console.log("重複除去:", ArrayUtils.unique(numbers));
console.log("シャッフル:", ArrayUtils.shuffle(numbers));

オブジェクトにまとめることで、関連する機能をグループ化できます。 シャッフル機能では、フィッシャー・イェーツシャッフルアルゴリズムを使っています。

19. 簡単なToDoリスト

シンプルなToDoリストの実装例です。

// シンプルなToDoリスト
class TodoList {
    constructor() {
        this.todos = [];
        this.nextId = 1;
    }
    
    // タスクを追加
    addTodo(task) {
        this.todos.push({
            id: this.nextId++,
            task: task,
            completed: false,
            createdAt: new Date()
        });
        console.log(`タスク「${task}」を追加しました`);
    }
    
    // タスクを完了
    completeTodo(id) {
        let todo = this.todos.find(t => t.id === id);
        if (todo) {
            todo.completed = true;
            console.log(`タスク「${todo.task}」を完了しました`);
        } else {
            console.log("該当するタスクが見つかりません");
        }
    }
    
    // タスクを削除
    deleteTodo(id) {
        let index = this.todos.findIndex(t => t.id === id);
        if (index !== -1) {
            let deleted = this.todos.splice(index, 1)[0];
            console.log(`タスク「${deleted.task}」を削除しました`);
        } else {
            console.log("該当するタスクが見つかりません");
        }
    }
    
    // すべてのタスクを表示
    showAllTodos() {
        console.log("
=== ToDoリスト ===");
        if (this.todos.length === 0) {
            console.log("タスクはありません");
            return;
        }
        
        this.todos.forEach(todo => {
            let status = todo.completed ? "✓" : "○";
            console.log(`${status} [${todo.id}] ${todo.task}`);
        });
    }
}

// 使用例
let todoList = new TodoList();
todoList.addTodo("JavaScript学習");
todoList.addTodo("買い物に行く");
todoList.addTodo("メールを返信する");
todoList.showAllTodos();
todoList.completeTodo(1);
todoList.showAllTodos();

実用的なアプリケーションの基本形です。 配列のfind()やfindIndex()を使って、特定の要素を検索しています。

各タスクには自動でIDが振られ、作成日時も記録されます。

20. 簡単なじゃんけんゲーム

最後は楽しいじゃんけんゲームです。

// じゃんけんゲーム
class RockPaperScissorsGame {
    constructor() {
        this.choices = ["グー", "チョキ", "パー"];
        this.wins = 0;
        this.losses = 0;
        this.draws = 0;
    }
    
    // コンピュータの手を決定
    getComputerChoice() {
        let randomIndex = Math.floor(Math.random() * this.choices.length);
        return this.choices[randomIndex];
    }
    
    // 勝敗判定
    judgeWinner(playerChoice, computerChoice) {
        if (playerChoice === computerChoice) {
            return "引き分け";
        }
        
        if (
            (playerChoice === "グー" && computerChoice === "チョキ") ||
            (playerChoice === "チョキ" && computerChoice === "パー") ||
            (playerChoice === "パー" && computerChoice === "グー")
        ) {
            return "プレイヤーの勝ち";
        } else {
            return "コンピュータの勝ち";
        }
    }
    
    // ゲームプレイ
    play(playerChoice) {
        if (!this.choices.includes(playerChoice)) {
            console.log("無効な選択です。「グー」「チョキ」「パー」のいずれかを選んでください。");
            return;
        }
        
        let computerChoice = this.getComputerChoice();
        let result = this.judgeWinner(playerChoice, computerChoice);
        
        console.log(`
プレイヤー: ${playerChoice}`);
        console.log(`コンピュータ: ${computerChoice}`);
        console.log(`結果: ${result}`);
        
        // 統計を更新
        switch (result) {
            case "プレイヤーの勝ち":
                this.wins++;
                break;
            case "コンピュータの勝ち":
                this.losses++;
                break;
            case "引き分け":
                this.draws++;
                break;
        }
        
        this.showStats();
    }
    
    // 統計を表示
    showStats() {
        let total = this.wins + this.losses + this.draws;
        console.log(`
=== 統計 ===`);
        console.log(`総ゲーム数: ${total}`);
        console.log(`勝ち: ${this.wins}回`);
        console.log(`負け: ${this.losses}回`);
        console.log(`引き分け: ${this.draws}回`);
        
        if (total > 0) {
            console.log(`勝率: ${(this.wins / total * 100).toFixed(1)}%`);
        }
    }
}

// 使用例
let game = new RockPaperScissorsGame();
game.play("グー");
game.play("チョキ");
game.play("パー");
game.play("グー");
game.play("パー");

ランダムでコンピュータの手を決めて、勝敗判定を行います。 統計機能も付いているので、勝率を確認できます。

Math.random()とMath.floor()を組み合わせて、ランダムな整数を生成しています。

まとめ

JavaScript基本サンプル集として、20の実用的な例をご紹介しました。

基本的な分野：

• 変数と演算
• 配列とオブジェクト
• 条件分岐と繰り返し
• 関数の作成と使用
• 日付と時間
• 文字列処理
• 実用的な機能

学習のポイント：

• 実際にコードを実行して動作を確認
• 値を変更して実験してみる
• 自分なりにアレンジしてみる
• エラーが出ても恐れずに試す

これらのサンプルは、JavaScript学習の基礎となる重要な要素を含んでいます。 一つずつ理解しながら実践することで、確実にスキルアップできるはずです。

次のステップ：

• これらのサンプルを組み合わせて、より大きなプログラムを作成
• DOM操作を加えて、実際のWebページで動作するアプリケーションを開発
• 外部APIを使用してデータを取得・表示する機能を追加

JavaScript学習は継続が重要です。 今回紹介したサンプルを参考に、ぜひ自分だけのオリジナルプログラムを作成してみてください。

プログラミングの楽しさを感じながら、着実にスキルを身につけていきましょう！