カテゴリー: JavaScript

[JavaScript] アロー演算子の役割 ChatGPT

JavaScriptについては入門レベルのスキルなのでChatGPTに色々聞きながら学んでいきます。

今回は常々疑問に思っていたアロー演算子について聞いてみました。

こちらが気を使わずにずけずけ意見をぶつけられるので非常に効率的です。

Q1: JavaScriptでアロー演算子を使った例を教えてください。

JavaScriptのアロー演算子（=>）は、関数をより簡潔に書くための記法です。アロー演算子は、無名関数の宣言によく使われます。以下は、アロー演算子を使ったJavaScriptの例です。

// 通常の関数宣言
function add(a, b) {
  return a + b;
}

// アロー演算子を使った無名関数
const add2 = (a, b) => {
  return a + b;
};

// アロー演算子を使った無名関数（中括弧とreturn文を省略）
const add3 = (a, b) => a + b;

// 上記と同じ関数を、functionキーワードで書いた場合
function add4(a, b) {
  return a + b;
}

// 関数を実行して、結果を表示する
console.log(add(2, 3)); // 5
console.log(add2(2, 3)); // 5
console.log(add3(2, 3)); // 5
console.log(add4(2, 3)); // 5

この例では、まず、通常の関数宣言を使用して、2つの引数を加算する add 関数が宣言されています。次に、アロー演算子を使用した無名関数が宣言され、add2とadd3という変数に代入されています。add2関数は中括弧とreturn文を使用して、add3関数はそれらを省略しています。最後に、console.logを使用して、関数を実行して、結果を表示しています。

Q2: const add2 = (a, b) => { return a + b; };は特に簡潔とも思えないですが

ご指摘ありがとうございます。JavaScriptのアロー関数は、関数をより簡潔に表現するために導入されたもので、短い関数にはより適しています。一方、長い関数を書く場合は、アロー関数を使用するよりも、通常の function キーワードで関数を宣言することが推奨されます。

以下は、より簡潔な例です。

// アロー演算子を使った無名関数
const add = (a, b) => a + b;

console.log(add(2, 3)); // 5

このように、アロー演算子を使用することで、より短く簡潔な関数を宣言することができます。

[JavaScript] Python GUIアプリのElectronへの移植 その2 GUI作成までで中断

とりあえずガワだけ作成しました。

テンプレートさえ作ってしまえば、簡単なツールなら容易に作成できますね。PythonのtkinterやJavaのSwingとは比較にならないお手軽さです。

と、ここまでは絶賛でしたがボタンとアクションのリンクで難易度が格段に上がりました。教本にざっと目を通したものの要領を得ません。Bashコマンドを実行したいだけなのに、なぜややこしい通信をしなきゃいけないのか(根本的な問題。フロントエンドだから当たり前)。どうやら私がやりたいこととミスマッチを起こしているようです。

やっぱりSwingで書くことにしました。EclipseをM1 Macにインストールします。

何でもJavaScriptでやろうとしてユーザーは無理をしているのではないかと感じたのですが、思い過ごしでしょうか？

2021/11/24追記：ボタンとアクションのリンクが出来なくて中断するのは2回目です。他の言語ではぶつかったことのない壁があるようです。こちらの言い分としては言語としての進化の過程が場当たり的で体系化が不完全なのではないか、という見解です。正直プログラミング言語としての合理性をあまり感じないので修得意欲が湧かないんです。まあ私自身がJavaScriptに向いていない、ということにしておきます。

<html>
<head>
　<meta charset="UTF-8">
　<title>FILE REMOVER JS v0.0.1</title>
　<link rel="stylesheet" href="style.css">
</head>
<body>
    <script type="text/javascript" src="main.js"></script>
    <div class="container">
        <div class="container2">
            <text id="lbl1">PATH</text>
            <input id="txt1" type="TEXT"></input>
        </div>
        <button id="btn1" type="button">削除</button>

        <div class="container3">
            <input type="radio" name="q1" value="フォルダ">フォルダ
            <input type="radio" name="q1" value="ファイル">ファイル
        </div>
        <button id="btn2" type="button">クリア</button>
    </div>
</body>
</html>
body {
    background-color: #70f15f;
    margin:0px 8px 8px 8px;
}
.container {
    display: grid;
    grid-template-columns: 250px 60px;
    position: relative;
	top: -10px;
}
.container2 {
    display: inline;
    margin:4px 2px 2px 2px;
}
.container3 {
    display: inline;
    margin:4px 2px 2px 2px;
}
#lbl1 {
    grid-row:1;
    grid-column:1;
}
#txt1 {
    grid-row:1;
    grid-column: 1;
    width:180px;
    margin:0px 0px 0px 2px;
}
#btn1 {
    grid-row:1;
    grid-column:2;
    width:60px;
    font-size:12px;
    margin:4px 4px 4px 4px;
}
#btn2 {
    grid-row:2;
    grid-column:2;
    width:60px;
    font-size:12px;
    margin:4px 4px 4px 4px;
}

[JavaScript] Python GUIアプリのElectronへの移植 その1

Pythonのtkinterを使って作ったGUIのファイル一括削除ツールをJavaScriptに移植することにしました。まあ簡単なツールなので移植というのはおおげさですが。

tkinterは書きやすいものの、たまに色がおかしくなってボタンの字が読めなくなったりします。またpyinstallerによるexe化が上手くいかないことが多いです。

JavaScriptのコードを書くのは3ヶ月ぶりなので、思い出しながらぼちぼち進めていきます。