Home

Web プログラミング(フロントエンド)覚書

CSS, Sass, JS

Electron

Hello, World

  1. $ npm init -yで新規プロジェクトを作成

  2. 公式 Quick Start に従ってmain.jsとindex.htmlをコピペ

    • package.json中の"main"は上のmain.jsに変更しておく

  3. $ electron .で実行

    • npm script で"start": "electron ."としておけば、$ npm startでも OK
  4. アプリケーション実行ファイルの生成には electron-packager を使う($ npm install -g electron-packager)

Visual Studio Code で開発・デバッグできるようにする

  1. (グローバルではなく)レポジトリに Electron をインストール
  2. VSC に拡張機能Debugger for Chromeをインストール

  3. 一度実行(F5)して.vscode/launch.json生成後、公式ドキュメントに従って内容を変更し、再度実行

    • ビルドはしてくれないので、コードを変更したらターミナルでビルドし直してから再度実行

Electron 実行時の処理の流れ

  1. electron DIR_NAMEすると、DIR_NAME/package.jsonの"main"で指定されている JS ファイル(main.js)が Main process として実行される
  2. app.on('ready', …)のcreateWindowでウィンドウが生成される
  3. createWindowの中で、electron.BrowserWindowインスタンスのloadURL()でindex.htmlが読み込まれる
  4. index.htmlで読み込まれる JS ファイルが Renderer process として実行される

Main-Renderer プロセス間のやり取り

  • プロセス間通信(IPC)を使う

  • ipcは現在の API には無く、代わりに ipcMain/ipcRederer を使う(cf. Electron の IPC をまとめる)

    • <channel>は文字列、<listerner>は(event, arg) => {...}という関数
    • event.returnValueに代入すれば同期的に返信(送信側の返り値になる)
    • event.sender.Send(<channel>[, <args>])で非同期的に返信(再度onで受信)
Sender -> Receiver (非同期通信) Method in Sender Method in Receiver
Main -> Renderer <BrowserWindow>.webContents.send(<channel>[, <args>]) ipcRenderer.on(<chennel>, <listener>)
Renderer -> Main ipcRenderer.send(<channel>[, <args>]) ipcMain.on(<channel>, <listener>)

設定ファイル

  • electron-store を使う
  • デフォルトでは/Users/USER_NAME/Library/Application\ Support/APP_NAME/config.jsonに保存される

Webpack

  • $ npm install --save-dev webpack webpack-cli
  • webpack 4 入門
  • 複数ファイルに分割して開発された JS, CSS, etc. を 1 つの JS ファイルにまとめる(モジュールバンドル)
  • Electron と使う場合はtarget:electron-mainやtarget: electron-rendererを指定しないとエラーになる

  • ローダー

    • $ npm install --save-dev css-loader mini-css-extract-plugin: CSS
    • $ npm install --save-dev sass-loader node-sass: SCSS
    • $ npm install --save-dev babel-loader: Babel

Babel

  • $ npm install --save-dev @babel/core @babel/preset-env

    • React と使う場合は $ npm install --save-dev @babel/preset-reactも

  • トランスパイラ

    • 変換したい言語に合わせたプラグインをコンフィグファイル(.babelrc等)中に指定する必要がある
    • React のようなフレームワークには必要なプラグイン集合がプリセットで用意されていて、簡単に指定できる

  • Webpack と使う場合は、webpack.config.jsでbabel-loaderをローダーに指定して、プリセットの指定は以下のどちらかで行う(cf. Babel の presets を設定する 2 つの方法)

    • webpack.config.jsに書く場合はoptionsで指定する
    • .babelrc (not babel.config.js)に書く(こちらの方が複数の対象について 1 つで済むため良さそう)
  • webpack.config.jsをトランスパイルしたい場合は、$ npm install --save-dev @babel/registerして、webpack.config.jsをwebpack.config.babel.jsに変える

React + Redux