Help.js は、ブラウザと連携した、新しいスタイルのオンラインリファレンス(オンラインで使えるヘルプシステム)です。

まずは、こちらのスライド を参照してください。

WebModule/clone コマンドで作成された WebModule をベースとしたモジュールには基本的に Help.js が組み込まれています。

Help.js には 2つの機能があります。

1. ブラウザの DevTools で利用する Help コマンドを提供します。
2. ソースコードとドキュメントを分離し、ドキュメントを新鮮に保つ仕組みを提供します。

Help コマンドは以下の情報を表示します。

• 関数の内容をクイックダンプします。引数, 型, 戻り値などの情報を素早く確認できます
• API のリファレンスページ( GitHub/wiki ページ)やリポジトリへの直リンクを表示します
• Google や MDN でキーワードを検索するリンクを表示します

Help コマンドが表示するリンクは Chrome, Safari, Opera.next でクリックできます。

Help.js をローカルにクローンし、必要なモジュールをインストールします。

$ git clone git@github.com:uupaa/Help.js.git
$ cd Help.js
$ npm install

ブラウザで Help コマンド説明用のページを2つ( before.html, after.html )開いてください。

$ open test/before.html
$ open test/after.html

before.html は、Help.js を組み込む前の Foo.js (ファイル名は before.js)を読み込んだページで、
after.html は、Help.js を組み込んだ後の Foo.js (ファイル名は after.js)を読み込んだページです。

before.js と after.js のソースコードの相違点 も参照してください。

before.html で DevTools を開き、以下の Foo.help コマンドを実行すると、以下の内容がコンソールに表示されます。

> Foo.help


  function Foo(value) { // @arg Number - the value.
               
      this._value = value;
  }

  Google.search( Foo in github.com ):
      http://www.google.com/search?lr=lang_ja&ie=UTF-8&oe=UTF-8&q=site%3Agithub.com%20Foo
  Google.search( Foo ):
      http://www.google.com/search?lr=lang_ja&ie=UTF-8&oe=UTF-8&q=Foo

表示されるリンクはクリックが可能です。

Help.js を組み込んでいない場合は、残念ながらあまり有益な情報は表示されません。

次に、after.html を DevTools で開き、先ほどと同じコマンドを実行します。

> Foo.help

  function Foo(value) { // @arg Number - the value.
                     
      this._value = value;
  }

  GitHub repository:
      https://github.com/uupaa/Foo.js
  GitHub wiki page:
      https://github.com/uupaa/Foo.js/wiki/Foo#wiki-foo
  Google.search( Foo ):
      http://www.google.com/search?lr=lang_ja&ie=UTF-8&oe=UTF-8&q=Foo

before.js とは表示されるリンクが違っています。

Help.js を組み込んでいる場合は、より的確な情報を表示します。

HelpCommandExamples を参照してください。

こちらも合わせてご覧ください

• Help.js を組み込む
• ソースコードとドキュメントの分離