【ペーパーレス実践】AIとメモ帳で実用的なWebアプリ作る方法

「Webアプリを作るにはプログラミングが必要」と思っていませんか？
実は、AIとちょっとしたツールを使えば、メモ帳とブラウザだけで驚くほど簡単にWebアプリが作れるんです。
ノーコード・ローコードの世界に、AIが加わると何が変わるのか—そのリアルな始め方を紹介します。

準備するもの
Copilotとメモ帳でウェブアプリを作る
1. ステップ1：フォルダとファイルの準備
2. ステップ2：AIに要望を伝える
ファイルの実行：作ったアプリをブラウザで動かす
1. 実行手順
  1. 補足
AIとの対話で理想のアプリに近づける
1. 追加要望の例
応用例（toDoリスト）
まとめ

準備するもの

ウェブアプリを作るために必要なものは、以下の通りです。

ツール・環境	用途
パソコン	ファイル作成・動作確認
メモ帳アプリ	HTML/CSS/JavaScriptの編集
Copilot など	AIによるコード生成・補助

これらが揃えば、特別な開発環境を用意しなくても、ローカルで簡単にアプリ開発が可能です。

Copilotとメモ帳でウェブアプリを作る

ステップ1：フォルダとファイルの準備

デスクトップに「app」という名前のフォルダを作成します。
メモ帳を使って、以下の3つのファイルを作成します：

ファイル名	内容
`index.html`	アプリの構造（テキストなど全体の構成）
`style.css`	デザイン（色・レイアウト）
`script.js`	動き（ボタンの挙動など）

作成した3つのファイルを「app」フォルダにまとめて保存します。
※この段階では、まだ内容の記述はありません。

ステップ2：AIに要望を伝える

CopilotなどAIを起動して、以下のように指示します：

ブラウザで動作するウェブアプリを作成したい。
以下の機能を持つアプリです：
・ボタンを押すと文字が表示される
・もう一度押すと文字が消える
・スタイリッシュなデザイン
・ランダムで「当たり」と表示されることがある

この機能を持つアプリのコードを、HTML、CSS、JavaScriptに分けて出力してください。

生成AIは、これらの要件に基づいて、3つの形式（言語）に分けたコードを生成し提案してくれます。
それぞれのファイルに貼り付けて保存すれば、アプリの基本形が完成します。

ファイルの実行：作ったアプリをブラウザで動かす

ファイルを作成したら、実際にアプリが動くか確認してみましょう。
以下の手順で、ローカル環境（自分のパソコン）で簡単に実行できます。

実行手順

「app」フォルダの中にある index.html をダブルクリックします。
すると、ブラウザ（ChromeやEdgeなど）でアプリが開きます。
ボタンを押して、イメージしている動作か確認しましょう。
デザインや動きに問題があれば、AIでファイルを修正して再読み込みします。

補足

index.html は、HTMLファイルの中で最初に読み込まれるファイルです。
style.css や script.js は、HTMLの中で読み込まれている必要があります。

このように、サーバーを使わなくても、ローカルで簡単にアプリを試すことができます。

AIとの対話で理想のアプリに近づける

初期のWebアプリが完成したら、さらにCopilotに要望を伝えることで、アプリの品質や機能を向上させることができます。

追加要望の例

ボタンの色や形を変更したい
表示される文字にアニメーションを加えたい
モバイル対応のレイアウトにしたい
複数のボタンや機能を追加したい

このように、AIとの対話を繰り返すことで、開発者の意図に近いプロトタイプを短時間で構築できます。

応用例（toDoリスト）

下記は、AIを利用して生成したコードです。下記はtoDoリストのコードの一例です。
何度も改善を重ねることでこのような実用的なコードを作成することができます。
是非ご活用ください。

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="style.css" />
</head>
<body>
  <div class="container">
    <h1>ToDoリスト</h1>
    <form id="task-form">
      <input type="text" id="task-input" placeholder="タスクを入力..." required />
      <select id="importance">
        <option value="高">高</option>
        <option value="中">中</option>
        <option value="低">低</option>
      </select>
      <select id="priority">
        <option value="優先">優先</option>
        <option value="普通">普通</option>
        <option value="いつでも">いつでも</option>
      </select>
      <button type="submit">追加</button>
    </form>
    <ul id="task-list"></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

CSS

/* 背景に動くグラデーションを設定 */
body {
  font-family: 'Arial', sans-serif;
  margin: 0;
  padding: 20px;
  background: linear-gradient(-45deg, #f0f4f8, #dbe9f4, #c2d4e9, #a9c0de);
  background-size: 400% 400%;
  animation: gradientMove 15s ease infinite;
}

/* グラデーションアニメーションの定義 */
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.container {
  max-width: 800px;
  margin: auto;
  background: #ffffff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  color: #333;
}

form {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

form input,
form select,
form button {
  flex: 1 1 120px;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

form button {
  background-color: #007bff;
  color: white;
  border: none;
  transition: background-color 0.3s ease;
}

form button:hover {
  background-color: #0056b3;
}

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

li {
  background: #f9f9f9;
  margin-bottom: 10px;
  padding: 12px;
  border-radius: 8px;
  cursor: grab;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  border-left: 6px solid #007bff;
}

li[data-importance="高"] {
  border-left-color: #dc3545;
}

li[data-importance="中"] {
  border-left-color: #ffc107;
}

li[data-importance="低"] {
  border-left-color: #28a745;
}

li.dragging {
  opacity: 0.5;
}

.completed {
  text-decoration: line-through;
  color: gray;
}

.edit-input,
.edit-select {
  padding: 8px;
  font-size: 16px;
  margin-right: 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

button {
  margin-left: 5px;
  padding: 6px 10px;
  font-size: 14px;
  border-radius: 6px;
  border: none;
  background-color: #6c757d;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #5a6268;
}

Java script

document.addEventListener('DOMContentLoaded', () => {
  const form = document.getElementById('task-form');
  const input = document.getElementById('task-input');
  const priority = document.getElementById('priority');
  const importance = document.getElementById('importance');
  const list = document.getElementById('task-list');

  let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

  function saveTasks() {
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }

  function renderTasks() {
    list.innerHTML = '';
    tasks.forEach((task, index) => {
      const li = document.createElement('li');
      li.setAttribute('draggable', true);
      li.dataset.index = index;
      li.dataset.importance = task.importance;
      li.className = task.completed ? 'completed' : '';

      const content = document.createElement('div');
      content.innerHTML = `<strong>${task.text}</strong> [重要度: ${task.importance} / 優先度: ${task.priority}]`;
      content.addEventListener('click', () => toggleComplete(index));

      const editBtn = document.createElement('button');
      editBtn.textContent = '編集';
      editBtn.addEventListener('click', () => enableEditMode(li, index));

      const deleteBtn = document.createElement('button');
      deleteBtn.textContent = '削除';
      deleteBtn.addEventListener('click', () => {
        tasks.splice(index, 1);
        saveTasks();
        renderTasks();
      });

      const btns = document.createElement('div');
      btns.appendChild(editBtn);
      btns.appendChild(deleteBtn);

      li.appendChild(content);
      li.appendChild(btns);
      addDragEvents(li);
      list.appendChild(li);
    });
  }

  function enableEditMode(li, index) {
    const task = tasks[index];
    li.innerHTML = '';

    const textInput = document.createElement('input');
    textInput.type = 'text';
    textInput.value = task.text;
    textInput.className = 'edit-input';

    const importanceSelect = document.createElement('select');
    importanceSelect.className = 'edit-select';
    ['高', '中', '低'].forEach(level => {
      const option = document.createElement('option');
      option.value = level;
      option.textContent = level;
      if (level === task.importance) option.selected = true;
      importanceSelect.appendChild(option);
    });

    const prioritySelect = document.createElement('select');
    prioritySelect.className = 'edit-select';
    ['優先', '普通', 'いつでも'].forEach(level => {
      const option = document.createElement('option');
      option.value = level;
      option.textContent = level;
      if (level === task.priority) option.selected = true;
      prioritySelect.appendChild(option);
    });

    const saveBtn = document.createElement('button');
    saveBtn.textContent = '保存';
    saveBtn.addEventListener('click', () => {
      task.text = textInput.value.trim();
      task.importance = importanceSelect.value;
      task.priority = prioritySelect.value;
      saveTasks();
      renderTasks();
    });

    textInput.addEventListener('keydown', (e) => {
      if (e.key === 'Enter') {
        task.text = textInput.value.trim();
        task.importance = importanceSelect.value;
        task.priority = prioritySelect.value;
        saveTasks();
        renderTasks();
      }
    });

    li.appendChild(textInput);
    li.appendChild(importanceSelect);
    li.appendChild(prioritySelect);
    li.appendChild(saveBtn);
  }

  function toggleComplete(index) {
    tasks[index].completed = !tasks[index].completed;
    saveTasks();
    renderTasks();
  }

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const text = input.value.trim();
    if (text) {
      tasks.push({
        text,
        importance: importance.value,
        priority: priority.value,
        completed: false
      });
      saveTasks();
      renderTasks();
      form.reset();
    }
  });

  function addDragEvents(item) {
    item.addEventListener('dragstart', () => {
      item.classList.add('dragging');
    });

    item.addEventListener('dragend', () => {
      item.classList.remove('dragging');
      const newOrder = [];
      document.querySelectorAll('#task-list li').forEach(li => {
        const index = parseInt(li.dataset.index);
        newOrder.push(tasks[index]);
      });
      tasks = newOrder;
      saveTasks();
      renderTasks();
    });

    item.addEventListener('dragover', (e) => e.preventDefault());
    item.addEventListener('drop', (e) => {
      e.preventDefault();
      const dragging = document.querySelector('.dragging');
      if (dragging && dragging !== item) {
        list.insertBefore(dragging, item);
      }
    });
  }

  renderTasks();
});