LoginSignup
27
32

More than 5 years have passed since last update.

@gitseitanaka

Node.jsがらみで(ぱっと)目に付いたパッケージ

Last updated at Posted at 2015-09-01

本ページは、web経験の乏しい初心者が、node.js入門(ゆくゆくはIoT。。)を目的として、雑然と頭に残ったパッケージなどを整理することが目的としたまとめです。ちなみに、下名のレベルは、nodeschoolにて基本的なエクササイズを行った程度レベル(2015/06/08時点)の状態です。

当然、全てのトレンドモジュールを網羅しているものではありませんし、誤りや、ずれてるところも多々あると思います。
また、得た情報は基本、googleより検索し、引用したものが主です。(出来る限り引用元を記載しましたが漏れているのもあります)

レイア 個人的感想
フロント側ユーティリティ jQuery が該当。但し、多様するとコードが煩雑となり管理しづらくなるので、出来る限りロジックは、サーバ側コードに持っていった方が良い。ちなみに AngularJS は、さらに手の込んだことをフロント側で可能とする。
アプリケーションフレームワーク アプリケーションフレームワーク。 軽量で情報用豊富な express で。 ただ、別路線で Meteor の動向も気になるところ。
HTMLテンプレート とりあえず jade か。。 Facebook が造った React も捨てがたいなぁ。。
CSSフレームワーク とりあえず、 Bootstrap から。 おいおい他のフレームワークへ。
Websocket socket.io 。 ws は速度を求められたら考えよう。
同期モジュール ES6になりきれてないので、 async で良いでしょう。
データベース 当面は、leveldb で良い。 複雑になってきたら、 MongoDB or CouchDB でしょうか。
Roboticsフレームワーク 利用ボードにもよるが cylon でも、良い気がする。。
テスト 別途
その他 認証には Passport がおとく。

Node.js

イベント化された入出力を扱うUnix系プラットフォーム上のサーバーサイドJavaScript環境。V8 JavaScript Engine とlibuv(非同期実装)により構成され動作します。
非同期処理の実現により、C10K問題が起きにくいといわれています。
尚、CommonJS API仕様には一部のみ準拠しているらしいですが、独自路線を進んでいるっぽい。

以下、いずれのプラットフォームもサポート している。

  • Sun OS
  • Linux
  • Mac OS X
  • Windows

Licenseは、一番ゆるいとされるMITで、変更を加えたり再配布・商用利用も可能です。

現バージョンは、ES5(ECMAScript（ECMA-262）5th Edition)は完全サポート。仕様策定中の次期ES6については、オプションを付与することにより利用可能です。
該当のオプションは harmony オプションで、 node --harmony xxx.js の様に利用します。同オプションの有効により、promise、coモジュール、generator/yieldなどの機能が利用可能になります。node 0.12で同オプションをデフォルト有効にする話がありましたが、盛り込まれませんでした。(こちらより)

またコードは、moduleとして分離し、以下の様に export & import(require)することが可能です。この手法により、Node.js向けに既に数々のライブラリが公開されており、npm というパッケージ管理ツールで容易に入手することが可能です。

  • increment.js 
module.exports = function (n) { // exports
    return n++;
};
  • main.js 
var incrementer = require('./increment.js'); // imported
console.log(incrementer(1));

V8 JavaScript Engine(V8)

  • Googleが開発するオープンソースのJIT Virtual Machine型のJavaScript実行エンジン。ES5(ECMAScript（ECMA-262）5th Edition)準拠で、C++で記述されている。Chromeももちろん利用している。

libuv

  • 非同期、 イベント駆動 のプログラミングスタイルを提供します。
  • libuvの中心的な機能はイベントループとI/Oと他の活動(activity)の通知をベースにしたコールバックを提供することです。
  • libuvはタイマのようなユーティリティ、ノンブロッキングのネットワークのサポート、非同期のファイルシステムへのアクセス、子プロセス等を提供します。（こちらより）
  • ちなみに、こんなに使われています。

npm

  • Node.js向けパッケージ(モジュール)マネージャー。Node.jsをインストールした際に同時にインストールされます。

  • https://www.npmjs.com/ で公開される各種パッケージを入手管理することができます。
    対象パッケージの依存関係は、同パッケージ内の package.json に記載されており、同時にインストールしてくれます。
    公開パッケージは、大抵MITライセンスですが、注意は必要。たまにApache2.0は見かけます。

  • 例(expressパッケージの入手)

  npm install express

  • 尚、installオプションには以下の様なものがあります。

    installオプション一覧

オプション 説明(主にWindowsの場合)
無 ローカルインストール。先立ち npm initを実行すると、ローカルディレクトリ配下のnode_moduleに配置される。npm initを行わないと、モジュール群は %USERPROFILE%node_module配下にインストールされる。
-g グローバルインストール。 %APPDATA%\npm\node_module配下にインストールされます。
—save インストールに合わせて、該当モジュールは、package.jsonファイルにdependenciesリストに追加されます。外部公開パッケージ情報の作成などに役立つ感じ。
—msvs_version=2012 node-gypによるVCのビルドが必要な場合

“グローバル”は定義として、プロジェクトがまたがるものでも利用できるらしいが、Windows版だと環境変数の設定が必要かも。

CommonJS

  • http://www.commonjs.org/specs/

    用語の説明
    JavaScriptでサーバサイドやコマンドラインツール、GUIツールなど色んなアプリを開発するための標準的なAPIの仕様です。 Node.jsは、本仕様に一部準拠しているそうです。

io.js

  • https://iojs.org/
  • io.js は、 Node.jsをベースに作られたnpm 互換プラットフォーム。
  • Node.jsのコミッタが、こっちに流れた経緯があるらしいので、将来的にはこっちに、トレンドが移るかも知れないけど、Node.jsベースなので互換もあるらしく、とりあえずは、忘れていてよさそう。

jQuery

  • MIT
  • https://jquery.com/ フロントエンド向けの、便利なjavascriptの色々ライブラリ。Node.jsとは直接的な関係はない。便利さから使い方によっては、Viewに複雑なロジックが入り込み可読性が落ちる可能性があるので注意（ロジックは、バックエンド側に置いた方が良い）。
  • Node.js(バックエンド側)でも、jQueryは利用可能(npm パッケージとして公開されている)。

AngularJS

  • MIT
  • https://angularjs.org/\ Googleとコミュニティで開発。Node.jsとは無関係。\ クライアントMVCフレームワークでもある(こっちが主か)。\ jQueryよりも、痒いところに手が届くライブラリとして使ってもよいっぽい(？)。jQueryと、共存も出来る。\ 内部でjQuery-litleを使っている。

「クライアントサイドMVCフレームワーク」とは、サーバーサイドMVCフレームワークとは逆に、フロント側にMVCを構築するイメージ。

アプリケーションフレームワーク

Webアプリ開発向けのフレームワーク。面倒なルーティングや、HTMLヘルパーなどWebアプリでお役立ちを集めたもの。ここに2014年のトレンドがまとまっています。

Meteor(メテオ)

  • MIT
  • https://www.meteor.com/
  • Node.jsをベースとした、スマホなどのSPA(Single Page App)向けWebフレームワーク。 2012年4月に登場して、およそ2年で、トレンド１位を言うのは。。
  • こちら を参照すると、「初心者に鬼フォーカスしてる」という点が、非常に魅力てきです。また、 こちら に利点・欠点が纏まっています。
    • 試しに、自PCにインストールしてみました。環境にNode.jsや、必要となるパッケージが全て含まれており、npmとかは意識しなくてよい模様。フロント側のBODY部は、MeteorがWebsoket経路で常時更新してくれるようです。
    • tutorialを序盤だけ試してみましたが、確かに開発効率は、高そうです。是非、お試しください。
    • Windowsもサポートされています。
  • 機器制御路線とは若干ずれますが、Webアプリに特化するのであれば、 Meteor もありかと。

express

  • MIT
  • http://expressjs.com/
  • Node.jsのための、高速開放的な、ミニマリストのWebアプリフレームワーク。
  • 2015/6/03時は、4.x系が主流。5.x系は現在α版がリリースされた状況。
  • HTMLテンプレートは、14以上サポートしているとのこと。
  • とりあえずは、ここか。。

express-generator

  • MIT
  • こちら を参照するとプロジェクトのスケルトンを作成してくれる模様。 Use the application generator tool, express, to quickly create a application skeleton.
  • オプション指定で、HTMLテンプレートエンジンや、CSSテンプレートエンジンを指定出来る模様。スケルトンを作成しないのであれば、不要。

Sails

  • MIT
  • http://sailsjs.org/
  • express フレームワークをベースに、最近のWEBサービスではよく使われているような機能を標準搭載した、Rails (Ruby on Rails)ライクなフレームワークです（こちら より）。なので、expressで出来ること＋αのフレームワーク。

Rails (Ruby on Rails)
は、Rubyで記述されたWebアプリケーションフレームワークです。

  • 気になる大きな特徴は以下。
    • ORM
    • Socket.ioの標準搭載 ← 標準搭載と言うことで、なんか便利なAPIがありそう。。。

loopback

HTMLテンプレート

MVC (Model-View-Controller)で言うところの「V」用のライブラリ。バック側の値を埋め込むことができる。

ejs

  • MIT
  • https://github.com/tj/ejs
  • HTMLテンプレートエンジン。 express からも利用できる。
  • HTMLライクなテンプレート。JavaScript Templates（JST）の様な感じ。HTMLライクなことから、HTML系のコーディングツールがそのまま使えそう。
<!DOCTYPE html>  
<html>  
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
    <!-- header scripts -->
  </head>
  <body>

    <header>
      <h1><%= title %></h1>
    </header>

    <%- body %>

    <footer>Copyright hoge</footer>
    <!-- footer scripts -->
  </body>
</html>

JavaScript Templates（JST）

jade

  • MIT
  • http://jade-lang.com
  • HTMLテンプレートエンジン。express からも利用できる。最近は、デフォルト jade らしい。
  • HTMLライクなテンプレートエンジンとは異なり、以下の様な特徴があります。
    • HTML 要素に閉じタグがない
    • class と id 属性の記法が CSS セレクタの記法と同じ
    • 閉じタグを小楽出来る代わりに、インデントで表現
doctype html
html
  head
    meta(charset='UTF-8')
    title 最高にクールなホームページ
    link(rel='stylesheet', href='./css/app.css')
  body
    h1 最高にクールなホームページ
    p 最高にクールなホームページへようこそ。
    script(src='./js/app.js', charset='UTF-8')
  • ejsとの比較は、以下らしい。(こちら より)
    • コーディング量が減る。めんどくさくない。効率的。(利点)
    • コードが読みやすいらしい(利点)
    • ejsよりかは学習コストが高そう(欠点)
    • ロジックを入れすぎないらしい(利点) ← 個人的にまだ、理解していない
    • こちら を参照すると jade が楽なように思える。

ect

  • MIT
  • http://ectjs.com/
  • HTMLライクなテンプレートエンジン。
  • ejsチック。
  • 速いらしい。まだ、それほど普及していない？
  • epressのオプションには、まだ、 express 含まれていないが、使えることは使える。
  • とりあえず、スルー。

hamljs

  • https://www.npmjs.com/package/hamljs
  • HTMLテンプレートエンジン。
  • haml を Node.js向けに実装したもの。
  • haml は、軽量マークアップ言語。
  • jade より古い。
  • haml 自体は、他の言語で利用されている模様。
  • とりあえず、 jade と比べると、情報が少ないのでスルー。

React

  • BSD
  • https://facebook.github.io/react/
  • Facebook 製。
  • UIを構築を目的としたライブラリ。テンプレート的な動作とは異なる。
  • この スライドが入りやすいか。
  • Virtual DOMと言う仕組みを持っているがこれがパフォーマンスを向上してくれるらしい。ブラウザにDOM解析を任せずに、仮想DOM内でオブジェクトの差分のみ抽出＆レンダリングしてくれるらしい。
  • コードの規模が大きくなっても管理(分散して開発しやすく)できるような仕組みを提供してくれるライブラリらしい。 こちら と こちら が良くまとまっています。
  • Reactでは、UIをComponentの集合として扱う為、テンプレートファイル的な扱いとなる“*.jsx”に、マークアップとViewのロジックをcreateClass内に盛り込んでいく。シンタックスは こちら 。
var React = require('react');

var Hello = React.createClass({
  render() {
    return (
      Hello {this.props.name}
    )
  }
});
  • 思い的には、Reactを使えるようになりたいが、出鼻からはきびしいのか・・

CSSテンプレート

フロント側のCSS作成を容易にするためのライブラリ。バック側の値を埋め込むことができる。

Stylus

less

CSSフレームワーク

CSSフレームワーク。CSSの「枠組み・スタイルなど」をある程度最初から定義している、ライブラリファイルのようなもの。
メディアクエリが利用できたりする。大抵の利用方法は、フロント向け公開ディレクトリに配置して、適宜ページより参照するイメージ。

メディアクエリはW3Cが提唱するCSS3の技術の1つで、デバイスの種類と状態を検知できる。状態というのは、「向き」「サイズ」「モノクロかカラーか」など。そして、レスポンシブWebデザインでも利用されている画面サイズについても検知でき、CSSをその状態によって読み替えることができる。
- CSSフレームワーク比較
- かっこいいCSSフレームワークのまとめサイト

Bootstrap

  • MIT
  • http://getbootstrap.com/
  • もともとTwitter社内で作られたもので、以前は「Twitter Bootstrap」と呼ばれていましたが、現在は「Bootstrap」のみとなった。(こちら)
  • デザインセンスが無くてもそれなりの見栄えを整えられるらしい。メディアクエリもサポートしている。
  • 利用方法は、npmを介さなくても、本家よりDLしてディレクトリに配置することでも利用可能っぽい。

Foundation

bootmetro

pure

  • BSD
  • http://purecss.io/
  • Bootstrapと同じイメージ。デザイン違い。軽量。
  • 軽量な分、含まれないスタイルもある。

Websocket

Websocket Protocol(RFC6455) 向けパッケージ。

socket.io

  • MIT
  • http://socket.io/
  • websocketを提供する。
  • express 上からの利用も意識している。
  • ここ を読むと、Websocketに対応していないブラウザでもどうにかしてくれるらしい。
  • 以下、ざっくりサンプル。
  • main.js 
//-----------------
// 準備
//-----------------
var app = require('express')();
var server = require('http').Server(app);   // appよりサーバ取り出し
var io = require('socket.io')(server);      // websocketインスタンス
server.listen(3000);                        // 注意:'app'ではなく、'server'でlisten

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

//-----------------
// フロントからの接続処理
io.on('connection', function(socket){

  socket.emit("key_A", formatted);      // clientへのメッセージ送信

  socket.on('key_B', function (msg) {   // clientからの受信イベント登録
    console.log(msg);
  });

});
  • index.html 
      <!-- websocket接続 -->
      var socket = io();

      <!-- serverからの受信イベント登録 -->
      socket.on("key_A", function (data) {
        console.log(data);
        <!-- serverへのメッセージ送信 -->
        socket.emit("key_B", 'client : ' + data);
      });

WS

  • MIT
  • https://github.com/websockets/ws
  • socket.io より、軽量・高速なパッケージ。
  • 軽量ゆえに、 socket.io 程のAPIはない。
  • サンプルを参照すると、 socket.io の方が、使いやすさ・見やすさが勝っている。
  • WS の面倒なところ(セッション管理など)を socket.io がラップしてくれているイメージ。速度を求めるなら、後々、wsに移植でも良いか。

同期モジュール

非同期で実行される処理を、手軽に同期をとる為のモジュール。

async.js

  • MIT
  • https://www.npmjs.com/package/node-async
  • 同期パッケージ。非同期処理の同期をとる際などに重宝します。また、直列や並列(擬似的に)処理をサポートします。

promises

  • promises
  • ES6準拠の機能。
  • harmony オプションが必要となる。

データベース

Node.jsがjavascriptなので、JSON (やそれに近い形式)でデータを格納するNoSQLなDB(ドキュメント指向のDB)との相性がいいらしい。
もちろん MySQL や PostgreSQL といったRDBとの接続も可能。

MongoDB

  • AGPL3.0。ライバは Apatche2.0
  • https://www.mongodb.org/
  • NoSQL\ RDBMSとの比較は　こちら
  • ドキュメント指向のデータベースで、Node.jsと相性がいいらしい。
  • ぐぐりやすい。
  • JSONライクな形式。

* 引用元は http://docs.mongodb.org/manual/\_images/crud-annotated-document.png です。*

CouchDB

levelup

  • MIT
  • https://github.com/Level/levelup
  • googleの 軽量DB leveldbを、Node.jsスタイルで提供するパッケージ。
  • leveldb は KeyとValueの単純なDBで、Chromeでも利用されています。
  • とりあえず、気軽にDBとして利用するには、もってこいか。。
  • nodeshcool で公開されている　エクササイズを実行する為には、python と VCが必要となるので注意。

levelup用エクササイズ を実行する為には

  • 同エクササイズ(or levelup?)をWindows環境下で実行する為には、ネイティブコードのビルドが必要らしく以下の手順を踏む必要がありました。尚、ビルドは、npmによるinstallの過程の中で node-gyp が呼ばれ勝手に行われます。
  1. Python 2.79 のインストール。installerでパスを通す指定をしなかった場合は、自力で通す。
  2. VCのビルドパスも通しておく。
  3. npm install -g --msvs_version=2012 levelmeup を実行する

Roboticsフレームワーク

cylon

johnny-five

  • https://github.com/rwaldron/johnny-five
  • JavaScript Roboticsフレームワーク。
  • Arduinoの全モデル向けのライブラリ。
  • 制御はシリアル経路(Firmataプロトコル)の制御となる為、別途ホストが必要か？
    • io-plugins を用いることで、ラップ出来るのかな？

mraa

ビルド関連モジュール

  • その内、必要となってくるかと
  • gyp については、他パッケージ内で利用されているので、その内出会うと思います。

gyp (node-gyp)

  • MIT
  • https://github.com/TooTallNate/node-gyp
  • マルチプラットフォーム対応のメタビルドシステム。
  • npm時に、ネイティブコードを生成する際に裏で動く。
  • 各プラットフォームで異なるmakefileを吸収してくれる賢い人らしいです。
  • Python(2.7)で実装されている為、Windowsなどでの利用時は、Pythonのインストールが別途必要となります。(Python 2.79 )

Gulp

  • http://gulpjs.com
  • Node.jsのStreamAPIを利用したタスク自動化ツールです。自動ビルドシステム的に使うもの。
  • Nodeっぽい記述で、記述できる。
  • Grunt よりも使い勝手が向上している。
  • 当面は、使うことはないか。。

目に付いたモジュール

とりあえず、目に付いたモジュール。

Passport

  • MIT
  • http://passportjs.org/
  • express 向けの認証APIを提供するミドルウエアです。
  • また、Facebook、Google又はGitHubなどのシングルサインオンによる認証も容易に利用可能です。

browserify

  • MIT
  • http://browserify.org/
  • フロントエンド側でrequireを呼ぶ為のモジュール。
  • ある程度気をつけて書かれたライブラリはフロントエンド側でも動くらしい。
    • 「ある程度気をつけて書かれたライブラリ」とは？
  • http://browserify.org/ のHello Worldを参照すると、Browserify コマンドに食わせると、フロントエンド向けのスクリプト(Node.jsとの依存関係なしのスクリプト)を吐きだしてくれて、そのスクリプトをフロントエンド側で利用するイメージとなっている。ただ、この場合、ビルドサイクルが生まれるので grunt や gulp などの自動ビルドツールを用いていないと面倒。
  • 以下の様にアクセスがあってから、変換してもよい。(が、時間がかかってしまう。)
    • serverside.js
   :
app.use('/bundle.js', function(req, res) {
  res.setHeader('content-type', 'application/javascript');
  browserify('./app.js')
    .transform('reactify')
    .bundle()
    .pipe(res);
});
   :
  • 色々な変換プラグインを持っており、こちらに一覧があります。

Reactify

Debowerif

bower

CoffeeScript

  • http://coffeescript.org/
  • CoffeeScript はプログラミング言語のひとつである。 コードはJavaScriptのコードに変換される。 Ruby や Python、Haskell から影響を受けたシンタックスシュガーの導入により、JavaScript に比べ簡潔さと可読性を向上させたほか、配列内包(Array comprehensions) やパターンマッチといった機能を追加している。 CoffeeScript により、パフォーマンスを下げることなく、より短いコードでプログラムを記述することができる(JavaScript に比べ 1/3 程度の行数が削減できる)。 (こちら より)
  • 前述のwikipedia 記載の通りですが、javascriptでは面倒なクラス定義や継承の記載がかなり簡単に記載出来るようです。その代わり、 gulpsjs などのビルドを自動化しないといけない。

その他モジュール

27
32
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
27
32