5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

CompodocでAngularのドキュメンテーションを生成してみる

Last updated at Posted at 2020-07-16

##Compodocとは
CompodocはAngularのドキュメンテーションをコマンドだけで自動生成してくれる便利なパッケージです。一般的なドキュメンテーションに加えて、コンポーネントなどの相関図やDOMツリーなどの一目でわかる図も生成コマンド一つでやってくれます。参考までに公式のサンプルの図を掲載しておきます。
Screen Shot 2020-07-16 at 20.53.34.png

##インストールしてみた
Screen Shot 2020-07-16 at 21.12.35.png

公式のインストールガイドではnpmを使っていますが、yarnの場合もターミナルで
yarn add "@compodoc/compodoc"と打ち込むだけでインストール完了です。さらにpackege.jsonに

//package.json
//tsconfig.app.jsonのディレクトリパスは自分のものを適用してください

"scripts": {
  "compodoc": "npx compodoc -p src/tsconfig.app.json"
}

と追加しておけば、npm run compodoc またはyarn compodocのコマンドを実行するだけでドキュメンテーションが生成されます。自分の環境では上記のようにしてもmain.tsしか認識されずコンポーネント等は無視されてしまったので、tsconfig.app.jsonの代わりにtsconfig.jsonにパスを通したら正常に生成されました。

また、サーバー起動もcompodoc -p src/tsconfig.json -sのコマンドでできます。デフォルトのアドレスはhttp://localhost:8080です。例としてnpx compodoc -p ./tsconfig.json -s -r 9000のコマンドでポート指定を変えてhttp://localhost:9000に設定することもできます。

##コメントやタグについて
生成するためのコメントの仕方は特に他の言語のものと変わらないと思います。

/**
 * supported comment
 */


/*
 * unsupported comment
 */


/*
  unsupported comment
 */


// unsupported comment

タグは公式ページを参照してください。JSDocタグのうち全てが使えるわけではないようなので、使う人によってはTypeDocの方がいいかもしれません。

5
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?