【Education】JavaScriptあれこれ その2

jQueryにおけるArrow Function

ES2015より追加されたこれ、モダン言語を扱ってる気持ちになれるため多用したくなるが

()=>{}

これ、実はfunction(){}の互換構文ではないので注意。
関数内のthisの扱いが変わってしまう。

特にjQueryはthisを多用するため、注意が必要。

$('head, body').each(function(){
    // thisにはhead、bodyタグのDOMが入る
    console.log(this);
});

$('head, body').each(()=>{
    // Arrow Functionはthisを拘束しないため、関数の外のthisになる
    // ここではGlobal（ブラウザならwindow）になる
    console.log(this);
});

複数文字列での改行

ES2015以前の文字列内改行は以下だった。

var str = '\
md-autocomplete.md-hue-2 {\
  background: rgb(255, 255, 255)\
}\
';

改行を\（バックスラッシュ）で表現する。
HTMLやCSSを書いたあとで、改行を全て取り払うか文末を\で一括置換するかする必要があり、メンテナンスコストがかかっていた。

ES2015で追加されたTemplate literalを使えば以下のように書ける。

let str = `
md-autocomplete.md-hue-2 {
  background: rgb(255, 255, 255)
}
`;

文字列部分を`（バッククォート）で囲うだけ。
非常にメンテナブルに文字列を作ることができる。

正規表現内で変数を使う

JavaScriptの文字列検索や置換は基本的に正規表現にて行われる。

'JavaScriptの文字列検索や置換は基本的に正規表現にて'.match(/^javascript/i);

ここに変数を入れたい場合もあると思うが、以下は今くいかない。

let str = 'javascript';
'JavaScriptの文字列検索や置換は基本的に正規表現にて'.match(/^str/i);

/^javascript/i この記述は正規表現リテラルと呼ばれるもので
この中では変数は展開されない。
変数を展開するためには正規表現オブジェクトを使う必要がある。
/^javascript/i と同じ表現を実現するには以下のようにする。

let str = 'javascript';
new RegExp(str, '')

即時関数

前回、JQueryのReadyのところで以下の記法を紹介したが

$(function(){
    // 処理
});

似たような見た目で、以下のようなものがある。

(function(){
    // 処理
})();

これはjQueryとは全く関係なく、即時関数と呼ばれるものとなっている。
(関数)();で関数を定義し、即実行することができる。
これのメリットは処理をいきなり書くのではなく関数でラップできるので
処理のスコープを閉じ込めておけることにある。

以下のように書くと、処理毎の変数名を別に用意する必要が出てくるが

// 処理①
let str = '似た処理なのに';
alert(str);
// 処理②
let str2 = '名前を変える必要がある';
alert(str2);

即時関数でラップするとスコープが分かれるので変数名の被りを意識する機会が減る。

(function(){
    // 処理①
    let str = '似た処理ならば';
    alert(str);
})();
(function(){
    // 処理②
    let str = '名前を変えなくても良くてわかりやすい';
    alert(str);
})();

ちなみに末尾の括弧は処理関数にて引数として受け取れるため、WordPressのjQueryなど処理する場合
jQueryという変数名しか使えず記述が冗長になるところを以下のようにスマートに記述できる。

(function($){
    // この中での$は外のスコープでのjQueryと同じ。
})(jQuery);

ちなみに、Arrow Functionと組み合わせると以下のような記述になる。

($=>{
    // 処理
})(jQuery);

引数なければこんな感じ。

(()=>{
    // 処理
})();