Sarabande.jp

Golang: ベータ版や　RC 版をインストールする

Tue, 08 Aug 2017 17:25:27 +0900

go 1.8、19 のベータ版や RC 版は go get コマンドでインストールできる。

# https://twitter.com/golang/status/894686139361120256
# https://godoc.org/golang.org/x/build/version

go get golang.org/x/build/version/go1.9rc2
go1.9rc2 download
go1.9rc2 version

Node.js: CGI を通して利用する

Tue, 08 Aug 2017 16:27:28 +0900

h2o の CGI として node.js のスクリプトを動かしてみた。macOS の場合、#!/usr/bin/env node がエラーになった。

#!/usr/local/bin/node

console.log('Content-type: text/plain; charset=utf-8');
console.log('');
console.log('Hello World');

サーバーにインストールされているバージョンを調べるには次の行を追加する。

console.log('Version: ' + process.version);

Golang: CGI を利用する

Tue, 08 Aug 2017 03:37:17 +0900

ふと h2o で Go の CGI を試したくなったので書いてみた。

package main

import "fmt"

func main() {
  fmt.Print("Content-type: text/plain; charset=utf-8\n\n")
  fmt.Println("Hello World!")
}

h2o の設定は次のとおり。

file.custom-handler:
  extension: .cgi
  fastcgi.spawn:
    command: "exec /usr/local/share/h2o/fastcgi-cgi"
listen:
  port: 8080
  ssl:
    certificate-file: /usr/local/etc/ssl/server.crt
    key-file: /usr/local/etc/ssl/server.key
hosts:
  "127.0.0.1.xip.io:8080":
    paths:
      /:
        file.dir: /Users/masakielastic/public_html

Node.js: browserify の復習

Wed, 12 Jul 2017 06:28:26 +0900

browserify の復習。ES2015 とそれ以降の標準をまとめて導入できる babel-preset-env、コードを圧縮してくれるbabel-preset-babili を一緒に導入する。

yarn add --dev browserify babelify watchify
yarn add --dev babel-preset-env babel-preset-babili

トランスパイルの実行は次のとおり。

browserify app.js -o bundle.js -t [ babelify --presets [ env babili ] ]

watchify による監視は次のとおり。

watchify -v -d app.js -o bundle.js -t [ babelify --presets [ env babili ] ]

React: create-react-app によるプロジェクトのセットアップ

Wed, 12 Jul 2017 02:36:14 +0900

開発に必要なツールが一通りそろっている。

yarn global add create-react-app
create-react-app my-app
cd my-app
yarn start

Babel 6: 2017年夏のクィックスタート

Wed, 12 Jul 2017 01:10:43 +0900

npm よりも高速にダウンロードできる yarn が広まってきています。npm 5.2 で npx が導入され、package.json の scripts でサブコマンドを自分で定義する手間を省けるようになりました。

// https://twitter.com/masakielastic/status/884805009124212736
yarn add --dev babel-cli babel-preset-env
echo "class Foo {}" > app.js; 
npx babel --presets env app.js

node.js で直接スクリプトを実行するには babel-node を使います。

npx babel-node app.js

babili (babel-minify) による圧縮も加えてみよう。次のコマンドでプレセットを追加する。

yarn add --dev babel-preset-babili

babili による圧縮を伴うトランスパイルを実行してみよう。

npx babel --presets=env,babili app.js

JavaScript: テストツールの Jest を導入する

Tue, 11 Jul 2017 23:33:01 +0900

Facebook が開発している Jest を使い始めることにした。

yarn add --dev jest

// sum.js

function sum(a, b) {
  return a + b;
}
module.exports = sum;

// sum.test.js
const sum = require('./sum');

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

]

テストを実行してみよう。npx は npm 5.2 で導入されたツールです。

npx jest

今度は Babel を導入してみましょう。

yarn add --dev babel-preset-env babel-jest

package.json には次のコードを追加します。オプションを何も指定しないのであれば babel-preset-latest と同じです。

{
  "babel": {
    "presets": ["env"]
  }
}

sum.test.js を修正して import 文を使うようにしましょう。

import sum from './sum';

test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

npx jest を実行します。

JavaScript: 複数の Promise をまとめる

Mon, 10 Jul 2017 10:03:06 +0900

Promise.all を使う。

const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log("p1 を実行しています。");
    resolve("p1");
  }, 1000);
});

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log("p2 を実行しています。");
    resolve("p2");
  }, 2000);
});

const p3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log("p3 を実行しています。");
    resolve("p3");
  }, 3000);
});

Promise.all([p1, p2, p3]).then(([a, ...rest]) => {
  console.log(a, rest);
});

JavaScript: タイムアウトした処理にエラーとして扱う

Mon, 10 Jul 2017 02:31:26 +0900

HTTP リクエストのように処理が一定の時間を超える場合、エラーとして扱う必要がある場合、 Promise.race を使う。Bluebird を使ったコードの例は次のとおり。

const Bluebird = require('bluebird');

const p1 = Bluebird.resolve('成功').delay(500);
const p2 = Bluebird.reject(new Error('失敗')).delay(800);

Bluebird.race([p1, p2])
  .then(value => {
    console.log(value);
  })
  .catch(value => {
    console.log(value);
  });

timeout メソッドで処理時間の上限を指定することができます。

const Promise = require("bluebird");
const p1 = Promise.resolve("成功").delay(300);

p1.timeout(100)
  .then((value) => {
    console.log(value);
  }).catch(Promise.TimeoutError, (e) => {
    console.log("エラー";
  });

ES2015 Promise の場合、Promise.race を使うことができます。

const p1 = new Promise((resolve, reject) => {
  setTimeout((value) => {
    console.log("p1 を実行してます。");
    resolve(value);
  }, 700, "成功");
});
const p2 = new Promise((resolve, reject) => {
    setTimeout((value) => {
      console.log("p2 を実行しています。");
      reject(value);
    }, 500, "失敗");
});

Promise.race([p1, p2])
  .then((value) => {
    console.log(value);
  })
  .catch((value) => {
    console.log(value);
  });

毎回エラー処理を書かなくてすむようにタイムアウトを指定できる Promise を返す関数を定義してみましょう。

function timeout(p, ms) {
  const wait = new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log("エラー処理をしています。");
        reject(new Error("エラー"));
      }, ms);
  });

  return Promise.race([p, wait]);
}

const p = new Promise((resolve, reject) => {
  setTimeout((value) => {
    console.log("p1 を実行してます。");
    resolve(value);
  }, 2000, "成功");
});

timeout(p, 3000)
  .then((value) => {
    console.log(value);
  })
  .catch((value) => {
    console.log(value);
  });

追記。Promise.race を使わなくてもタイムアウトは実現できます。

// https://github.com/github/fetch/issues/175#issuecomment-284787564

function timeout(promise, ms) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("タイムアウトを処理しています。");
      reject(new Error("timeout"))
    }, ms);
    promise.then(resolve, reject);
  })
}
const p = new Promise((resolve, reject) => {
  setTimeout((value) => {
    console.log("p1 を実行してます。");
    resolve(value);
  }, 2000, "成功");
});

timeout(p, 1000)
  .then((value) => {
    console.log(value);
  })
  .catch((value) => {
    console.log(value);
  });

最初に resolve もしくは reject されたものが考慮され、そのほかは無視されることは次のコードでも確認できます。

const p = new Promise((resolve, reject) => {
  setTimeout((value) => { console.log("resolve を実行しています。"); resolve(value); }, 1000, "成功");
  setTimeout((value) => { console.log("resolve2 を実行しています。"); resolve(value); }, 2000, "成功2");
  setTimeout((value) => { console.log("reject を実行しています。"); resolve(value); }, 3000, "失敗");
});

p.then((value) => {
   console.log(value);
 })
 .catch((value) => {
   console.log(value);
 });

JavaScript: setTimeout でコールバック地獄を体験する

Fri, 07 Jul 2017 21:00:47 +0900

コールバック地獄のコードの例を見ると、そのままでは実行できないものばかりなので、setTimeout を題材にすることにした。

let msg = "Hello";

setTimeout(() => {
  console.log(msg);
  setTimeout(() => {
    console.log(msg);
    setTimeout(() => {
      console.log(msg);
      setTimeout(() => {
        console.log(msg);
      }, 1000);
    }, 1000);
  }, 1000);
}, 1000);

グローバル変数を使わずに setTimeout の第3引数で渡すなら次のようになる。

const msg = "Hello";

setTimeout((value) => {
  console.log(value);
  setTimeout((value) => {
    console.log(value);
    setTimeout((value) => {
      console.log(value);
      setTimeout((value) => {
        console.log(value);
      }, 1000, value);
    }, 1000, value);
  }, 1000, value);
}, 1000, msg);

Bluebird.js を使うと次のように置き換えることができる。

const p = require('bluebird').resolve("Hello");

p.delay(1000)
 .tap(console.log)
 .delay(1000)
 .tap(console.log)
 .delay(1000)
 .tap(console.log)
 .delay(1000)
 .tap(console.log)

JavaScript: Chrome 61 で ES2015 モジュールを使う

Fri, 07 Jul 2017 07:58:31 +0900

chrome://flags/ で Experimental Web Platform features を有効にすれば ES2015 モジュールを利用できるようになりました。 type 属性の値に module を指定します。モジュールの拡張子を省略すると console.log の結果が表示されませんでした。

<script type="module">
import {hello} from './hello.js';
console.log(hello());
</script>

// hello.js
export function hello() {
  return 'Hello';
}

MacOS: ヘッドレス Chrome を使う

Fri, 07 Jul 2017 03:52:38 +0900

MacOS の場合、Bash で次のエイリアスを定義する。

alias chrome="/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome"

スクリーンショットをとってみましょう。

chrome --headless --disable-gpu --screenshot https://www.chromestatus.com/

次に Node.js の chrome-remote-interface を試してみましょう。

マニュアルのコードをそのまま利用させてもらいます。

const CDP = require('chrome-remote-interface');

CDP({ port:9222 }, (client) => {
    // extract domains
    const {Network, Page} = client;
    // setup handlers
    Network.requestWillBeSent((params) => {
        console.log(params.request.url);
    });
    Page.loadEventFired(() => {
        client.close();
    });
    // enable events then start!
    Promise.all([
        Network.enable(),
        Page.enable()
    ]).then(() => {
        return Page.navigate({url: 'https://github.com'});
    }).catch((err) => {
        console.error(err);
        client.close();
    });
}).on('error', (err) => {
    // cannot connect to the remote endpoint
    console.error(err);
});

Node.js の chrome-launcher で Chrome を起動させてみましょう。

const chromeLauncher = require('chrome-launcher');

chromeLauncher.launch({
  port: 9222,
  chromeFlags: ['--headless', '--disable-gpu']
}).then(chrome => {
  console.log(`Chrome debugging port running on ${chrome.port}`);
});

Chrome を終了させるには kill メソッドを呼び出します。

chrome.kill().then(() => {
  console.log('終了しました。');
});

コマンドラインで Chrome を起動させるのであれば次次のようにコマンドコマンドを実行します。

chrome \
  --headless \
  --disable-gpu \
  --remote-debugging-port=9222 \
  https://www.chromestatus.com

JavaScript: yield で Promise を返す

Sun, 02 Jul 2017 09:18:22 +0900

async/await に馴れた後でジェネレーターを再学習することにした。ジェネレーターのコードの実行には co を導入。

const co = require('co');

co(function* () {
  return yield Promise.resolve('成功');
})
.then((value) => console.log(value));


co(function* () {
  return yield Promise.reject('失敗');
})
.catch((value) => console.log(value));

JavaScript: 処理を遅延させて Promise を返す

Sun, 02 Jul 2017 08:12:37 +0900

Bluebird.js が用意している Promise.delay に相当する関数を自分で定義してみよう。

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

delay(1000).then(() => console.log('終了'));

delay はモジュールとしても配布されている。

async/await を使えば同期的な停止を使うことができる。

function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function run() {
  console.log('開始');
  await delay(3000);
  console.log('終了');
}

run();

JavaScript: Promise.try

Sun, 02 Jul 2017 06:30:10 +0900

TC39 で Promise.try が提案されている。2017年7月時点でステージ1。通常の Promise のコンストラクターと比べて resolve と reject のコールバックを指定しなくてすむことがメリットである。次のコードスニペットですぐに試すことができる。ポリフィルも公開されている。

# https://github.com/tc39/proposal-promise-try
# https://twitter.com/RReverser/status/695678489937186816
Promise.try = function(cb) { return new this(r => r(cb())) };

まずは正常な値を扱ってみよう。

const p = Promise
  .try(() => "Hello")
  .then((value) => console.log("then", value));

今度はエラーを投げてみよう。

const p = Promise
  .try(() => {
    throw new Error("Error");
  })
  .then((value) => console.log("then"))
  .catch((error) => console.log("catch", error));

async/await を使うと次のように書き換えることができる。

async function run() {
  try {
    const msg = await Promise.try(() => { throw new Error("failed"); });
    console.log('then: ');
  } catch(error) {
    console.log('catch: ', error);
  }
}

run();

JavaScript: Promise.reject に Error のインスタンスを渡す

Sun, 02 Jul 2017 03:39:27 +0900

Promise.reject には文字列以外に Error のインスタンスを渡すこともできる。

const p = Promise
  .reject(new Error('fail'))
  .then(() => console.log('then'))
  .catch(error => console.log('catch'));

JavaScript: Promise.prototype.finally

Sun, 02 Jul 2017 03:12:10 +0900

tc39 で Promise.prototype.finally が提案されている。

const p = Promise.resolve('Hello')
  .then(value => console.log('then', value))
  .finally(() => console.log('finally'));

node.js で v8 のフラグを指定すれば試すことができる。

node --harmony_promise_finally test.js

async/await で書き換えると次のとおり。こちらは v8 のフラグは不要である。

async function run() {
  try {
    const msg = await Promise.resolve('Hello');
    console.log('then', msg);
  } finally {
    console.log('finally')
  }
}

run();

Emscripten: C 言語のプログラムを JavaScript に変換する

Sun, 02 Jul 2017 02:21:24 +0900

Emscripten は homebrew でインストールできる。

brew install emscripten

バージョンをチェックしてみよう。

emcc -v

設定ファイルの ~/.emscripten が生成されるので修正する。

# https://github.com/kripken/emscripten/issues/1723#issuecomment-242385279
LLVM_ROOT = '/usr/local/opt/emscripten/libexec/llvm/bin'

再度 emcc -v を実行してエラーメッセージが表示されないことを確認する。

C 言語のファイルを用意する。

#include <stdio.h>

int main() {
  printf("hello, world!\n");
  return 0;
}

コンパイルしてみよう。

emcc hello.c -o hello.js

生成された hello.js を node で実行すると Hello World が表示される。

今度は C 言語で定義した関数を JavaScript で使ってみよう。まずは関数を定義する。

int add(int a, int b) {
    return a + b;
}

ビルドする際に関数の名前を指定する。

emcc -s EXPORTED_FUNCTIONS="['_add']" add.c -o add.js

モジュールとして読み込み、実行してみよう。

const m = require('./add');

console.log(m._add(1, 2));

Node.js: nvm から nvs (Node Version Switcher) に乗り換える

Sat, 01 Jul 2017 20:50:40 +0900

Node.js の通常版、開発版に加えて ChakraCore の通常版および開発版を利用するために nvm から nvs (Node Version Switcher) に乗り換えました。 nvm は通常版だけを扱うことを方針としており、homebrew で導入した場合とあまり変わらないというのは潜在的な不満でした。 nvs に乗り換えた理由のもう1つは Windows に対応していることです。nvm は Windows に対応していないので、 nvm-windows のような別のプロジェクトのツールを導入する必要があります。

MacOS で nvs をインストールするには次のコマンドを実行します。

export NVS_HOME="$HOME/.nvs"
git clone https://github.com/jasongin/nvs "$NVS_HOME"
. "$NVS_HOME/nvs.sh" install

インストールした後で .profile に次のコードを追加しました。

export NVS_HOME="$HOME/.nvs"
. "$NVS_HOME/nvs.sh"

nvs コマンドを実行すれば、インストールできるパッケージの選択肢が表示されますので、上下ボタンとエンターキーで選びます。デフォルトで使うバージョンを .profile に追記しておきます。

nvs use node/8.1
nvs use chakracore/8.1

JavaScript: AsyncIterator を試す

Fri, 30 Jun 2017 21:09:36 +0900

TypeScript 2.3 で AsyncIterator を試してみた。

import 'core-js/shim';

function sleep(ms = 0) {
  return new Promise(r => setTimeout(r, ms));
}

async function* g() {
  yield 1;
  await sleep(100);
  yield 2;
  await sleep(100);
  yield 3;
}

async function f() {
  for await (const x of g()) {
     console.log(x);
  }
}

f();

tsconfig.json は次のとおり。

{
  "compilerOptions": {
    "target": "es2015",
    "moduleResolution": "node",
    "module": "commonjs",
    "lib": [
      "dom",
      "es2015",
      "esnext.asynciterable"
    ]
  }
}

core-js をインストールする。

// https://stackoverflow.com/q/43694281/531320
npm install core-js --save