JSDocのフォーマットまとめ

# はじめに

自分がよく使うフォーマットを中心に備忘録としてまとめておきます。
IDEの１つであるVSCodeのツールチップとJSDoc出力後のイメージをセットで掲載しておきます。


# 環境

<dl>
    <dt>JSDoc</dt>
    <dd>v4.0.3</dd>
    <dt>VSCode</dt>
    <dd>v1.90.0</dd>
</dl>


# 【スカラー型】
<div></div>


## ・boolean
```javascript:ソース
/**
 * true or falseの２値型
 * 
 * @type {boolean}
 */
let data_boolean = false;
```

##### 　－ツールチップ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/d7bf8b8d-e4f8-14c1-47b0-9199e8cdee57.png)

##### 　－出力イメージ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/9c2405ff-035e-b170-0b33-849771a9cf3a.png)


## ・number

```javascript:ソース
/**
 * 数値型
 * 
 * @type {number}
 */
let data_number = 0;
```

##### 　－ツールチップ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/52334878-cd72-9709-40ab-63649cd750d8.png)

##### 　－出力イメージ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/cfe55457-5f01-b84d-8a28-25221b1a7d17.png)


## ・string

```javascript:ソース
/**
 * 文字列型
 * 
 * @type {string}
 */
let data_string = '';
```

##### 　－ツールチップ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/f877485c-d2cf-c1bc-f2a0-a8130b717497.png)

##### 　－出力イメージ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/8c8d45ab-0ebf-bced-043d-9fc9f767092a.png)


# 【配列型】
<div></div>


## ・Array
```javascript:ソース
/**
 * 配列型
 * 
 * @type {Array}
 */
let data_array = [];
```

##### 　－ツールチップ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/946fb143-8728-9100-6275-8d0fddc5a91f.png)

##### 　－出力イメージ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/58ab0382-f087-0c7f-b740-c16ac342a6bd.png)


## ・Array.&lt;number&gt;
```javascript:ソース
/**
 * 配列型
 * 
 * @type {Array.<number>}
 */
let data_array_number = [];
```

##### 　－ツールチップ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/22df6140-c0eb-edf7-f9b1-a452cfced7de.png)

##### 　－出力イメージ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/af9c6bd8-6ca3-2002-50af-399ea5f5a949.png)


## ・string[]
```javascript:ソース
/**
 * 配列型
 * 
 * @type {string[]}
 */
let data_array_string = [];
```

##### 　－ツールチップ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/5edf8920-15dd-7657-fe81-3e111e85cbb9.png)

##### 　－出力イメージ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/61000615-0cd3-6871-cf1e-696aa076d9cb.png)


# 【オブジェクト型】
<div></div>


## ・Object
```javascript:ソース
/**
 * オブジェクト型
 * 
 * @type {Object}
 */
let data_object = {};
```

##### 　－ツールチップ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/251dc714-55d3-bb09-ce55-4e47005f6e08.png)

##### 　－出力イメージ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/aaf7e080-9471-8fe9-6a99-a477151a7915.png)


## ・*
```javascript:ソース
/**
 * オブジェクト型
 * 
 * @type {*}
 */
let data_object_asterisk = {};
```

##### 　－ツールチップ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/e5d6672a-c901-31ac-0ebd-9bdcb1fa847e.png)

##### 　－出力イメージ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/f6aca2cb-abbd-10de-b1f5-3f3c59f8eaf8.png)


## ・any
```javascript:ソース
/**
 * オブジェクト型
 * 
 * @type {any}
 */
let data_object_any = {};
```

##### 　－ツールチップ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/6b9ef00a-6a85-61bc-8838-fcbedafa8424.png)

##### 　－出力イメージ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/5ad4b277-225e-9e05-0312-afcdad108240.png)


## ・Object.&lt;string, number&gt;
```javascript:ソース
/**
 * オブジェクト型
 * 
 * @type {Object.<string, number>}
 */
let data_object_detail = {};
```

##### 　－ツールチップ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/d354ed7c-6ea2-3b05-2cee-42f0c0ad2815.png)

##### 　－出力イメージ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/c930f9d2-6354-ade4-ad21-3a24fc659ac5.png)


## ・typedef
```javascript:ソース
/**
 * @typedef {Object} MyObject - 複合型定義
 * @property {boolean} flag - 日時
 * @property {number} no - ユーザー名
 * @property {string} str - コメント
 */
/** @type {MyObject} */
```

##### 　－ツールチップ－

👇MyObjectにカーソルを合わせた時
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/2845506c-e665-8fb1-9c83-3f47d1da2aa9.png)

👇data_object_typedefにカーソルを合わせた時
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/48a1adee-7a0f-2199-81dc-1c84e38c5e9b.png)

:::note warn
MyObjectにカーソルを合わせないと`@typedef`の内容が表示されないので注意が必要
:::

##### 　－出力イメージ－

👇Type Definitionsの欄に出力される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/90c8c879-84a8-b0b8-6397-0cc94e0db6df.png)

👇変数名の欄に出力される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/ce7f1c39-f63d-a7d0-791e-99a8aacdd735.png)

:::note warn
`@typedef`の内容は変数名の欄とは別の場所に出力されるので注意が必要
:::


# 【関数型】
<div></div>


## ・無名関数
```javascript:ソース
/**
 * @callback MyCallback - 無名関数
 * @param {boolean} flag - 日時
 * @param {number} no - ユーザー名
 * @param {string} str - コメント
 * @returns {boolean} - true（成功） or false（失敗）
 */
/** @type {MyCallback} */
let func_noname = function(){};
```

##### 　－ツールチップ－

👇MyCallbackにカーソルを合わせた時
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/099dc8cc-e43e-1989-514b-ecf6fbcc8766.png)

👇func_nonameにカーソルを合わせた時
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/4d619984-f462-af90-1e15-99d56a58e6fe.png)

:::note warn
MyCallbackにカーソルを合わせないと`@callback`の内容が表示されないので注意が必要
:::

##### 　－出力イメージ－

👇Type Definitionsの欄に出力される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/30e487bf-eb57-5575-6a52-44d7b42c1f79.png)

👇変数名の欄に出力される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/16fc149f-a6ba-2fea-773f-31c40729b945.png)

:::note warn
`@callback`の内容は変数名の欄とは別の場所に出力されるので注意が必要
:::


## ・関数
```javascript:ソース
/**
 * 関数
 * 
 * @param {boolean} flag - 日時
 * @param {number} no - ユーザー名
 * @param {string} str - コメント
 * @returns {boolean} - true（成功） or false（失敗）
 */
function MyFunction(){};
```

##### 　－ツールチップ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/f9734c7d-0ee9-ef12-3ec1-e79dc2a9bb7d.png)

##### 　－出力イメージ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/83ce5708-3cd1-e927-0b77-573b2fa4b46e.png)


# 【null指定方法】
<div></div>


## ・null許容
```javascript:ソース
/**
 * 数値型（null許容）
 * 
 * @type {?number}
 */
let data_number_or_null = 0;
```

##### 　－ツールチップ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/bb32fc5d-70d4-9a9d-9a4c-d5551f8f25a5.png)

##### 　－出力イメージ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/53d23f3b-13c9-a06e-a115-bd59c2ddc2e0.png)


## ・null拒否
```javascript:ソース
/**
 * 数値型（null拒否）
 * 
 * @type {!number}
 */
let data_number_only = 0;
```

##### 　－ツールチップ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/17b5ace6-4c1c-ff34-1740-59421f7fe9dd.png)

##### 　－出力イメージ－

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3619905/17c5a764-4e35-ddbc-8f2b-0a423d9f0fc4.png)


# おわりに

種類は他にも色々ありますが今後必要に応じて追加していきます。

👇参考サイト

https://jsdoc.app/