tyoshikawa1106のブログ

- Force.com Developer Blog -

SFDC:TrailheadのモダンなJavascriptのモジュールやってみました

TrailheadのモダンなJavascriptのモジュールやってみました。まだ日本語翻訳されていないモジュールなのでGoogle Chromeの翻訳機能で日本語変換してチェックしました。


Get Started with Modern JavaScript Development Unit | Salesforce

最新の JavaScript 開発を始める

概要
  • JavaScript 開発の現状について説明します。
  • ECMAScript のさまざまなバージョンを一覧表示します。
  • ECMAScript 互換性テーブルから結果を見つけて解釈する方法を説明します。
  • PlayCode を利用して JavaScript コードを実行します。


Javascriptのブラウザサポートの状況はこのサイトで見れる。
ECMAScript 6 compatibility table


ぱっと見た感じ何が何やらという感じですがどこから見ればいいかはTrailheadに解説ありました。どちらにしても今回はこういうサイトがあるということのメモです。


Javascriptのサンプルコードは次のサイトが便利とのこと。
Javascript Playground (Sandbox, Repl)


Sign upするとコードの共有機能とか使えるみたいです。設定は簡単でした。

サンプルコード
  1. Google Chrome ブラウザーで、 https://playcode.io/に移動します。
  2. [エディターを開く]をクリックします。
  3. テンプレートから空の JavaScriptを選択します。
  4. 次のコードを script.js ペインに追加します。
  5. コンソール ウィンドウに「Hello World」という単語が表示されます。
  6. 別のコード スニペットを試すには、script.js ペインのコードを更新して新しい結果を確認します。
var message = 'Hello World';
console.log(message);  // Shows "Hello World" in console


入力すると

表示される

これがJavascript勉強するときの便利サイトの利用イメージとのこと。

JavaScript ES6 の新しい構文を調べる

概要
  • 関数とブロックのスコープの違いを説明してください。
  • const キーワードを使用する理由を述べてください。
  • 変数の初期化に使用される省略形の ES6+ 構文を認識します。
  • データを分離するために使用される新しい構造化構文を特定します。
  • テンプレート リテラルの作成に使用されるバッククォート文字を特定します。

関数とブロックのスコープ

サンプルコード1
var myVar = 1;
function myFunc() {
  var myVar = 2;
  console.log(myVar); 
}
myFunc();
console.log(myVar);


サンプルコード2
var myVar = 1;
if (true) {
  var myVar = 2;
  console.log(myVar);
}
console.log(myVar);


ポイント

ブロックは、中括弧内の任意のコードです。ブロック スコープにより、これらの中かっこ内で定義された変数がグローバル変数にならないことが保証されます。代わりに、ローカル スコープがあります。変数のスコープ方法をこのように制御すると、コードでの予期しない動作を防ぐのに役立ちます。

Let Is 新しい Var

letについての解説。


Const

サンプルコード1

constは定数の宣言。値は再代入できない。宣言時に初期化する必要がある。
初期化しなかったときにエラーになることを確認できるサンプル。

const BRANDCOLOR;
console.log(BRANDCOLOR);


The constant "BRANDCOLOR" must be initialized

その他

サンプルコード1
const BRANDCOLOR = {
  primary: "blue",
  accent: "teal"
}

BRANDCOLOR.accent = 'gray';
console.log(BRANDCOLOR);


サンプルコード2
let firstName = 'John', lastName = 'Doe';
let user = {
  firstName : firstName,
  lastName : lastName
}
console.log(user);

次の書き方もできる。

let firstName = 'John!', lastName = 'Doe';
let user = { firstName, lastName };
console.log(user); 


サンプルコード3
let one = numbers[0],
  two = numbers[1],
  three = numbers[2],
  four = numbers[3];
console.log(one); 


次の書き方もできる

let numbers = [1, 2, 3, 4]; 
let [one, two, three, four] = numbers;
console.log(one);


こういうふうに変数宣言省略もできる。

let numbers = [1, 2, 3, 4]; 
let [ , , three] = numbers;
console.log(three);


オブジェクトの場合

const APPLE = {
  type: 'red delicious',
  color: 'red',
  size: 'large'
}

const { type, color } = APPLE;
console.log(color);


存在しない変数名を使用するとundefined

const APPLE = {
  type: 'red delicious',
  color: 'red',
  size: 'large'
}

const { type, color, size, packaging } = APPLE;
console.log(packaging);

より良いエラー メッセージ

console.logのエラーメッセージのカスタマイズ。 (値差し込み)

let user = 'Me';
console.log(`The following 'user', ${user} has encountered an "error".`);


JavaScript 関数を理解する

  • 関数の太い矢印の構文を認識します。
  • thisキーワードで使用する範囲を記述します。
  • ES6+ でオプションのパラメーターを定義すると、コードがよりクリーンになる理由を説明してください。
  • ...' ' 演算子のさまざまな用途を説明してください。

書き方サンプル

let result = function (i,j) {
  return i+j; 
}
console.log(result(2,3));

アロー関数を使うやり方

let result = (i,j) => i+j; 
console.log(result(2,3));  


ポイント

ここで行ったのは、キーワードとキーワードを削除し、function代わりreturnに新しい太い矢印記号を使用したことだけです。パラメーターが 1 つしかない場合、括弧は省略可能です。式が複数ある場合は、中括弧のみが必要です。中括弧を含める場合は、returnキーワードが必要であることを覚えておいてください。

thisアロー関数を使用すると、特にネストされた関数が関係する場合に、コードが少なくなり、キーワードを処理する際の混乱が解消されます。関数には と呼ばれる特別な変数がありthis、これはしばしば「動的 this」と呼ばれ、関数の呼び出しに使用されるオブジェクトを参照します。

その他サンプル実行例

パラメータ処理の改善

同じものに 2 つの用途がありますか?

クラスの操作

  • ES6+ でクラスを作成して呼び出す方法の違いを説明してください。
  • クラスの一般的に使用されるメンバーを一覧表示します。
  • 基本クラスと派生クラスを区別します。

クラスのように見えたら…


こういう解説もあった。

継承といえば

もっと教えて

モジュールでコードを整理する

  • モジュールのサポートが何年にもわたってどのように進化してきたかを説明してください。
  • モジュールを定義するために使用される基本的な構文を認識します。
  • さまざまなインポート スタイルを区別します。
  • 名前付きエクスポートが読み取り専用プロパティになる方法を示します。

やり方

左側のFILESのところのsrcを右クリックするとNewというメニューを選択できる。


そこからmodule1.jsとかを作成する。


module1.js


module2.js


script.js

今回はjsファイルのconsoleは特に表示されない形。エラーメッセージが出ていたら何か間違っている。
最後にindex.htmlの11行目を変更すると完成。WEBSITE VIEWが表示されていればOKと思われます。

モジュールのさまざまな使用方法

as の使い方

別の書き方

非同期 JavaScript を書く

  • Pyramid of Doom として知られる一般的な JavaScript の落とし穴について説明します。
  • プロミスの一般的に使用される構造を認識します。
  • promise を使用して非同期呼び出しを連鎖させる方法を示します。
  • 非同期関数を使用して promise を呼び出す方法を示します。

破滅のピラミッドを回避する

非同期処理の書き方

複数の非同期コードがあるとすごく見づらくなる。


こういうふうに書けばいいというサンプル。(ちゃんと非同期で順番に表示された。)


アロー関数を使えば更にシンプルに


catch処理でエラーハンドリング


async functionをつかった方法

JavaScript をテストする

  • 行動駆動型テストがユニークである理由を説明してください。
  • Jasmine テスト スクリプトで使用されるさまざまな要素を特定します。
  • シンプルな Jasmine テスト スイートを作成し、スタンドアロンで実行します。


Jasmine テスト フレームワークの使用方法について解説があります。



環境構築とか大変そうなのでここはスキップ。また今度チェックする。
Javascriptのモジュールはこんな感じ。TrailheadのサンプルコードはPLAYCODEのサイトで簡単に動かすことができました。