Javascriptの作品例

JavaScriptを使用した実際の作品例は、ウェブサイトやアプリケーション、インタラクティブなユーザーインターフェースなど、非常に多岐にわたります。ここでは、JavaScriptのさまざまな技術やライブラリを使ったいくつかの作品例を紹介します。これらの作品例は、学習プロジェクトとしても役立ちます。

1. シンプルなToDoリストアプリ

シンプルなToDoリストアプリは、JavaScriptの基本的な操作を学ぶのに適しています。ユーザーがタスクを追加、削除、完了状態にすることができます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ToDoリスト</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <h1>ToDoリスト</h1>
        <input type="text" id="new-task" placeholder="新しいタスク">
        <button id="add-task-btn">追加</button>
        <ul id="task-list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS（styles.css）

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

#app {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

#new-task {
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 10px;
}

button {
    padding: 10px;
    cursor: pointer;
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid #ddd;
}

li.completed {
    text-decoration: line-through;
    color: #999;
}

JavaScript（script.js）

document.addEventListener('DOMContentLoaded', () => {
    const addTaskBtn = document.getElementById('add-task-btn');
    const newTaskInput = document.getElementById('new-task');
    const taskList = document.getElementById('task-list');

    // タスクを追加する関数
    function addTask() {
        const taskText = newTaskInput.value.trim();
        if (taskText !== '') {
            const li = document.createElement('li');
            li.textContent = taskText;

            const completeBtn = document.createElement('button');
            completeBtn.textContent = '完了';
            completeBtn.addEventListener('click', () => {
                li.classList.toggle('completed');
            });

            const deleteBtn = document.createElement('button');
            deleteBtn.textContent = '削除';
            deleteBtn.addEventListener('click', () => {
                taskList.removeChild(li);
            });

            li.appendChild(completeBtn);
            li.appendChild(deleteBtn);
            taskList.appendChild(li);

            newTaskInput.value = '';
        }
    }

    // ボタンをクリックしたときのイベント
    addTaskBtn.addEventListener('click', addTask);

    // Enterキーを押したときのイベント
    newTaskInput.addEventListener('keypress', (event) => {
        if (event.key === 'Enter') {
            addTask();
        }
    });
});

2. 天気予報アプリ

天気予報アプリは、APIを利用して外部データを取得する方法や、非同期処理を学ぶのに適しています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天気予報アプリ</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <h1>天気予報アプリ</h1>
        <input type="text" id="city" placeholder="都市名を入力">
        <button id="get-weather-btn">天気を取得</button>
        <div id="weather-result"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS（styles.css）

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

#app {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

input {
    width: calc(100% - 22px);
    padding: 10px;
    margin-bottom: 10px;
}

button {
    padding: 10px;
    cursor: pointer;
}

#weather-result {
    margin-top: 20px;
}

JavaScript（script.js）

document.addEventListener('DOMContentLoaded', () => {
    const getWeatherBtn = document.getElementById('get-weather-btn');
    const cityInput = document.getElementById('city');
    const weatherResult = document.getElementById('weather-result');

    async function getWeather(city) {
        const apiKey = 'YOUR_API_KEY'; // OpenWeatherMap APIキーを入力
        const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=ja`;

        try {
            const response = await fetch(apiUrl);
            if (!response.ok) {
                throw new Error('天気情報の取得に失敗しました');
            }
            const data = await response.json();
            displayWeather(data);
        } catch (error) {
            weatherResult.textContent = error.message;
        }
    }

    function displayWeather(data) {
        weatherResult.innerHTML = `
            <h2>${data.name}の天気</h2>
            <p>温度: ${data.main.temp}℃</p>
            <p>天気: ${data.weather[0].description}</p>
            <p>湿度: ${data.main.humidity}%</p>
            <p>風速: ${data.wind.speed}m/s</p>
        `;
    }

    getWeatherBtn.addEventListener('click', () => {
        const city = cityInput.value.trim();
        if (city !== '') {
            getWeather(city);
        }
    });
});

3. シンプルなカルーセル

カルーセルは、ユーザーインターフェースを学ぶための良い例です。画像を自動でスライド表示させることができます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>カルーセル</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="carousel">
        <div class="slides">
            <div class="slide active" style="background-image: url('img1.jpg');"></div>
            <div class="slide" style="background-image: url('img2.jpg');"></div>
            <div class="slide" style="background-image: url('img3.jpg');"></div>
        </div>
        <button class="prev">←</button>
        <button class="next">→</button>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS（styles.css）

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

#carousel {
    position: relative;
    width: 600px;
    height: 400px;
    overflow: hidden;
}

.slides {
    display: flex;
    transition: transform 0.5s ease;
}

.slide {
    min-width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    padding: 10px;
    cursor: pointer;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

JavaScript（script.js）

document.addEventListener('DOMContentLoaded', () => {
    const slides = document.querySelectorAll('.slide');
    let currentIndex = 0;

    function showSlide(index) {
        slides.forEach((slide, i) => {
            slide.classList.toggle('active', i === index);
        });
        const offset = -index * 100;
        document.querySelector('.slides').style.transform = `translateX(${offset}%)`;
    }

    document.querySelector('.prev').addEventListener('click', () => {
        currentIndex = (currentIndex === 0) ? slides.length - 1 : currentIndex - 1;
        showSlide(currentIndex);
    });

    document.querySelector('.next').addEventListener('click', () => {
        currentIndex = (currentIndex === slides.length - 1) ? 0 : currentIndex + 1;
        showSlide(currentIndex);
    });

    showSlide(currentIndex);
});

まとめ

これらの作品例を通じて、JavaScriptの基本的な操作、APIの利用、ユーザーインターフェースの実装など、さまざまなスキルを実践的に学ぶことができます。これらのプロジェクトを実装しながら、自分のアイデアを追加してより高度な機能を持たせることで、さらなるスキル向上が期待できます。