Asial Blog

Recruit! Asialで一緒に働きませんか?

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

カテゴリ :
フロントエンド(HTML5)
タグ :
Tech
JavaScript
こんにちは、斉藤です。
前回までのラズベリーパイは一旦置いておいて、今日は別の話でブログを書きます。



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

それでは、ご覧下さい!






ライブラリダウンロード


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

pulldownというモジュールをインストールしましょう。
  1. $ sudo npm install -g pulldown

その後、このpulldownコマンドでjqueryの最新版が手元に!
  1. $ pulldown jquery
  2. -> Success: https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js was downloaded to ./jquery.min.js
  3. $ ls
  4. jquery.min.js

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

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

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



QRコード生成


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

qrcodeというモジュールをインストールしてください。
  1. $ sudo npm install -g qrcode

その後、このqrcodeコマンドで好きなQRコードがあなたの手元に!
  1. $ qrcode "http://monaca.mobi" qrcode.png
  2. $ ls
  3. qrcode.png



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



HTML記述の効率化


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

jadeというモジュールをインストールしてください。
  1. $ sudo npm install -g jade

後は、こんなjadeファイルを作って、
  1. $ cat index.jade
  2. !!!5
  3. html
  4.   head
  5.     meta(http-equiv="Content-Type", content="text/html; charset=UTF-8").
  6.   body
  7.     div helloworld!

jadeコマンドで、jadeファイルを元にhtmlが生成されます!
  1. $ jade -P index.jade
  2.   rendered index.html
  3. $ cat index.html
  4. <!DOCTYPE html>
  5. <html>
  6.   <head>
  7.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  8.   </head>
  9.   <body>
  10.     <div>helloworld!</div>
  11.   </body>
  12. </html>

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

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

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



JSの圧縮/結合


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

そんなときに役立つのがuglify-jsモジュール。
  1. $ sudo npm install -g uglify-js

uglifyjsコマンドが使えるようになり、以下のようにjavascriptの圧縮/結合が可能です。
  1. $ cat aaa.js
  2. if(true) {
  3.     console.log("log");
  4. }
  5. $ cat bbb.js
  6. (function(){
  7.     alert("foo");
  8. }());
  9. $ uglifyjs aaa.js bbb.js
  10. 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というモジュールがあります。
  1. $ sudo npm install -g static

インストールしたら、以下を入力してください。
  1. $ static .
  2. 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というモジュールがあります。
  1. $ 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(ワイナリー)。
  1. $ 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。
  1. $ sudo npm install -g grunt-cli

Makefileのように、タスクを設定するためのツールです。
JavaScriptで書かれているため、JavaScript系のプロジェクトと相性が良いです。
詳しく説明しだすと長くなるので、ほんの一例を。
  1. $ cat Gruntfile.js
  2. module.exports = function(grunt) {
  3.     // Project configuration.
  4.     grunt.initConfig({
  5.         pkg: grunt.file.readJSON('package.json'),
  6.         jade: {
  7.             monaca: {
  8.                 options: {
  9.                     pretty: true
  10.                 },
  11.                 files: {
  12.                     "monaca.html": "monaca.jade"
  13.                 }
  14.             }
  15.         },
  16.         jshint: {
  17.             js: ['aaa.js', 'bbb.js']
  18.         },
  19.         uglify: {
  20.             options: {
  21.                 banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
  22.                 mangle: false,
  23.                 beautify: false,
  24.                 compress: {
  25.                     global_defs: {
  26.                         DEBUG: false
  27.                     },
  28.                     dead_code: true
  29.                 }
  30.             },
  31.             monaca: {
  32.                 files: {
  33.                     'build.js': ['aaa.js', 'bbb.js']
  34.                 }
  35.             }
  36.         }
  37.     });
  38.     grunt.loadNpmTasks('grunt-contrib-jade');
  39.     grunt.loadNpmTasks('grunt-contrib-uglify');
  40.     grunt.loadNpmTasks('grunt-contrib-jshint');
  41.     grunt.registerTask('default', ['jade', 'jshint', 'uglify']);
  42. };
例えばこういったGruntfile.jsというものを一度作っておくと、以下の要領でjadeによるHTML生成、jshintによるシンタックスチェックからuglifyを使った圧縮/結合まで、たった一つのコマンドであっという間に行えてしまいます!
  1. $ grunt
  2. Running "jade:monaca" (jade) task
  3. File "monaca.html" created.
  4. Running "jshint:js" (jshint) task
  5. >> 2 files lint free.
  6. Running "uglify:monaca" (uglify) task
  7. File "build.js" created.
  8. Done, without errors.
よく行う作業はコマンドによるタスク化に限りますね!便利!
ちなみに、makeコマンド(Makefile)と違うのは、
  1. JavaScriptで書けること
  2. gruntのモジュールが豊富に存在すること
  3. サクセス/エラーを色付けで確認できること
です。

- このモジュールについて
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を避けてきた方もこの機会にいかがでしょうか。