ElectronでToDoアプリを作る

Node.jsとnpmをインストールする
npm initコマンドを使用してプロジェクトを初期化する
npm install --save electronコマンドを使用してElectronをインストールする

プロジェクトルートにmain.jsファイルを作成する。以下のコードを入力してください。

  const { app, BrowserWindow } = require('electron')
 function createWindow () {
   // ブラウザウィンドウを作成する
   const win = new BrowserWindow({
     width: 800,
     height: 600,
     webPreferences: {
       nodeIntegration: true
     }
   })

   // index.htmlを読み込む
   win.loadFile('index.html')
 }

 // アプリが準備できたときにウィンドウを作成する
 app.whenReady().then(createWindow)

プロジェクトルートにindex.htmlファイルを作成する。以下のコードを入力してください。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ToDoアプリ</title>
</head>
<body>
  <h1>ToDoアプリ</h1>
  <ul id="todo-list"></ul>
  <form id="add-todo-form">
    <input type="text" id="todo-input" placeholder="タスクを入力してください">
    <button type="submit">追加</button>
  </form>

  <script>
   // タスクを追加する関数
   function addTask(task) {
     const todoList = document.getElementById("todo-list");
     const li = document.createElement("li");
     li.innerText = task;
     todoList.appendChild(li);
   }

   // フォームを送信したときの処理
   document.getElementById("add-todo-form").addEventListener("submit", (event) => {
     event.preventDefault(); // フォームの送信をキャンセルする
     const task = document.getElementById("todo-input").value;
     addTask(task);
     document.getElementById("todo-input").value = ""; // 入力欄を空にする
   });
  </script>
</body>
</html>

npm startコマンドを使用してアプリを起動する

これでToDoアプリが起動するはずです。フォームにタスクを入力して追加ボタンをクリックすると、タスクがリストに追加されます。このアプリを拡張することができます。例えば、タスクを削除するボタンを追加することができます。