コーディング時に「アノテーションコメント」を使ってコードを見やすく管理する

アノテーションコメントとは
コードを書いていく上で「適度にコメントを残しておくと、読みやすいコードになる」とよく聞きます。
ただ、コメントの数が多くなってくると「コードの説明をしているコメント」「あとでしたいタスクをメモ書きしているコメント」「なにか理由があって変更してはいけない場所を示している注意書きコメント」などさまざまな種類のコメントが出てきます。
下記のように先頭に「タグ」のような記述を追加しておくと、「そもそもこのコメントは何の目的で残しているのか?」が分かって、把握しやすくなります。
// TODO: あとで引数を追加するまた、あとからファイル検索をしたり拡張機能を使うことで、残タスクの把握もできます。
このように先頭にタグを付けるコメントを「アノテーションコメント(注釈コメント)」と呼びます。
使うタグ名を決めておかないと逆に見にくくなる
たとえば「TODO:」「TODOS:」「TASK:」「CHECK:」のように似たような役割のタグが混在していると、逆に混乱してしまします。
使う数はできる限り少なくして、統一しておかないとあとで検索するときにも不便です。
アノテーションコメントを便利に使うためのVisual Studio Code拡張機能
Visual Studio Codeの拡張機能を使えば、アノテーションコメントをさらに便利に使えます。
Better Comments
Better Commentsはアノテーションコメントに装飾を追加できる拡張機能です。
すべて同じ色でもタグのおかげで把握はしやすくなっていますが、色分けされることでさらに把握しやすくなります。
ミニマップにも表示されますし、コードを流し見するときにも目に付きやすくなります。
Todo Tree
Todo Treeはアノテーションコメントの一覧を表示できる拡張機能です。
「TODO:」はあとから行うタスク用のコメントですが、これを一覧で表示させることで残タスクがすぐ把握できます。
アノテーションコメントの色分けもできますが、Better Commentsの方が機能が多いので、色分けは片方に集約した方が管理しやすいです。



WordPressでショートコードを作成する方法
Nuxt.jsの「layouts」を使用してレイアウトの共通化を行う方法|Nuxt.jsの基本
Visual Studio Codeを使ったコード整形方法(Fomatter)
ウェブサイトをダークモードに対応するときに気をつけること
ウェブ上でLaTeXで数式をキレイにプレビューするJavaScriptライブラリ「MathJax」
Visual Studio CodeでCSVの編集を見やすく行う拡張機能「Edit csv」
JavaScriptのtest関数と正規表現でバリデーションチェックを行う
npm-scriptsでSCSSをコンパイルする環境を構築する方法
WordPress5.5のサイトマップ機能を無効にする
Visual Studio Codeのエクスプローラー上でファイル・フォルダの複製ができるようになる拡張機能「Duplicate action」
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
ウェブサイトを作る上での基本「Macの画像圧縮方法」のまとめ
日々のやり取りを便利にしてくれるチャットサービス統合アプリの比較!Franz・Rambox・Station・Stack・Biscuit
Macで画像の一括リサイズを行いたいときは、プレビュー.appを使う方法が手軽!
Google Driveでフォルダのコピーをする方法
Google日本語入力のRomaji tableを設定して、ローマ字入力する感覚で絵文字を表示させる方法
MacでEvernoteにWebデザインをストックしたいならPaparazzi!とFolder Action Scriptの組み合わせがオススメ!!
ブログのテーマを完全オリジナルのものに変更しました
TwitterとFacebook用のOGP設定方法と表示確認方法
.DS_Storeなどの不要なメタデータファイルを自動で削除する「BlueHarvest」
高機能なランチャーアプリ「Alfred 4」がリリース!ダークモード対応やWorkflowが強化