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

JavaScript の基本概念について

trailhead.salesforce.com

JavaScript の概要、使用する理由、使用法
- 概要だけざっくり
  - もともとJSはHTMLを軽く動かすオプション的扱いだった
  - そのうち動的ページができてきた。サーバ(Salesforce)で処理する VF がそれ。
  - そのうち JS が ECMA 準拠で高機能になって、画面側で色々処理したり画面作れるようになった
  - これが LWC
JavaScript ランタイム テストに出る
- イベントやAPIの応答などがあると、そいつはキューに一旦確保される
- JS 実行ランタイムは、キューから一つづつそれを拾って、スタックメモリで実行を行う
JavaScript という言語個人的には Apex より馴染みがあって好きな言語です。
- 絶えず変化してる。ウン、毎年のように更新されてて、最新は ES2021／ES2022を知ろう | フューチャー技術ブログかな。
  ブラウザはガンガン追従してるよ！
- API は普遍的に採用されているわけではない
  ブラウザの実装状態によって動かなかったりするね！個人的に一番ひどいのは iOS の Safari がバグ多くでう〇こですね！
絶対に知っておくべきこと
- 大文字と小文字を区別する
  当たり前だ！というのは他言語ガンガンやってる人。「え？」と思うのは Apex 開発者。
  Apex は大文字小文字は関係ない
- var, let, const キーワードは必須。
  let, const はレキシカルスコープ(他言語と大体同じスコープ+変数寿命)だけど、var は Functionスコープって言って関数の実行単位のスコープを持つっていう分かりにくいヤツ。
  JavaScriptのスコープ総まとめ | 第1回スコープの種類とその基本 | CodeGrid この辺がおすすめ。
- 暗黙的な型の強制変換 テストに出る
  普通に parseInt とか使いましょう。
  let num1 = 9 * "3"; // 27 とかいう PHP 臭い挙動
  let num2 = 9 + "3"; // 93 でなぜか文字列結合ｗｗｗｗ
- Boolean 判定がかなりファジー
  false == ""; // true とか普通に行ける。
  型まで完全に比較するなら false === ""; // false とか使うべき。
  因みに !== とかもある
- false とみなされる値集
  - false
  - 0
  - "" や '' (空文字)
  - null
  - undefined (初期化してない変数や、存在しない変数名を指定したときの値)
  - NaN (算術エラー: 0 で割ったとか)
- this の意味が違う
  - class メソッド内の this は大体他の言語と意味合いは同じだけど、例えば <button onclick="hoge"> の時の function hoge() { console.log(this); } の this は button タグだったりするって話。
    JavaScript の this を理解する多分一番分かりやすい説明 - Qiita 多分これが一番わかりやすい
- 関数は値
  関数型言語やってる人御用達。「関数が第一級オブジェクト」という小難しい言い方できる。
  要するに、return に関数を返すことも、引数にすることもできる（高階関数という）。

ブラウザの JavaScript について

JavaScript ランタイムはブラウザではなく、ブラウザは JavaScript ではない
- Chrome とか JavaScript の実行には V8 エンジンとかいうヤツで実行してる。決してブラウザ＝JS 実行エンジンじゃないんだよって話。
Web API
- ブラウザと JavaScript のつなぎ役のAPIの事。
  多くの場合、結果はキュー経由で関数呼び出しを行う。
  - ブラウザの表示構造を対話的に操作する DOM API
  - サーバに非同期リクエスト操作する Fetch API
  - 音声/動画/グラフィックと対話する Canvas Context API
  - ブラウザの各種機能 (ジオロケーションAPI、デバイス表示の縦横、オフラインストレージ)
ドキュメントオブジェクトモデル
- DOM ですね。window-document が根っことなるタグのツリーモデルのこと。
  これを書き換えることで画面をガンガン動的に動かせる。
Shadow DOM DOM は誤爆が多いので、部分部分で区切って操作したい…
もっというとカプセル化、コンポーネント化したいという要求から生まれた機能。
これを使うと、タグの操作範囲を含め内外で仕切りができるほか、使いまわしもやりやすくなる。
Lightning コンポーネントフレームワーク: Aura コンポーネントおよび Lightning Web コンポーネント LWC と Aura は共存可能。
Lightning Web コンポーネントと DOM JavaScript = テンプレート(HTML) をセットで運用して、バインド構文 ({変数名})を利用することで、DOM 操作を明示的にやらなくても画面を動的にできる。
明示的な DOM 操作
その気になれば、JavaScript 側から this.template.querySelector を使って要素を引っこ抜き、DOM操作もできる。