コンパイラかく語りき

import { Fun } from 'programming'

JSライブラリ「Underscore.js」を読んでJavaScript中級者になる! ~グローバルオブジェクトのセット~

どうも!chuckです!

ついに、今日からライブラリリーディングを始めます!

 

ライブラリリーディングとは

文字通り、プログラミングのライブラリを読むことです。JavaScriptで書かれたライブラリを読むことで、JavaScriptへの理解を深めることが目的です。

 

なぜライブラリリーディングをしようと思ったのか

ここらへんでも書いたのですが、僕のJavaScriptはまだまだ初心者レベル。

chuckwebtips.hatenablog.com

 

レベルアップのためにライブラリを読み解くことにしました。その中でもリーディングに最適なライブラリが、jQuery, Backbone.js, Underscore.jsの3つのようです。

なので、今回は勉強のためにunderscore.jsを読んでいこうと思います。

 

詳しくはこちら↓

postd.cc

 

 

公式はこちら→Underscore.js

こちらからライブラリをダウンロードします。ちなみに、underscore.jsファイルは全部で1600行あります。(長い)

 

さっそく読んでみる

では、さっそく読んでみます!

f:id:chuck0523:20150822184921p:plain

 

いきなりむずい…(´;ω;`)

selfとかなんだよ!2,3回しか見たこと無いよ!

 

これはなかなか時間がかかりそうですね…。ちょっとずつ噛み砕いていきます。

 

console.logの簡略化

コードを読んでいく上で、console.log(あるいはアラート)は必須ですよね!でもconsole.log() ってちょっと長いですよね。いちいち書くのは大変。

なので、僕はよくこんな関数を書きます。

f:id:chuck0523:20150822195132p:plain

l(エル)という1文字になりましたw エルに対して渡した引数をコンソールで確認することができます。

というわけで前準備終了。

 

11行目:rootオブジェクトの作成

コードを見ていきます!

f:id:chuck0523:20150822194709p:plain

underscore.jsで一発目のこの部分。要は変数を宣言しているわけですね。さっそくコンソールで確認。

f:id:chuck0523:20150822195309p:plain

 

結果はこんな感じ。

f:id:chuck0523:20150822195436p:plain

なるほど!グローバルオブジェクトであるwindowをまず取得しているんですね!

 

じゃあselfって??

JavaScript self」でググる。最初にヒットしたのがこれ。

qiita.com

要はグローバルオブジェクトを指しているのね。

 

意味のある改行

ここでもう一度コードを見てみます。

f:id:chuck0523:20150822194709p:plain

めっちゃ複雑!思っていたコードですが、なんとなく見えてきました。

self と global とthisの3つが使われていますね。しかも、OR演算子の後にきちんと改行してある!結果的にAND演算子が固まってすごく見やすい!ちゃんと意味のある改行だったんですね…(´;ω;`)

AND演算子のまとまりごとに見ていきます。

 

判定してクリアしたら代入

最初の部分。

f:id:chuck0523:20150822200557p:plain

要は、最終的に代入してますね。selfを代入したいんだけど、その前に2つの条件判定があります。1つはselfがObject型であるかどうか。そしてもう1つが…よくわかんないw

self.self === self ってなんでしょうね…。

 

コンソールで確認してみます。

f:id:chuck0523:20150822200936p:plain

windowを展開して、selfを探します。

 

ありました!self にはwindowがセットされています。

f:id:chuck0523:20150822201009p:plain

 

つまり、グローバルオブジェクトであるwindowはselfというプロパティを持っていて、そこには値としてwindowを持っているんですね!

(正確には”windowオブジェクトへの参照”らしいです→window.self - Web API インターフェイス | MDN

 

ではでは、selfがobject型で、window自身への参照を持っていれば、2つの条件はtrueになるわけですね!AND演算子の性質上、ここでようやく単体のselfにたどり着きました。rootにselfが代入されます。

もし2つの条件がfalseになったり、あるいはselfがnullやundefinedだった場合は、OR演算子を飛び越えて次の行に移ります。

f:id:chuck0523:20150822194709p:plain

typeof global 〜の行ですね!

そしてこちらもfalseだった場合は、デフォルトの設定値であるthisがrootに代入されます。

 

なんとかなった

selfとか何なの…もう無理… と思ったけど、きちんと読めば行けますね!w

あと、コメントがびっしり書かれているのでそれも読んだ方がいいですね。でも、知らないことを読んでも理解できないですよね(今回の僕みたいに笑)なので、しっかり調べてから読むことをオススメします。

最初は理解できなくても、「そういうことだったのか!」と理解の助けになります。

 

今日はこれまで

1コしかやってませんが、ブログの可読性のために1記事につき1テーマに絞りました。今回は”グローバルオブジェクトのセット”という題目で。

 

OSS

えっと、underscore.jsファイルにコメントを追記しました。

こんな感じ。自分の理解のために。

f:id:chuck0523:20150822202857p:plain

 

このファイルなのですが、せっかくなのでOSSオープンソース)化することにしました。未来のJavaScript学習者のために!

Githubに上げたので、気になる方は見てみてください。そしてプルリクエスト大歓迎ですw

 

f:id:chuck0523:20150822203338p:plain

 

github.com