いかにして問題を解くか

このサイトはGoogle Analyticsを利用しています。

EventDrops のソースコードを読んでいる時のメモ

Javascript

おことわり

この記事はメモ書きなので、特に誰向けかを意識して記述していません。 どこかの段階で正式な記事にしたいとは思うのですが。

タスクランナー

ビルドスクリプトとほぼ同じようなもの。 そもそもこの言葉（タスクランナー）の定義もあまり明確にわかっていないが、単に make と目的自体は変わらない。

EventDrop では WebPack を使用している。 他にもたくさんあるが、流行り廃りが激しく2016年時点での流行に乗っている感じである。

Javascript 界隈でのタスクランナーにおける主な目的は、

  • require/import などを使って複数ファイルに分割しているJavascriptファイル群をまとめ上げる

ことになる。

require/import などの文法（？）は CommonJs（これ自体はルールの名前） や、node.js などの処理系によって定義されている。2016年時点でブラウザはこのルールを実装していないため、require/import を展開、変換する必要がある。

webpack の依存関係など

package.js を見るとわかる。

import

import <object name> from 'filename or Directory name'

import したファイル内において で参照できるようになる。 from 以降がディレクトリ名だった場合は、そのディレクトリ内の index.js を参照して解決する。

Webサーバの URL( ex. http://example.com/hoge/ )で、index.htmlをデフォルトで読み込むような感じなのだろう。

configurable.js

EventDrop のエントリポイントである eventDrops.js で読み込まれている。

configurable.js

どこにソースがあるのかよくわからず困った。

ボックス化

意味は値型(非オブジェクト)をオブジェクト型に変換すること。

MDN で apply() についての記述で現れた表現。

不勉強だった。

スプレッド演算子

...array

ドット(.) が３つで一つの演算子となり、スプレッド演算子と呼ぶ。 array をその場で展開してくれる。

解説は MDN で。

BABEL

EventDrops で使われている Javacript は BABEL で拡張されている。

BABEL は

'Babel is a JavaScript compiler. Use next generation JavaScript, today.'

で、最新仕様 + 拡張？ Javascript を現状の多くのブラウザで動く Javascript に変換するツールである。 Javascript から Javascript を生成する。

Javascript の初期化イディオム

 a = a || {}

a が nil　や undefined であった場合、 {} を a に代入する。 BABEL が a = { ...b, ...c } をコンパイルすると、この初期化イディオムが生成される。

var _extends = Object.assign || function (target) { 
    for (var i = 1; i < arguments.length; i++) { 
       var source = arguments[i]; 
       for (var key in source) { 
            if (Object.prototype.hasOwnProperty.call(source, key)) { 
                target[key] = source[key]; 
            } 
        } 
    } 
    return target; 
};

Javascriptの処理系(ブラウザ etc.) が Object.assign を実装していない場合、 function以降が _extends に入る。

Rest parameters

スプレッド演算子に似てるけど、こちらはメソッド定義時に使う。

something( a, b, ...args ){}

こちらはa,b　(3番目)　以降の可変長引数部を配列にしてしまう。 スプレッド演算子とは意味合いが逆転している。

ちなみに、javascript では基本的に可変長引数なので、 "可変長引数"なんて言葉を使うべきではないかもしれない。

解説は MDN で。

アロー演算子

// 無名関数基本
function( a, b, c ) { }

// アロー演算子で表現
( a, b, c ) => { }

// 引数が一つなら () を省略できる。
a => { }

ただし、this の評価タイミングが異なるため、全く同一表現でもない。

Enhanced Object Literals

変数を使って動的にオブジェクトプロパティを定義できる。

var inst = {　"property": 1};

これを、

var key  = "property"
var inst = { [key]: 1 };

と記述できる。 key をユーザーの入力によって動的に変更が可能。