🇯🇵 日本語 | 🇺🇸 English | 🇪🇸 Español | 🇵🇹 Português | 🇹🇭 ไทย | 🇨🇳 中文

【ターミナル活用】VSCode内蔵ターミナルの使い方とカスタマイズ方法

こんにちは！Webサイト「buyonjapan.com」や「copicode.com」を運営している、現役Webクリエーターです。

ほんの数ヶ月前まで、私はプログラミングの知識が全くない、完全な初心者でした。特に、映画でハッカーが使っているような「黒い画面」、つまり「ターミナル」には、正直なところ恐怖心しかありませんでした。「なんだか怖い」「操作が難しそう」「自分には縁のない世界だ…」そう思っていたんです。

しかし、AIの助けを借りながらWebサイト制作を進めるうちに、このターミナルが避けては通れない道であり、そして一度仲良くなってしまえば、これ以上ない「最強の相棒」になることに気づきました。

この記事では、かつての私と同じようにターミナルに苦手意識を持っているWebクリエーター初心者の方に向けて、VSCodeに内蔵されている「統合ターミナル」の基本的な使い方から、コピペするだけであなたの開発環境を劇的に変えるカスタマイズ方法まで、私のつまずき体験談を交えながら、どこよりも分かりやすく解説します。目標は、この記事を読み終える頃には、あなたが自信を持ってターミナルを操作できるようになっていることです！

第1章：もう怖くない！VSCode統合ターミナルとの最初の出会い

まずは、恐怖の対象（？）であるターミナルとご対面するところから始めましょう。大丈夫、開くだけなら何も起こりません！

ターミナルを開く3つの方法

VSCodeでターミナルを開く方法は、主に3つあります。自分に合った方法で開いてみてください。

  1. メニューバーから開く: 画面上部のメニューから ターミナル > 新しいターミナル をクリックします。
  2. ショートカットキーで開く: これが一番クールで効率的です！ぜひ覚えましょう。
    • Windows/Mac共通: Ctrl + @ (または Ctrl + Shift + `)
  3. 画面下部のステータスバーから: 問題パネルなどを開いている場合、タブの一覧に「ターミナル」があるので、それをクリックします。

画面の下半分に、あの「黒い画面」が表示されたら成功です！

VSCodeでターミナルを開いた状態のスクリーンショット

（画像はカスタマイズ後のものですが、最初はもっとシンプルな表示のはずです）

プロンプトって何？ - ターミナルとの対話の始まり

ターミナルを開くと、C:\Users\YourName\Project> や YourName@MacBook-Air Project % のような文字列が表示され、その横でカーソルが点滅しているはずです。これをプロンプトと呼びます。

これは、「現在、あなたはこの場所にいますよ（カレントディレクトリ）。次の命令をどうぞ。」という、ターミナルからのメッセージです。ここから、私たちはターミナルに様々な「コマンド（命令）」を送って、PCに仕事をしてもらうのです。

第2章：これだけは覚えたい！Web制作者のための必須コマンド集

コマンドは無数にありますが、Web制作で日常的に使うものは限られています。ここでは、「これさえ覚えておけば、当面は困らない！」という必須コマンドを、具体的な利用シーンと共に紹介します。

1. 現在地を確認する `pwd`

pwd は "Print Working Directory" の略で、「今、自分はどこのフォルダにいるの？」とPCに尋ねるコマンドです。道に迷ったら、まず現在地を確認するのと同じですね。

pwd

2. フォルダの中身を見る `ls`

ls は "List" の略です。今いるフォルダ（ディレクトリ）に、どんなファイルやサブフォルダがあるか一覧表示してくれます。Web制作では、ファイル構成を確認する際に頻繁に使います。

ls

※Windowsのコマンドプロンプトでは dir が同じ役割を果たしますが、後述する Git Bash を使えばWindowsでも ls が使えるようになり、Macユーザーと同じ感覚で操作できて便利です。

3. フォルダを移動する `cd`

cd は "Change Directory" の略。作業したいフォルダへ移動するための、最も重要なコマンドの一つです。「プロジェクトフォルダに移動して作業を開始する」といったシーンで使います。

例えば、contact-form というフォルダに移動したい場合はこう打ちます。

cd contact-form

一つ上の階層のフォルダに戻りたい場合は、..を使います。

cd ..

4. フォルダを作成する `mkdir`

mkdir は "Make Directory" の略。新しいフォルダ（ディレクトリ）を作成します。例えば、画像を入れておくimagesフォルダや、CSSファイルを入れるcssフォルダを作る際に使います。

mkdir images

5. JavaScriptの機能をインストールする `npm install`

最近のWeb制作では、便利な機能（パッケージ）をインターネットからダウンロードして利用するのが一般的です。その際に使うのがnpmという仕組みで、npm installは「この機能（パッケージ）をください！」とお願いするコマンドです。

例えば、スライダーを実装できる有名なライブラリ「Swiper」をインストールする場合は、このように入力します。

npm install swiper

このコマンドが、私が最初に「ターミナル、すごい…！」と感じたきっかけでした。一行入力するだけで、世界中の開発者が作った高度な機能が自分のプロジェクトで使えるようになる。まさに魔法の呪文です。

第3章：【コピペでOK】もう怖くない！ターミナルを自分好みに育てよう

基本的なコマンドを覚えたら、次はいよいよカスタマイズです。デフォルトの無機質なターミナルも悪くありませんが、少し手を加えるだけで、見た目が劇的にかっこよくなり、モチベーションが上がり、何より作業効率が格段に向上します。

ここでは、難しいツールは一切使わず、VSCodeの設定ファイルsettings.jsonを編集するだけで完結する、実践的なカスタマイズ方法を紹介します。

ステップ1：設定ファイル `settings.json` を開く

まず、VSCodeの設定ファイルsettings.jsonを開きましょう。

  1. ショートカットキー Ctrl + Shift + P (Macは Command + Shift + P) を押して、コマンドパレットを開きます。
  2. 検索窓に「settings json」と入力します。
  3. 候補に出てくる「基本設定: 設定 (JSON) を開く (Preferences: Open User Settings (JSON))」を選択します。

これで、あなたのVSCodeの全設定が書かれたsettings.jsonファイルが開きます。ここにコードを追記していくことで、ターミナルの設定を変更できます。

ステップ2：【Windowsユーザー推奨】シェルをGit Bashに変更する

Macユーザーの方はデフォルトのzshが非常に強力なのでこのステップは飛ばしてOKです。Windowsユーザーの方に強く推奨したいのが、ターミナルで使うプログラム（シェル）を、デフォルトのPowerShellやCommand PromptからGit Bashに変更することです。

なぜGit Bash？

Git for WindowsがまだPCに入っていない方は、公式サイト「git-scm.com」からダウンロードしてインストールしてください。インストールが完了したら、先ほど開いたsettings.jsonに以下のコードを追加します。（すでに{}内に何か書かれている場合は、カンマ,で区切って追記してください）

{
    // ターミナルでGit Bashをデフォルトとして使用するための設定
    "terminal.integrated.defaultProfile.windows": "Git Bash"
}

VSCodeを再起動するか、ターミナルを新しく開くと、Git Bashが起動するようになります。

ステップ3：【コピペで完成】見た目と実用性を劇的に向上させるカスタマイズ

お待たせしました！いよいよターミナルの見た目をカスタマイズしていきます。以下のコードを、あなたのsettings.jsonに丸ごとコピー＆ペーストしてください。各行にどんな意味があるのかコメントを書いておいたので、意味を理解しながら、不要な部分を消したり、数値を変更したりして、自分だけのターミナルを作ってみてください。

推奨フォントについて: 以下の設定ではFira Codeというプログラミング用フォントを指定しています。このフォントは、=>や!=のような特定の記号の組み合わせを、一つの見やすい記号（リガチャ）として表示してくれるため、コードの可読性が上がります。事前に「Fira Code font」で検索し、フォントをPCにインストールしておくことをお勧めします。

{
    // --- ここからターミナルの設定 ---

    // ターミナルで使用するフォントファミリーを指定します。'Fira Code'を推奨。
    // 複数のフォントを指定すると、最初のフォントがなければ次のフォントが使われます。
    "terminal.integrated.fontFamily": "'Fira Code', Menlo, Monaco, 'Courier New', monospace",

    // ターミナルのフォントサイズを指定します。お好みの大きさに調整してください。
    "terminal.integrated.fontSize": 14,

    // フォントのリガチャ（合字）を有効にします。=> や != が見やすい記号に変わります。
    "terminal.integrated.fontLigatures": true,

    // ターミナルの行の高さを指定します。1.5くらいが見やすいです。
    "terminal.integrated.lineHeight": 1.5,

    // カーソルのスタイルを指定します。'line'は線、'block'はブロック、'underline'は下線です。
    "terminal.integrated.cursorStyle": "line",

    // カーソルが点滅するようにします。
    "terminal.integrated.cursorBlinking": true,

    // ターミナル上で右クリックした際の挙動。'copyPaste'にするとコピー＆ペーストができて便利。
    "terminal.integrated.rightClickBehavior": "copyPaste",

    // ターミナルのベル（警告音）を無効にします。
    "terminal.integrated.enableBell": false,

    // VSCodeのウィンドウカラーと連動するターミナルの詳細な色設定
    "workbench.colorCustomizations": {
        // ターミナルの背景色
        "terminal.background": "#1E1E1E",
        // ターミナルの文字色（前景）
        "terminal.foreground": "#D4D4D4",
        // ターミナルの黒色
        "terminal.ansiBlack": "#000000",
        // ターミナルの赤色
        "terminal.ansiRed": "#CD3131",
        // ターミナルの緑色
        "terminal.ansiGreen": "#0DBC79",
        // ターミナルの黄色
        "terminal.ansiYellow": "#E5E510",
        // ターミナルの青色
        "terminal.ansiBlue": "#2472C8",
        // ターミナルのマゼンタ色
        "terminal.ansiMagenta": "#BC3FBC",
        // ターミナルのシアン色
        "terminal.ansiCyan": "#11A8CD",
        // ターミナルの白色
        "terminal.ansiWhite": "#E5E5E5",
        // ターミナルの明るい黒色（灰色）
        "terminal.ansiBrightBlack": "#666666",
        // ターミナルの明るい赤色
        "terminal.ansiBrightRed": "#F14C4C",
        // ターミナルの明るい緑色
        "terminal.ansiBrightGreen": "#23D18B",
        // ターミナルの明るい黄色
        "terminal.ansiBrightYellow": "#F5F543",
        // ターミナルの明るい青色
        "terminal.ansiBrightBlue": "#3B8EEA",
        // ターミナルの明るいマゼンタ色
        "terminal.ansiBrightMagenta": "#D670D6",
        // ターミナルの明るいシアン色
        "terminal.ansiBrightCyan": "#29B8DB",
        // ターミナルの明るい白色
        "terminal.ansiBrightWhite": "#E5E5E5"
    }

    // --- ターミナルの設定ここまで ---
}

この設定を貼り付けて保存(Ctrl + S)した瞬間に、あなたのターミナルの見た目が変わるはずです。もし変わらない場合は、一度ターミナルを閉じて（ゴミ箱アイコンをクリック）、新しく開いてみてください。

第4章：私がハマった！初心者のためのトラブルシューティング

ターミナルを使い始めると、必ずと言っていいほどエラーに遭遇します。でも、安心してください。それはあなただけではありません。ここでは、私が実際に遭遇し、解決までに何時間も（時には丸一日！）費やしてしまった典型的なエラーとその解決策を共有します。

ケース1：「'npm' は、内部コマンドまたは外部コマンド...として認識されていません。」

このエラーは、Web制作初心者にとって最初の、そして最大の壁かもしれません。npm installを実行しようとしたら、こんな冷たいメッセージが…。私もこれで完全に心が折れかけました。

原因：PATHが通っていない

このエラーの99%の原因は、「PATH（パス）が通っていない」ことです。パスをすごく簡単に言うと、「PCがコマンドを探しに行くための住所録」です。

npmというコマンドは、通常、Node.jsというプログラミング環境をインストールしたときに、PCの特定のフォルダ（例: C:\Program Files\nodejs\）に一緒にインストールされます。ターミナルでnpmと入力すると、PCはこの「住所録(PATH)」を見て、npmコマンドがどこにあるかを探しに行きます。しかし、何らかの理由でこの住所録にnpmの場所が登録されていないと、PCは「そんなコマンドどこにも見つかりません！」とエラーを返してくるのです。

解決策（Windowsの場合）

  1. まず、Node.jsが正しくインストールされているか確認します。公式サイト「nodejs.org」からLTS版（推奨版）をインストールしましょう。インストーラーの途中で「Add to PATH」のようなチェックボックスがあれば、必ずチェックを入れてください。
  2. Windowsの検索バーで「環境変数を編集」と検索し、「システム環境変数の編集」を開きます。
  3. 「環境変数」ボタンをクリックします。
  4. 「システム環境変数」の欄にあるPathという変数を見つけて選択し、「編集」をクリックします。
  5. 開いた一覧の中に、C:\Program Files\nodejs\ のような、Node.jsをインストールしたフォルダのパスが含まれているか確認します。なければ、「新規」ボタンを押してこのパスを追加します。
  6. すべてのウィンドウを「OK」で閉じて、PCを再起動（または少なくともVSCodeを完全に再起動）します。

「PATHを通す」という概念は、最初本当に理解に苦しむと思います。私もAIに「小学5年生でもわかるようにPATHについて教えて」と何度も質問して、ようやくこの「住所録」というイメージにたどり着きました。一度理解すれば、今後他のツールをインストールした際にも応用が効くので、ぜひこの機会に乗り越えてしまいましょう！

まとめ：ターミナルは怖くない、最強の相棒だ！

ここまで本当にお疲れ様でした！この記事で紹介したコマンドとカスタマイズは、広大なターミナルの世界のほんの入り口に過ぎません。しかし、この一歩を踏み出せたかどうかが、あなたのWebクリエーターとしての未来を大きく左右すると私は信じています。

最初はコマンドを打ち間違えたり、意味不明なエラーに遭遇したりするでしょう。でも、その一つ一つがあなたの経験値になります。GUI操作では決して得られないスピードと効率性、そして何より「プロっぽく開発している自分」への自信が、ターミナルと仲良くなることで手に入ります。

今日カスタマイズしたあなただけのターミナルを、ぜひこれからのWeb制作の「最強の相棒」として、使いこなしていってください！

次のステップへ

ターミナルの準備が整ったら、次はVSCode自体をWeb制作に最適化していきましょう！以下の記事では、HTML/CSS/JavaScriptの開発を爆速化する必須の設定と拡張機能を紹介しています。

【HTML/CSS/JS開発環境】VSCodeでWeb制作を始めるための設定と拡張機能

関連テンプレート