# コードエディタの使用 このレッスンでは、ウェブベースのコードエディタである [VSCode.dev](https://vscode.dev) の基本を学びます。これにより、コンピュータに何もインストールせずにコードを変更したり、プロジェクトに貢献したりすることができます。 ## 学習目標 このレッスンでは以下を学びます： - コードプロジェクトでコードエディタを使用する方法 - バージョン管理で変更を追跡する方法 - 開発のためにエディタをカスタマイズする方法 ### 前提条件 始める前に、[GitHub](https://github.com) のアカウントを作成する必要があります。[GitHub](https://github.com/) にアクセスし、まだアカウントを持っていない場合は作成してください。 ### はじめに コードエディタは、プログラムを書くため、また既存のコーディングプロジェクトと協力するための重要なツールです。エディタの基本とその機能の使い方を理解すれば、コードを書く際にそれらを活用できるようになります。 ## VSCode.dev の使い方 [VSCode.dev](https://vscode.dev) はウェブ上で動作するコードエディタです。ウェブサイトを開くのと同じように、何もインストールせずに使用できます。エディタを始めるには、次のリンクを開いてください：[https://vscode.dev](https://vscode.dev)。[GitHub](https://github.com/) にサインインしていない場合は、指示に従ってサインインするか、新しいアカウントを作成してサインインしてください。 ロードが完了すると、次のような画面が表示されます：  左から右に向かって、主に3つのセクションがあります： 1. _アクティビティバー_：虫眼鏡アイコン 🔎、歯車アイコン ⚙️ などのアイコンが含まれています。 2. 展開されたアクティビティバー（デフォルトでは _エクスプローラー_）で、_サイドバー_ と呼ばれます。 3. 右側のコードエリア。 各アイコンをクリックして異なるメニューを表示します。終わったら、_エクスプローラー_ をクリックして元の状態に戻ります。 コードを作成したり既存のコードを変更したりする際は、右側の最も大きなエリアを使用します。このエリアを使って既存のコードを確認することもできます。次にそれを行います。 ## GitHub リポジトリを開く 最初に必要なのは、GitHub リポジトリを開くことです。リポジトリを開く方法はいくつかあります。このセクションでは、リポジトリを開いて変更作業を始めるための2つの方法を紹介します。 ### 1. エディタを使用する エディタ自体を使ってリモートリポジトリを開きます。[VSCode.dev](https://vscode.dev) にアクセスすると、_"Open Remote Repository"_ ボタンが表示されます：  また、コマンドパレットを使用することもできます。コマンドパレットは、コマンドやアクションの一部を入力して適切なコマンドを実行するための入力ボックスです。左上のメニューを使用して _View_ を選択し、_Command Palette_ を選択します。または、次のキーボードショートカットを使用します：Ctrl-Shift-P（MacOS では Command-Shift-P）。  メニューが開いたら、_open remote repository_ と入力し、最初のオプションを選択します。あなたが参加している、または最近開いたリポジトリが複数表示されます。完全な GitHub URL を使用して選択することもできます。次の URL をボックスに貼り付けてください： ``` https://github.com/microsoft/Web-Dev-For-Beginners ``` ✅ 成功すると、このリポジトリのすべてのファイルがテキストエディタにロードされます。 ### 2. URL を使用する URL を直接使用してリポジトリをロードすることもできます。たとえば、現在のリポジトリの完全な URL は [https://github.com/microsoft/Web-Dev-For-Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) ですが、GitHub ドメインを `VSCode.dev/github` に置き換えることで、リポジトリを直接ロードできます。結果の URL は次のようになります：[https://vscode.dev/github/microsoft/Web-Dev-For-Beginners](https://vscode.dev/github/microsoft/Web-Dev-For-Beginners)。 ## ファイルを編集する ブラウザまたは vscode.dev でリポジトリを開いたら、次のステップはプロジェクトを更新または変更することです。 ### 1. 新しいファイルを作成する 既存のフォルダ内にファイルを作成するか、ルートディレクトリ/フォルダに作成することができます。新しいファイルを作成するには、保存したい場所/ディレクトリを開き、アクティビティバー（左）の _'New file ...'_ アイコンを選択し、名前を付けて Enter を押します。  ### 2. リポジトリ内のファイルを編集して保存する vscode.dev を使用すると、ローカルにソフトウェアをロードすることなく、プロジェクトを迅速に更新する際に便利です。 コードを更新するには、アクティビティバーにある 'Explorer' アイコンをクリックして、リポジトリ内のファイルとフォルダを表示します。 ファイルを選択してコードエリアで開き、変更を加えて保存します。  プロジェクトの更新が完了したら、リポジトリに加えたすべての新しい変更を含む _`source control`_ アイコンを選択します。 プロジェクトに加えた変更を確認するには、展開されたアクティビティバーの `Changes` フォルダ内のファイルを選択します。これにより、ファイルに加えた変更を視覚的に確認できる 'Working Tree' が開きます。赤はプロジェクトからの削除を示し、緑は追加を示します。  変更に満足したら、`Changes` フォルダにカーソルを合わせて `+` ボタンをクリックして変更をステージングします。ステージングとは、変更を GitHub にコミットする準備をすることを意味します。 変更に満足できない場合や破棄したい場合は、`Changes` フォルダにカーソルを合わせて `undo` アイコンを選択します。 その後、`commit message`（プロジェクトに加えた変更の説明）を入力し、`チェックアイコン` をクリックして変更をコミットしてプッシュします。 プロジェクトの作業が完了したら、左上の `ハンバーガーメニューアイコン` を選択して github.com 上のリポジトリに戻ります。  ## 拡張機能の使用 VSCode に拡張機能をインストールすると、エディタに新しい機能を追加したり、開発環境をカスタマイズしたりして、開発ワークフローを向上させることができます。これらの拡張機能は、複数のプログラミング言語をサポートするのにも役立ち、一般的な拡張機能や言語ベースの拡張機能があります。 利用可能なすべての拡張機能のリストを閲覧するには、アクティビティバーの _`Extensions icon`_ をクリックし、_`Search Extensions in Marketplace`_ とラベル付けされたテキストフィールドに拡張機能の名前を入力します。 拡張機能のリストには、**拡張機能名、発行者名、1文の説明、ダウンロード数**、および**星評価**が表示されます。  また、_`Installed folder`_ を展開して以前にインストールしたすべての拡張機能を表示したり、_`Popular folder`_ で多くの開発者が使用している人気の拡張機能を確認したり、_`recommended folder`_ で同じワークスペースのユーザーや最近開いたファイルに基づいて推奨される拡張機能を確認したりできます。  ### 1. 拡張機能をインストールする 拡張機能をインストールするには、検索フィールドに拡張機能の名前を入力し、拡張機能が展開されたアクティビティバーに表示されたらクリックして、コードエリアで拡張機能の追加情報を表示します。 展開されたアクティビティバーの _青いインストールボタン_ をクリックするか、拡張機能を選択してコードエリアに追加情報をロードした後に表示されるインストールボタンを使用してインストールします。  ### 2. 拡張機能をカスタマイズする 拡張機能をインストールした後、その動作を変更し、好みに基づいてカスタマイズする必要がある場合があります。これを行うには、拡張機能アイコンを選択し、今回は _Installed folder_ に表示される拡張機能をクリックし、_**ギアアイコン**_ をクリックして _Extensions Setting_ に移動します。  ### 3. 拡張機能を管理する 拡張機能をインストールして使用した後、vscode.dev はさまざまなニーズに基づいて拡張機能を管理するオプションを提供します。たとえば、次のような選択肢があります： - **無効化:** _(一時的に拡張機能を無効化し、完全にアンインストールしたくない場合)_ 展開されたアクティビティバーでインストール済みの拡張機能を選択 > ギアアイコンをクリック > 'Disable' または 'Disable (Workspace)' を選択 **または** コードエリアで拡張機能を開き、青い Disable ボタンをクリック。 - **アンインストール:** 展開されたアクティビティバーでインストール済みの拡張機能を選択 > ギアアイコンをクリック > 'Uninstall' を選択 **または** コードエリアで拡張機能を開き、青い Uninstall ボタンをクリック。 --- ## 課題 [VSCode.dev を使用して履歴書ウェブサイトを作成する](https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/8-code-editor/1-using-a-code-editor/assignment.md) ## 復習と自己学習 [VSCode.dev](https://code.visualstudio.com/docs/editor/vscode-web?WT.mc_id=academic-0000-alfredodeza) とその他の機能についてさらに学びましょう。 **免責事項**: この文書は、AI翻訳サービス [Co-op Translator](https://github.com/Azure/co-op-translator) を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてお考えください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解釈について、当方は一切の責任を負いません。