JavaScript

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

JavaScript学習に役立つ基本的なサンプルコード20選を初心者向けに解説。実用的な例から学習まで、すぐに使える実例集です。

Learning Next 運営
約 76 分で読めます
JavaScriptサンプルコード初心者向け実例基礎学習

JavaScriptを学習していて「実際にどんなコードを書けばいいの？」と悩んだことはありませんか？

「基本的な文法は覚えたけど、実践的な例が知りたい」「すぐに使えるサンプルコードが欲しい」「どんな機能を作れば練習になるの？」

こんな疑問を持っている初心者の方、きっと多いですよね。

JavaScriptは実際に手を動かして覚えるのが一番効果的です。 でも、何を作ればいいか分からないと、なかなか前に進めませんよね。

この記事では、JavaScript学習に役立つ基本的なサンプルコード20選を初心者向けに詳しく解説します。 実用的な例から学習用の例まで、すぐに使える実例をたくさん紹介していきますので、ぜひ参考にしてくださいね！

サンプル1: 簡単な挨拶メッセージ

基本的な文字列表示から始めよう

まずは最もシンプルなJavaScriptの例から始めましょう。

文字列を表示したり、時間に応じて挨拶を変えたりする基本的な機能です。 プログラミングの第一歩として最適ですよ。

// 基本的な挨拶
function sayHello(name) {
    return `こんにちは、${name}さん！`;
}


// 使用例
console.log(sayHello('田中')); // 'こんにちは、田中さん！'

この例では、sayHelloという関数を作って、名前を受け取って挨拶文を返しています。 ${name}の部分はテンプレートリテラルという書き方で、変数を文字列の中に埋め込めるんです。

もう少し実用的な例も見てみましょう。

// 時間に応じた挨拶
function getTimeBasedGreeting(name) {
    const hour = new Date().getHours();
    
    if (hour < 12) {
        return `おはようございます、${name}さん！`;
    } else if (hour < 18) {
        return `こんにちは、${name}さん！`;
    } else {
        return `こんばんは、${name}さん！`;
    }
}


console.log(getTimeBasedGreeting('佐藤'));

この関数では、現在の時刻を取得して、時間帯に応じて挨拶を変えています。 朝・昼・夜で違う挨拶をしてくれるので、ちょっと賢い感じがしますよね。

サンプル2: 電卓機能

四則演算を実装してみよう

次は、基本的な計算機能を作ってみましょう。

プログラミングでよく使うクラスという概念も学べる実用的な例です。

class SimpleCalculator {
    add(a, b) {
        return a + b;
    }
    
    subtract(a, b) {
        return a - b;
    }
    
    multiply(a, b) {
        return a * b;
    }
    
    divide(a, b) {
        if (b === 0) {
            throw new Error('0で割ることはできません');
        }
        return a / b;
    }
    
    calculate(operation, a, b) {
        switch (operation) {
            case '+': return this.add(a, b);
            case '-': return this.subtract(a, b);
            case '*': return this.multiply(a, b);
            case '/': return this.divide(a, b);
            default: throw new Error('無効な演算子です');
        }
    }
}


// 使用例
const calc = new SimpleCalculator();
console.log(calc.calculate('+', 10, 5)); // 15
console.log(calc.calculate('/', 10, 3)); // 3.333...

このコードでは、SimpleCalculatorというクラスを作成しています。 クラスの中に、足し算、引き算、掛け算、割り算のメソッドを定義しました。

calculateメソッドでは、演算子に応じて適切な計算を実行します。 switch文を使うことで、複数の条件を分かりやすく書けるんです。

エラーハンドリングも学ぼう

注目してほしいのは、0で割る場合のエラーハンドリングです。

if (b === 0) {
    throw new Error('0で割ることはできません');
}

プログラムでは、想定外の入力に対する対策がとても重要です。 このように事前にチェックすることで、安全なプログラムが作れます。

サンプル3: 配列の操作

配列の基本操作を覚えよう

配列は、JavaScriptでデータを扱う上で欠かせない重要な概念です。

基本的な操作から応用まで、実用的な例を紹介しますね。

// 配列の基本操作
const fruits = ['りんご', 'バナナ', 'オレンジ'];


// 要素の追加
fruits.push('ぶどう');
console.log(fruits); // ['りんご', 'バナナ', 'オレンジ', 'ぶどう']


// 要素の削除
const removed = fruits.pop();
console.log(removed); // 'ぶどう'


// 配列の検索
const index = fruits.indexOf('バナナ');
console.log(index); // 1

この例では、配列の基本的な操作を実演しています。 pushで要素を追加、popで最後の要素を削除、indexOfで要素の位置を探しています。

配列の高度な操作

JavaScriptの配列には、とても便利なメソッドがたくさんあります。

// 配列のフィルタリング
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6, 8, 10]


// 配列のマッピング
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10, 12, 14, 16, 18, 20]

filterメソッドは、条件に合う要素だけを取り出すときに使います。 ここでは偶数だけを取り出していますね。

mapメソッドは、すべての要素に同じ処理を適用したい時に便利です。 元の配列の各要素を2倍にした新しい配列を作成しています。

サンプル4: オブジェクトの操作

オブジェクトでデータを管理しよう

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

ユーザー情報を例に、基本的な操作を学んでみましょう。

// ユーザーオブジェクトの作成
const user = {
    name: '田中太郎',
    age: 30,
    email: 'tanaka@example.com',
    hobbies: ['読書', '映画鑑賞', 'プログラミング']
};


// プロパティへのアクセス
console.log(user.name); // '田中太郎'
console.log(user['email']); // 'tanaka@example.com'

オブジェクトのプロパティにアクセスする方法は2つあります。 ドット記法（user.name）とブラケット記法（user['email']）です。

オブジェクトの動的な操作

オブジェクトは作成後も、自由に変更できます。

// プロパティの追加
user.city = '東京';
user['phone'] = '090-1234-5678';


// プロパティの削除
delete user.phone;


// オブジェクトのコピー
const userCopy = { ...user };
userCopy.name = '佐藤花子';


console.log(user.name);     // '田中太郎'（元のオブジェクトは変更されない）
console.log(userCopy.name); // '佐藤花子'

この例では、プロパティの追加、削除、そしてスプレッド構文を使ったコピーを紹介しています。 { ...user }という書き方で、元のオブジェクトの内容をコピーした新しいオブジェクトを作れるんです。

サンプル5: 条件分岐の実例

if文を使った実用的な判定

条件分岐は、状況に応じて処理を変えるために必要な基本機能です。

年齢による分類を例に、実践的な使い方を学びましょう。

function classifyByAge(age) {
    if (age < 0) {
        return '無効な年齢です';
    } else if (age < 13) {
        return '子供';
    } else if (age < 20) {
        return '青少年';
    } else if (age < 65) {
        return '大人';
    } else {
        return 'シニア';
    }
}


// 使用例
console.log(classifyByAge(25)); // '大人'
console.log(classifyByAge(8));  // '子供'

この関数では、年齢に応じて適切なカテゴリを返しています。 else ifを使うことで、複数の条件を順番にチェックできるんです。

より簡潔な条件分岐

簡単な条件なら、もっと短く書くこともできます。

// 成績評価の関数
function evaluateScore(score) {
    if (score >= 90) return 'A';
    if (score >= 80) return 'B';
    if (score >= 70) return 'C';
    if (score >= 60) return 'D';
    return 'F';
}


console.log(evaluateScore(85)); // 'B'
console.log(evaluateScore(45)); // 'F'

各条件でreturnを使っているので、条件に合致した時点で関数が終了します。 シンプルで分かりやすい書き方ですね。

サンプル6: ループの活用

繰り返し処理をマスターしよう

ループは、同じ処理を何度も繰り返すときに使う重要な機能です。

色々なパターンを実際のコードで学んでみましょう。

// for文で九九の表を作成
function createMultiplicationTable() {
    for (let i = 1; i <= 9; i++) {
        let row = '';
        for (let j = 1; j <= 9; j++) {
            row += `${i * j}`.padStart(3, ' ');
        }
        console.log(row);
    }
}

この例では、二重ループを使って九九の表を作成しています。 外側のループが行を、内側のループが列を担当しているんです。

他のループパターン

JavaScriptには、いろんなループの書き方があります。

// while文でカウントダウン
function countdown(start) {
    let count = start;
    while (count > 0) {
        console.log(count);
        count--;
    }
    console.log('終了！');
}


// forEach文で配列処理
const students = ['田中', '佐藤', '山田', '鈴木'];
students.forEach((student, index) => {
    console.log(`${index + 1}番目: ${student}`);
});


countdown(5);

while文は条件が満たされている間ループし続けます。 forEachは配列の各要素に対して処理を実行するのに便利です。

サンプル7: 文字列操作

文字列を自在に操ろう

文字列操作は、データの加工や検索でよく使う重要なスキルです。

実用的な例をいくつか紹介しますね。

// 文字列の基本操作
const text = '  Hello World  ';


// 前後の空白を削除
const trimmed = text.trim();
console.log(trimmed); // 'Hello World'


// 大文字・小文字変換
console.log(trimmed.toUpperCase()); // 'HELLO WORLD'
console.log(trimmed.toLowerCase()); // 'hello world'

trim()は文字列の前後にある空白を削除するメソッドです。 ユーザーの入力を処理する時によく使いますよ。

文字列の加工と検索

文字列には、もっとたくさんの便利なメソッドがあります。

// 文字列の分割
const words = trimmed.split(' ');
console.log(words); // ['Hello', 'World']


// 文字列の置換
const replaced = trimmed.replace('World', 'JavaScript');
console.log(replaced); // 'Hello JavaScript'


// 文字列の検索
const contains = trimmed.includes('World');
console.log(contains); // true


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


console.log(isValidEmail('test@example.com')); // true

split()で文字列を配列に分割、replace()で一部を置換、includes()で特定の文字列が含まれているかチェックできます。 メールアドレスの検証例も、実際のWebサイトでよく使うパターンですね。

サンプル8: 日付と時刻の操作

日付オブジェクトを使いこなそう

日付と時刻の処理は、Webアプリケーションで頻繁に使用される機能です。

基本的な使い方から実用的な応用まで学んでみましょう。

// 現在の日時取得
const now = new Date();
console.log(now);


// 特定の日付を作成
const specificDate = new Date('2024-12-31');
console.log(specificDate);

new Date()で現在の日時を取得できます。 引数に文字列を渡すと、その日付のオブジェクトを作成できるんです。

日付の各部分を取得・加工

日付オブジェクトから、年月日や時分秒を個別に取得できます。

// 日付の各部分を取得
const year = now.getFullYear();
const month = now.getMonth() + 1; // 0から始まるので+1
const day = now.getDate();
const hour = now.getHours();
const minute = now.getMinutes();


console.log(`${year}年${month}月${day}日 ${hour}時${minute}分`);


// 日付のフォーマット関数
function formatDate(date) {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    
    return `${year}-${month}-${day}`;
}


console.log(formatDate(now)); // '2025-07-06'

注意点として、getMonth()は0から始まるので、実際の月を取得するには1を足す必要があります。 formatDate関数では、月と日を2桁にゼロパディングして見やすい形式にしています。

実用的な日付計算

年齢計算のような、実際によく使われる処理も紹介しましょう。

// 年齢計算
function calculateAge(birthDate) {
    const today = new Date();
    const birth = new Date(birthDate);
    
    let age = today.getFullYear() - birth.getFullYear();
    
    // まだ誕生日が来ていない場合は1歳引く
    if (today.getMonth() < birth.getMonth() || 
        (today.getMonth() === birth.getMonth() && today.getDate() < birth.getDate())) {
        age--;
    }
    
    return age;
}


console.log(calculateAge('1990-05-15')); // 年齢を計算

この関数では、生年月日から正確な年齢を計算しています。 単純に年の差を取るだけでなく、誕生日が来ているかどうかもチェックしているんです。

サンプル9: DOM操作の基本

HTML要素を操作してみよう

DOM操作は、Webページを動的に変更するための重要な技術です。

実際にWebページで動くコードを書いてみましょう。

<!DOCTYPE html>
<html>
<head>
    <title>DOM操作サンプル</title>
</head>
<body>
    <div id="content">
        <h1 id="title">タイトル</h1>
        <p class="text">段落1</p>
        <p class="text">段落2</p>
        <button id="changeBtn">変更</button>
    </div>


    <script>
        // 要素の取得
        const title = document.getElementById('title');
        const textElements = document.querySelectorAll('.text');
        const button = document.getElementById('changeBtn');
    </script>
</body>
</html>

この例では、HTML要素を取得する基本的な方法を示しています。 getElementById()でIDから、querySelectorAll()でクラス名から要素を取得できます。

要素の内容とスタイルを変更

取得した要素の内容やスタイルを動的に変更してみましょう。

// テキストの変更
function changeContent() {
    title.textContent = '新しいタイトル';
    title.style.color = 'blue';
    
    textElements.forEach((element, index) => {
        element.textContent = `変更された段落${index + 1}`;
        element.style.backgroundColor = 'yellow';
    });
}


// イベントリスナーの追加
button.addEventListener('click', changeContent);


// 新しい要素の作成と追加
function addNewElement() {
    const newParagraph = document.createElement('p');
    newParagraph.textContent = '動的に追加された段落';
    newParagraph.className = 'text';
    
    document.getElementById('content').appendChild(newParagraph);
}


// 5秒後に新しい要素を追加
setTimeout(addNewElement, 5000);

この例では、要素のテキスト変更、スタイル変更、そして新しい要素の動的作成を行っています。 addEventListener()でボタンクリック時の処理を設定し、setTimeout()で時間差での実行も実現しています。

サンプル10: イベント処理

ユーザーの操作に反応しよう

イベント処理は、ユーザーの操作に応じて処理を実行するための仕組みです。

フォーム処理を例に、実用的なイベント処理を学んでみましょう。

<div id="interactive-area">
    <input type="text" id="textInput" placeholder="テキストを入力">
    <button id="submitBtn">送信</button>
    <div id="output"></div>
</div>


<script>
// 入力フィールドとボタンの取得
const textInput = document.getElementById('textInput');
const submitBtn = document.getElementById('submitBtn');
const output = document.getElementById('output');
</script>

まず、操作対象となるHTML要素を取得します。 入力フィールド、ボタン、結果表示用のエリアを用意しました。

複数のイベントを組み合わせる

同じ処理を複数のイベントで実行できるようにしてみましょう。

// フォーム送信の処理
function handleSubmit() {
    const value = textInput.value.trim();
    
    if (value) {
        output.innerHTML += `<p>入力値: ${value}</p>`;
        textInput.value = ''; // 入力フィールドをクリア
    } else {
        alert('テキストを入力してください');
    }
}


// イベントリスナーの設定
submitBtn.addEventListener('click', handleSubmit);


// Enterキーでも送信
textInput.addEventListener('keypress', function(event) {
    if (event.key === 'Enter') {
        handleSubmit();
    }
});


// 入力中のリアルタイム処理
textInput.addEventListener('input', function(event) {
    const length = event.target.value.length;
    console.log(`現在の文字数: ${length}`);
});

この例では、ボタンクリックとEnterキー押下の両方で同じ処理を実行しています。 さらに、inputイベントで入力中の文字数をリアルタイムで監視しているんです。

サンプル11: 非同期処理

Promise と async/await をマスターしよう

非同期処理は、時間のかかる処理を効率的に扱うための重要な概念です。

実用的な例を通して学んでみましょう。

// Promise を使った非同期処理
function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}


// async/await を使った処理
async function fetchUserData(userId) {
    try {
        console.log('ユーザーデータを取得中...');
        
        // 擬似的なAPI呼び出し（2秒待機）
        await delay(2000);
        
        const userData = {
            id: userId,
            name: '田中太郎',
            email: 'tanaka@example.com'
        };
        
        console.log('データ取得完了:', userData);
        return userData;
    } catch (error) {
        console.error('エラーが発生しました:', error);
        throw error;
    }
}

この例では、Promiseを使って時間のかかる処理をシミュレートしています。 async/await構文を使うことで、非同期処理を同期処理のように書けるんです。

複数の非同期処理を並行実行

複数の処理を同時に実行することで、効率を上げることができます。

// 複数の非同期処理を並行実行
async function fetchMultipleUsers() {
    try {
        const promises = [
            fetchUserData(1),
            fetchUserData(2),
            fetchUserData(3)
        ];
        
        const users = await Promise.all(promises);
        console.log('全ユーザーデータ:', users);
        return users;
    } catch (error) {
        console.error('一部のデータ取得に失敗:', error);
    }
}


// 使用例
fetchMultipleUsers();

Promise.all()を使うことで、複数の非同期処理を並行して実行できます。 すべての処理が完了するまで待機し、結果をまとめて取得できるんです。

サンプル12: ローカルストレージ

ブラウザにデータを保存しよう

ローカルストレージは、ブラウザにデータを永続的に保存するための仕組みです。

ユーザー設定などを保存する実用的な例を紹介しますね。

// ローカルストレージへの保存と読み込み
class LocalStorageManager {
    // データを保存
    save(key, value) {
        try {
            const jsonValue = JSON.stringify(value);
            localStorage.setItem(key, jsonValue);
            console.log(`データを保存しました: ${key}`);
        } catch (error) {
            console.error('保存に失敗しました:', error);
        }
    }
    
    // データを読み込み
    load(key) {
        try {
            const jsonValue = localStorage.getItem(key);
            return jsonValue ? JSON.parse(jsonValue) : null;
        } catch (error) {
            console.error('読み込みに失敗しました:', error);
            return null;
        }
    }
}

このLocalStorageManagerクラスは、オブジェクトを安全にローカルストレージに保存・読み込みできます。 JSON.stringify()とJSON.parse()を使って、オブジェクトを文字列に変換しているんです。

実用的な設定管理

実際の使用例として、ユーザー設定の管理を実装してみましょう。

// データを削除
remove(key) {
    localStorage.removeItem(key);
    console.log(`データを削除しました: ${key}`);
}


// 全データをクリア
clear() {
    localStorage.clear();
    console.log('全データを削除しました');
}


// 使用例
const storage = new LocalStorageManager();


// ユーザー設定の保存
const userSettings = {
    theme: 'dark',
    language: 'ja',
    notifications: true
};


storage.save('userSettings', userSettings);


// データの読み込み
const savedSettings = storage.load('userSettings');
console.log('保存された設定:', savedSettings);

この例では、テーマ、言語、通知設定などのユーザー設定を管理しています。 ページを閉じて再度開いても、設定が保持されるので便利ですよ。

サンプル13: API通信

外部データを取得してみよう

API通信は、外部のサーバーからデータを取得するための重要な技術です。

実用的なAPIクライアントを作ってみましょう。

// API通信のクラス
class ApiClient {
    constructor(baseUrl) {
        this.baseUrl = baseUrl;
    }
    
    // GETリクエスト
    async get(endpoint) {
        try {
            const response = await fetch(`${this.baseUrl}${endpoint}`);
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            return await response.json();
        } catch (error) {
            console.error('GET request failed:', error);
            throw error;
        }
    }
}

このApiClientクラスでは、fetch()を使ってHTTP GETリクエストを送信しています。 エラーハンドリングも含めて、安全にAPIを呼び出せるようになっているんです。

POSTリクエストとデータ送信

データを送信するPOSTリクエストも実装してみましょう。

// POSTリクエスト
async post(endpoint, data) {
    try {
        const response = await fetch(`${this.baseUrl}${endpoint}`, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data)
        });
        
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        
        return await response.json();
    } catch (error) {
        console.error('POST request failed:', error);
        throw error;
    }
}


// 使用例（JSONPlaceholder APIを使用）
const api = new ApiClient('https://jsonplaceholder.typicode.com');


async function demonstrateApi() {
    try {
        // ユーザー一覧を取得
        const users = await api.get('/users');
        console.log('ユーザー一覧:', users.slice(0, 3)); // 最初の3件のみ表示
        
        // 新しい投稿を作成
        const newPost = {
            title: 'テスト投稿',
            body: 'これはテスト投稿です',
            userId: 1
        };
        
        const createdPost = await api.post('/posts', newPost);
        console.log('作成された投稿:', createdPost);
    } catch (error) {
        console.error('API呼び出しエラー:', error);
    }
}


demonstrateApi();

この例では、実際のテスト用API（JSONPlaceholder）を使って、データの取得と送信を実演しています。 実際のWebアプリケーション開発でよく使うパターンですね。

サンプル14: フォームバリデーション

入力値を安全にチェックしよう

フォームバリデーションは、ユーザーの入力が正しいかチェックする重要な機能です。

再利用可能なバリデーションシステムを作ってみましょう。

// フォームバリデーションクラス
class FormValidator {
    constructor() {
        this.rules = {};
    }
    
    // バリデーションルールを追加
    addRule(fieldName, validator, errorMessage) {
        if (!this.rules[fieldName]) {
            this.rules[fieldName] = [];
        }
        this.rules[fieldName].push({ validator, errorMessage });
    }
    
    // バリデーションを実行
    validate(data) {
        const errors = {};
        
        for (const [fieldName, value] of Object.entries(data)) {
            const fieldRules = this.rules[fieldName];
            
            if (fieldRules) {
                for (const rule of fieldRules) {
                    if (!rule.validator(value)) {
                        if (!errors[fieldName]) {
                            errors[fieldName] = [];
                        }
                        errors[fieldName].push(rule.errorMessage);
                    }
                }
            }
        }
        
        return {
            isValid: Object.keys(errors).length === 0,
            errors
        };
    }
}

このFormValidatorクラスでは、フィールドごとに複数のバリデーションルールを設定できます。 柔軟で再利用可能な設計になっているんです。

実用的なバリデーター関数

よく使われるバリデーション機能をまとめて作ってみましょう。

// 共通バリデーター関数
const validators = {
    required: (value) => value !== null && value !== undefined && value.toString().trim() !== '',
    email: (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value),
    minLength: (min) => (value) => value.toString().length >= min,
    maxLength: (max) => (value) => value.toString().length <= max,
    numeric: (value) => !isNaN(value) && !isNaN(parseFloat(value))
};


// 使用例
const validator = new FormValidator();


// ルールを設定
validator.addRule('name', validators.required, '名前は必須です');
validator.addRule('name', validators.minLength(2), '名前は2文字以上で入力してください');
validator.addRule('email', validators.required, 'メールアドレスは必須です');
validator.addRule('email', validators.email, '正しいメールアドレスを入力してください');


// フォームデータをバリデーション
const formData = {
    name: 'A',
    email: 'invalid-email',
    age: 'abc'
};


const result = validator.validate(formData);
console.log('バリデーション結果:', result);

この例では、必須チェック、メール形式チェック、文字数チェックなど、実際のWebサイトでよく使うバリデーションを実装しています。 組み合わせることで、複雑な検証ルールも作れるんです。

サンプル15: デバウンス機能

連続実行を制御してパフォーマンス向上

デバウンスは、頻繁に実行される処理を制御してパフォーマンスを向上させる技術です。

検索機能を例に、実用的な実装を学んでみましょう。

// デバウンス関数
function debounce(func, delay) {
    let timeoutId;
    
    return function(...args) {
        // 前のタイマーをクリア
        clearTimeout(timeoutId);
        
        // 新しいタイマーを設定
        timeoutId = setTimeout(() => {
            func.apply(this, args);
        }, delay);
    };
}

デバウンス関数は、連続して呼び出された場合、最後の呼び出しから指定時間経過後に実行します。 検索ボックスでのリアルタイム検索などでよく使われるテクニックです。

スロットル機能との使い分け

似た機能のスロットルも一緒に学んでおきましょう。

// スロットル関数
function throttle(func, limit) {
    let inThrottle;
    
    return function(...args) {
        if (!inThrottle) {
            func.apply(this, args);
            inThrottle = true;
            
            setTimeout(() => {
                inThrottle = false;
            }, limit);
        }
    };
}


// 使用例
const searchInput = document.createElement('input');
searchInput.placeholder = '検索キーワードを入力';
document.body.appendChild(searchInput);


// 検索関数（重い処理をシミュレート）
function performSearch(query) {
    console.log(`検索実行: "${query}"`);
    // 実際のAPIコールなどをここに記述
}


// デバウンスされた検索（500ms後に実行）
const debouncedSearch = debounce((event) => {
    performSearch(event.target.value);
}, 500);


// スロットルされたスクロール処理（100msに1回実行）
const throttledScroll = throttle(() => {
    console.log('スクロール位置:', window.scrollY);
}, 100);


// イベントリスナーを設定
searchInput.addEventListener('input', debouncedSearch);
window.addEventListener('scroll', throttledScroll);

デバウンスは「最後の操作から一定時間後に実行」、スロットルは「一定間隔で実行」という違いがあります。 用途に応じて使い分けることが大切ですね。

サンプル16: ファイル操作

ファイルの読み込みと処理

ファイル操作は、ユーザーがアップロードしたファイルを処理するための機能です。

テキストファイルとJSONファイルの処理を例に学んでみましょう。

<input type="file" id="fileInput" accept=".txt,.json">
<div id="fileOutput"></div>


<script>
// ファイル処理クラス
class FileHandler {
    constructor() {
        this.supportedTypes = {
            'text/plain': this.handleTextFile,
            'application/json': this.handleJsonFile
        };
    }
    
    // ファイルを読み込み
    async readFile(file) {
        return new Promise((resolve, reject) => {
            const reader = new FileReader();
            
            reader.onload = (event) => {
                resolve(event.target.result);
            };
            
            reader.onerror = (error) => {
                reject(error);
            };
            
            reader.readAsText(file);
        });
    }
}
</script>

このFileHandlerクラスでは、ファイルタイプに応じて異なる処理を実行できる仕組みを作っています。 FileReaderを使ってファイルの内容を読み取っているんです。

ファイルタイプ別の処理

ファイルの種類に応じた具体的な処理を実装してみましょう。

// テキストファイルの処理
handleTextFile(content) {
    const lines = content.split('
');
    return {
        type: 'text',
        lineCount: lines.length,
        wordCount: content.split(/\s+/).length,
        charCount: content.length,
        preview: lines.slice(0, 5).join('
')
    };
}


// JSONファイルの処理
handleJsonFile(content) {
    try {
        const data = JSON.parse(content);
        return {
            type: 'json',
            valid: true,
            keyCount: Object.keys(data).length,
            data: data
        };
    } catch (error) {
        return {
            type: 'json',
            valid: false,
            error: error.message
        };
    }
}


// ファイルを処理
async processFile(file) {
    try {
        const content = await this.readFile(file);
        const handler = this.supportedTypes[file.type];
        
        if (handler) {
            return handler.call(this, content);
        } else {
            throw new Error(`サポートされていないファイル形式: ${file.type}`);
        }
    } catch (error) {
        console.error('ファイル処理エラー:', error);
        throw error;
    }
}


// 使用例
const fileHandler = new FileHandler();
const fileInput = document.getElementById('fileInput');
const output = document.getElementById('fileOutput');


fileInput.addEventListener('change', async (event) => {
    const file = event.target.files[0];
    
    if (file) {
        try {
            const result = await fileHandler.processFile(file);
            output.innerHTML = `
                <h3>ファイル情報</h3>
                <pre>${JSON.stringify(result, null, 2)}</pre>
            `;
        } catch (error) {
            output.innerHTML = `<p style="color: red;">エラー: ${error.message}</p>`;
        }
    }
});

この例では、テキストファイルは行数や文字数を分析し、JSONファイルは構造を検証しています。 実際のWebアプリケーションでよく使われる処理パターンですね。

サンプル17: タブ切り替え機能

UI コンポーネントを作ってみよう

タブ切り替えは、限られたスペースで複数のコンテンツを管理するのに便利なUIコンポーネントです。

実用的なタブシステムを作ってみましょう。

<div class="tab-container">
    <div class="tab-headers">
        <button class="tab-header active" data-tab="tab1">タブ1</button>
        <button class="tab-header" data-tab="tab2">タブ2</button>
        <button class="tab-header" data-tab="tab3">タブ3</button>
    </div>
    
    <div class="tab-contents">
        <div class="tab-content active" id="tab1">
            <h3>タブ1の内容</h3>
            <p>これは最初のタブの内容です。</p>
        </div>
        <div class="tab-content" id="tab2">
            <h3>タブ2の内容</h3>
            <p>これは2番目のタブの内容です。</p>
        </div>
        <div class="tab-content" id="tab3">
            <h3>タブ3の内容</h3>
            <p>これは3番目のタブの内容です。</p>
        </div>
    </div>
</div>

HTMLの構造では、タブヘッダーとタブコンテンツを分けて管理しています。 data-tab属性を使って、ヘッダーとコンテンツを関連付けているんです。

タブ機能の実装

JavaScriptでタブの切り替え機能を実装してみましょう。

// タブ機能クラス
class TabManager {
    constructor(containerSelector) {
        this.container = document.querySelector(containerSelector);
        this.headers = this.container.querySelectorAll('.tab-header');
        this.contents = this.container.querySelectorAll('.tab-content');
        
        this.init();
    }
    
    init() {
        this.headers.forEach(header => {
            header.addEventListener('click', (event) => {
                this.switchTab(event.target.dataset.tab);
            });
        });
    }
    
    switchTab(tabId) {
        // すべてのタブヘッダーから active クラスを削除
        this.headers.forEach(header => {
            header.classList.remove('active');
        });
        
        // すべてのタブ内容から active クラスを削除
        this.contents.forEach(content => {
            content.classList.remove('active');
        });
        
        // 指定されたタブをアクティブにする
        const targetHeader = this.container.querySelector(`[data-tab="${tabId}"]`);
        const targetContent = this.container.querySelector(`#${tabId}`);
        
        if (targetHeader && targetContent) {
            targetHeader.classList.add('active');
            targetContent.classList.add('active');
        }
    }
    
    // プログラムから特定のタブに切り替え
    activateTab(tabId) {
        this.switchTab(tabId);
    }
}


// 使用例
const tabManager = new TabManager('.tab-container');


// 3秒後に自動的にタブ2に切り替え
setTimeout(() => {
    tabManager.activateTab('tab2');
}, 3000);

このTabManagerクラスでは、タブのクリックイベントを監視し、適切にクラスの付け替えを行っています。 プログラムからタブを切り替える機能も提供しているので、とても便利ですよ。

サンプル18: スライドショー

画像やコンテンツを順番に表示

スライドショーは、複数のコンテンツを順番に表示する人気のUIコンポーネントです。

自動再生機能付きのスライドショーを作ってみましょう。

<div class="slideshow-container">
    <div class="slides">
        <div class="slide active">
            <div class="slide-content" style="background-color: #ff6b6b;">
                <h2>スライド 1</h2>
                <p>最初のスライドの内容</p>
            </div>
        </div>
        <div class="slide">
            <div class="slide-content" style="background-color: #4ecdc4;">
                <h2>スライド 2</h2>
                <p>2番目のスライドの内容</p>
            </div>
        </div>
        <div class="slide">
            <div class="slide-content" style="background-color: #45b7d1;">
                <h2>スライド 3</h2>
                <p>3番目のスライドの内容</p>
            </div>
        </div>
    </div>
    
    <button class="nav-btn prev" onclick="slideshow.previous()">❮</button>
    <button class="nav-btn next" onclick="slideshow.next()">❯</button>
    
    <div class="indicators">
        <span class="indicator active" onclick="slideshow.goToSlide(0)"></span>
        <span class="indicator" onclick="slideshow.goToSlide(1)"></span>
        <span class="indicator" onclick="slideshow.goToSlide(2)"></span>
    </div>
</div>

HTMLでは、スライド本体、ナビゲーションボタン、インジケーターを配置しています。 CSSアニメーションと組み合わせることで、スムーズな切り替えを実現できるんです。

スライドショーの機能実装

JavaScript側の機能を実装してみましょう。

// スライドショークラス
class Slideshow {
    constructor(containerSelector) {
        this.container = document.querySelector(containerSelector);
        this.slides = this.container.querySelector('.slides');
        this.indicators = this.container.querySelectorAll('.indicator');
        this.currentSlide = 0;
        this.totalSlides = this.indicators.length;
        this.autoSlideInterval = null;
        
        this.init();
    }
    
    init() {
        // 自動スライドを開始
        this.startAutoSlide();
        
        // マウスが乗った時は自動スライドを停止
        this.container.addEventListener('mouseenter', () => {
            this.stopAutoSlide();
        });
        
        // マウスが離れた時は自動スライドを再開
        this.container.addEventListener('mouseleave', () => {
            this.startAutoSlide();
        });
    }
    
    goToSlide(index) {
        // インデックスを有効範囲内に調整
        this.currentSlide = Math.max(0, Math.min(index, this.totalSlides - 1));
        
        // スライドを移動
        const translateX = -this.currentSlide * (100 / this.totalSlides);
        this.slides.style.transform = `translateX(${translateX}%)`;
        
        // インジケーターを更新
        this.updateIndicators();
    }
    
    next() {
        const nextIndex = (this.currentSlide + 1) % this.totalSlides;
        this.goToSlide(nextIndex);
    }
    
    previous() {
        const prevIndex = (this.currentSlide - 1 + this.totalSlides) % this.totalSlides;
        this.goToSlide(prevIndex);
    }
    
    updateIndicators() {
        this.indicators.forEach((indicator, index) => {
            indicator.classList.toggle('active', index === this.currentSlide);
        });
    }
    
    startAutoSlide() {
        this.autoSlideInterval = setInterval(() => {
            this.next();
        }, 3000); // 3秒ごとに自動切り替え
    }
    
    stopAutoSlide() {
        if (this.autoSlideInterval) {
            clearInterval(this.autoSlideInterval);
            this.autoSlideInterval = null;
        }
    }
}


// 使用例
const slideshow = new Slideshow('.slideshow-container');

この実装では、自動再生、マウスホバーでの一時停止、ナビゲーションボタン、インジケーターなど、本格的なスライドショーの機能を提供しています。 実際のWebサイトでそのまま使えるレベルですね。

サンプル19: アコーディオンメニュー

展開・収納可能なメニューシステム

アコーディオンメニューは、コンテンツを効率的に整理するのに便利なUIコンポーネントです。

FAQ（よくある質問）のような用途でよく使われますね。

<div class="accordion">
    <div class="accordion-item">
        <div class="accordion-header">
            <h3>セクション 1</h3>
            <span class="accordion-icon">+</span>
        </div>
        <div class="accordion-content">
            <p>これは最初のセクションの内容です。ここに詳細な情報を記載できます。</p>
            <p>複数の段落や他の要素も含めることができます。</p>
        </div>
    </div>
    
    <div class="accordion-item">
        <div class="accordion-header">
            <h3>セクション 2</h3>
            <span class="accordion-icon">+</span>
        </div>
        <div class="accordion-content">
            <p>2番目のセクションの内容です。</p>
            <ul>
                <li>リスト項目 1</li>
                <li>リスト項目 2</li>
                <li>リスト項目 3</li>
            </ul>
        </div>
    </div>
</div>

HTMLでは、ヘッダー部分（クリック可能）とコンテンツ部分（展開・収納される）を分けて構成しています。 アイコンも含めることで、視覚的に分かりやすくなっているんです。

アコーディオンの機能実装

展開・収納の動作を実装してみましょう。

// アコーディオンクラス
class Accordion {
    constructor(containerSelector, options = {}) {
        this.container = document.querySelector(containerSelector);
        this.options = {
            allowMultiple: false, // 複数のセクションを同時に開くか
            ...options
        };
        
        this.init();
    }
    
    init() {
        const headers = this.container.querySelectorAll('.accordion-header');
        
        headers.forEach((header, index) => {
            header.addEventListener('click', () => {
                this.toggleSection(index);
            });
        });
    }
    
    toggleSection(index) {
        const items = this.container.querySelectorAll('.accordion-item');
        const targetItem = items[index];
        
        if (!this.options.allowMultiple) {
            // 他のセクションを閉じる
            items.forEach((item, i) => {
                if (i !== index) {
                    item.classList.remove('active');
                }
            });
        }
        
        // ターゲットセクションをトグル
        targetItem.classList.toggle('active');
        
        // カスタムイベントを発火
        this.container.dispatchEvent(new CustomEvent('accordionToggle', {
            detail: {
                index: index,
                isOpen: targetItem.classList.contains('active')
            }
        }));
    }
    
    openSection(index) {
        const items = this.container.querySelectorAll('.accordion-item');
        if (items[index]) {
            items[index].classList.add('active');
        }
    }
    
    closeSection(index) {
        const items = this.container.querySelectorAll('.accordion-item');
        if (items[index]) {
            items[index].classList.remove('active');
        }
    }
    
    closeAll() {
        const items = this.container.querySelectorAll('.accordion-item');
        items.forEach(item => {
            item.classList.remove('active');
        });
    }
}


// 使用例
const accordion = new Accordion('.accordion', {
    allowMultiple: false
});


// イベントリスナーの追加
document.querySelector('.accordion').addEventListener('accordionToggle', (event) => {
    console.log(`セクション ${event.detail.index} が ${event.detail.isOpen ? '開かれ' : '閉じられ'}ました`);
});


// プログラムから最初のセクションを開く
setTimeout(() => {
    accordion.openSection(0);
}, 1000);

この実装では、複数セクションの同時展開制御、カスタムイベント、プログラムからの操作など、実用的な機能を提供しています。 オプション設定で動作をカスタマイズできるのも便利ですね。

サンプル20: シンプルなToDoリスト

完全なToDoアプリケーション

最後に、これまで学んだ技術を組み合わせて、完全なToDoリストアプリケーションを作ってみましょう。

データの永続化、フィルタリング、統計表示など、実用的な機能を含んでいます。

<!DOCTYPE html>
<html>
<head>
    <title>ToDoリスト</title>
    <style>
        .todo-app {
            max-width: 500px;
            margin: 20px auto;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 10px;
            font-family: Arial, sans-serif;
        }
        
        .todo-input-section {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        
        .todo-input {
            flex: 1;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
        }
        
        .todo-add-btn {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        
        .todo-filters {
            display: flex;
            gap: 10px;
            margin-bottom: 20px;
            justify-content: center;
        }
        
        .filter-btn {
            padding: 5px 15px;
            border: 1px solid #ccc;
            background-color: white;
            cursor: pointer;
            border-radius: 3px;
        }
        
        .filter-btn.active {
            background-color: #007bff;
            color: white;
        }
        
        .todo-item {
            display: flex;
            align-items: center;
            padding: 10px;
            border: 1px solid #eee;
            margin-bottom: 5px;
            border-radius: 5px;
        }
        
        .todo-item.completed {
            opacity: 0.6;
            text-decoration: line-through;
        }
        
        .todo-text {
            flex: 1;
            cursor: pointer;
        }
        
        .todo-delete {
            background-color: #dc3545;
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="todo-app">
        <div class="todo-header">
            <h1>ToDoリスト</h1>
        </div>
        
        <div class="todo-input-section">
            <input type="text" class="todo-input" placeholder="新しいタスクを入力..." id="todoInput">
            <button class="todo-add-btn" id="addBtn">追加</button>
        </div>
        
        <div class="todo-filters">
            <button class="filter-btn active" data-filter="all">すべて</button>
            <button class="filter-btn" data-filter="active">進行中</button>
            <button class="filter-btn" data-filter="completed">完了済み</button>
        </div>
        
        <ul class="todo-list" id="todoList"></ul>
        
        <div class="todo-stats" id="todoStats"></div>
    </div>
</body>
</html>

HTMLでは、入力フォーム、フィルターボタン、タスクリスト、統計表示の各部分を配置しています。 見た目もシンプルで使いやすいデザインにしているんです。

ToDoアプリの完全実装

JavaScript側で、すべての機能を実装してみましょう。

// ToDoアプリケーションクラス
class TodoApp {
    constructor() {
        this.todos = this.loadTodos();
        this.currentFilter = 'all';
        this.nextId = this.getNextId();
        
        this.init();
        this.render();
    }
    
    init() {
        // DOM要素の取得
        this.todoInput = document.getElementById('todoInput');
        this.addBtn = document.getElementById('addBtn');
        this.todoList = document.getElementById('todoList');
        this.todoStats = document.getElementById('todoStats');
        
        // イベントリスナーの設定
        this.addBtn.addEventListener('click', () => this.addTodo());
        this.todoInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') this.addTodo();
        });
        
        // フィルターボタンのイベント
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                this.setFilter(e.target.dataset.filter);
            });
        });
    }
    
    addTodo() {
        const text = this.todoInput.value.trim();
        
        if (text) {
            const todo = {
                id: this.nextId++,
                text: text,
                completed: false,
                createdAt: new Date().toISOString()
            };
            
            this.todos.push(todo);
            this.todoInput.value = '';
            this.saveTodos();
            this.render();
        }
    }
    
    toggleTodo(id) {
        const todo = this.todos.find(t => t.id === id);
        if (todo) {
            todo.completed = !todo.completed;
            todo.completedAt = todo.completed ? new Date().toISOString() : null;
            this.saveTodos();
            this.render();
        }
    }
    
    deleteTodo(id) {
        this.todos = this.todos.filter(t => t.id !== id);
        this.saveTodos();
        this.render();
    }
    
    setFilter(filter) {
        this.currentFilter = filter;
        
        // フィルターボタンの状態を更新
        document.querySelectorAll('.filter-btn').forEach(btn => {
            btn.classList.toggle('active', btn.dataset.filter === filter);
        });
        
        this.render();
    }
    
    getFilteredTodos() {
        switch (this.currentFilter) {
            case 'active':
                return this.todos.filter(todo => !todo.completed);
            case 'completed':
                return this.todos.filter(todo => todo.completed);
            default:
                return this.todos;
        }
    }
    
    render() {
        const filteredTodos = this.getFilteredTodos();
        
        // ToDoリストの描画
        if (filteredTodos.length === 0) {
            this.todoList.innerHTML = '<li class="empty-message">タスクがありません</li>';
        } else {
            this.todoList.innerHTML = filteredTodos
                .map(todo => this.createTodoHTML(todo))
                .join('');
        }
        
        // 統計情報の更新
        this.updateStats();
    }
    
    createTodoHTML(todo) {
        return `
            <li class="todo-item ${todo.completed ? 'completed' : ''}">
                <input type="checkbox" class="todo-checkbox" ${todo.completed ? 'checked' : ''} 
                       onchange="todoApp.toggleTodo(${todo.id})">
                <span class="todo-text" onclick="todoApp.toggleTodo(${todo.id})">${todo.text}</span>
                <button class="todo-delete" onclick="todoApp.deleteTodo(${todo.id})">削除</button>
            </li>
        `;
    }
    
    updateStats() {
        const total = this.todos.length;
        const completed = this.todos.filter(t => t.completed).length;
        const active = total - completed;
        
        this.todoStats.innerHTML = `
            合計: ${total}件 | 進行中: ${active}件 | 完了: ${completed}件
        `;
    }
    
    saveTodos() {
        localStorage.setItem('todos', JSON.stringify(this.todos));
    }
    
    loadTodos() {
        const saved = localStorage.getItem('todos');
        return saved ? JSON.parse(saved) : [];
    }
    
    getNextId() {
        return this.todos.length > 0 ? Math.max(...this.todos.map(t => t.id)) + 1 : 1;
    }
}


// アプリケーションの初期化
const todoApp = new TodoApp();

この完全なToDoアプリでは、タスクの追加・削除・完了、フィルタリング、ローカルストレージでの永続化、統計表示など、実用的なすべての機能を実装しています。 これまで学んだ技術の集大成として、とても良い例になっていますね。

まとめ

JavaScriptの基本的なサンプルコード20選を紹介しました。

今回紹介したサンプルの分類：

  • 基礎編: 挨拶メッセージ、電卓、配列・オブジェクト操作、条件分岐、ループ
  • 文字列・日付編: 文字列操作、日付処理、フォーマット関数
  • DOM操作編: HTML要素操作、イベント処理、動的コンテンツ作成
  • 非同期・API編: Promise/async-await、ローカルストレージ、API通信
  • UIコンポーネント編: フォームバリデーション、タブ、スライドショー、アコーディオン
  • 実用アプリ編: デバウンス、ファイル操作、完全なToDoアプリ

これらのサンプルコードは、実際のWebアプリケーション開発でよく使用される基本的なパターンを網羅しています。 特に、モダンなJavaScript（ES6+）の機能を活用した実践的な実装方法を学べるように構成しました。

学習のポイント：

  • まずは簡単なサンプルから始めて、徐々に複雑な機能に挑戦
  • コードをそのまま写すだけでなく、仕組みを理解することが大切
  • 実際に手を動かして、エラーが出ても諦めずに修正してみる
  • 一つの機能をマスターしたら、別の機能と組み合わせてみる

これらの実例を参考にして、ぜひ自分だけのJavaScriptアプリケーションを作ってみてください！ 最初は小さなプロジェクトから始めて、徐々にスキルアップしていけば、きっと素晴らしいWebアプリが作れるようになりますよ。

関連記事

JavaScriptの難易度は？文系・未経験でも理解できる学習ステップ

文系出身や未経験者でもJavaScriptを習得できる？難易度と効率的な学習方法を詳しく解説。挫折しないための具体的なステップを紹介します。

2025年7月6日
12分

【初心者向け】JavaScriptとは？30分でわかる基本概念と学習の始め方

プログラミング初心者にもわかりやすく、JavaScriptの基本概念から学習方法まで30分で理解できる完全ガイド。今すぐプログラミングの世界に飛び込みましょう。

2025年7月6日
14分

【2025年版】JavaScriptとは？初心者向けに5分でわかりやすく解説

JavaScriptとは何かを初心者向けに5分で理解できるよう解説。歴史、特徴、学習方法まで2025年最新情報でわかりやすく紹介します。

2025年7月6日
9分