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操作もできる。

アプリ作ってればなんとなく分かる範囲…