お問い合わせ
お問い合わせ
ホーム > ウェブ制作 > 実践解説：VS Codeの統合ターミナルを使いこなすコマンド操作ガイド

実践解説：VS Codeの統合ターミナルを使いこなすコマンド操作ガイド

ウェブ制作
VS Codeの統合ターミナルを活用してコマンド操作を行う開発環境のイメージ
VS Codeの統合ターミナルを使ったコマンド操作や開発作業の効率化を表現したアイキャッチ画像

Visual Studio Code（VS Code）には、エディタ内でコマンドを実行できる「統合ターミナル」が搭載されています。

ファイル編集とコマンド操作を同じ画面で行えるため、開発効率を大幅に向上させることが可能です。

特にHTMLやCSSのコーディングだけでなく、Git操作やNode.jsの実行、WordPress開発などでも頻繁に利用されます。

この記事では、VS Codeの統合ターミナルの基本操作から実践的なコマンドの使い方まで詳しく解説します。

VS Codeの統合ターミナルとは

統合ターミナルとは、VS Codeの画面内で利用できるコマンドライン環境です。

通常であれば別途ターミナルソフトやコマンドプロンプトを起動する必要がありますが、VS Codeではエディタと同じ画面で操作できます。

主なメリットは次のとおりです。

  • ウィンドウを切り替える必要がない
  • プロジェクトフォルダを自動認識する
  • Git操作が簡単になる
  • Node.jsやnpmをすぐ実行できる
  • 開発作業を一元管理できる

統合ターミナルを開く方法

メニューから開く

上部メニューから次の順に選択します。

表示 → ターミナル

ショートカットキーで開く

Windows

Ctrl + `

Mac

Control + `

バッククォート（`）キーを押すことでターミナルの表示・非表示を切り替えられます。

ターミナルの基本構成

統合ターミナルを開くと画面下部にターミナル領域が表示されます。

主な構成は以下の通りです。

ターミナル名

現在使用しているシェルが表示されます。

例

PowerShell
Command Prompt
Git Bash
zsh
bash

コマンド入力エリア

コマンドを入力して実行する場所です。

ターミナル管理ボタン

以下の操作が可能です。

  • 新しいターミナル作成
  • 分割表示
  • 終了
  • シェル変更

現在の場所を確認するコマンド

コマンド操作では現在のディレクトリを把握することが重要です。

Windows（PowerShell）

pwd

Mac/Linux

pwd

実行結果例

C:\Users\User\Desktop\project

現在作業しているフォルダが表示されます。

ファイル一覧を表示する

Windows PowerShell

dir

Mac/Linux

ls

実行例

index.html
style.css
script.js

プロジェクト内のファイルを確認できます。

フォルダを移動する

基本構文

cd フォルダ名

例

cd src

上の階層へ戻る場合

cd ..

実行例

cd images

これでimagesフォルダへ移動できます。

フォルダを作成する

基本構文

mkdir フォルダ名

例

mkdir assets

実行後

assets

というフォルダが作成されます。

ファイルを作成する

Windows PowerShell

New-Item sample.txt

Mac/Linux

touch sample.txt

実行すると空のファイルが作成されます。

ファイルを削除する

Windows PowerShell

Remove-Item sample.txt

Mac/Linux

rm sample.txt

削除前にファイル名を十分確認することが重要です。

フォルダを削除する

Windows PowerShell

Remove-Item assets -Recurse

Mac/Linux

rm -rf assets

誤操作すると元に戻せないため注意が必要です。

VS CodeからGitを利用する

Gitは統合ターミナルとの相性が非常に優れています。

Gitの基本については「Gitとは？初心者向けにわかりやすく解説」で詳しく解説しています。

Gitの状態確認

git status

実行例

On branch main
nothing to commit

Gitへ追加

git add .

コミット

git commit -m "初回コミット"

Node.jsを実行する

JavaScript開発では統合ターミナルの利用頻度が高くなります。

Node.jsについては「Node.jsとは？基本からわかりやすく解説」も参考になります。

バージョン確認

node -v

実行例

v24.0.0

JavaScript実行

node script.js

script.jsの内容が実行されます。

npmコマンドを利用する

Node.jsを利用している場合はnpmも頻繁に使用します。

バージョン確認

npm -v

パッケージ初期化

npm init -y

パッケージインストール

npm install

ターミナルを分割表示する

複数の作業を同時進行したい場合は分割表示が便利です。

例えば以下のような使い方ができます。

左側

Git操作

右側

npm実行

それぞれ独立して利用できます。

ターミナルの種類を変更する

VS Codeでは複数のシェルを利用できます。

代表例

  • PowerShell
  • Command Prompt
  • Git Bash
  • WSL
  • bash
  • zsh

変更方法

ターミナル → 新しいターミナルの横の▼

環境に応じて切り替え可能です。

よくあるトラブル

コマンドが認識されない

例

'node' は認識されていません

原因

  • Node.js未インストール
  • PATH未設定

Node.jsを再インストールすると解決する場合があります。

フォルダ移動できない

例

cd src

でエラーになる場合は、フォルダ名が間違っている可能性があります。

現在のファイル一覧を確認しましょう。

ls

または

dir

権限エラーが発生する

原因

  • 管理者権限不足
  • アクセス権限不足

管理者権限でVS Codeを起動すると解決する場合があります。

統合ターミナルを使いこなすコツ

ショートカットを覚える

頻繁に利用する操作です。

Ctrl + `

Git操作を習慣化する

変更確認

git status

は定期的に実行すると便利です。

ファイル操作をコマンドで行う

エクスプローラーよりも高速に操作できる場合があります。

ターミナルを閉じずに使う

常時表示しておくことで作業効率が向上します。

まとめ

VS Codeの統合ターミナルは、開発効率を大きく向上させる重要な機能です。

基本的なコマンド操作を覚えることで、ファイル管理やGit操作、Node.js実行などをスムーズに行えるようになります。

まずは以下のコマンドから覚えるのがおすすめです。

pwd
ls
cd
mkdir
git status
node -v
npm install

これらを日常的に使うことで、VS Codeをより快適に活用できるようになるでしょう。

関連記事