GitHub 上に ページを作成する

GitHub には username.github.com というサブドメインでユーザページを作ることができます。最近知りました。GitHub Pages に説明が載っています。

私もさっそく作ってみました。

ユーザページの作り方

username.github.com というリポジトリを作って、master ブランチに HTML ファイルをコミットするだけです。

$ mkdir username.github.com
$ cd username.github.com/
$ git init
$ touch index.html
$ git add .
$ git commit -m "first commit"
$ git remote add origin git@github.com:username/username.github.com.git
$ git push origin master

また、http://username.github.com/projectname という URL でプロジェクト (リポジトリ) 専用のページを作ることもできます。

プロジェクトページの作り方

リポジトリに gh-pages という名前のブランチを作るだけです。私は Git のブランチに詳しくないため、先の説明ページのコマンドを写経しました。既存のリポジトリのディレクトリで作業を開始します。

$ cd /path/to/repository
$ git symbolic-ref HEAD refs/heads/gh-pages
$ rm .git/index
$ git clean -fdx
$ echo "My GitHub Page" > index.html
$ git add .
$ git commit -a -m "First pages commit"
$ git push origin gh-pages

試しに Processor.js のサンプルページを上げてみました。

Git でブランチを切り替えるには git-checkout を使えばいいようなので、

$ git checkout origin/master

で、gh-pages ブランチから master ブランチに復帰できます。

master ブランチ内に gh-pages ブランチを submodule で追加する

ブランチの切り替えが面倒になったので、submodule を使って master ブランチから参照するようにしました。

$ cd /path/to/repository
$ git submodule add -b gh-pages git@github.com:username/project.git pages

他の PC で clone したら pages の中身が空になっていました。その場合は submodule の初期化が必要らしいです。

$ cd /path/to/repository
$ git submodule init
$ git submodule update

非同期処理を逐次処理するための JavaScript ライブラリを書きました

非同期処理を逐次処理するための JavaScript ライブラリを書きました。

デモページ

ソースコード

Processor インタフェース

var processor = new Processor();
processor.add(p1).add(p2, p3);
processor.execute();

上記の例では Processor に p1 〜 p3 の非同期処理 (Process) を add メソッドでキューイングして execute メソッドで実行しています。add メソッドに複数の Process を指定した場合、それらは並列で実行されます。並列処理の場合、全ての処理が完了した時点で次のキューに進みます。

Process インタフェース

var p1 = new Process();
p1.execute = function() {
  //do something
  p1.result.message = "Hello World";

  //fire next queue
  this.done();
};

Process は execute と done というインタフェースを持ちます。非同期処理が完了した際に明示的に done を実行してください。また、Process は result というオブジェクトを持ちます。result はバケツのようなもので次の Process に参照が渡ります。最終的に Processor まで参照が渡ります。

Processor のキューに別の Processor を入れる

var subProcessor = new Processor();
subProcessor.add(pA).add(pB);

var mainProcessor = new Processor();
mainProcessor.add(p1).add(p2, p3).add(subProcessor);
mainProcessor.execute();

Processor は Process のサブクラスなので Processor のキューに別の Processor インスタンスを入れることもできます。

prototype ベースの継承方法いろいろ

『JavaScript Patterns』より、prototype ベースの継承方法いろいろ。

1. 最もベーシックな prototype 継承

子クラスの prototype に親クラスのインスタンスを指定します。

function Parent(name) {
  this.name = name || "Adam";
}

Parent.prototype.say = function() {
  return this.name;
};

function Child(name) {
}

function inherit(C, P) {
  C.prototype = new P();
}

欠点は、親クラスの this に設定されたプロパティと prototype が両方継承され、また親クラスのコンストラクタが呼ばれないことです。

2. 親クラスのコンストラクタを利用する

1 番の欠点をである、親のコンストラクタが呼ばれない問題を解決する方法です。

function Parent(name) {
  this.name = name || "Adam";
}

Parent.prototype.say = function() {
  return this.name;
};

function Child(name) {
  Parent.apply(this, arguments);
}

ただし、prototype が継承されないので say メソッドは使えません。継承したいメンバは this に定義する必要があります。

この方法では多重継承も可能です。

function Cat() {
  this.legs = 4;
  this.say = function() {
    return "myao";
  };
}

function Bird() {
  this.wings = 2;
}

function CatWings() {
  Cat.apply(this);
  Bird.apply(this);
}

3. prototype 継承で親のコンストラクタも呼ぶ

1 番と 2 番の合わせ技です。

function Child(name) {
  Parent.apply(this, arguments);
}
Child.prototype = new Parent();

個人的にはこの方法がシンプルで好きです。

4. prototype を共有する

子クラスの prototype に親クラスの prototype を代入しちゃえというやり方。継承するのは prototype に定義されたプロパティ/メソッドのみ、というルールの場合に使います。

function inherit(C, P) {
  C.prototype = P.prototype;
}

ただし prototype を共有することになるので子クラスの変更が親クラスに影響するので、このままでは現実的ではないです。

5. 一時的なクラスを用意する

4 番の欠点を補う方法です。一時的なクラスを用意して間接的に prototype の代入を行います。

function inherit(C, P) {
  var F = function() {
  }
  F.prototype = P.prototype;
  C.prototype = new F();
}

私は最初にこのコードを見たとき 1 番と同じでは…？と思いました。ただし、実際に実行すると違いがわかりました。

function Parent(name) {
  this.name = name || "Adam";    
}

Parent.prototype.say = function() {
  return this.name;
};

function Child() {
}

inherit(Child, Parent);

var child = new Child();
child.say();//undefined

親クラスの this.name はルール通り継承されていません。1 番の方法では Adam が出力されてしまいます。

仮説思考

『仮説思考』の読書メモ。

要するに

問題発見・解決を行う際にはまず仮説を立ててから考えましょうね、という話。一言でザックリ言うなれば、勘を磨けということだと思います。仮説思考を始めて最初の頃は仮説が外れて失敗するけども、訓練によって仮説が当たるようになるそうです。仮説思考の反対の網羅思考の人間は、何かを意思決定する際にありとあらゆる情報を分析しだして、結果、意思決定の速さが遅くなります。四の五の言わずとにかく仮説から。

なにも実行しないことが大きなリスクになる今日、いつまでも選択肢を拡げる情報収集を続けて意思決定のタイミングを遅らせるわけにはいかない。網羅的に情報を収集するのではなく、限られた情報をもとに、仮説思考によって最適な意思決定をすべきなのだ。

目次

1. 仮説とは何か
2. まず、仮説ありき
3. 仮説を使う
4. 仮説を立てる
5. 仮説を検証する
6. 仮説思考力を高める

ビジネスマンのための「発見力」養成講座

『ビジネスマンのための「発見力」養成講座』の読書メモ。

要するに

問題解決の入門書です。できるビジネスマンは、見えるものしか見ないようじゃダメで、見えないものを意識的に見えるようにしていかなければなりません。そのためには「発見力」つまり、ある物事に関心を持って仮説を立てることが超重要。日頃から興味のない分野にも関心をもつようにして、深く掘り下げて考えて仮説を立てる習慣を身につければ、ものは自然と見えてくるそうです。

プロは仮説を持っている。だから、必要な数字や記事が自然に目に飛び込んできて、ふつうの人には見えないものを見ることができるのです。そして、見えるから、さらに突っ込んだ仮説を立て、さらにものが見えるようになるのです。

「セブンイレブンの最後のエヌが小文字である」や「ローソンのロゴを描けますか？」といった読者を引き込む導入がうまいと思いました。2 時間程度で読めて文章も平易なので通勤のおともにおすすめです。著者である小宮一慶氏の、難しいことを簡単な文章で伝える技術は素晴らしいと思いました。

目次

1. 見えているようで、何も見えていない
2. 関心と仮説でものが見える
3. たとえば、こんなふうに見えてくる！
4. 見える力を養う方法
5. ものが見える 10 の小さなヒント

funarg 問題

下記の bar() に渡す無名関数内の value が、どの値 (1 か 1000) にバインドされるかという問題を「funarg 問題 (Function Argument Problem)」というらしい。

function foo(value) {
  return bar(function() {
    return value * 2;
  });
}

function bar(func) {
  var value = 1000;
  return func();
}

var result = foo(1);
console.log(result);//2 or 2000?

モードラインでファイル毎に Vim の設定を記述する

モードラインを使用すると、個別のファイルごとに Vim の設定を書くことができます。
例えば、拡張子は .html でも中身は PHP スクリプトという場合、ファイルを開く度に

:se fenc=php

と入力せずに済みます。

モードラインの書き方

行頭か行末にそのファイルのコメント形式で記述します (でないと見えてしまうしパースエラーになる)。また、vim: 前後のスペースや最後のコロンが無いと認識されないので注意。

<?php
echo 'hoge';
// vim: se ft=php:

参考サイト

• モードラインを使って、ファイルごとにvimエディタのオプションを指定する。 - 名無しのvim使い
• Vim documentation: options