VS Codeのおすすめ拡張機能：Blockman - Highlight Nested Code Blocksのご紹介

## はじめに

普段の個人開発において、特にネストが深いコードは視覚的に理解しにくく、どの範囲がどの構造に対応しているのか分かりにくいという悩みがありました。

:::note warn
***そんな悩みを解決するのにおすすめなのが、Visual Studio Code（VS Code）の拡張機能「Blockman - Highlight Nested Code Blocks」です！***
:::

この記事では、Python、シェルスクリプト、YAML などの言語を使用した際、この拡張機能がどのようにコードの可読性を向上させるのかをご紹介します。

## Blockman とは？

Blockman は、コード内のネストされた構造を視覚的にハイライトする VS Code の拡張機能です。

![スクリーンショット 2024-12-19 21.12.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/ad657b95-4ff4-109d-a089-48e4144dba7e.png)
引用画像：https://coliss.com/articles/build-websites/operation/work/vscode-extension-to-highlight-nested-code-blocks.html

:::note
***プログラムのブロック（例：if 文、ループ、関数定義など）の境界を視覚的に分かりやすくし、コードの読みやすさを大幅に向上させてくれます！***
:::

この機能により、デバッグやコードレビュー、さらには日常のコーディング作業もスムーズに進められるようになります。

https://marketplace.visualstudio.com/items?itemName=leodevbro.blockman

## Blockmanの主な特徴

### ネストされたブロックのハイライト

Blockman は、各コードブロックを異なる色でハイライトします。

![スクリーンショット 2024-12-19 21.17.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/880919aa-6cf7-015a-5d7a-6e231de57e78.png)

ネストが深くなるほど色が変化するため、コードの構造が一目で分かるようになります。特に、***複雑なコードや多層構造の処理を理解する際に役立つ便利な機能です。***

### カスタマイズ可能な配色

Blockman では、配色を設定ファイルで自由にカスタマイズすることができます。

![スクリーンショット 2024-12-19 21.19.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/f1835ad4-4101-0194-e07f-1b65cc931311.png)

***テーマに合わせた配色を設定することで、視覚的な一貫性を保ちながら、直感的にコード編集が可能になります。***

### 多言語対応

JavaScript、Python、Java、C++ など、さまざまなプログラミング言語に対応しています。

![スクリーンショット 2024-12-19 21.20.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/ca4566ce-2d20-5e35-42ce-d1f68b4f22be.png)

さらに、言語特有の構文にも対応しているため、幅広い用途で利用できる汎用性の高さが特徴です。

:::note  warn
***拡張機能としてインストールするだけで、設定を変更せずにすぐに使い始められます！***
:::

## インストール方法

Blockman のインストールは、以下の手順で簡単に行えます。

VS Code を開き、サイドバーの「Extensions」（拡張機能）アイコンをクリックします。

![スクリーンショット 2024-12-19 21.24.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/34de8bc7-97ea-da68-d9fe-4d0ea23e9b1c.png)


検索バーに Blockman と入力し、「Blockman - Highlight Nested Code Blocks」を選択し、「Install」ボタンをクリックします。

:::note
***インストールが完了すると、コードの編集画面でネストされたブロックが自動的にハイライトされるようになります！！***
:::

## 実際に使ってみた

ここでは、Python、シェルスクリプト、YAML の簡単なサンプルファイルを作成し、この拡張機能がどのようにハイライトされるかを確認します。

### Python コード

以下はサンプルの Python コードです。

```test.py
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 に貼り付けると、ネストされた構造が色分けされ、非常に分かりやすいことが確認できます。

![スクリーンショット 2024-12-19 21.26.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/d6c4d3e6-03ae-7ccd-ea42-f60ef2161ce4.png)

### シェルスクリプトのコード

次に、シェルスクリプトの簡単なサンプルコードを紹介します。

```test.sh
#!/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
```

こちらも同様に、ブロックが色分けされ、視覚的に把握しやすくなっています。

![スクリーンショット 2024-12-19 21.28.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/adde9425-cebb-92ec-a28b-3a5a513fdcda.png)

### YAML コード

最後に、インフラ構築でよく使われる YAML 言語のサンプルコードです。

```test.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 コードもブロックが色分けされ、範囲が直感的に分かりやすくなっています。

![スクリーンショット 2024-12-19 21.30.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3662571/26aea74b-a879-3e9a-3226-fb75d92d750e.png)

また、YAML 言語に関しては過去の記事で詳しくまとめていますので、興味のある方は以下をご覧ください。

https://qiita.com/free-honda/items/4d9c66ebbc12dbfe1d4e

## まとめ

ここまで読んでいただきありがとうございます。

:::note warn
***「Blockman - Highlight Nested Code Blocks」は、視覚的なハイライトによってコードの読みやすさを向上させる強力な拡張機能です！***
:::

私自身も初めて使ったとき、インデントの違いや細かいミスが一目でわかり、非常に感動しました。

***日常的なコーディングやデバッグ作業の効率を高めるため、ぜひ試してみてください！***

## 関連記事

https://dev.classmethod.jp/articles/python-vscode-plugin/

https://devlights.hatenablog.com/entry/2023/03/03/073000

https://coliss.com/articles/build-websites/operation/work/vscode-extension-to-highlight-nested-code-blocks.html

https://donbulinux.hatenablog.jp/entry/2023/06/27/163820

https://www.alta.co.jp/blog/post-10286/