はじめに
こんにちは、IT経験1年半の駆け出しです。
今回は、開発におけるインデントの話をしようと思います。
初現場のコーディングルールでインデントは2スペースという指定がありました。
2スペースって何のこと？って感じでした笑
VSCodeでのおすすめ設定もご紹介します。
スペースは2スペースか4スペースか
主流なのは2スペースか4スペースです。
画像の赤枠で囲った部分に・・と点が2つありますね。これが2スペースです。
4スペースの時には・・・・となります。
1.視認性・可読性のバランス
- 1スペースだとインデントが目立たず読みにくい
- 3スペース、5スペースだとインデントが広すぎて横に無駄なスペースが増える
2.タブとの互換性（歴史的理由）
- 昔のエディタやターミナルはタブ幅が「8スペース」とされていた
- 8では広すぎたため、スペースでインデントする文化が広まった
- この時に、「タブ幅の半分の4スペース」「さらにコンパクトな2スペース」が選ばれた
言語による違い
- JavaScript/TypeScrript 2スペース
web開発ではネストが深くなりがちなので省スペースが好まれる - Python 4スペース（公式推奨）
インデントが文法の一部 - Java 4スペース
Oracle公式ガイドや多くのIDEでデフォルトが4。クラス構造が階層的なので視認性重視。
混在はNG
Reactでよくやってしまったのですが、こっちのコンポーネントは4スペースになっており、あっちのコンポーネントは2スペースになっていたなんてことがありました。
VSCodeの設定
-
全体設定で2スペースにする
VS Code を開く
画面左下の ⚙️（歯車）→「Settings（設定）」をクリック
上の検索バーに tab size と入力
以下の2点を設定：
Tab Size：2 に変更
Indent Using Spaces：✅ チェック（または選択して Spaces に） -
保存時に自動整形されるようにする
同じ「Settings」画面で検索バーに format on save と入力
Editor: Format On Save に ✅ チェックを入れる -
整形ツール（Prettierなど）を導入
左の「拡張機能」アイコン（🔌）をクリック
Prettier と検索し、「Prettier - Code formatter」をインストール
拡張機能を入れたあと、以下の設定を .prettierrc または設定画面で追加：
{
"tabWidth": 2, // インデントで使用するスペースの数（例: 2にすると2スペースでインデント）
"useTabs": false // インデントにタブを使うかどうか（falseの場合、スペースを使用）
}
設定ができていれば保存した時に2スペース変わります。
-
プロジェクト毎で変更したい場合には、設定ファイルで設定する
.vscode/settings.json を作成して以下を記載：
{
"editor.tabSize": 2, // ← インデント幅を2にする
"editor.insertSpaces": true, // ← タブではなくスペースでインデント
"editor.formatOnSave": true // ← 保存時に自動整形（Prettierなどが有効な場合）
}
※ tabSize を 4 にすれば4スペースになります。
終わりに
今回は、インデントの2スペースと4スペースの違いや、VSCodeでの設定方法について紹介しました。
現場では見た目の統一が大切ですし、ツールで自動化することでストレスも減ります。
設定しておけば、コーディングルールを意識しなくても自然と守れるのでおすすめです！
この記事が、初学者の方や現場で戸惑った方の参考になれば嬉しいです。