目次
コメントアウトにある@typeとか@paramって何？
JavaScript・Reactで作られているwebアプリのソースコード中やJavaScriptの中でたまに見かける@type {○○}や@param ○○ ですが、あまり意味が分かっていない人も多いのではないかと思います。
実際には、こんなやつです。
/**
* @type {boolean}
*/
const isFirstFlag = true;
/**
* パネルの内容を切り替えます。
* @param {string} mode
*/
const switchPanel = (mode) => {
// なにかしらの内容
}
こちらの使い方やメリットについて、今回調べてみたのでそちらについて記述していこうと思います。
初心者の方にむけて書いておくと、コメントアウト内に書かれているコードや変数は、実際のアプリの動きに直接の影響はありません。
正体は、JSDocコメント
こちらの正体は、JSDocコメントといいます。
上記のコードのような感じで、関数や変数の宣言の直前、つまりすぐ上の行に記述するものです。
JSDocコメントはなんである？メリットは？
このコメントはなぜ存在するのかというと、大きな理由はコーディング時のコードヒントを表示するためです。
これがどういうことかというと、先ほどの例でいうと、isFirstFlagを別の個所で使いたいときなどに、予測変換のようなものが出てきますよね。
その予測変換のようなものが、いわゆるコードヒントというものです。
ミスを防ぐための便利な機能
大規模なアプリになってくると、たくさんの変数や関数が存在するため、タイプミスやコードミスが生じやすくなってしまいます。
そのため、そういったミスをできるだけ減らし、開発速度を上げるためにコード補完やコードヒントといったものが存在します。
プログラミング言語自体の機能ではない
JSDocコメントの記述内容から、コードヒントを表示したり、コード補完を行う機能はプログラミング言語自体の機能ではありません。
機能自体は、それらのコードを記述するためのエディターの機能です。
有名どころのエディターでいうと、VSCodeはヒント表示とコード補完の両方の機能が備わっていますが、同様に有名なエディターであるAtomには両機能ともありません。
TypeScriptを使えない状況で、かなり役に立つ
普段TypeScriptでの開発をされている方は、JSDocコメント自体に必要性を感じていないと思います。
ですが、TypeScriptでの開発ができずJavaScriptを使わないといけない状況では、JSDocコメントがかなり役に立つと思います。
しかし、TypeScriptで使えるほとんどの型がJavaScriptでも表現できますが、若干違うものもあるので注意が必要です。