MENU

Visual Studio Code (VSCode) の環境開発ガイド

静的サイト関連
weveweb
  • URLをコピーしました！

ハーマ先生

は～い！今日の講義を担当させていただくハーマ先生です！
ハーマ先生って誰やねんと思ったら記事の最下部に説明書いてあるから見てね～(投げやり)

目次

世界一わかりやすい！～講義形式で学ぶサイト制作～:第17回

僕もVSCodeは使ってるけど、設定や拡張機能をうまく活用できてないんだ。どこから手をつければいいの？

ウィーブ・ウェブ君

ハーマ先生

こんにちは！今日はVisual Studio Code (VSCode)の環境開発を始める方法を、詳しく解説していくよ。VSCodeは、軽量で高速、さらに多くのプログラミング言語に対応している優れたエディタなんだ。使い方をマスターすれば、開発作業が飛躍的に効率化されるよ！

1. VSCodeとは？

シャキシャキ先生: 「まず、VSCodeについて簡単に説明するよ。VSCodeは、Microsoftが開発した無料のテキストエディタで、オープンソースとして提供されているんだ。軽量でありながら、多機能なエディタで、拡張機能を追加することで様々なプログラミング言語やワークフローに対応できるよ。」

ハーマ先生

こんにちは！今日はVisual Studio Code (VSCode)の環境開発を始める方法を、詳しく解説していくよ。VSCodeは、軽量で高速、さらに多くのプログラミング言語に対応している優れたエディタなんだ。使い方をマスターすれば、開発作業が飛躍的に効率化されるよ！

  • クロスプラットフォーム: Windows、macOS、Linuxに対応しているから、どんな環境でも使える。
  • 統合ターミナル: エディタ内でコマンドラインを使えるから、作業の効率がアップするよ。
  • Gitの統合: Gitリポジトリの操作がエディタ内でできるのも便利だよ。

2. VSCodeのインストール方法

どうやってVSCodeをインストールすればいいの？

ウィーブ・ウェブ君

ハーマ先生

インストール方法はとても簡単だよ！それぞれのOSに合わせた手順を説明するね。

ステップ1: VSCodeのダウンロード

  1. まずは、VSCodeの公式サイトにアクセスして、Downloadボタンをクリック。
  2. 自分のOSに合ったバージョン（Windows, macOS, Linux）を選んでダウンロード。

ステップ2: インストール手順

  • Windows: ダウンロードしたインストーラ（VSCodeSetup.exe）を実行して、インストールウィザードに従うだけでOK。
  • macOS: VSCode-darwin.zipを解凍して、Visual Studio Code.appを「アプリケーション」フォルダにドラッグ＆ドロップ。
  • Linux: ディストリビューションによって手順が異なるけど、debやrpmパッケージを使って簡単にインストールできるよ。

3. 基本的な使い方：エディタの操作

インストールできたけど、次はどうやって使うの？

ウィーブ・ウェブ君

ハーマ先生

それじゃ、VSCodeの基本的な操作を見ていこう。

ステップ3: ファイルの開閉

  • VSCodeでは、プロジェクト全体のディレクトリを開いて作業するのが基本だよ。画面左側のエクスプローラーで、ファイルの作成・削除・移動が簡単にできる。
bashコードをコピーするFile -> Open Folder
  • Ctrl + Pで、素早くファイルを検索して開けるよ。

ステップ4: ターミナルの利用

  • 内蔵ターミナルを使うと、VSCodeを閉じずにコマンドライン作業ができる。例えば、Gitコマンドやnpm、yarnコマンドを実行する時に便利だよ。
bashコードをコピーするView -> Terminal
  • ターミナルは複数同時に開いて、プロジェクトごとに作業ができるんだ。

4. 拡張機能で機能を拡張する

機能を追加できるって言ってたけど、どんな拡張機能があるの？

ウィーブ・ウェブ君

ハーマ先生

VSCodeの魅力は、豊富な拡張機能を使って、自分の開発環境に合わせた機能を追加できるところなんだ！いくつかおすすめの拡張機能を紹介するね。

ステップ5: おすすめの拡張機能

  1. Prettier – Code formatter
    • コードを自動で整形してくれるフォーマッタだよ。チーム開発でも、コードのスタイルを統一するのに役立つ。
    ext install esbenp.prettier-vscode
  2. ESLint
    • JavaScriptやTypeScriptのコードを静的に解析して、コードの品質を保つためのツール。
    ext install dbaeumer.vscode-eslint
  3. GitLens
    • Gitリポジトリの変更履歴を視覚的に表示してくれる拡張機能。誰がどの行を変更したかがすぐにわかる。
    ext install eamodio.gitlens
  4. Live Server
    • HTMLやCSS、JavaScriptをリアルタイムでプレビューできる拡張機能。ローカルサーバーを立ち上げて、ブラウザで変更を即時反映できるんだ。
    ext install ritwickdey.liveserver

ハーマ先生

拡張機能はVSCodeの左サイドバーから簡単に追加できるよ。検索してInstallボタンを押すだけで、すぐに使えるようになるんだ！

5. VSCodeでの開発環境のカスタマイズ

VSCodeをもっと自分好みにカスタマイズしたいんだけど、設定とかはどうすればいいの？

ウィーブ・ウェブ君

ハーマ先生

設定はかなり柔軟にカスタマイズできるよ。設定メニューやsettings.jsonを使って、エディタの動作や表示を細かく調整しよう。

ステップ6: テーマとアイコンを変更

  1. テーマを変更するには、VSCode内でCtrl + K、Ctrl + Tを押して、好きなテーマを選べるよ。Dark ModeやLight Mode、さらに特定の言語に特化したテーマもあるよ。
  2. File Icon Themeでファイルアイコンをカスタマイズすると、ファイルやフォルダの種類を視覚的に区別できて便利だよ。

ステップ7: settings.jsonのカスタマイズ

  1. 設定はsettings.jsonファイルで細かく調整できるんだ。たとえば、タブの幅や自動保存の設定をカスタマイズしたいときは、以下のように書くよ。
{
  "editor.tabSize": 4,
  "files.autoSave": "afterDelay",
  "editor.formatOnSave": true
}

ハーマ先生

これで、自分好みの開発環境が整いそうだね！

6. Gitとバージョン管理の活用

ウィーブ君: 「VSCodeでGitの操作ができるって聞いたけど、具体的にはどう使うの？」

シャキシャキ先生: 「VSCodeはGitリポジトリを簡単に管理できるんだよ。Gitの操作をコマンドラインでやらなくても、VSCodeのインターフェイスで直感的にコミットやプッシュができるんだ。」

VSCodeでGitの操作ができるって聞いたけど、具体的にはどう使うの？

ウィーブ・ウェブ君

ハーマ先生

VSCodeはGitリポジトリを簡単に管理できるんだよ。Gitの操作をコマンドラインでやらなくても、VSCodeのインターフェイスで直感的にコミットやプッシュができるんだ。

ステップ8: Gitの基本操作

ハーマ先生

VSCodeのGit統合はシンプルだけど、効率的な開発が可能になるよ。変更内容を視覚的に確認できるから、チーム開発でも重宝するはずだ。

Gitの操作ができるってわかってきたけど、具体的な手順は？

ウィーブ・ウェブ君

ハーマ先生

じゃあ、Gitの基本操作をもう少し詳しく見てみよう。VSCodeでGitのリポジトリを管理する手順を説明するよ。

ステップ9: リポジトリのクローン

  1. Gitリポジトリをクローンするには、Source Controlアイコンをクリックし、Clone Repositoryを選択。
  2. リポジトリのURLを入力し、ローカルにクローンする場所を指定する。

ステップ10: 変更のステージングとコミット

  1. 変更をステージングするには、ソース管理サイドバーでファイルを選んで+アイコンをクリック。
  2. コミットするには、コミットメッセージを入力し、Ctrl + Enterを押すだけ。

ステップ11: プルとプッシュ

  1. **プル（Pull）**でリモートの最新の変更を取得するには、Pullオプションを使う。
  2. **プッシュ（Push）**は、ローカルのコミットをリモートに送る操作で、ソース管理サイドバーから簡単に実行できる。

7. VSCodeのショートカットで開発効率アップ

もっと効率よく使いたいけど、何かショートカットはある？

ウィーブ・ウェブ君

ハーマ先生

もちろん！VSCodeはショートカットが充実しているから、よく使う操作を一気に効率化できるよ。いくつかの便利なショートカットを紹介するね。

ステップ12: よく使うVSCodeのショートカット

  • ファイルを素早く開く: Ctrl + P（ファイル名を入力して瞬時に検索）
  • コード整形（フォーマット）: Shift + Alt + F（コードを自動で整える）
  • ターミナルの表示/非表示: Ctrl + ~（ターミナルの素早い切り替え）
  • コメントアウト: Ctrl + /（選択した行をコメントにする）
  • 全ファイル内検索: Ctrl + Shift + F（プロジェクト全体からテキストを検索）

ウィーブ君: 「これならもっとスピーディに開発が進められそうだ！」

これならもっとスピーディに開発が進められそうだ！

ウィーブ・ウェブ君

8. VSCodeでのデバッグの基本操作

コードを書くだけじゃなくて、エラーを見つけるためのデバッグも重要だよね？

ウィーブ・ウェブ君

ハーマ先生

その通り！VSCodeには強力なデバッグ機能があるから、簡単にブレークポイントを設定して、ステップ実行でコードの問題を追跡できるよ。

ステップ13: デバッグの設定

  1. ブレークポイントを設定: デバッグしたい行をクリックして赤い点（ブレークポイント）を設定。
  2. デバッグコンソールでエラーや変数の値を確認: Run and Debugビューからデバッグを開始。

ステップ14: ステップ実行

  • ステップオーバー: F10 で次の行へ。
  • ステップイン: F11 で関数内へ入る。
  • ステップアウト: Shift + F11 で関数を抜ける。

ハーマ先生

デバッグ機能を活用すれば、コードの問題を素早く見つけて修正できるよ。

まとめ

ハーマ先生

今日は、VSCodeのインストールから基本的な使い方、さらにはGitとの連携やデバッグ機能まで解説したよ。VSCodeは拡張機能を使うことで、どんな開発環境にも適応できる万能ツールなんだ。

ありがとう、シャキシャキ先生！VSCodeがこんなに多機能で、効率よく開発を進められるツールだとは思わなかったよ。拡張機能やショートカットを活用して、もっと効率的に開発を進めていこう！

ウィーブ・ウェブ君

VSCodeのまとめ:

  • クロスプラットフォーム対応で、どのOSでも使える。
  • 拡張機能を使って、自由に機能を追加可能。
  • Gitとの統合で、バージョン管理も簡単にできる。
  • デバッグ機能で、リアルタイムにエラーを見つけて修正可能。

次のステップでは、自分のプロジェクトに合わせてさらにカスタマイズしたり、高度なプラグインを追加して、開発環境を整えていきましょう！

静的サイト関連
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

wevewebのアバター weveweb

合同会社We'veweb(https://weveweb.com)の代表、兼、ブログの管理人やってます!!
趣味は旅行と温泉です！

関連記事

コメント

コメントする

目次