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

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



Vue CLIでVue.jsの開発環境をセットアップするまでの流れ
Facebookでシェアした記事の画像反映ができていない時の修正方法
Visual Studio Codeの文字サイズやタブサイズの設定方法
iOS Safariで文章の最後の1文字だけ改行されてしまう現象の対処法
MacVim-Kaoriyaのインストール方法
ウェブサイト上で簡単にWYSIWYGエディタを実装する「TinyMCE」
Visual Studio Codeの「Debugger for Chrome」でJavaScriptのデバッグを行う
npm-scriptsでSCSSをコンパイルする環境を構築する方法
スライドを簡単に実装できるJavaScriptライブラリ「Swiper」
Nuxt.jsでVuexストア連携を行う方法|Nuxt.jsの基本
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Figmaの画像周りの基本操作|画像の追加方法や色補正、切り抜き方法まで
あしたラボUNIVERSITY主催の学生限定ハッカソンに行ってきました
Visual Studio CodeでCSVの編集を見やすく行う拡張機能「Edit csv」
ターミナル起動時のLast login表示を無効にする方法
Figmaで画像からカラーパレットを生成するプラグイン「Image Palette」
いつも使っているアプリがタブに埋もれるのを防止するアプリ「Biscuit(ビスケット)」
Macの最前面ウインドウをハイライトし、背景を薄暗くして集中力を高める「HazeOver」
Alfredの「General」タブで基本的な設定や、ホットキーの変更を行う
新しいMacBook Proを購入して移行するときにやること|コーディングに必要な開発環境を整える