Salesforce 開発者の JavaScript スキル(2)

trailhead.salesforce.com

オブジェクトの作成

オブジェクト作成は {} で行けるけど、実際にゃ Object.create() を使っとる。
- { ... } の作成はリテラル表記
プロトタイプ表記…懐かしい class が出るまではこうしてオブジェクト定義してました。

function Bike(gears, startGear) {
  this.gears = gears;
  this.currentGear = startGear;
}
Bike.prototype.changeGear = function(direction,changeBy){
  if(direction === 'up') {
    this.currentGear += changeBy;
  } else {
    this.currentGear -= changeBy;
  }
}
const bike = new Bike(10, 3);
console.log(bike.gears); // 10
console.log(bike.currentGear); //3
bike.changeGear('up', 1);
console.log(bike.currentGear); //4

オブジェクトへのプロパティと関数の代入
- サンプルコード見れば分かる

const bike = {
  frontGearIndex: 0,
  rearGearIndex: 0,
  transmission: {
    frontGearTeeth: [30,45],
    rearGearTeeth: [11,13,15,17,19,21,24,28,32,36]
  },
  calculateGearRatio: function() {
    let front = this.transmission.frontGearTeeth[this.frontGearIndex],
        rear = this.transmission.rearGearTeeth[this.rearGearIndex];
    return (front / rear);
  },
  changeGear: function(frontOrRear, newValue) {
    if (frontOrRear === 'front') {
      this.frontGearIndex = newValue;
    } else {
      this.rearGearIndex = newValue;
    }
  }
};

....この章ざっくりいうと、JavaScript においてオブジェクトとは、関数(function)もしくはハッシュ({...})でしかなく、関数はプロトタイプを持つ。
で、どっちも実態はハッシュなので、後からプロパティだろうがメソッドだろうが名前を付けて追加・更新・削除ができてしまう。

クラスと JavaScript

class キーワードで大分他の言語と似たような書き方ができるようになってる。
Lightning Web コンポーネントは LightningElement 継承して作る…この章ではこのくらいの認識。

イベントや関数を使用したアクションの実行

イベントや関数を使用したアクションの実行単元 | Salesforce Trailhead

関数宣言

function name(arg) { ... }

関数式

let name = function(arg) { ... }

高階関数(関数を返す関数。下記はカリー化の例)

function hoge(arg) {
    return function(arg2) { return arg + arg2; }
}

匿名関数(名前を持たない関数)

let ar = [1, 2, 3];
let added = ar.map(function (v) { return v + 10; });

イベントハンドラ

<button id="clicker" onclick="handleClick(event)">
  Click to Go
</button>

ないしは

let button = document.getElementById("clicker");
button.addEventListener("click", function(event){
  //...anonymous function body...
});

まぁ一般的なことしか言ってないね

コンテキスト、スコープ、クロージャについて

コンテキスト、スコープ、クロージャについて単元 | Salesforce Trailhead

変数のスコープ…ってこっちの説明のが良いわ

www.codegrid.net

this の説明もこっちの方がよろしい

qiita.com

this の中身はコンテキスト、クロージャは宣言で生まれる。やってりゃ分かる系…だけどどっちも結構ハマる。

非同期 JavaScript の記述

非同期 JavaScript の記述単元 | Salesforce Trailhead

コールバック、Promise と async/await の話

コールバックはスレッドアプリを何か書いていれば分かると思うが、イベントフック等に使われる形式。
指定のイベント発生時に非同期に呼ばれる関数の事だね。

Promise は「いつか実行が終わるでーだから今はさっさと次の行実行してーな」みたいなところで使う機能。
終わったら then とか、例外があれば catch コールバックが実行される。
また、Promise を実行する関数が async 修飾(これも Promise を返す関数と同義)の場合、内部で処理する Promise を await で同期待機もできる。

LWC だと Apex 関数を呼ぶときに良く使うヤツやな。

技術をかじる猫

適当に気になった技術や言語、思ったこと考えた事など。