あの頃の僕は、インデントの「呪縛」に囚われていました。プログラミング学習を始めて数ヶ月、初めて参加したチーム開発での出来事です。自分の書いたJavaScriptファイルを開くたび、隣に座っていたベテランの先輩エンジニアの目が、まるで氷のように冷たくなったのを覚えています。\n\n「おい、お前のコード、インデントがバラバラじゃないか。これじゃレビューどころじゃないぞ」。\n\n心臓が凍り付いたような感覚でした。慌てて手動で修正するも、コードを書けば書くほど、すぐにまたインデントが崩れていく。深夜、PCの画面とにらめっこしながら、ひたすらスペースキーやTabキーを叩く自分。「こんなことに時間を使っている場合じゃないのに…」。焦燥感と無力感が募るばかり。コードのロジックを考えるより、見た目を整える作業に追われる日々は、まるで無限に散らかる部屋を、箒一本で延々と掃き続けるような虚しさでした。「このままじゃ、自分はプロになれないんじゃないか…」。そんな絶望感が胸を締め付けました。コードの可読性が低いせいで、自分で書いたはずのコードなのに、翌日には「これ、何だっけ？」と首を傾げる始末。小さなバグを見つけるのにも、膨大な時間がかかりました。チームメンバーにも迷惑をかけているという罪悪感で、毎日が重苦しかったのです。\n\nそんな地獄のような日々から救ってくれたのは、ある日、別の先輩が僕の肩を叩いてくれた時の言葉でした。「お前、まだ手動でインデント直してるのか？ VSCodeにはな、もっと賢い方法があるんだぞ」。その言葉が、僕の暗闇に一筋の光を差し込んだのです。\n\n## VSCodeの「自動フォーマット機能」でインデントの呪縛を解き放つ\n\nVSCodeには、コードのインデント（字下げ）やフォーマットを自動で修正してくれる強力な機能が備わっています。一度設定してしまえば、あなたはもう手動でインデントを直す必要はありません。これは、単なる「整形」ではなく、あなたの開発効率と精神的な負担を劇的に改善する「覚醒」への第一歩です。\n\n### Step 1: VSCodeの基本設定 – 保存時に自動整形を有効にする\n\nまずは、VSCodeの最も基本的な設定から始めましょう。ファイルを保存するたびに、自動でフォーマットが適用されるように設定します。\n\n1. 設定画面を開く: Ctrl + , (Windows/Linux) または Cmd + , (Mac) でVSCodeの設定画面を開きます。\n2. settings.jsonを開く: 設定画面の右上にある {} アイコンをクリックして、settings.json ファイルを開きます。\n3. 以下の設定を追加:\n “json\n {\n "editor.formatOnSave": true,\n "editor.defaultFormatter": "esbenp.prettier-vscode" \n }\n `\n “editor.formatOnSave”: true: これが最も重要な設定です。ファイルを保存するたびに、自動でコードのフォーマットが適用されます。\n “editor.defaultFormatter”: “esbenp.prettier-vscode”: これは、後述するPrettier拡張機能をデフォルトのフォーマッターとして指定するものです。まだPrettierをインストールしていなくても、この設定を先に入れておいても問題ありません。\n\n### Step 2: 強力なフォーマッター「Prettier」の導入\n\nVSCodeの標準フォーマッターでも十分ですが、より強力で柔軟なフォーマット機能を利用するために、「Prettier」という拡張機能を導入することを強くお勧めします。PrettierはJavaScriptだけでなく、HTML、CSS、JSON、Markdownなど、多くの言語に対応しています。\n\n1. Prettier拡張機能をインストール:\n VSCodeのサイドバーにある「拡張機能」アイコン（四角が重なったようなマーク）をクリックします。\n 検索バーに「Prettier - Code formatter」と入力し、検索結果に表示される esbenp.prettier-vscode をインストールします。\n2. settings.jsonでPrettierをデフォルトに設定:\n Step 1で既に設定していればOKです。“editor.defaultFormatter”: “esbenp.prettier-vscode” が含まれていることを確認してください。\n3. プロジェクトごとの設定（.prettierrc）:\n プロジェクトのルートディレクトリに .prettierrc という名前のファイルを作成します。このファイルに、インデント幅やセミコロンの有無など、より詳細なフォーマットルールを記述できます。\n `json\n // .prettierrc\n {\n "tabWidth": 2,\n "semi": true,\n "singleQuote": true,\n "printWidth": 80\n }\n `\n これにより、チームやプロジェクトごとに統一されたコードスタイルを簡単に適用できます。\n\n### Step 3: チーム開発での統一ルール「.editorconfig」の活用\n\n複数の開発者が異なるエディタやIDEを使用する場合でも、コードスタイルを統一するための標準的な方法が「.editorconfig」です。VSCodeもこのファイルを読み込み、設定を適用できます。\n\n1. .editorconfigファイルを作成:\n プロジェクトのルートディレクトリに .editorconfig という名前のファイルを作成します。\n2. 設定を記述:\n 以下は一般的な設定例です。\n `ini\n # .editorconfig\n root = true\n\n []\n indent_style = space\n indent_size = 2\n end_of_line = lf\n charset = utf-8\n trim_trailing_whitespace = true\n insert_final_newline = true\n\n [.md]\n trim_trailing_whitespace = false\n `\n indent_size = 2 (インデント幅2スペース) や end_of_line = lf (改行コードLF) など、詳細なルールを定義できます。\n * VSCodeに .editorconfig 拡張機能（EditorConfig for VS Code`）をインストールすると、より確実に設定が適用されます。\n\n## 覚醒の瞬間：コードが美しく整う感動を体験しよう\n\nこれらの設定を終え、初めてファイルを保存した時の感動は忘れられません。ガタガタだったコードが一瞬で、まるで魔法のように整頓されたのです。「え…嘘だろ？」。思わず声が出ました。あの、数えきれない夜を費やした手作業が、指一本で終わるなんて。あの時の僕のコードは、まるで散らかったガラクタの山から、秩序だった美しい宝石箱へと変わったようでした。\n\nそれ以来、僕のコードは常に美しく、レビューでインデントを指摘されることもなくなりました。ロジックの構築に集中できるようになり、開発スピードも格段に上がったのです。インデントに悩むストレスから解放されたことで、本当にやりたかった機能開発や新しい技術の学習に時間を使えるようになりました。あの時、先輩が教えてくれたこの機能は、僕のプログラミング人生における「覚醒」の瞬間だったと言っても過言ではありません。\n\n手動でインデントを直す行為は、毎日コップ一杯の砂を指で数えて移動させるようなものです。いつか終わるかもしれませんが、途方もない労力と時間、そして精神的な疲弊が伴います。しかし、VSCodeの自動フォーマット設定は、その砂を一瞬で正確に移動させるための「砂の自動運搬機」を導入するようなもの。初期設定には少し手間がかかるかもしれませんが、一度導入すれば、あなたはもう砂を数える必要はありません。もっと創造的な仕事に時間を使えるようになるのです。\n\nもう、インデントで悩む時間は終わりです。あなたのコードは、もっと美しくなれる。今日からあなたも、VSCodeの自動フォーマット機能を導入し、快適で生産的なプログラミングライフを手に入れてください。これは、プロフェッショナルな開発者への第一歩です。”,
“bullets”: [
“VSCodeの自動フォーマット機能で、煩わしいインデント修正から完全に解放されます。”,
“『formatOnSave』設定と『Prettier』拡張機能を導入し、コードを常に美しく保つ具体的な手順を解説。”,
“チーム開発でコードスタイルを統一するための『.editorconfig』の活用法も紹介し、プロフェッショナルな開発環境を構築します。
