第7回 Todoリストを作ろう!

元気100倍( ⚈ ̍̑⚈ ̍̑⚈)৴≡Oアンパーンチ
みなさん、こんにちは!
普段は医療職で働きながら、趣味でプログラミングを始めたズダです!
今回のテーマはTodoリストをチャットGPTに作ってもらおう!というお話です。

Todoリストとは、やるべきことリストのことを指します。私たちは、このリストに項目を追加し、それが完了したらチェックを入れて消すことができるシンプルなプログラムを作ります。

<完成版>

My Todo List

My Todo List

    では早速Todoリストを使ってみましょう!

    リスト追加ボタンを押すと、ページの上部にポップアップが出てリストに書くことを出来ます。「玉ねぎを買う」、「宿題をする」など自由に書いてみてください。最大10個まで書くことが出来ます。

    Todoリストの特徴ですが、仕事が終わったら消すことが出来ます。玉ねぎ買った、宿題終わった、あともリストが残っているとややこしいですよね・・笑。そのときはリストの中にある文字をクリックしてください。クリックした文字が自動で消えます。これで終わってない仕事だけが表示される「やるべきリスト」が完成しました。

    では早速このTodoリストの中身を見ていきましょう!

    改めてHTML、CSS、Javascriptのイメージもお伝えします!

    鉛筆で下書きしよう!: HTML

    <HTML>

    <html>
    <head>
        <title>My Todo List</title>
        <link rel="stylesheet" type="text/css" href="styles.css">
    </head>
    <body>
        <h1>My Todo List</h1>
        <ul id="todoList"></ul>
        <button id="addButton">Add a task</button>
        <script src="script.js"></script>
    </body>
    </html>
    

    まず最初にHTMLを使って、ウェブページの骨組みを作りました。HTMLはまるで建物を建てるときの青写真のようなものです。<html>タグで始まり</html>タグで終わる間に、私たちのウェブページの構造が詰まっています。

    <head><body>の2つの主要なセクションで構成されています。<head>はウェブページの設定情報を保持しています。ここには、ページのタイトルやCSSのリンクが含まれます。実際画面に表示されるのは<body>に書いた内容です。今回は、ページの見出し(<h1>)、Todoリスト(<ul>)、そして新しいタスクを追加するためのボタン(<button>)を置きました。

    色鉛筆でキレイにしよう!: CSS

    <CSS>

    body {
        font-family: 'Arial', sans-serif;
        padding-top: 20%;
    }
    
    h1 {
        color: black;
    }
    
    ul {
        list-style-type: none;
        padding: 0;
    }
    
    button {
        margin-top: 10px;
    }
    
    #todoList {
        list-style-type: none;
        padding: 0;
        margin: 0;
        border: 2px solid black; /* 罫線を追加 */
        background-color: #FFDAB9; /* 薄いオレンジ色に設定 */
    }
    
    #todoList li {
        color: black;
        cursor: pointer;
        padding: 10px;
    }
    

    次に、CSSを使ってウェブページを装飾しました。CSSはウェブページのスタイリストのようなものです。今回私たちはリストの背景をオレンジ色にして、リストを線で囲みました。このようにして、ページを明るく、楽しく、使いやすいデザインにしました。

    アニメにして動かそう!: JavaScript

    <Javascript>

    let todoList = [];
    let todoListElement = document.getElementById("todoList");
    let addButton = document.getElementById("addButton");
    
    function addTask() {
        if (todoList.length < 10) {
            let newTask = prompt("What's the task?");
            if (newTask) {
                todoList.push(newTask);
                displayTasks();
            }
        } else {
            alert("You have reached the maximum number of tasks!");
        }
    }
    
    function displayTasks() {
        todoListElement.innerHTML = "";
        for (let i = 0; i < todoList.length; i++) {
            let listItem = document.createElement("li");
            listItem.textContent = todoList[i];
            listItem.onclick = function() {
                todoList.splice(i, 1);
                displayTasks();
            }
            todoListElement.appendChild(listItem);
        }
    }
    
    addButton.onclick = addTask;
    

    最後に、JavaScriptを使ってウェブページに動きをつけました。ユーザーがボタンをクリックしたときや、新しいタスクを追加したときに何が起こるかを決定します。

    私たちはボタンにclickイベントを設定し、ボタンがクリックされるとaddTask関数が呼び出されるようにしました。この関数は、Todoリストに追加する新しいタスクをユーザーに聞いて、そのタスクをリストに追加します。タスクが10個に達すると、「You have reached the maximum number of tasks!(タスクがたくさんです!)」というメッセージが表示されます。リストの各アイテムをクリックすると、そのアイテムはリストから消え、残りのアイテムが再表示されます。

    これで、Todoリストが完成しました!

    魔法の杖:ChatGPT(HTML, CSS, JavaScript)

    実は作り方が超簡単なんです。その方法は、ChatGPTに「TodoリストをHTML・CSS・Javascriptを使って作成してください。リストは10個まで記載できます。作業が完了したらリストを消す機能を付けてください。リストの背景色はオレンジにしてください」と依頼するだけ!

    たった1人(2人?)で、ものの1分で、欲しいものが作れました!新しいタスクを追加し、タスクを完了したらクリックして消すという優れた機能を持つこのリストがあれば、タスクを覚えなくても大丈夫。何をすべきか忘れてしまうことがないように、このリストに書き込んでみましょう!

    私たちが作ったこのウェブページは、まるでパズルのようなものです。HTMLはパズルの各ピース、CSSはピースの色とデザイン、JavaScriptはピースがどのように動くかを制御するようなものです。それぞれの要素が一緒になって、一つの完成した絵を形成します。

    これらの言語を学ぶことで、私たちは自分自身のウェブページを作ることができます。それはまるで、自分だけの冒険の世界を作り上げるようなものです。ここで作ったTodoリストはその一つの例です。

    もちろん、これらのコードを使って、さらに面白い、複雑なウェブページを作ることもできます。あなたが想像することができるなら、それはコーディングで実現可能です。この魔法をうまく使うには「ChatGPTに的確に指示をする」ことと「HTML、CSS、Javascriptの基本を理解する」ことが欠かせません。

    今日は一緒にウェブページを作る冒険をして、楽しい時間を過ごしました。これからもコーディングの魔法を使って、あなた自身の冒険を続けてください!それでは、次回の冒険でお会いしましょう。

    バイバイキーン!( ⚈ ̍̑⚈ ̍̑⚈)৴≡Oアンパーンチ  

    コメント

    タイトルとURLをコピーしました