Electronで各プラットホーム向けの配布用のアプリを作成するのにWineのインストールが要求（具体的にはWindows用のはず）されますが、じゃWineって何？なのかというとWindows用のAPIを提供して、Windows OS以外でWindows用のアプリケーションを完全互換では無いけれども動かせるオープンソースのアプリケーションのようです。
MacbookでElectronからアプリ起動してもWineが立ち上がるようなので、使い方はいまいちリサーチ必要。
admin
Electronのイントロ
初めてのelectron、ほぼ以下のリンクのままですが
https://www.materializer.co/lab/blog/66
electronって何なの？ => “Build cross-platform desktop apps with JavaScript, HTML, and CSS”
とelectronのトップページに出ています。
Node.jsがインストールされている前提で、
npm(Node.jsのパッケージ管理)でelectronをインストール、ただし既にインストール済みでした。VScodeあるから？
% npm -v
8.18.0
・実行は作成したプロジェクトの一つ上のディレクトリで、例えば以下のディレクトリ構成でfirst_porjectを実行するならば、
/electron/first_project
/electronディレクトリでコマンド実行
% electron first_project
・ログの取り方はelectron-logをインストールしてファイルに書き出すようにする
% npm install electron-log
こんな感じで使います、
const log = require(‘electron-log’);
log.info(‘Hello, log’);
ログファイルの場所は、
# cat ~/Library/Logs/electronのプロジェクト名/main.log
・配布用の実行ファイル作成はelectron-packager使いますが、なぜか”Error: Cannot find module ‘electron-log’”と言うエラーメッセージウインドーが表示されます。
アプリの実行結果は、こんな感じで間伸びした画面、ほぼ中身ないから。
<Node.jsについての説明>
Node.jsはJavaScript用のサーバー機能を提供、electronではChromium（以下の通り）と一緒に使います。
“Node.js® is a JavaScript runtime built on Chrome’s V8 JavaScript engine.”
P.S. 2022/9/10
electronのインストールはローカルインストールにすべきだと
-gオプションでインストールすると将来版数がアップされた時に互換がなくなると管理できなくなるからローカルでインストールすべきと。
・ローカルインストール
% npm install -save-dev electron
・実行
% npx electron <ターゲットディレクトリ>
npxはローカルインストールしたモジュールを実行するためのコマンドです。
admin
『今時のJavaScriptを知るための本』ワンパス終了
およそ一月半前に購入の書籍、一通り読了、読むんじゃなくて自分でコード書いてみるのがポイントですが。
https://isehara-3lv.sakura.ne.jp/blog/2022/07/24/今時のjava-scriptを知るための本/
個人的にはHTMLをクライアント側で処理すると言う使い方よりは、サーバーサイドあるいはデスクトップアプリでの使い方に興味があります。
それらの使い方では動作環境としてはNode.jsになるんでしょうけれども、そもそもVScodeもNode.js使っているのは初めて知りました。従ってデスクトップアプリならElectron（開発はGitGub）の選択になるのでしょう。
Node.jsの拡張パッケージ使えばTypeScriptも扱えるようですね。
admin
関数宣言より関数式か
Javascriptは他の言語に比べると、ちょっと仕様が違うよねと言うところがありますが、それはwebページ向けに使われ始めたと言う歴史的なものがあるだろうと思う。そのためか感覚的にはPHPにも似たところがあるようにも思う。
ところでJavascriptには関数宣言と関数式がありますが、どちらかと言うと関数式の方が使われるらしい。
関数式はwoisting（関数を使う前に宣言しなくとも呼び出せる）が出来ないことによってバグの余地が少なくできる（変数や関数の宣言を先頭でまとめてやることを強制できる）と言うのが理由のようです。
以下の例でも、”move1()”以下のスクリプトを”const move1 =・・・”の前に配置すると実行できませんからwoistingは無効になってます。
例えば、move2()は以下のように関数宣言で記述しても結果は同じだろうけども、関数式の方が変数宣言としての統一性はあるように思えるから。
function move2(){ moveElement( () => {
const mov_to = document.querySelector(".title2");
mov_to.after(src);
})};function moveElement( callback ) { // works as a Promise factory
return () => new Promise( resolve => {
setTimeout(() => {
callback();
resolve(); }, 3000);
});
}
const src = document.querySelector("#source");
const move1 = moveElement( () => {
const mov_to = document.querySelector(".title2");
mov_to.prepend(src);
});
const move2 = moveElement( () => {
const mov_to = document.querySelector(".title2");
mov_to.after(src);
});
const move3 = moveElement( () => {
const mov_to = document.querySelector(".wrap");
mov_to.append(src);
});
const move4 = moveElement( () => {
const mov_to = document.querySelector("li");
mov_to.after(src);
});
move1()
.then( move2 ) // move2 ~ move4 returns Promise instance too
.then( move3 )
.then( move4 );本来的にマルチプロセスができない、今のJavascriptで非同期処理を実現するためにはPromiseの役割は大きいだろうから、標準で使われるオブジェクト。
admin