目次
はじめに
プログラミングをしていると、とにかく括弧がたくさん出てきませんか？
入れ子になっていたりすると、括弧がさらに増えて何が何だかわからなくなる…
誰でも一度は経験したことがあるのではないでしょうか。
この記事では、そんな悩みを解決するためのおすすめの方法を解説します。
括弧が見やすくなるとバグも格段に減らせるので、打ち間違いが多発してなかなか効率が上がらないという方にもおすすめです。
Visual Studio Codeとは
今回ご紹介するのはVisual Studio Codeというエディタ向けの方法です（VSCodeと略称でも記載されます）。
このエディタは本サイトでもイチオシしていて、ほぼ全てのプログラミング言語に対応し、使い勝手も良いため近年人気が急上昇しています。
使ったことの無い方もこの機会にぜひ使用してみてください。下記から入手できます。
Bracket Pair Colorizerとは
VSCodeで使用できる便利なプラグイン（後付け便利機能）がBracket Pair Colorizerです。
（プラグインはExtensionとも呼ばれます。）
これを使うとソースコードが下記のようになります。
括弧の始まりと終わりを同じ色にして、またその括弧に挟まれた部分を色付きの棒でつないでくれるのでど、こからどこまでが一括りなのかとても見やすくなりますね。
詳しい説明を読みたい方は下記の公式ページをご覧ください。
Bracket Pair Colorizer（Microsoft Visual Studio Market Place）
インストール方法
VSCodeを開いたら画面左側下のアイコン（ブロックのようなマーク）をクリックして検索画面を開き「bracket」で検索してください（下図参照）。
おそらく一番上に「Bracket Pair Colorizer」が出てくるので右下の「Install」ボタンをクリックします。
ほんの数秒でインストールは完了です。試しにJavaScript等のソースコードを見てみてください。
先ほどの画面例のように括弧が色付けされていれば成功です。
HTMLへの適用方法
初期設定では色付けされる括弧は「()」「[]」「{}」の3種類だけなので、JavaScriptやRubyなどは見やすくなりますが、HTMLには変化がありません。
せっかくですので、HTMLのタグも見やすくしてみましょう。
適用前
例えばこんなHTMLのソースコードがあったとします。
VSCodeのデフォルト機能により、正しくインデントができていれば縦棒で対応する開始タグ・終了タグが繋がれているためある程度は見やすいですね。
しかし括弧（<>）が全て同じ色なので、書いている途中にはわかりづらく、間違えてインデントしてしまうことがありそうです。
設定方法
Bracket Pair Colorizerの設定からHTMLにも対応できるようにカスタマイズできます。
MacOSの場合
上部メニューバーの「Code」→「Preferences」→「Settings」を開きます。
上に出てくる検索窓で「bracketpair」と検索するといくつかの候補が出てくるので、下図のように「Bracket Pair Colorizer: Consecutive Pair Colors」の項目を探して下線が引かれている「Edit in settings.json」をクリックしてください。
「settings.json」はプラグインの設定項目が記載されたファイルです。これに手を加えることで細かいカスタマイズができます。
下図赤枠の部分を追記しましょう。
コピー＆ペースト用に下記コードも書いておきます。
["<", "</"], ["<", "/>"],
Command+Sキーでファイルを保存してください。保存できたらファイルを閉じても構いません。
Windowsの場合
上部メニューバーの「File」→「Preferences」→「Settings」を開きます。
以降は上記「MacOSの場合」と同様です。
最後は、Ctrl+Sキーでファイルを保存してください。
適用後
早速、先ほどのHTMLファイルを見てみましょう。
タグの始まりと終わりが同色で表示され、別のタグだと黄色・ピンク・水色で色が使い分けられているのでかなり見やすくなりましたね。
また、カーソルを当てたところ（下図25行目〜32行目、section要素の部分）には開始タグから終了タグに挟まれた中身の部分が縦棒で繋がれているので、範囲がとても見やすいです。
まとめ
VSCodeで括弧の対応が見やすくなるBracket Pair Colorizerについて、導入方法とHTMLへの対応方法を解説しました。
コードが見やすくなると些細なミスが減りますし、気分も上がりますよね。
簡単に導入できるので、ぜひやってみてください。
動画でプログラミング入門をしよう
オンライン学習サービスProglus（プログラス）でプログラミングを学び、創れる人になろう！
プレミアムプランを2週間無料体験しよう
今すぐ詳細を確認する