ターミナル（コマンドプロンプト）の基本操作を学ぼう

学習の目標

本章では、プログラミングに必要な基本ツールであるVisual Studio Code（VS Code）のインストール方法と基本的な操作方法を学びます。

VS Codeは世界中の開発者が利用する使いやすいコードエディタで、これからのプログラミング学習で継続的に使用するツールです。

VS Codeとは

VS Codeは、Microsoftが開発・提供している無料のコードエディタです。

多くの機能を備えており、プログラミング初心者から上級者まで幅広く利用されています。

VS Codeの主な特徴は以下の通りです。

• 無料で使える高機能なコードエディタ
• さまざまなプログラミング言語に対応
• 多数の拡張機能によって機能を追加できる
• Windows、Mac、Linuxなど様々なOSで利用可能

インストール前の準備

インストールを始める前に、お使いのパソコンがインターネットに接続されていることを確認してください。

VS Codeは公式サイトからダウンロードします。

インストーラーのダウンロード手順

公式サイトにアクセスする

まずは、VS Codeの公式サイトにアクセスしましょう。

ブラウザでGoogle検索を開き、「vs code」と検索します。

検索結果の一番上に表示される「Visual Studio Code - Code Editing. Redefined」というMicrosoftの公式サイトをクリックします。

以下のURLからも直接アクセスできます。

https://code.visualstudio.com/

インストーラーをダウンロードする

公式サイトにアクセスすると、画面中央に大きなダウンロードボタンが表示されます。

自動的にお使いのOS（WindowsまたはMac）に合わせたダウンロードボタンが表示されます。

• Macをお使いの方：「Download for Mac」をクリック
• Windowsをお使いの方：「Download for Windows」をクリック

OSごとのインストール手順

Macの場合

ダウンロードした「VSCode.zip」をダブルクリックして解凍します。

解凍されたアプリケーション「Visual Studio Code」をダブルクリックして起動します。

初回起動時に「開発元が未確認のため開けません」という警告が表示された場合は、以下の手順で対応します。

まず「キャンセル」をクリックしてください。

次に「システム環境設定」から「セキュリティとプライバシー」を開きます。

最後に「このまま開く」ボタンをクリックしてください。

VS Codeが起動したら、インストール完了です。

Windowsの場合

ダウンロードした「VSCodeSetup.exe」をダブルクリックして実行します。

「使用許諾契約書」が表示されるので、内容を確認して「同意する」を選択し、「次へ」をクリックします。

インストール先のフォルダを確認します。

通常はデフォルトのままで問題ありませんので、「次へ」をクリックします。

スタートメニューへの登録を確認し、「次へ」をクリックします。

追加タスクの選択画面では、以下の項目にチェックを入れておくことをおすすめします。

• 「デスクトップ上にアイコンを作成する」
• 「PATHへの追加」
• 「すべてのユーザーに対してインストールする」

「次へ」をクリックし、「インストール」ボタンをクリックしてインストールを開始します。

インストールが完了したら「完了」をクリックして、VS Codeを起動します。

起動の確認

インストールが完了したら、VS Codeを起動して正常に動作するか確認しましょう。

Macの場合は、「アプリケーション」フォルダから「Visual Studio Code」をダブルクリックします。

Windowsの場合は、デスクトップに作成されたショートカットアイコンをダブルクリックするか、スタートメニューから「Visual Studio Code」を探してクリックします。

正常に起動すると、VS Codeのウェルカム画面が表示されます。

画面の左側にはファイルエクスプローラーが配置され、中央部分には「Welcome」というタブが開いた状態になります。

VS Codeの日本語化

VS Codeは初期状態では英語表示になっています。

日本語で使用したい場合は、以下の手順で日本語化を行いましょう。

画面左側にあるExtensionsアイコン（四角いパズルピースのようなアイコン）をクリックします。

次に、検索バーに「Japanese」と入力して検索します。

検索結果に「Japanese Language Pack for Visual Studio Code」が表示されますので「Install」ボタンをクリックしてインストールします。

インストールが完了すると、画面右下に「Change Language and Restart」というメッセージが表示されますので、これをクリックしてVS Codeを再起動します。

VS Codeの基本的な使い方

VS Codeの基本的な使い方について説明していきます。

プログラミング学習に必要な操作方法を、順を追って解説していきます。

フォルダを開く

プログラミングで使用するフォルダをVS Codeで開く手順です。

メニューバーから「ファイル」→「フォルダを開く」を選択します。

表示されるダイアログで目的のフォルダを選択し、「フォルダの選択」をクリックします。

選択したフォルダの内容が、左側のエクスプローラーパネル（ファイルツリー）に表示されます。

ファイルツリーでは、フォルダの階層構造が表示されます。

フォルダの横にある三角形のアイコンをクリックすることで、フォルダの内容を展開したり折りたたんだりできます。

ファイルの操作

VS Codeでよく使う、ファイルの基本的な操作方法を説明します。

ファイルを開く

ファイルツリーから目的のファイルをクリックします。

ファイルが右側のエディタエリアに開かれます。

複数のファイルはタブとして表示されます。

タブをクリックして、編集するファイルを切り替えできます。

タブの×ボタンでファイルを閉じられます。

新しいファイルの作成

メニューバーの「ファイル」→「新規ファイル」を選択します。

または、ファイルツリーで右クリック→「新しいファイル」を選択します。

新規ファイルがエディタエリアに開かれます。

フォルダの作成

ファイルツリーで右クリック→「新しいフォルダ」を選択します。

フォルダ名を入力してEnterキーを押します。

ファイル・フォルダの移動

移動したい項目をドラッグします。

移動先にドロップするだけです。

ファイルの保存

編集したファイルの保存方法です。

メニューバーの「ファイル」→「保存」を選択します。

ショートカットキーも便利です。

• MacならCommand + S
• WindowsならControl + S

保存状態の確認

未保存のファイルはタブに白い点が表示されます。

保存すると点が消えます。

エディタエリアの分割

長いファイルの編集や複数ファイルの比較に便利な、エディタエリアの分割方法です。

開いているタブを右クリックします。

「右に分割」を選択します。

エディタエリアが2つに分割され、同時に2つのファイルを表示できるようになります。

以下の画像では、左側と右側で異なるファイルが表示されています。

ターミナルの基本操作

VS Codeでターミナルを使う方法を学びます。

ターミナル（コマンドライン）とは、キーボードでコマンドを入力してパソコンを操作するための画面です。

マウスを使ってクリックする代わりに、文字を入力して指示を出します。

プログラミングでは、このターミナルを使った操作がとても重要になります。

初めは少し難しく感じるかもしれませんが、基本的なコマンドを覚えれば、ファイルやフォルダの操作がとても速くなります。

ターミナルを開く方法

VS Codeでターミナルを開く方法はいくつかあります。

最もよく使われる2つの方法を紹介します。

方法1：メニューバーから開く

画面上部のメニューバーから「ターミナル」をクリックします。

表示されたメニューから「新しいターミナル」を選択します。

方法2：エクスプローラーから特定のフォルダで開く

この方法が便利なのは、開きたいフォルダの位置で直接ターミナルを開始できることです。

左側のエクスプローラー（ファイルツリー）で、ターミナルを開きたいフォルダを右クリックします。

表示されるメニューから「統合ターミナルで開く」を選択します。

どちらの方法でも、VS Codeの画面下部にターミナルウィンドウが表示されます。

ここにコマンドを入力して実行できます。

ターミナルウィンドウについて

ターミナルが開くと、次のような表示が見えるかもしれません。

C:\Users\あなたの名前\プロジェクト名>

または、Macの場合は次のように表示されるかもしれません。

あなたのパソコン名:プロジェクト名 あなたの名前$

この表示は「プロンプト」と呼ばれ、現在どのフォルダにいるかを示しています。

プロンプトの後ろに、実行したいコマンドを入力します。

基本的なコマンド

ターミナルでよく使う基本コマンドを見ていきましょう。

これらを覚えるだけでも、ファイル操作が格段に楽になります。

ファイルとフォルダの一覧を表示する

ls

このコマンドは、現在いるフォルダ内のファイルやフォルダの一覧を表示します。

なお、Windowsではdirというコマンドで同じような結果を得ることができますが、今後テキストではlsを使用していきます。

フォルダの移動

# 特定のフォルダに移動する
cd プロジェクト名

# 一つ上のフォルダに戻る
cd ..

cdは「Change Directory（ディレクトリを変更する）」の略です。

ディレクトリとはフォルダのことです。

現在の位置を確認する

pwd

このコマンドで、現在自分がどのフォルダにいるのかを確認できます。

迷子になったときに便利です。

なお、Windowsではcdと入力するだけで同じような結果を得ることができますが、今後テキストではpwdを使用していきます。

ファイルの操作コマンド

ターミナルでファイルを作成したり削除したりするコマンドです。

ファイルの作成

# ファイルを作成
touch ファイル名.拡張子

# 例：HTMLファイルを作成
touch index.html

なお、Windowsではtouchコマンドが標準では利用できませんが、VS Codeのターミナルでは使用できますので、今後テキストではtouchを使用していきます。

ファイルの削除

# ファイルを削除
rm ファイル名.拡張子

# 例：HTMLファイルを削除
rm index.html

注意: rmコマンドでファイルを削除すると、ゴミ箱に入らず完全に削除されます。

操作には十分に注意しましょう。

フォルダの操作コマンド

ターミナルでフォルダを作成したり削除したりするコマンドです。

フォルダの作成

# フォルダを作成
mkdir フォルダ名

# 例：imagesフォルダを作成
mkdir images

mkdirは「Make Directory（ディレクトリを作成する）」の略です。

空のフォルダの削除

# 空のフォルダを削除
rmdir フォルダ名

# 例：空のimagesフォルダを削除
rmdir images

フォルダとその中身を全て削除

# フォルダとその中身をすべて削除
rm -r フォルダ名

# 例：imagesフォルダとその中身をすべて削除
rm -r images

注意: このコマンドもファイルを完全に削除します。

特に-rオプションは、フォルダ内のすべてのファイルとサブフォルダを削除するため、使用には十分に注意しましょう。

コマンド入力を効率化するテクニック

ターミナルでのコマンド入力を効率的に行うための便利なテクニックを紹介します。

タブ補完

ファイル名やフォルダ名を途中まで入力した後に「Tab」キーを押すと、残りの部分を自動補完してくれます。

例えば、cd iと入力した後に「Tab」キーを押すと、フォルダに「images」があれば、cd imagesと自動補完されます。

これにより、長いファイル名やフォルダ名の入力ミスを防げます。

コマンド履歴の利用

キーボードの「↑」キーを押すと、以前に入力したコマンドを呼び出せます。

• 「↑」キー：前に入力したコマンドを表示
• 「↓」キー：次のコマンド履歴に移動

同じコマンドを何度も入力する必要がなくなり、作業効率が上がります。

ターミナルを閉じる方法

ターミナルの使用が終わったら、以下の方法で閉じることができます。

ターミナルウィンドウ右上の「×」ボタンをクリックするか、ターミナルで exit と入力してEnterキーを押します。

まとめ

本章では、開発環境の基盤となるVS Codeのインストールと基本操作について学習しました。

VS Codeは無料で使える高機能なコードエディタで、プログラミング学習の重要なツールとして活用していきます。

フォルダやファイルの操作、保存方法、エディタエリアの分割、そしてターミナルの基本的なコマンドなど、プログラミングでよく使用する機能を習得しました。

これらの操作に慣れることで、プログラミング作業を効率的に進められるようになります。

特によく使うターミナルコマンドをおさらいしておきましょう。

• ls：ファイル一覧の表示
• cd：フォルダの移動
• pwd：現在の位置の確認
• mkdir：フォルダの作成
• touch：ファイルの作成

これらのコマンドを使いこなせるようになると、プログラミング作業がずっと効率的になります。