2015年5月5日火曜日

JavaScriptライブラリを学ぶ

今回のお題は「JavaScriptライブラリ」です。

そもそも「JavaScript」自体の理解が怪しい自分で、
そこまで飛んでしまっていいものか疑問だけど、とにかく「JavaScriptライブラリ」です。


◆JavaScriptライブラリとは・・・

ライブラリという言葉から連想できるように、
JavaScriptの「集合体」とでも言えば良いでしょうか?

あ、JavaScriptのコードで書かれた
「いろいろな部品を詰め込んだ便利なツール」
と表現した方がわかりやすいですね。


◆JavaScriptライブラリの種類・・・

「Node.js」や「jQuery」というものは聞いたことがある。。。

自分好みのライブラリを作ることもできるけど、
上記のような一般公開されているライブラリを使うこともできる。

一般公開されているようなライブラリは、
1本で何でもできるわけではなく、
それぞれの特色があって、各人の用途に応じて利用できるようになっています。


◆JavaScriptライブラリで何ができるのか?

例えば・・・
・Node.js(http://nodejs.jp/
 ⇒非同期通信に特化したライブラリ。
  例えば、SNSの更新情報を「更新ボタン」を押さずにリアルタイムに表示してくれたりできる。

・jQuery(https://jquery.com/
 ⇒Webサイトの表示に特化したライブラリ。
  Webブラウザごとの「方言」を統合したり、
  HTMLよりもコード量を少なくしたり、
  デザイナーやデベロッパーの作業負荷を減らした画期的なツール。(・・・だと思ってる)

その他、昨日のエントリー(Blogger上で「シンタックスハイライト」を導入)で書いた、
シンタックスハイライトもJavaScriptライブラリの恩恵を受けている。


◆JavaScriptライブラリの中身

シンタックスハイライトで使った「google-code-prettify」を例に・・・

「prettify.js」をテキストエディタで開くと↓のようなものが書かれている。。。
※長いので9割方省略してます
!function(){var q=null;"--中略--"(function(){function S(a){function d(e){var b=e.charCodeAt(0);if(b!==92)return b;var a=e.charAt(1);return "--中略--"}"--中略--"}})();}()


・・・一見して、何が書かれているのかわからない・・・。(いわゆる「難読化」されてます)

これを整形してみると・・・(「Online JavaScript beautifier」(http://jsbeautifier.org/)を利用)
! function() {
    var q = null;
    "--中略--"
    (function() {
        function S(a) {
            function d(e) {
                var b = e.charCodeAt(0);
                if (b !== 92) return b;
                var a = e.charAt(1);
                return "--中略--"
            }
            "--中略--"
        }
    })();
}()

・・・こんな感じです。
変数(var)や関数(function)がたくさんあり、
これをWebページから呼び出して、利用する仕組みになっている。
⇒「prettify.js」のコードをざっと読むと、
 正規表現などを駆使して、フォント調整を行っているようです。


以上、ご理解いただけましたでしょうか?

今後、様々なライブラリを利用してみたいと思います。

Previous Post
Next Post

post written by: