10000hの技術メモ

この先生きのこるための勉強内容&時間記録

Electronではじめるアプリ開発 2-4 最初のアプリケーションを作成する

Electronを本で勉強。2-3はとばして2-4を。

Electronではじめるアプリ開発 ~JavaScript/HTML/CSSでデスクトップアプリを作ろう

Electronではじめるアプリ開発 ~JavaScript/HTML/CSSでデスクトップアプリを作ろう

Mainプロセス記述する

本のコードを写経して、各行の意味を理解。

electron本体モジュールを読み込 み→各イベントに応じた処理を記述。

最初に読み込むHTMLを作成する

これも本に書いてあるindex.htmlをそのままコピペ

Electronを起動

node_modules/.bin/electron .

で起動。

できた。

Rendererプロセスを記述する

Rendererプロセスってなんだっけ?というと、

“Mainプロセスから作成されたWebページが動くプロセスです。画面表示にはChromiumが使用されます。”

とのこと。ほう。

公式のDocsを見ると

Renderer Process
Since Electron uses Chromium for displaying web pages, Chromium’s multi-process architecture is also used. Each web page in Electron runs in its own process, which is called the renderer process.
- Quick Start | Electron

コッチノホウガワカリヤスイ

index.htmlにフォームを配置し、renderer.jsファイルを作って、そこに処理を書いた。 文字列を入力して「送信」を押すと、<ul>要素の子に入力した文字列を持つ<li>をappendしていくような処理。 これだけでTODOリストアプリケーションくらいなら作れそう。面白いなー。

今回の勉強時間:34分 累計勉強時間:15時間23分