はじめに
普段の個人開発において、特にネストが深いコードは視覚的に理解しにくく、どの範囲がどの構造に対応しているのか分かりにくいという悩みがありました。
そんな悩みを解決するのにおすすめなのが、Visual Studio Code（VS Code）の拡張機能「Blockman - Highlight Nested Code Blocks」です！
この記事では、Python、シェルスクリプト、YAML などの言語を使用した際、この拡張機能がどのようにコードの可読性を向上させるのかをご紹介します。
Blockman とは？
Blockman は、コード内のネストされた構造を視覚的にハイライトする VS Code の拡張機能です。
プログラムのブロック（例：if 文、ループ、関数定義など）の境界を視覚的に分かりやすくし、コードの読みやすさを大幅に向上させてくれます！
この機能により、デバッグやコードレビュー、さらには日常のコーディング作業もスムーズに進められるようになります。
Blockmanの主な特徴
ネストされたブロックのハイライト
Blockman は、各コードブロックを異なる色でハイライトします。
ネストが深くなるほど色が変化するため、コードの構造が一目で分かるようになります。特に、複雑なコードや多層構造の処理を理解する際に役立つ便利な機能です。
カスタマイズ可能な配色
Blockman では、配色を設定ファイルで自由にカスタマイズすることができます。
テーマに合わせた配色を設定することで、視覚的な一貫性を保ちながら、直感的にコード編集が可能になります。
多言語対応
JavaScript、Python、Java、C++ など、さまざまなプログラミング言語に対応しています。
さらに、言語特有の構文にも対応しているため、幅広い用途で利用できる汎用性の高さが特徴です。
拡張機能としてインストールするだけで、設定を変更せずにすぐに使い始められます！
インストール方法
Blockman のインストールは、以下の手順で簡単に行えます。
VS Code を開き、サイドバーの「Extensions」（拡張機能）アイコンをクリックします。
検索バーに Blockman と入力し、「Blockman - Highlight Nested Code Blocks」を選択し、「Install」ボタンをクリックします。
インストールが完了すると、コードの編集画面でネストされたブロックが自動的にハイライトされるようになります！！
実際に使ってみた
ここでは、Python、シェルスクリプト、YAML の簡単なサンプルファイルを作成し、この拡張機能がどのようにハイライトされるかを確認します。
Python コード
以下はサンプルの Python コードです。
def example_function():
for i in range(1, 11):
if i % 2 == 0:
print(f"{i} is even")
else:
print(f"{i} is odd")
def main():
example_function()
if __name__ == "__main__":
main()
このコードを VS Code に貼り付けると、ネストされた構造が色分けされ、非常に分かりやすいことが確認できます。
シェルスクリプトのコード
次に、シェルスクリプトの簡単なサンプルコードを紹介します。
#!/bin/bash
function log_message() {
local message=$1
echo "$(date): $message"
}
if [ "$#" -eq 0 ]; then
log_message "No arguments provided. Exiting..."
exit 1
fi
for arg in "$@"; do
log_message "Processing argument: $arg"
if [ "$arg" == "start" ]; then
log_message "Starting the service..."
elif [ "$arg" == "stop" ]; then
log_message "Stopping the service..."
else
log_message "Unknown command: $arg"
fi
done
こちらも同様に、ブロックが色分けされ、視覚的に把握しやすくなっています。
YAML コード
最後に、インフラ構築でよく使われる YAML 言語のサンプルコードです。
root:
config:
database:
host: localhost
port: 5432
username: admin
password: secret
features:
- enable_logging: true
- enable_cache: false
services:
web:
url: http://example.com
retries: 3
worker:
queue: high_priority
concurrency: 5
この YAML コードもブロックが色分けされ、範囲が直感的に分かりやすくなっています。
また、YAML 言語に関しては過去の記事で詳しくまとめていますので、興味のある方は以下をご覧ください。
まとめ
ここまで読んでいただきありがとうございます。
「Blockman - Highlight Nested Code Blocks」は、視覚的なハイライトによってコードの読みやすさを向上させる強力な拡張機能です！
私自身も初めて使ったとき、インデントの違いや細かいミスが一目でわかり、非常に感動しました。
日常的なコーディングやデバッグ作業の効率を高めるため、ぜひ試してみてください！
関連記事