Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
9
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

@azujuuuuuun

変数の説明を JSDoc で書く

概要

JavaScript の変数の説明を JSDoc で書き、VSCode でその変数にカーソルをあてると、ツールチップにコメントが表示される。

/** ここにコメントが表示される */
const hoge = "hoge";

上のように書くと、以下のように表示される。

スクリーンショット 2019-11-09 23.15.08.png

その他

関数

関数の説明も同様、かつ引数の説明も表示される。

/**
 * ここにコメントが表示される
 * @param fuga 第1引数のコメント
 * @param piyo 第2引数のコメント
 */
function hoge(fuga: string, piyo: string) {
  console.log(fuga, piyo);
}

スクリーンショット 2019-11-09 23.43.35.png

オブジェクト

/** hoge のコメント */
const hoge = {
  /** fuga のコメント */
  fuga: "fuga" 
};

console.log(hoge.fuga);

hoge にカーソルをあてると、 hoge の上のコメントが表示される。

スクリーンショット 2019-11-09 23.55.19.png

fuga にカーソルをあてると、 fuga の上のコメントが表示される。

スクリーンショット 2019-11-09 23.55.36.png

使い所

原則、使わなくて済む方がいい。その際には、

  • コメントなしで意味が伝わる命名をする
  • 関数の引数は命名だけでなく、TypeScript の型で情報量を増やす
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
9
Help us understand the problem. What are the problem?