1.1 VSCode のインストールと設定

イントロダクション

Visual Studio Code（VSCode）は、Microsoft が開発した無料のオープンソースのコードエディタです。軽量でありながら、多くの機能があり、さまざまな言語と環境でコードを書くのに適しています。このチュートリアルでは、VSCode を使用して Web 開発を進めていきます。

VSCodeのロゴ

VSCode のインストール

VSCode は、Windows、Mac、Linux のすべての主要なプラットフォームで利用可能です。以下の手順でインストールしてください。

  1. VSCode 公式サイトにアクセスします。
  2. 「Download for Windows」、「Download for macOS」、「Download for Linux」のいずれかのボタンをクリックして、お使いのプラットフォーム用のインストーラをダウンロードします。

VSCodeダウンロード画面

  1. ダウンロードしたインストーラを実行し、表示される指示に従ってインストールを完了させます。

インストールが完了すると、VSCode を起動できます。

VSCode の基本設定

VSCode を開いたら、いくつかの基本設定を行いましょう。

テーマの変更

  1. VSCode の左下にある歯車アイコンをクリックして、設定メニューを開きます。
  2. 「Color Theme」をクリックして、好みのテーマを選択します。

テーマ変更画面

拡張機能のインストール

VSCode では、拡張機能をインストールすることで、さらに多機能な開発環境を構築できます。このチュートリアルで役立つ拡張機能をいくつか紹介します。

  1. 左側のメニューで拡張機能アイコン（四角形が重なったアイコン）をクリックします。
  2. 検索バーに拡張機能名を入力し、検索結果から適切なものを選択してインストールします。

このチュートリアルでお勧めの拡張機能：

  • Live Server: ローカルサーバーを立ち上げ、HTML ファイルの変更をリアルタイムでプレビューできます。
  • Prettier: コードを自動で整形してくれる拡張機能です。

拡張機能の検索とインストール

ショートカットキー

VSCode では、ショートカットキーを使って効率的に作業を進めることができます。以下は一般的なショートカットキーの例です。

  • Ctrl + S (Cmd + S on macOS)：ファイルを保存
  • Ctrl + F (Cmd + F on macOS)：ファイル内で検索
  • Ctrl + H (Cmd + H on macOS)：ファイル内で置換
  • Ctrl + C (Cmd + C on macOS)：選択したテキストをコピー
  • Ctrl + V (Cmd + V on macOS)：テキストを貼り付け
  • Ctrl + X (Cmd + X on macOS)：選択したテキストを切り取り

ショートカットキー

まとめ

これで、VSCode のインストールと基本設定が完了しました。次の章では、HTML と CSS を使って日記サイトを作成していきます。VSCode の機能を活用して、効率的にコーディングを進めていきましょう！

QUIZ

VSCodeの拡張機能を検索するには、どのアイコンをクリックすべきですか？