Sarabande.jp

twitter のアカウントは sarabandejp と masakielastic (仕事関係)です。連絡先は masakielastic ＠gmail.com です。

[sarabandejp]

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

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

[sarabandejp]

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

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);

[sarabandejp]

Golang: CGI を利用する

ふと 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

[sarabandejp]

Node.js: browserify の復習

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 ] ]

[sarabandejp]

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

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

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

[sarabandejp]

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

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

[sarabandejp]

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

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 を実行します。

[sarabandejp]

JavaScript: 複数の Promise をまとめる

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); });

[sarabandejp]

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

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); });

[sarabandejp]

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

コールバック地獄のコードの例を見ると、そのままでは実行できないものばかりなので、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)

[sarabandejp]

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

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'; }

[sarabandejp]

MacOS: ヘッドレス Chrome を使う

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

[sarabandejp]

JavaScript: yield で Promise を返す

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));

[sarabandejp]

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

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();

[sarabandejp]

JavaScript: Promise.try

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();

[sarabandejp]

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

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

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

[sarabandejp]

JavaScript: Promise.prototype.finally

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();