アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

あんなこともこんなことも。そう、Node.jsならね。

こんにちは、斉藤です。
前回までのラズベリーパイは一旦置いておいて、今日は別の話でブログを書きます。



そう、Node.jsです。
Node.jsと言えば、WEBサーバーとして立てる方も多いと思いますが、ちょっとした別の使い方もあります。
ということで、今回はWEBアプリの開発に役立つNode.jsの便利なモジュールをご紹介します。
みんな使っているあのモジュールや、知らなかった便利なモジュールがあるかも!?

それでは、ご覧下さい!






ライブラリダウンロード


webアプリと言えば、色々なJSライブラリですよね?
これらをいちいち公式ページをブラウザで開いて、ダウンロードしてくるのは面倒ではないですか?
そんなときに役立つのがこちら!

pulldownというモジュールをインストールしましょう。


$ sudo npm install -g pulldown


その後、このpulldownコマンドでjqueryの最新版が手元に!


$ pulldown jquery
-> Success: https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js was downloaded to ./jquery.min.js
$ ls
jquery.min.js


これで、"WEBブラウザを開いてダウンロード"なんて面倒なことはしなくて済みますね!
ちなみに、以下のようにバージョン指定もできます。


$ pulldown jquery@1.8.3


どれだけの種類のライブラリが、このpulldownでダウンロードができるかは、このサイトを確認ください。
http://cdnjs.com/
angularjsやunderscore、backboneも入っていますよー。

- このモジュールについて
https://npmjs.org/package/pulldown



QRコード生成


スマホのキーボードでいちいち開発中サイトのURLを入力していませんか?
パッと入力できたら便利ですよね?
URLを入れたQRコードを作っちゃいましょう!

qrcodeというモジュールをインストールしてください。


$ sudo npm install -g qrcode


その後、このqrcodeコマンドで好きなQRコードがあなたの手元に!


$ qrcode "http://monaca.mobi" qrcode.png
$ ls
qrcode.png




- このモジュールについて
https://npmjs.org/package/qrcode



HTML記述の効率化


HTMLをタグ打ちしているって?
もうそんな時代は古い(はず)。
HTMLより簡単な構文で、HTMLが生成できたらこの上なく幸せですよね?

jadeというモジュールをインストールしてください。


$ sudo npm install -g jade


後は、こんなjadeファイルを作って、


$ cat index.jade
!!!5
html
  head
    meta(http-equiv="Content-Type", content="text/html; charset=UTF-8").
  body
    div helloworld!


jadeコマンドで、jadeファイルを元にhtmlが生成されます!


$ jade -P index.jade

  rendered index.html

$ cat index.html
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <div>helloworld!</div>
  </body>
</html>


!DOCTYPEとか、<とか、/>とかとか打つ手間が省けますね。

ちなみに、CSS用に作られたlessというモジュールもあります(今回は割愛)。
アシアル社内ではless派閥とsass派閥という、きのこたけのこ戦争みたいなことが起きているとかいないとか。

- このモジュールについて
http://jade-lang.com/
https://npmjs.org/package/jade



JSの圧縮/結合


スマートフォン対応の場合、ユーザーのネットワーク環境は大体が3Gなので、WEBページの読み込みが不安定になることは珍しくありません。
だから、少しでも読み込みJSファイル数を減らしたい。圧縮してファイルサイズを小さくしたい。

そんなときに役立つのがuglify-jsモジュール。


$ sudo npm install -g uglify-js


uglifyjsコマンドが使えるようになり、以下のようにjavascriptの圧縮/結合が可能です。


$ cat aaa.js
if(true) {
    console.log("log");
}
$ cat bbb.js
(function(){
    alert("foo");
}());
$ uglifyjs aaa.js bbb.js
if(true){console.log("log")}(function(){alert("foo")})();


- このモジュールについて
https://npmjs.org/package/uglifyjs
http://dev.classmethod.jp/server-side/node-js-server-side/uglifyjs/



簡易webサーバー


HTMLを作ったら、確認しますよね?
どうやってローカルで確認していますか?
Nginx?Apache?設定面倒ですよね?

そんなときにstaticというモジュールがあります。


$ sudo npm install -g static


インストールしたら、以下を入力してください。


$ static .
serving "." at http://127.0.0.1:8080


その後、WEBブラウザで、http://127.0.0.1:8080 にアクセスしてみてください。
これだけでWEBサーバーとして、指定したディレクトリをドキュメントルートとしたコンテンツの配信をできます。ちょっとした確認に便利!
ちなみに、以前のアシアルブログでも紹介されていますね。
http://blog.asial.co.jp/1187 (node-staticの項参照)

- このモジュールについて
https://npmjs.org/package/static



テストツール


javascript開発していると、ユニットテストを走らせたいですよね?
テストフレームワークの準備、実行が面倒?

karmaというモジュールがあります。


$ sudo npm install -g karma


一度設定してしまえば、手動でブラウザを開かずとも、コマンドラインから実行できるのが嬉しいところ。
使いたいテストフレームワークもJasmine, QUnitなど一つに限らないので、それぞれのフレームワークを単体で使っていた方も乗り換えもスムーズかと。

- このモジュールについて
https://npmjs.org/package/karma
http://qiita.com/shinofara/items/b3677ffdfc0c7e45e8d4
http://dev.classmethod.jp/tool/karma/



デバッグツール


PCで確認していると起きないんだけど、スマホで確認すると起きるバグってありますよね。
どうにかして、スマホブラウザの情報を取得できないものか・・・。

そんなときに迷わずお勧めしたいのが、このweinre(ワイナリー)。


$ sudo npm install -g weinre


リモートで実行できるChromeデバッグパネルと言えば伝わると思います。
スマホブラウザ内に表示しているDOMをPC上で調査したり、consoleから関数を叩いて、スマホブラウザ内で実行してみたり。
リモートで操作できることがとても便利だと、実感できるのではないでしょうか。


図. PCから、スマホブラウザ内でJSを実行してみた例



- このモジュールについて
https://npmjs.org/package/weinre
http://blog.asial.co.jp/1075



よく行う作業のタスク化


先ほどのjade、uglifyjsなどよく使うコマンドは、Makefileみたいにまとめることが出来るんです。

そんな時に使えるのが、このgrunt。


$ sudo npm install -g grunt-cli


Makefileのように、タスクを設定するためのツールです。
JavaScriptで書かれているため、JavaScript系のプロジェクトと相性が良いです。
詳しく説明しだすと長くなるので、ほんの一例を。


$ cat Gruntfile.js
module.exports = function(grunt) {
    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        jade: {
            monaca: {
                options: {
                    pretty: true
                },
                files: {
                    "monaca.html": "monaca.jade"
                }
            }
        },
        jshint: {
            js: ['aaa.js', 'bbb.js']
        },
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
                mangle: false,
                beautify: false,
                compress: {
                    global_defs: {
                        DEBUG: false
                    },
                    dead_code: true
                }
            },
            monaca: {
                files: {
                    'build.js': ['aaa.js', 'bbb.js']
                }
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-jade');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-jshint');

    grunt.registerTask('default', ['jade', 'jshint', 'uglify']);
};

例えばこういったGruntfile.jsというものを一度作っておくと、以下の要領でjadeによるHTML生成、jshintによるシンタックスチェックからuglifyを使った圧縮/結合まで、たった一つのコマンドであっという間に行えてしまいます!


$ grunt
Running "jade:monaca" (jade) task
File "monaca.html" created.

Running "jshint:js" (jshint) task
>> 2 files lint free.

Running "uglify:monaca" (uglify) task
File "build.js" created.

Done, without errors.

よく行う作業はコマンドによるタスク化に限りますね!便利!
ちなみに、makeコマンド(Makefile)と違うのは、


JavaScriptで書けること
gruntのモジュールが豊富に存在すること
サクセス/エラーを色付けで確認できること

です。

- このモジュールについて
http://gruntjs.com/
https://npmjs.org/package/grunt
http://www.monster-dive.com/blog/web_creative/20131004_001078.php
http://blog.kazupon.jp/post/39482409323/grunt-scratch-project





まとめ


今回はNode.jsとそのモジュールで、大抵のことができることをご紹介しました。
これまで、Node.jsを避けてきた方もこの機会にいかがでしょうか。