JavaScript

 「画面を出す」で使ったJavaScrirtのキーワード及びその構文の仕組みを解説します。Nodeやelectronについても触れます。 

JS、Node、electronのキーワード・構文

変数(オブジェクト)の宣言

const { app, BrowserWindow } = require('electron');

constはJavaScriptの変数宣言用キーワード

書式:const 変数名 = 値;

・const宣言された変数の値・オブジェクトの参照は、再代入ができません。

・初期値を代入(初期化)して宣言します。同名を重複して宣言することはできません。

・宣言された変数は{}や()(ブロック)の中(スコープ)だけ有効です。ブロックの処理が終わるとメモリから消えます。

 

 appとBrowserWindowは、メインプロセスがブロックスコープ(有効範囲)になります。

appはelectronのアプリ管理モジュール

・OSとアプリの橋渡し役で、ウィンドウの起動・終了を管理します。

BrowserWindowはelectronのウィンドウ作成クラス※

※クラスとは、オブジェクトの設計図のことです。

・ウィンドウを生成し、ユーザーインターフェイス、大きさ、タイトルバーを制御します。

require()はNode.jpのモジュール読み込み関数

 「electron」から「app」と「BrowserWindow」の2つを取り出し、読み込むために使われています。

関数の宣言

function createWindow() {

  const win = new BrowserWindow({

    width: 640,

    height: 480

  });

 

  win.loadFile('index.html')

}

functionはJavaScriptの関数宣言用キーワード

書式:
 
 

function 関数名() {
処理
}

 「;」はつけません!

 createWindowと言う名前で関数を作ります。()は、処理の実行の意味を表します。どんな処理をするかを{ }の中に書きます。

 

 次のconstで、winという名前の変数(オブジェクトの入れ物)を用意します。

newはJavaScriptの演算子

 オブジェクトの設計図(クラス)を基に実物(インスタンス)を作ります。

 クラスBrowserWindowを使って、 幅640px、高さ480pxのウィンドウを作ります。winはウィンドウのインスタンスになります。

loadFileはelectronのBrowserWindowのメソッド

 ウィンドウの見た目を定義したhtmlファイルをwinに読み込みます。ウィンドウの見た目がこれで形付けられます。

ウィンドウの制御 

app.whenReady().then(createWindow);

whenReadyはelectronのappのメソッド

 whenreadyは、electronがウィンドウを作るための準備を終えるまで待つメソッドです。待つという状態のためにJavaScriptは、Promiseという特別な変数を用意します。つまり、app.whenReady()は、PromiseというJavaScriptのオブジェクトを生成する働きをしています。

thenはJavaScriptのPromiseのメッソド

 Promiseが完了したら、()の中に処理をする関数名だけを入れます。

[Promise]
app.whenReady()
 .then(createWindow);

 createWindowが実行され、ウィンドウが表示されます。

 気をつけたいのは、thenで渡すのは、関数そのものだという点です。決して()を付けて実行させてはいけません。

 

app.on('window-all-closed', () => {

  if (process.platform !== 'darwin') {

    app.quit();

  }

});

onはelectronのappのメッソド

書式:app.on (イベント名, コールバック);

 onは、プログラム内で起こった出来事を通知として受け取る役目を負ったイベントリスナーと呼ばれるコード(キーワード)です。イベントの監視役として働いています。

 ここでは’ウィンドウが全て閉じられました’='window-all-closed'というイベント名に応じて、イベントが起きた場合の処理(コールバック)を命じます。

() =>はJavaScriptの関数宣言

 () => は、アロー(=>)を使った関数定義の書式です。関数名がないので、無名関数と呼ばれます。一度しか使われない処理に利用します。処理の内容は{}の中に記述します。

ifはJavaScriptの条件分岐文のキーワード

書式:
 
 

if (条件) {
  処理
};

 条件に応じて処理を行います。複数の場合もあります。

process.platformはNode.jpのOS読み出しの値

 macOSでは、'darwin'。Windowsでは、’win32’。Linuxでは、’linux’です。

!==はJavaScriptの厳密不等演算子

 型(数値と文字)も値も一致しない、という意味を表わす比較操作のための記号です。

 ここでは、Macでない場合の処理になります。

quitはelectronのappのメッソド

 開いているウィンドウを閉じる、という処理を行います。

 

補足

 MacOSでは、Windowを閉じても、それはアプリの終了を意味しません。スマホと同じで、バックグラウンドでいつでも起動できるように待機しています。

 Windows、Linuxなどの「ウィンドウの終了はアプリの完全終了」とする方向性とは大きく違います。

チェーン構文

「ウィンドウ制御」の項では、「.」が3つ並ぶ構文が出てきました。これがチェーン構文です。どれがオブジェクトでどれがメッソドなのか分からなくなりそうですが、分解してみると(図を参照)構造がはっきりします。

 また、ここでは関数についても理解が深まります。単に関数という意味で()があるわけではなく()はその関数を実行させる場合に付ける、ということが理解できます。単に関数を渡す場合には、関数名だけでよい、ということです。