9.4 KiB

Raw Blame History Unescape Escape

コードエディターの使い方：VSCode.devをマスターしよう

ようこそ！
このレッスンでは、強力なウェブベースのコードエディターであるVSCode.devの基本から応用までを学びます。コードの編集、プロジェクト管理、変更の追跡、拡張機能のインストール、そしてプロのようにコラボレーションする方法を、ブラウザだけでインストール不要で習得できます。

学習目標

このレッスンを終える頃には、以下ができるようになります：

どんなプロジェクトでも効率的にコードエディターを使いこなす
組み込みのバージョン管理機能で作業をスムーズに追跡する
エディターのカスタマイズや拡張機能で開発ワークフローを向上させる

前提条件

始めるには、無料のGitHubアカウントに登録してください。これにより、コードリポジトリを管理し、世界中の人々とコラボレーションできます。まだアカウントを持っていない場合は、こちらで作成してください。

なぜウェブベースのコードエディターを使うのか？

コードエディターであるVSCode.devは、コードの作成、編集、管理を行うための指令センターです。直感的なインターフェース、多くの機能、そしてブラウザからすぐにアクセスできるため、以下が可能です：

どんなデバイスでもプロジェクトを編集
インストールの手間を回避
即座にコラボレーションや貢献

VSCode.devに慣れれば、どこからでも、いつでもコーディングタスクに取り組む準備が整います。

VSCode.devの使い方

VSCode.dev にアクセスしてください。インストールもダウンロードも不要です。GitHubでサインインすると、設定、拡張機能、リポジトリの同期を含む完全なアクセスが可能になります。プロンプトが表示されたら、GitHubアカウントを接続してください。

読み込みが完了すると、ワークスペースは以下のように表示されます：

ワークスペースは左から右に以下の3つの主要セクションで構成されています：

アクティビティバー: 🔎（検索）、⚙️（設定）、ファイル、ソース管理などのアイコン
サイドバー: アクティビティバーのアイコンに応じてコンテキストが変化（デフォルトはExplorerでファイルを表示）
エディター/コードエリア: 右側の最大セクション—ここでコードを編集・表示します

アイコンをクリックして機能を探索してください。ただし、進行を維持するために_Explorer_に戻ることを忘れないでください。

GitHubリポジトリを開く

方法1: エディターから

VSCode.devにアクセスし、「Open Remote Repository」 をクリックします。

コマンドパレット（Ctrl-Shift-P、またはMacではCmd-Shift-P）を使用することもできます。
- オプションを選択します。
- GitHubリポジトリのURL（例：https://github.com/microsoft/Web-Dev-For-Beginners）を貼り付けてEnterを押します。

成功すると、プロジェクト全体が読み込まれ、編集可能になります！

方法2: URLを直接使用

GitHubリポジトリのURLを変換して、VSCode.devで直接開くことができます。github.comをvscode.dev/githubに置き換えるだけです。
例：

GitHub: https://github.com/microsoft/Web-Dev-For-Beginners
VSCode.dev: https://vscode.dev/github/microsoft/Web-Dev-For-Beginners

この機能により、どんなプロジェクトでも迅速にアクセスできます。

プロジェクト内のファイルを編集する

リポジトリを開いたら、以下ができます：

1. 新しいファイルを作成

Explorerサイドバーで目的のフォルダを選択するか、ルートを使用します。
_「New file ...」_アイコンをクリックします。
ファイル名を入力してEnterを押すと、ファイルが即座に表示されます。

2. ファイルを編集して保存

Explorerでファイルをクリックしてコードエリアに開きます。
必要に応じて変更を加えます。
VSCode.devは変更を自動保存しますが、手動で保存する場合はCtrl+Sを押してください。

3. バージョン管理で変更を追跡してコミット

VSCode.devには統合されたGitバージョン管理機能があります！

_「Source Control」_アイコンをクリックして、行った変更を確認します。
Changesフォルダ内のファイルは、追加（緑）や削除（赤）を表示します。
- ファイルの横にある+をクリックして、コミットの準備をします。
- 不要な変更は元に戻すアイコンをクリックして破棄します。
- 明確なコミットメッセージを入力し、チェックマークをクリックしてコミットとプッシュを行います。

GitHubのリポジトリに戻るには、左上のハンバーガーメニューを選択してください。

拡張機能で機能を強化

拡張機能を使えば、言語、テーマ、デバッガー、生産性ツールをVSCode.devに追加でき、コーディングがより簡単で楽しくなります。

拡張機能の閲覧と管理

アクティビティバーの拡張機能アイコンをクリックします。
_「Search Extensions in Marketplace」_ボックスで拡張機能を検索します。
- Installed: 追加済みの拡張機能
- Popular: 業界で人気のもの
- Recommended: ワークフローに合わせたおすすめ
![View extensions](

1. 拡張機能をインストール

検索ボックスに拡張機能名を入力し、クリックして詳細をエディターで確認します。
サイドバーまたはコードエリアの青いインストールボタンをクリックします。

2. 拡張機能をカスタマイズ

インストール済みの拡張機能を見つけます。
ギアアイコンをクリック → _「Extension Settings」_を選択して動作を調整します。

3. 拡張機能を管理

以下が可能です：

無効化: 拡張機能を一時的にオフにしてインストール状態を維持
アンインストール: 不要になった場合は完全に削除

拡張機能を見つけ、ギアアイコンをクリックして「Disable」または「Uninstall」を選択するか、コードエリアの青いボタンを使用します。

課題

スキルを試してみましょう：VSCode.devを使って履歴書ウェブサイトを作成する

さらなる探求と自己学習

公式VSCode Web Docsでさらに深く学びましょう。
高度なワークスペース機能、キーボードショートカット、設定を探索してください。

これで、どこからでも、どんなデバイスでも、VSCode.devを使ってコードを書き、作成し、コラボレーションする準備が整いました！

免責事項:
この文書は、AI翻訳サービスCo-op Translatorを使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源とみなしてください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解について、当方は責任を負いません。

9.4 KiB Raw Blame History Unescape Escape