1. JSDoc ToolKit
~ javascript documentation ~
2011/12/26
h13i32maru@Twitter
maruyama-r@KLab

2. 自己紹介
• 丸山 亮(h13i32maru) 最近はJSを触ってます
• KLab株式会社所属
32 http://blog.h13i32maru.jp
http://twitter.com/h13i32maru
https://www.facebook.com/ryo.maruyama
https://github.com/h13i32maru

3. ドキュメント大事ですよね

4. でも書くのは面倒(´・ω・｀)

5. じゃあせめてクラス・メソッドの
リファレンスは書こう(・∀・)

6. Hoge Doc
• Java Docに代表されるHoge Docって結構ある
• Java Doc
• PHP Documenter
• Py Doc
• RDoc

7. JSDoc ToolKit
• Javascript用ドキュメントツール
• JSDocの後継
• @hoge foo barスタイルのJava Doc風

8. /**
* @class /ALLIANCE/作成
* @author <a href="mailto:sano-n@klab.jp">Naohide Sano</a> (sano-
n)
* @extends KNGP.GLPage
*/
var AllianceCreatePage = KNGP.GLPage.subclass(
/** @lends AllianceCreatePage.prototype */
{
/**
* Sets current step on the page.
* And control UI enabling.
* @private
* @param {Number} step
*/
_setStep: function(step) {
//...
}
}

9. アノテーション
• 動的言語ならではのアノテーション
• @extends
• @lends
• @constructor
• @class, @function, @field
• @private

10. 独自アノテーションも
追加したいな(´・ω・｀)

11. プラグイン
• Javascriptでプラグインも簡単に作れる
• ドキュメント生成時の各ライフサイクルをフック

12. JSDOC.PluginManager.registerPlugin(
"JSDOC.tagSynonyms",
{
onDocCommentSrc: function(comment) {
comment.src = comment.src.replace(/@methodOfb/i, "@function
n@memberOf");
comment.src = comment.src.replace(/@fieldOfb/i, "@field
n@memberOf");
},
onDocCommentTags: function(comment) {
for (var i = 0, l = comment.tags.length; i < l; i++) {
var title = comment.tags[i].title.toLowerCase();
var syn;
if ((syn = JSDOC.tagSynonyms.synonyms["="+title])) {
comment.tags[i].title = syn;
}
}
}
}
);

13. 注意点
• シノニムが結構ある
• @returns == @return
• @constructor == @constructs
• @augments == @extends
• etc...

14. おわり