🧩

初めてのElectron vol.02 [html+jsの基本のき(簡易ToDoリストを作成)]

2022/01/20に公開

Electron

JavaScript

Node.js

tech

記事はbookへ統合されます

vol.02 今回の内容

今回はToDoリストをとりあえず実装します。
todolist image
こんなやつです。

electronの機能の話はほぼ出てこないかもしれません。
ウインドウサイズぐらいですかね。
html + js の基本的な部分をすこしやっていきます。(解説するとはいっていません)
またこの記事は前回の記事の続きとなっています。
よろしければご覧ください。

htmlをとりあえず書き換える

前回のものから書き換えです。

./index.html

-<h1>hello world</h1>
+<html>
+<head>
+    <title>ToDoリスト</title>
+</head>
+<body>
+    <h1>ToDoリスト</h1>
+    <div class="form">
+        <input type="text" id="ToDoItem">
+        <button onclick="addToDo()">追加</button>
+        <!-- ボタンが押されたらjsファイルの function addToDo()を呼ぶ-->
+    </div>
+    <ul id="ToDolist"><!-- jsからリストを表示させる場所を作っておく -->
+    </ul>
+    <script src="./todolist.js"></script><!-- jsファイルを読み込む-->
+</body>
+</html>

確認

書き換えたらとりあえず確認

書き変わってるけどちょっと無駄にウィンドウでかいよね…

ウィンドウサイズを変える

ウィンドウサイズ(カタカナ気持ち悪い)を変えるにはmain.jsでwindowを作っているところでサイズを指定すればいい。

./main.js

app.on("ready", function () {
-   mainWindow = new BrowserWindow();
+   mainWindow = new BrowserWindow({
+       width: 320, //幅
+       height: 500,//高さ
+  });
//省略
});

見た目だけは完璧
これですっきり

todolist.jsを書いていく

./todolist.js

function addToDo() {
    const item = document.querySelector("#ToDoItem").value;//formの文字列取得
    if (item === "") {//itemがからだったら何もしない
        return
    }
    const ul = document.querySelector("#ToDolist");//id=ToDolistを取得する
    const li = document.createElement("li");//li elementを作る
    const todotext = document.createTextNode(item);//itemをテキストノードにする
    li.appendChild(todotext);//liにtodotextを入れる
    ul.appendChild(li);//ulに作ったliを入れる
}

で実行
"完成品"

できたー

でもこれ更新とか再起動したらデータ消えるやん…
まあそれは後日ということで

今回のまとめ

ウィンドウサイズの変え方

mainWindow = new BrowserWindow({
    width: 320, //幅
    height: 500,//高さ
});

でウィンドウサイズが変えれる

electronはブラウザ

ほんとにブラウザだと思っていいやつです
+αいろいろできるって感じなのでweb技術界隈の知識が必須
python主体だった主にはつらい

それではまたー