古川陽介 – HTML5Experts.jp

Electronプログラミング入門 — インストールからミニブラウザ構築まで

古川陽介 — Thu, 15 Sep 2016 00:00:50 +0000

連載： Web技術でアプリ開発2016 (6)

Electron

Electronとは、デスクトップクライアントを作るためのフレームワークです。クロスプラットフォームで動作することをサポートしているため、Electronで作ったアプリケーションはMac、Windows、Linuxの環境でも動作します。Atomと呼ばれる GitHub社製のエディタがあります。 ElectronはAtomを作る際にフレームワークとして作られました。以前はAtomShellと呼ばれていましたが、Electronとして名前を変更し、2016年にはversion 1.0がリリースされるまでに成長しました。

ElectronはJavaScript / HTML / CSSを使ってクライアントアプリケーションを作成します。中のアーキテクチャはChromiumとNode.jsで作られており、Web開発の技術を使ってデスクトップアプリケーションを構築することが可能です。

ElectronはCheng Zhao氏 (以降zcbenz)が開発したフレームワークですが、zcbenz氏は実際Electronの開発前にNW.js(旧 NodeWebkit) と呼ばれるフレームワークのコントリビューターでした。ElectronはNW.jsと非常によく似たフレームワークですが、いくつか技術的に異なるポイントが有ります。決定的な違いは、Chromiumの組み込み方の違いです。ElectronはライブラリとしてChromiumを組み込んでいるのに対して、NW.jsはChromiumをforkしたプロジェクトを使っています。Chromiumは非常に進化が早いプロダクトなので、forkして持つよりもアップデートを考えると効率的です。

とはいえ、NW.jsとElectronの技術的な部分以外は違いはそこまでありません。Atom開発当初にNW.jsが多少不安定だったために新しいプロダクトとして立ち上げたという側面もあるそうです。詳しくはAtomShellとNodeWebkitの違いに詳しく記載されています。

Electronの特徴

いくつか特徴があるので紹介します。

Electronのランタイム

Electron そのものはただのランタイムライブラリです、Node.jsにおけるnodeコマンドのようなもので、electronコマンドでエントリポイントとなるJavaScriptを実行します。

electronコマンドは公式サイトからダウンロードすることもできますが、Node.jsのパッケージモジュールである、npmコマンドを使ってインストールすることも可能です。

$ npm install electron -g

※ 以前までは npm install electron-prebuiltからインストールする必要がありましたが、最近はnpm install electronでinstallできるようになりました。

これでelectronコマンドが有効になるので、そのコマンドを使ってデスクトップアプリケーションを起動させます。アプリケーションを実際に書くのは後述します。

Electron / Browser間でモジュールを共有

Electronアプリを構築すると、シームレスにブラウザからNode.jsのコードを呼ぶことが可能です。そのため、下記のようなコードを実行することもできます。　

// script tag から

ただし、この方法を使った場合、DOM-based XSSが発生すると、任意のコマンドだったり、ファイルが操作できてしまう結果になるため、プロダクションでElectronを活用する場合は注意が必要です。

参考資料: Electronの倒し方

Hello World

一旦Electronを起動してみましょう。Electronを動かすだけなら Node.jsはbuilt-inされているので不要ですが、npmがある方が便利なのでNode.jsをインストールしておきましょう。Node.jsは公式サイトからダウンロードできます。Macであれば、brewでもインストール可能です。

Node.jsがインストールされたらElectronをインストールしてみましょう。下記の通りです。

$ npm install electron -g

適当なフォルダを作成し、package.json、main.js、index.htmlを作成します。 package.jsonは下記の通りに作成します。

{
  "name": "electron-intro",
  "version": "0.0.1",
  "main": "main.js"
}

main.jsを記述します。

const {app, BrowserWindow} = require('electron');

// window objectがGCされないようにするために、globalに定義する
let win;

function createWindow () {
  win = new BrowserWindow({width: 800, height: 600});

  win.loadURL(`file://${__dirname}/index.html`);

  win.on('closed', () => {
    // windowがクローズされたら null にして削除
    win = null;
  });
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (win === null) {
    createWindow();
  }
});

最後に表示するためのindex.htmlを記述します。



  
    
    Hello Electron!
  
  
    Hello Electron!
    Node version: ,
    Chrome version: ,
    Electron version: .

これだけでHello Worldは一旦完成です。下記のようなファイル構成になっていることを確認してください。

.
├── index.html
├── main.js
└── package.json

Electronを起動させてみましょう。

$ electron .

下記のようなウィンドウが出たら完成です。

Hello, World実行結果

PhotonKitを使ってミニマムブラウザを作る

これだけだと味気ないので、PhotonKitを使ってミニマムブラウザを作ってみましょう。ブラウザを作ると言っても、 Chromiumを内包しているElectronであれば、Chromiumの機能を借りてくるだけなのでそこまで難しくはないです。

PhotonKitはCSSフレームワークの1つです。BootstrapやMaterial Design Liteのようなclass setを持っています。Mac のクライアントのようなアプリケーションを作るためのデザインテンプレートになっています。

Photon

まずはpackage.jsonを作りましょう。

{
  "name": "electron-mini-browser",
  "version": "0.0.1",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron index.js"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "electron": "^1.3.5"
  }
}

npm startでElectronを起動できるようにしておくことと、dependenciesにelectronをインストールしておきましょう。下記の方法でpackage.jsonに記述しつつ、インストールさせることが可能です。　

$ npm install electron --save

次にindex.jsを作成します。

'use strict';
const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow = null;

app.on('window-all-closed', function() {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('ready', function() {
  mainWindow = new BrowserWindow({
    width: 800, 
    height: 600,
  });
  mainWindow.loadURL(`file://${__dirname}/index.html`);

  mainWindow.on('closed', function() {
    mainWindow = null;
  });
});

実際のページ(index.html)を作成します。



  
    
    
    
    Hello Electron!
  
  
    
    
    Hello Electron!
    
     
      
     
      
     
      
     
     
     
      
    
    
      
        
          
            
            
            
          
            
          
        
      
    
    Footer

ページの中のボタンに動きを与えるため、js/main.jsを作成します。

document.addEventListener('DOMContentLoaded', () => {
  const webview = document.getElementById('webview');
  const reloadButton = document.getElementById('reload');
  const backButton = document.getElementById('back');
  const forwardButton = document.getElementById('forward');
  const favoriteButton = document.getElementById('favorite');
  const urlbar = document.getElementById('urlbar');
  const favList = document.getElementById('fav-list');

  // webview表示の時にurlbarの値を変える
  webview.addEventListener('load-commit', ({ url, isMainFrame }) => {
    if (isMainFrame) {
      urlbar.value = url;
    }
  });

  // urlbarでEnterキーを押したら遷移する
  urlbar.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
      webview.setAttribute('src', urlbar.value);
    }
  });

  // 更新ボタンをクリックしたらwebviewをリロードする
  reloadButton.addEventListener('click', () => {
    webview.reload();
  });

  // 戻るボタンをクリックしたらwebviewを戻る
  backButton.addEventListener('click', () => {
    webview.goBack();
  });
  
  // 進むボタンをクリックしたらwebviewを進ませる
  forwardButton.addEventListener('click', () => {
    webview.goForward();
  });
  
  // お気に入りボタンをタップしたらリストにURLを追加する
  favoriteButton.addEventListener('click', () => {
    const listItem = document.createElement('li');
    const listContent = document.createElement('p');
    listItem.setAttribute('class', "list-group-item");
    listItem.setAttribute('data-url', urlbar.value);
    listContent.textContent = urlbar.value;
    listItem.appendChild(listContent);
    favList.appendChild(listItem);
    listItem.addEventListener('click', () => {
      const url = listItem.getAttribute('data-url');
      webview.setAttribute('src', url);
    });
  });
});

最後にPhotonKitのCSSとFontセットをダウンロードしておきます。下記のようなディレクトリ構成になります。

.
├── css
│   ├── photon.css
│   └── photon.min.css
├── fonts
│   ├── photon-entypo.eot
│   ├── photon-entypo.svg
│   ├── photon-entypo.ttf
│   └── photon-entypo.woff
├── index.html
├── index.js
├── js
│   └── main.js
└── package.json

全てを終えたら、npm startコマンドで起動します。下記のようなブラウザが出現できたら完成です。

Electron+Photonで作ったミニブラウザ

プラットフォーム/ライブラリの特徴

項目	説明
対応プラットフォーム	Windows, Linux, OS X
コードベースは（ほぼ）完全に統一できるか？	ほぼ統一できる
UIを記述する言語	JavaScript, HTML, CSS
UIはネイティブかウェブか	基本はウェブだが、OSネイティブの機能(タスクバー等)は一部利用できる
パフォーマンス	基本ウェブなのでウェブページと同等、ただし自分でオフラインキャッシュの仕組みを持てるので、改善可能
ネイティブな機能を呼び出せるか？	Node.jsからOSの機能を呼び出せる。

以下に、上の表を補足します。

対応プラットフォーム

Electronの公式サポートはWindows, Linux, OS Xの３つのみです。今のところはデスクトップアプリケーションのためのフレームワークなので、モバイル対応は全く考えられていません。

コードベースは (ほぼ) 完全に統一できるか？

ほぼ統一できます。ただし、OS X用の機能であったり、Windows専用の機能は用意されていて、プラットフォームによって呼び出し可能なAPIや受信可能なEventが若干異なります。クロスプラットフォームでOSの専用の機能を利用する上で、気になる方は一度APIを確認すると良いでしょう。

UIを記述する言語

Hello Worldやミニブラウザを作って分かる通り、HTML/JS/CSSで書きます。ネイティブ部分の呼び出しもNode.jsなので、 JavaScriptになります。

JavaScriptのレイヤはNode.js部分とChromium部分でv8(JavaScript Engine)が動くので、ほぼ同一の動きをします、ただし、Node.jsとChromiumでv8のバージョンは若干違う可能性があります。基本的な部分は変わりませんが、ES2016の対応状況を見てもらえれば分かる通り、新しいJavaScriptの機能面で違いはあります。

ES2016の対応状況

UIはネイティブかウェブか

基本はウェブです。デスクトップアプリケーションとして、タスクトレイに常駐させたい場合やOSネイティブのダイアログボックスを使いたい場合は専用のAPIがあるので、それを利用して機能を作ることも可能です。

パフォーマンス

Electronは基本的にウェブなので、ネイティブのデスクトップアプリと比較するとそこまで高速ではありません。

Electronのアプリを起動させると、Chromium用のプロセスが3つ起動し、Node.js用のメインプロセスが1つ起動します。合計4プロセスが常駐することになります。言ってしまえばブラウザそのものを起動しつつ、バックグラウンドにNode.jsを起動しているのと同様です。富豪的な方法で実現していると言えるでしょう。

そのため、描画パフォーマンス等はブラウザの機能がそのまま利用できますが、実行効率が良いモデルとはいえません。パフォーマンスにシビアなアプリケーションを作る場合は Electron ではなく、ネイティブの機能を使って作る方が良いでしょう。

ネイティブな機能を呼び出せるか？

ElectronからNode.jsを呼び出せばファイル操作や外部プロセスコールといった基本的な機能は呼び出せます。また、C言語等で書かれたネイティブライブラリもNode.jsアドオンがあれば呼び出すことが可能です。ただし、ネイティブライブラリに関しては、通常のnpmでインストールするだけでは利用できないことがあります。Nodeのバージョンがelectronのbuilt-inで保持しているバージョンと異なる場合にうまく利用できないことが多いです。ネイティブライブラリを利用したい場合は下記のガイドを確認することを推奨します。

ネイティブライブラリ利用ガイド

まとめ

Electronの概要とアプリ構築の方法、ウェブ用プラットフォームを構築する上での共通質問項目を記述しました。Electron はこれまでのAngularJSやReact等で構築されたSingle Page Applicationを活用して、デスクトップアプリケーションを構築するのに非常に向いています。

まだv1.0がリリースされて日が浅いこともあり、そこまでノウハウが溜まっているわけではありません。特にセキュリティやパフォーマンスなどの改善は今進んでいますが、ユーザーからのノウハウも溜める必要があると感じています。

もしまだ触っていない方がいらっしゃるのであれば、electronicaなどのチュートリアルもあるので是非やってみてください。

また今回のNode学園祭では、Electron作者のzcbenzもゲストスピーカーとして登壇する予定です。Electronの今後の話が聞けると思います。

一緒にElectronを盛り上げていきましょう。

今からでも間に合う！Node.js v4＆v5は何が変わったか？

古川陽介 — Tue, 01 Dec 2015 00:00:18 +0000

Node.js v4リリースに向けて

とうとうメジャーバージョンアップにされたNode.jsである、Node.js v4がリリースされました。今回はこのNode.js v4がこれまでのNode.js v0.12やv0.10と比較してどう違うのかを解説します。また、最新ではv5もリリースされていますので、合わせてお伝えしていきます。

なんでいきなりv4なのか

おそらく一番最初に抱く感想は、v0.10とかv0.12みたいな数字からv1.0を飛ばして、なんでいきなりv4.0がリリースされたのかという疑問だと思います。これにはio.jsというプロダクトが関係しています。

2014年の年末、io.jsというプロダクトが発表され、2015年の初めにv1.0がリリースされました。io.jsというのは Node.js のforkで別リポジトリによって実装されたプロダクトです。io.jsの詳細は筆者のブログを確認してください。io.jsがリリースされた後、週次リリースという早いサイクルでリリースするモデルを確立し、8カ月間もの間リリースを続けてきました。結果として、io.jsはv3までリリースされています。

紆余曲折を経た後に、Node.jsはこのio.jsと再び統合されることになります。統合までの経緯について、興味がある読者の方は筆者のYAPCでの発表資料を参考にしてください。

統合される際にio.jsの既存バージョンと競合しないようにした結果、Node.jsはv1.0からv3.0を飛ばしていきなりv4.0がリリースされることになりました。

Node.js v4とNode.js v0.12の違い

Node.js v4はio.js v3が元になっています。つまり、io.js v1からv3までにはいった機能が、そのままNode.js v4では利用可能です。筆者がまとめた内容を元に、Node.js v4で入った新機能や違いを解説します。また、v5で入った機能は本資料の最後にまとめて紹介します。

JavaScript Syntax/Built-in Object の違い

Node.js v4は内部的にJavaScript実行エンジンである、V8のv4.5を採用しています。これにより下記の部分でJavaScript全体の機能が進化しました。

ES2015のサポート範囲拡大
StrongScript等のJavaScriptの新機能対応
Intlオブジェクトのサポートによる国際化対応

一つ一つ説明していきます。

ES2015のサポート範囲拡大

ES2015のサポート範囲がNode.js v0.12と比較して拡大しました。具体的には下記の機能がデフォルトで有効になっています。

let/const等のblock scope (“use strict”が必須)
class構文(“use strict”が必須)
Map/Set/WeakMap/WeakSetといった新しいコレクションオブジェクト
Generator構文
Binary/Octalリテラル
Symbolオブジェクト
Template Stringリテラル
String.prototype.repeat
Symbol.toStringTag
拡張Objectリテラル
Unicodeリテラル
アロー関数

ES2015の構文のサポート範囲が変わったことで今までNode.jsで記述していたJavaScriptは変わっていくだろうと予測されます。具体的にどのように変わるのか、EventEmitterを拡張してMyEventEmitterを作るというケースを参考に考えてみましょう。

v0.12まではEventEmitterを拡張する場合、以下のように記述していました。

'use strict';
var events = require('events');
var util = require('util');
var EventEmitter = events.EventEmitter;
var MyEventEmitter = function(data) {
  this.data = data;
};

// EventEmitterを継承する
util.inherits(MyEventEmitter, EventEmitter);

MyEventEmitter.prototype.intervalCheck = function() {
  var originalData = this.data;
  var _this = this;
  setInterval(function (){
    if (originalData !== _this.data) {
      _this.emit('change', new Date() + ': ' + _this.data);
      originalData = _this.data;
    }
  }, 1000);
};

module.exports = MyEventEmitter;

このMyEventEmitterは、intervalCheckという内部的にdataが変わっていないかどうかを1秒ずつ調べて変更があったら、changeイベントを発火させるという動きを行っています。v4からは下記のようにES2015の構文を使って下記のように記述します。

'use strict';
// 変更されないようにするためにconstで変数宣言する
const events = require('events');
const EventEmitter = events.EventEmitter;

// util.inheritsではなく、class構文とextendsを使う
class MyEventEmitter extends EventEmitter {
  constructor(data) {
    this.data = data;
  }
  intervalCheck() {
    // 基本的にletで変数宣言する
    let originalData = this.data;
    // アロー関数を利用する。
    setInterval(() => {
      if (originalData !== this.data) {
        // Template String Literalで変数の情報を文字列に埋め込む
        this.emit('change', `${new Date()}: ${this.data}`);
        originalData = this.data;
      }
    }, 1000);
  }
}

module.exports = MyEventEmitter;

ひとつ前のコードと比較すると大分コードが短く、シンプルに記述できるようになっていることがわかります。 Node.js v5.0では、Spread callやnew.targetなどの新しい機能も使えるようになっています。ただし、現時点ではまだ下記のような機能は有効になっていません。

default params
rest params
tail call optimization
Proxy/Reflect
modules

StrongScript等のJavaScriptの新機能対応

StrongScriptというのはES2015のコードを強制させ、JavaScriptの実行エンジンにとって親和性の高いコードを生成するための新しい試みです。もともとJavaScriptにはuse strictをつけることで厳格モードというモードになりますが、この厳格モードをより強くしたモードです。

StrongScriptはreadability(読みやすさ)の向上とpredictability(予測しやすさ) の向上という2つの事を狙った試みであり、特にpredictabilityが上がることでJavaScriptの実行エンジンフレンドリーになり、全体的に性能が上がる事が期待されます。

"use strong";

function foo() {
  //下記のコードは、StrongModeでは全てエラーになります。
  // varを利用する代わりにlet、もしくはconstを使いましょう。
  var obj1 = 'aaa'; // Restrict var (use let or const instead)

  // argumentsの代わりに、restパラメータを使いましょう
  let args = arguments; // Restrict arguments (use Rest Params …args)

  // ==の代わりに、strict equal ===を使いましょう
  if (obj1 == 'aaa') {}  // Restrict == (use strict equal ===)

  // if とか for のあとにうっかり ; を置くけど、空の式を置くのは間違いの元なのでやめましょう。
  if (obj1 === 'aaa'); // Restrict empty if and for

  // for-inの代わりに、for-ofを使いましょう。
  for (let n in [1,2,3]) // Restrict for-in (use for-of instead)

  // delete構文を使うなら、Map/Setを代わりに使いましょう。
  delete obj1.key // Restrict delete operator (use Map/Set instead)

  // undefined っていう名前の変数に何かを入れるのはやめましょう。
  let undefined = 'aaa'; // Restrict undefined binding

  // 未定義のプロパティに、勝手にアサインするのはやめましょう。
  let obj3 = { foo : 'aaa'};
  obj3.bar = '123'; // Restrict undefined property access 
}

本コードを実行するためには、"use strong"ディレクティブを書くだけじゃなく、実行時のオプションとして--strong_modeオプションが必要です。

$ node --strong_mode weak.js

StrongScriptの詳細については、以前まとめた資料があるのでご一読ください。StrongScriptについて

Intlオブジェクトのサポートによる国際化対応

ECMAScript国際対応用のAPIが利用できるようになっています。ECMA-402と呼ばれる仕様で通称ESIntlと呼ばれています。これを利用することで例えば時刻表期の国際化対応や通貨表記の国際化対応ができるようになります。

ただしデフォルトでは利用できないので、ビルドするときにオプションを指定する必要があります。下記のようにオプションを指定して実行すると有効になります。

$ ./configure --with-intl=full-icu --download=all
$ make
$ make install

これを使うと新たにIntlというbuilt-inオブジェクトがglobal空間に生成されて使えるようになります。文字列比較処理から見ていきましょう。文字列比較をする際に日本語にはカタカナやひらがなといった表記の違いとまた句読点といった区切りが存在します。

読みやすくするためには表記の違いを使い分けたり、句読点をしかるべき所に入れる必要がありますが、プログラミングで文字列をソートしたり、検索するときなどはこれらの区別が不要なときも多いです。こういう場合に利用するのがIntl.Collatorというクラスです。利用方法は以下のとおり。

// 文字列比較系

console.log(new Intl.Collator('ja', {
  sensitivity: 'base'  // 文字の派生系を同値と見なします、カタカナとひらがなの区別もつけません。Ex.か==が , ぴ == ヒ, あ != い
}).compare('ハハ', 'パパ'));  // 0 つまり同値

console.log(new Intl.Collator('ja', {
  sensitivity: 'accent'  // 文字で発音が同じものを同値と見なします。baseの中で派生系は不等という指定です。Ex. は == ハ , ぴ != ひ, あ != い
}).compare('ハハ', 'はは'));  // 0 つまり同値

console.log(new Intl.Collator('ja', { 
  sensitivity: 'accent', 
  ignorePunctuation: true // 句読点を無視するかどうか、デフォルトはfalse 
}).compare('わたしは、ふるかわです', 'わたしはふるかわです')); // 0 つまり同値

また、この他にも時刻表記(Intl.DateTimeFormat)や通貨表記(Intl.Numberformat)といった数字の表記を、国際化対応することが可能です。

// 日付フォーマット系
var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
console.log(new Intl.DateTimeFormat('en').format(date)); // 12/20/2012
console.log(new Intl.DateTimeFormat('ja').format(date)); // 2012/12/20
console.log(new Intl.DateTimeFormat('ja-JP-u-ca-japanese').format(date)); // 平成24/12/20

// 数値フォーマット系
console.log(new Intl.NumberFormat('en').format(10000000)); // 10,000,000
console.log(new Intl.NumberFormat('ja', {style: 'currency', currency: 'JPY'}).format(10000000)); //￥10,000,000
console.log(new Intl.NumberFormat('en', {style: 'percent', }).format(0.230232)); // 23.023%

API 部分の変更

実は今回のNode.js v4では、JavaScriptの文法部分での進化と内部でのリファクタリングは進んでいるものの、APIとして新しい機能はそこまで増えていません。追加された機能はいくつかありますが、主だったものとしては下記の通りです。

Buffer#indexOfの追加
Simple Stream Constructionの追加
os.homeDir()が追加

一つ一つ説明していきます。

Buffer API の変更

Node.jsには、Bufferと呼ばれるbinaryデータを扱うためのAPIが存在します。普通にNode.jsのライブラリを利用するときにはあまり意識していないかもしれませんが、fsからreadFileした時の戻り値やhttpのPOSTメッセージを受け取った時は基本的にBuffer型の値を受け取っています。JavaScriptにはArrayBufferという似たオブジェクトが存在しますが、v4.0.0からはこのArrayBufferをBufferが継承する形になりました。これによってArrayBufferで利用可能なAPIはBufferでも利用可能になります。

またそれとは別にBufferにindexOfメソッドが増えました。これによりわざわざ文字列に変換しなくてもBufferとしてそのまま文字列を含んでいるかどうかを検索することができるようになります。

var fs = require('fs');

// ./foo.txt => yosuke furukawa
fs.readFile(__dirname + '/foo.txt', function(err, buf){
  console.log(buf.indexOf('furukawa')); // 7
});

これまではindexOfなどの文字列検索をする場合、一旦toStringを使って文字列を変換する必要がありました。これはNode.js内部では、Buffer型からstring型への変換をしている上にさらにHeapメモリを消費してしまうため、メモリ効率的にも速度効率的にも悪いというデメリットが有りました。今回のv4.0からはindexOfメソッドがBufferで利用可能になっているため、このデメリットを解消しています。また内部的にもこのメソッドを利用することで速度の向上が見られます。

また、ArrayBufferで再実装された影響で以下のようなArrayBufferをそのままコンストラクタに入れられるようになりました。

const Buffer = require('buffer').Buffer;
const ab = new ArrayBuffer(16);
var buf = new Buffer(ab); // Buffer constructor accepts ArrayBuffer.

console.log(buf instanceof Uint8Array); // true
console.log(buf instanceof Buffer); // true

buf.writeUInt32BE(0x61626364, 0);

console.log(buf.toString()); //abcd

Simple Stream Construction の追加

Streamの作成が簡単になりました。今までStreamを作るためには、目的のStreamを継承して、TransformStreamであれば _transformのようなメソッドを拡張して実現する必要がありました。これをより簡単にしたものがthrough2に代表されるヘルパライブラリでしたが、簡単にいえばこのthrough2がなくても Node.js v4.0ではStreamを作るのが簡単にできるようになりました。

// これまで
var Transform = require('stream').Transform;
var util = require('util');

util.inherits(MyTransform, Transform);

function MyTransform(opts){
    Transform.call(this, opts);
}

MyTransform.prototype._transform = function(chunk, encoding, callback){
  // ここで変換して
  ...
  // pushする
  this.push(chunk);
};

MyTransform.prototype._flush = function(done){
  // 最後に何かしたければここで flush する
};

// これから
var stream = require('stream');
var transform = new stream.Transform({
  transform: function(chunk, encoding, next) {
    // ここで変換して
    ...
    // pushする
    this.push(chunk);
  },
  flush: function(done) {
    // 最後に何かしたければここでflushする
  }
});

詳しくはこちらのAPI資料を参考にしてください。

os.homedir機能の追加

HOMEディレクトリを取得するための関数os.homedirが追加されました。

const os = require('os');
console.log(os.homedir()); // /User/yosuke

今まではHOMEの環境変数から取得したり色々な方法で解決していましたが、これからはos.homedir関数で取得することができます。

性能向上

v8のバージョンアップ、http_parserモジュールのバージョンアップにより、これまでよりも性能が8%ほど向上しています。まだ、前述したBufferの改善により、メモリ効率的にも向上が見られます。

この結果を見ていただくと分かる通り、Requests/secondベースでhttpの速度が8%程改善されています。

またこちらの結果では、性能改善はもとより、メモリ効率的にも効率化されていることがわかります。

httpだけではなく、fsにwritev書き込みをするモードが追加されたり、require関数の無駄な処理を省いて高速化するといったことが行われています。

Deprecated になったAPI

残念ながら、deprecatedになったAPIも存在します。下記のAPIは今後は使わないようにしてください。

domains(エラーはキャッチできるものの、キャッチしたエラーでできることが少ない)
fs.exist/existSync(存在確認後に別プロセスから消されることもあるのでRace Conditionに弱い)
util.isObject/isNumberなどのisXXX系(一部既存のライブラリの関数と異なる振る舞いがあり、使いにくいため)

Node.js v4のNode.js v0.12は互換性はあるのか

JavaScriptのレイヤは互換性があります。ほとんどのモジュールはそのまま動くでしょう。ただし、CやC++のnative module をバインディングして作っているライブラリはV8がバージョンアップされたことにより、内部のABIの互換が崩れているため動かなくなります。それらのモジュールが、まだv4.0に対応するまではアップグレードをしても動きません。

C/C++のnativeモジュールの問題で動いていないモジュールを確認するためにはこのissueを確認していただくとよいと思います。

https://github.com/nodejs/node/issues/2798

Node.js v4とNode.js v5の違い

Node.js v4はLTSというリリースしてから2年半サポートするサポートポリシーがついていますが、Node.js v5にはついていません。つまり、 Node.js v5は次のバージョンが出たらサポートされなくなります。今のところ、 LTSの対象になるのは偶数のバージョンとされています。ただし、偶数のバージョンが必ずLTSというわけではなく、今のところ偶然そういうバージョンになっているというのが正しい状態なので、きちんとLTSかどうかを把握するためには、バージョン番号の他にLTS識別名(ArgonやBoron等の元素名)が付いていることを確認したほうがよいです。

確認するには、公式サイトのトップページに書いてある情報から識別するのが簡単です。

公式サイト

v0.10からv0.12までのLTSプランについては下記の図を参考にしてください。

スケジュール

Node.js v5には、npmのバージョン3やALPNサポートがついています。ただし、v5.0は前述したとおりLTSバージョンではないので次のバージョンからはサポートされません。最新の機能を使ってみたい方向けのバージョンになります。実際に最新の機能を使ってみたい場合は、Node.js v5を利用するのがいいかと思います。

まとめ

Node.js v4.0がリリースされました。実際にすでにプロダクションで使っているところもある安定したバージョンになります。また、Node.js v4.0には新しいJavaScriptであるES2015の機能が使えるようになっています。APIにもいくつか変更があるのと、性能が改善されています。

また、LTSということで、今から2年半、2018年4月まではメンテナンスされる予定です。v5もすでにリリースされていますが、これは今のところ最新の機能を使ってみたいedgeなエンジニア向けのバージョンです。

バージョンの違いを意識した上で利用してください。

また、Node.jsのv0.10やv0.12を使っている人たちはまだ多いと思いますが、来年の末には両方のバージョンともにサポートが切れるので、今のうちから新しいバージョンにバージョンアップを検討しておくことをおすすめします。