VSCode

この先の研修を進めていくにあたり、効率的な開発環境の構築は必須です。ここではVSCodeの基本的な機能から活用方法について記載します。

VSCodeの導入

インストールとセットアップ

• VSCodeのインストール: VSCodeの公式ウェブサイト（https://code.visualstudio.com/）から適切なバージョンをダウンロードし、インストールします。

• 拡張機能のインストール: VSCodeは拡張機能によって機能を拡張できます。拡張機能をインストールするには、VSCodeのエクステンションビュー（左側のアイコン）を開き、必要な拡張機能を検索してインストールします。

インターフェースの概要とカスタマイズ

• サイドバー: サイドバーにはファイルやディレクトリのツリービュー、検索、ソースコード管理などのパネルがあります。

• エディタウィンドウ: エディタウィンドウはファイルの内容を表示します。複数のエディタウィンドウを開くこともできます。

• カスタマイズ: VSCodeの設定は「設定」メニューからアクセスできます。カスタムキーバインディング、テーマの設定、エディタのレイアウトなど、個人の好みに合わせてカスタマイズできます。

ファイルの作成、保存、編集

• ファイルの作成: VSCodeのエクスプローラビューから新しいファイルを作成するか、既存のファイルを開いて編集します。

• ファイルの保存: ファイルの変更を保存するには、[Ctrl+S]（Windows / Linux）または[Cmd+S]（Mac）を使用します。

• ファイルの編集: VSCodeはシンタックスハイライトや自動補完、コードフォーマットなどの機能を提供します。ファイルを編集する際にこれらの機能を活用しましょう。

基本操作

以下では、エディタの基本操作に関する項目をコマンドやコード例を交えて説明します。

カーソル移動とテキスト編集のテクニック

• カーソル移動:

  • 行の先頭に移動: [Home]キー

  • 行の末尾に移動: [End]キー

  • 次の単語に移動: [Ctrl+→]（Windows / Linux）、[Option+→]（Mac）

  • 前の単語に移動: [Ctrl+←]（Windows / Linux）、[Option+←]（Mac）

  • 行の上に移動: [Ctrl+↑]（Windows / Linux）、[Option+↑]（Mac）

  • 行の下に移動: [Ctrl+↓]（Windows / Linux）、[Option+↓]（Mac）

• テキスト編集:

  • 文字の削除: [Backspace]キー（前方に1文字削除）、[Delete]キー（後方に1文字削除）

  • 行全体の削除: [Ctrl+Shift+K]（Windows / Linux / Mac）

  • 行のコピーと貼り付け: [Ctrl+C]（コピー）、[Ctrl+V]（貼り付け）

  • 行の移動: [Alt+↑]（上に移動）、[Alt+↓]（下に移動）

コード補完とスニペットの活用

• コード補完:

  • 関数やクラスの入力中に[Ctrl+Space]を押すと、利用可能な候補が表示されます。候補から選択すると自動的に補完されます。

• スニペット:

  • スニペットは再利用可能なコードの断片です。[Ctrl+Shift+P]でコマンドパレットを開き、「スニペットの挿入」を選択すると利用可能なスニペットが表示されます。

ファイルとフォルダの管理

• ファイルの作成と保存:

  • [Ctrl+N]で新しいファイルを作成します。

  • [Ctrl+S]でファイルの変更を保存します。

• フォルダの管理:

  • [Ctrl+Shift+E]でエクスプローラビューを開き、フォルダとファイルの階層を表示します。

これらはエディタの基本的な操作です。VSCodeにはさまざまな機能が用意されており、個々のニーズに応じてカスタマイズや拡張が可能です。公式ドキュメントやコミュニティのリソースを活用しながら、より効率的にエディタを活用しましょう。

ターミナルの活用

以下では、ターミナルの活用に関する項目をコマンドやコード例を交えて説明します。

統合ターミナルの設定と基本的なコマンドの使用

• 統合ターミナルの設定:

  • VSCodeの左下にある「ターミナル」ボタンをクリックして、統合ターミナルを開きます。ターミナルの表示形式や設定は、VSCodeの設定（settings.json）からカスタマイズできます。

• 基本的なコマンドの使用:

  • ディレクトリのリスト表示: ls（Linux / macOS）または dir（Windows）

  • ディレクトリの移動: cd ディレクトリ名

  • ファイルの作成: touch ファイル名

  • ファイルの削除: rm ファイル名

  • フォルダの作成: mkdir フォルダ名

  • フォルダの削除: rm -r フォルダ名

※この先の資料はLinuxを前提とするので、Windowsの人は「WSL で VS Code の使用を開始する」を参照してWindows Subsystem for Linux環境を構築しておいてください。

ターミナルとエディタの連携

• ファイルのターミナルでの開き方:

  • ターミナルで特定のファイルを開くには、code ファイル名のようにコマンドを使用します。

• ターミナルでのコードの実行:

  • ターミナルでプログラムを実行するには、適切なコマンド（例: python ファイル名.py）を入力します。

ターミナルのカスタマイズと拡張機能の活用

• カスタマイズ:

  • VSCodeの設定から、ターミナルの外観やテーマを変更することができます。

• 拡張機能の活用:

  • VSCodeには、ターミナルの機能を拡張するための多くの拡張機能が提供されています。例えば、ターミナルのエミュレーションやショートカットキーの拡張などがあります。

これらはターミナルの基本的な活用方法です。ターミナルを使って効率的に作業を進めるためには、さまざまなコマンドや設定を学び、自分のニーズに合わせてカスタマイズすることが重要です。

拡張機能の活用

以下では、VSCodeの拡張機能の活用方法について説明します。

プラグインのインストールと機能拡張

• 拡張機能のインストール:

  • VSCodeのサイドバーで、「拡張機能」ボタンをクリックし、検索バーに拡張機能の名前を入力して検索します。適切な拡張機能を選択し、「インストール」ボタンをクリックしてインストールします。

• 機能の拡張:

  • インストールした拡張機能は、VSCodeの機能を拡張したり、新しい機能を追加したりします。例えば、コードの補完、シンタックスハイライト、デバッグ機能などがあります。

人気のある拡張機能の紹介と使い方

• 「ESLint」: JavaScriptやTypeScriptのコードの品質チェックやコーディング規約の適用を行います。

  • インストール: 拡張機能の検索バーで「ESLint」を検索し、インストールします。

  • 使い方: プロジェクトのルートディレクトリにESLintの設定ファイルを作成し、コードの品質チェックを自動的に実行します。

• 「GitLens」: Gitのコード変更履歴を表示し、コードの変更者や変更箇所を可視化します。

  • インストール: 拡張機能の検索バーで「GitLens」を検索し、インストールします。

  • 使い方: エディタ内でコードを表示する際に、変更履歴やコードの作者を表示します。

カスタム拡張機能の作成と共有

• カスタム拡張機能の作成:

  • VSCodeの拡張機能開発キットを使用して、独自の拡張機能を作成することができます。拡張機能の作成には、JavaScriptやTypeScriptの知識が必要です。

• 拡張機能の共有:

  • 自分が作成した拡張機能を他の人と共有するためには、拡張機能をパッケージ化し、VSCode Marketplaceに公開する必要があります。VSCodeの公式ドキュメントには、拡張機能の作成と共有に関する詳細な手順が記載されています。

これらはVSCodeの拡張機能の活用方法の一部です。VSCodeには数多くの拡張機能があり、開発体験を向上させるための機能を提供しています。自分の作業スタイルやプロジェクトの要件に合わせて、有用な拡張機能を探索し活用してください。

デバッグ機能の活用

以下では、VSCodeのデバッグ機能の活用方法について説明します。

デバッグの基本原則とデバッガーの設定

• デバッグの基本原則:

  • デバッグの目的は、プログラムの実行中に問題を特定し解決することです。デバッグはバグの発見、変数の値の確認、コードのフローの追跡などを行います。

• デバッガーの設定:

  • VSCodeでは、様々なプログラミング言語向けにデバッガーが提供されています。デバッガーの設定は、各言語のデバッグ拡張機能をインストールし、デバッグ構成を定義することで行います。

ブレークポイントの設定とステップ実行

• ブレークポイントの設定:

  • ブレークポイントは、プログラムの特定の行に停止点を設定することです。ブレークポイントを設定すると、プログラムの実行がそのポイントで一時停止します。

  • ブレークポイントを設定する方法は、エディタ内で行数の横にクリックするか、デバッグパネルから設定するかのいずれかです。

• ステップ実行:

  • ステップ実行は、プログラムを一つずつ実行していくことです。ステップ実行の方法には、以下のものがあります:

    • ステップオーバー: 現在の行を実行し、次の行に進みます。

    • ステップイン: 現在の行の関数に入ります。

    • ステップアウト: 現在の関数から抜け出します。

変数の監視とエラーのトラブルシューティング

• 変数の監視:

  • デバッグ中に変数の値を確認したい場合、ウォッチ式を使用して変数を監視することができます。ウォッチ式を追加すると、その変数の値がデバッグパネルに表示されます。

• エラーのトラブルシューティング:

  • デバッグ中にエラーが発生した場合、デバッグパネルにエラーメッセージやスタックトレースが表示されます。この情報を活用してエラーの原因を特定し、問題を解決することができます。

これらのデバッグ機能を使って、プログラムの実行中に問題を特定し、修正することができます。デバッグは効果的な開発作業に不可欠なスキルであり、VSCodeのデバッグ機能を上手に活用しましょう。

様々なテクニック

以下では、VSCodeにおけるエディタ活用のためのテクニックについて説明します。

ショートカットキーの活用とカスタマイズ

• ショートカットキーの活用:

  • VSCodeには多くのショートカットキーが用意されており、効率的な操作を行うことができます。一部の便利なショートカットキーを以下に示します:

    • ファイルの保存: Ctrl + S（Windows/Linux）または Cmd + S（Mac）

    • 行の移動: Alt + ↑（上に移動）および Alt + ↓（下に移動）

    • 行のコピー: Shift + Alt + ↓（下にコピー）

    • 複数行の編集: Alt + クリック（カーソルを複数行に追加）

• ショートカットキーのカスタマイズ:

  • ショートカットキーは、個々の作業スタイルや好みに合わせてカスタマイズすることもできます。VSCodeでは、File > Preferences > Keyboard Shortcutsを選択して、デフォルトのキーバインドを変更したり、新しいキーバインドを追加したりすることができます。

ワークスペースとタスクの効果的な管理

• ワークスペースの活用:

  • ワークスペースは、関連するプロジェクトの複数のフォルダとファイルをまとめるための機能です。VSCodeでは、複数のフォルダをワークスペースに追加し、プロジェクト全体を一元管理することができます。

• タスクの管理:

  • VSCodeでは、タスクランナーを使用してタスクの自動化やビルドスクリプトの実行などを行うことができます。また、タスクをワークスペースに関連付けることで、プロジェクトごとに異なるタスクの設定を行うことも可能です。

エディタの設定と構成ファイルの活用

• エディタの設定:

  • VSCodeでは、エディタの設定をカスタマイズすることができます。File > Preferences > Settingsを選択して、エディタの設定を調整することができます。例えば、タブのサイズ、エディタのテーマ、フォントなどを設定できます。

• 構成ファイルの活用:

  • VSCodeでは、.vscodeというフォルダに構成ファイルを追加することで、プロジェクトごとの設定やタスクの定義を行うことができます。例えば、.vscode/settings.jsonにはプロジェクト固有のエディタ設定を記述することができます。

これらのパワーユーザーテクニックを活用することで、エディタの操作効率を向上させ、より効果的に開発作業を行うことができます。また、自分の作業スタイルや好みに合わせてエディタをカスタマイズすることで、快適な開発環境を構築できます。

VSCodeのベストプラクティスと今後の学習

以下では、VSCodeのベストプラクティスと今後の学習に関する項目をコマンドやコード例を交えて説明します。

プロジェクトのフォルダ構造と命名規則

• プロジェクトのフォルダ構造:

  • プロジェクトを効果的に管理するためには、適切なフォルダ構造を設計することが重要です。一般的なフォルダ構造の例は以下の通りです。

    project/
    ├── src/          # ソースコード
    ├── test/         # テストコード
    ├── docs/         # ドキュメント
    ├── config/       # 設定ファイル
    ├── dist/         # ビルド結果
    ├── node_modules/ # 依存関係
    ├── .git/         # Gitリポジトリ
    └── README.md     # プロジェクトの説明

• 命名規則:

  • フォルダやファイルの命名には、わかりやすく一貫性のある規則を使用することが重要です。例えば、キャメルケースやスネークケースなどの命名規則を採用し、意味のある名前を付けることが望ましいです。

エディタのパフォーマンス最適化とリソース管理

• パフォーマンス最適化:

  • 大規模なプロジェクトや複数の拡張機能を使用する場合、VSCodeのパフォーマンスに影響を与えることがあります。以下の設定やテクニックを使用してパフォーマンスを最適化できます。

    • 不要な拡張機能の無効化や削除

    • 大きなファイルやフォルダの除外

    • 設定の最適化（例: 自動保存の無効化）

    • 起動時の作業ディレクトリの制限

• リソース管理:

  • 複数のタブやエディタを開く場合、システムのリソースを効率的に管理することが重要です。以下の設定やテクニックを使用してリソースを最適化できます。

    • タブの最大数の制限

    • タブの自動リロードの無効化

    • リソースのモニタリング（例: タスクマネージャー）

コードの整形とスタイルガイドの遵守

• コードの整形:

  • VSCodeは、コードの整形やフォーマットを行うための機能を提供しています。プロジェクトのコーディングスタイルやスタイルガイドに基づいて、自動的にコードを整形することができます。以下は、Prettierという拡張機能を使用してコードを整形する例です。

  // settings.json
  {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }

• スタイルガイドの遵守:

  • プロジェクトやチームで共通のコーディングスタイルガイドがある場合は、それに従ってコードを書くことが望ましいです。VSCodeには、ESLintやTSLintなどの拡張機能を使用して、スタイルガイドのルールを自動的に適用することもできます。

今後の学習リソース

1. 公式ドキュメント:

   • VSCode 公式ドキュメントでは、VSCodeの機能や設定、拡張機能の使い方などについて詳細な情報が提供されています。
2. オンラインチュートリアル:

   • VSCode Tips and Tricksでは、VSCodeのさまざまな機能やショートカットキーを短いチュートリアル形式で学ぶことができます。
3. チュートリアル動画:

   • YouTubeなどのオンラインプラットフォームには、VSCodeに関するさまざまなチュートリアル動画があります。Traversy MediaやThe Net Ninjaなどのチャンネルは、VSCodeを含むWeb開発のチュートリアルを提供しています。