JavaScript のサンプルコード

いくつかのJavaScriptのサンプルコードを紹介するよ。基本的な操作から少し高度なものまで、順を追って見てみよう。

1. 基本的な「Hello, World!」プログラム

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script>
        function sayHello() {
            alert("Hello, World!");
        }
    </script>
</head>
<body>
    <button onclick="sayHello()">クリックしてね！</button>
</body>
</html>

2. 数値の計算

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>計算機</title>
    <script>
        function calculate() {
            let number1 = parseInt(document.getElementById("number1").value);
            let number2 = parseInt(document.getElementById("number2").value);
            let result = number1 + number2;
            document.getElementById("result").innerText = "結果: " + result;
        }
    </script>
</head>
<body>
    <input type="number" id="number1" placeholder="数字を入力">
    <input type="number" id="number2" placeholder="数字を入力">
    <button onclick="calculate()">計算する</button>
    <div id="result">結果: </div>
</body>
</html>

3. シンプルなTo-Doリスト

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>To-Doリスト</title>
    <style>
        ul {
            list-style-type: none;
        }
        li {
            margin: 5px 0;
        }
    </style>
    <script>
        function addTask() {
            let task = document.getElementById("task").value;
            if (task !== "") {
                let list = document.getElementById("todo-list");
                let listItem = document.createElement("li");
                listItem.innerText = task;
                list.appendChild(listItem);
                document.getElementById("task").value = "";
            }
        }
    </script>
</head>
<body>
    <h1>To-Doリスト</h1>
    <input type="text" id="task" placeholder="新しいタスク">
    <button onclick="addTask()">追加</button>
    <ul id="todo-list"></ul>
</body>
</html>

4. 画像のスライドショー

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>スライドショー</title>
    <style>
        #slideshow {
            width: 400px;
            height: 300px;
            overflow: hidden;
        }
        #slideshow img {
            width: 100%;
            height: auto;
        }
    </style>
    <script>
        let index = 0;
        function showSlide() {
            let slides = document.getElementsByClassName("slide");
            for (let i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";
            }
            index++;
            if (index > slides.length) { index = 1; }
            slides[index - 1].style.display = "block";
            setTimeout(showSlide, 2000); // 2秒ごとに切り替え
        }
    </script>
</head>
<body onload="showSlide()">
    <div id="slideshow">
        <img class="slide" src="https://via.placeholder.com/400x300?text=Image+1" alt="Image 1">
        <img class="slide" src="https://via.placeholder.com/400x300?text=Image+2" alt="Image 2">
        <img class="slide" src="https://via.placeholder.com/400x300?text=Image+3" alt="Image 3">
    </div>
</body>
</html>

5. 非同期データ取得（Fetch API）

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>非同期データ取得</title>
    <script>
        async function fetchData() {
            try {
                let response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
                let data = await response.json();
                document.getElementById('data').innerText = JSON.stringify(data, null, 2);
            } catch (error) {
                console.error('データの取得に失敗しました', error);
            }
        }
    </script>
</head>
<body>
    <h1>非同期データ取得</h1>
    <button onclick="fetchData()">データを取得する</button>
    <pre id="data"></pre>
</body>
</html>

まとめ

これがJavaScriptの基本的なサンプルコードだよ。これを参考にして、いろいろなプログラムを書いてみてね。もしわからないことがあれば、いつでも質問して！

楽しんでプログラミングを学んでね！