LoginSignup
1
1

More than 1 year has passed since last update.

TypeScriptのJSDocからMarkdownでドキュメントを自動生成

Posted at

はじめに

この記事では、TypeScriptのJSDocTSDoc)から、TypeDoctypedoc-plugin-markdownを使ってMarkdown形式でドキュメントを自動的に生成する方法を解説します。

この記事の方法を使うと、ソースコードのJSDocから画像のようなドキュメントをMarkdown形式で自動生成できます。
実際に私が自動生成したドキュメントはここから閲覧できます。

なお、ドキュメントを1つのファイルにまとめるオプションは用意されていないようです。

自動生成されたドキュメントのスクリーンショット
自動生成されたドキュメントのスクリーンショット

この記事で解説しないこと

次の内容については、この記事で扱いません。

  • npmやTypeScriptの環境の構築方法
  • TypeScriptの書き方
  • JSDoc(TSDoc)の書き方

始める前に

始める前にまず、TypeScriptの環境を構築しておいてください。また、TypeScriptのソースコードに書かれているJSDocと型情報からドキュメントを生成するため、事前にそれらが整備されている必要があります。

依存関係のインストール

依存関係としてtypedoctypedoc-plugin-markdownをインストールします。

npm install --save-dev typedoc typedoc-plugin-markdown

実行

ここまで来れば、ほぼ完成です。あとはコマンドを実行するだけでdocsディレクトリーにドキュメントが自動で生成されます。

エントリーポイントのTypeScriptファイルのパスは、プロジェクトに合わせて読み替えてください。

npx typedoc --plugin typedoc-plugin-markdown "src/index.ts"

オプション

よく使いそうなオプションを簡単に解説します。すべてのオプションとその説明は、npx typedoc --helpを実行するか、公式サイトから閲覧できます。

--out

ドキュメントを出力するディレクトリーを指定します。デフォルトはdocsです。

--cleanOutputDir

このオプションを指定すると、出力先のディレクトリーを一度空にしてからドキュメントを生成します。

--excludePrivate

このオプションを指定すると、privateな変数やメソッドをドキュメントに載せないようにします。このオプションを指定しなかった場合は、privateな変数やメソッドも掲載されます

内部向けのドキュメントでは指定せず、ライブラリーなどの利用者向けのドキュメントでは指定するといった使い分けになりそうです。

--includeVersion

このオプションを指定すると、ドキュメントにバージョンを記載します。バージョンはpackage.jsonversionの値が使われます。

--readme

このオプションを指定しなかった場合、プロジェクトのルートのREADME.mdがドキュメントのディレクトリーにそのままコピーされたうえで、目次ページを含むほかのページが自動生成されます。

README.mdの代わりに別のファイルをコピーしたい場合は、そのファイルへのパスを指定します。パスの代わりにnoneを指定した場合は、目次ページが[ドキュメントのディレクトリー]/README.mdとして生成されます。

--name

ドキュメントに記載するプロジェクトの名前を指定します。デフォルトではpackage.jsonnameの値が使用されます。package.jsonnameとプロジェクトの正式名称が異なる場合に便利です。

まとめ

この記事では、TypeScriptのJSDocからMarkdown形式でドキュメントを自動生成する方法を解説しました。この方法は、ソースコードにJSDocコメントを記述するだけで、見やすく整理されたドキュメントを作成できるというメリットがあります。

一方で、ドキュメントにサンプルコードを載せたい場合はJSDocの@exampleを使ってソースコード内に記述する必要があり、コメントが冗長になります。

これらの点を踏まえたうえで、ぜひTypeScriptプロジェクトへの導入を検討してみてください。

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