Lee Stott
2daab5271b
|
3 weeks ago | |
|---|---|---|
| .. | ||
| README.md | 4 weeks ago | |
| assignment.md | 3 weeks ago | |
README.md
コードエディタの使用
このレッスンでは、ウェブベースのコードエディタである VSCode.dev の基本を学びます。これにより、コンピュータに何もインストールせずにコードを変更したり、プロジェクトに貢献したりすることができます。
学習目標
このレッスンでは以下を学びます：
- コードプロジェクトでコードエディタを使用する方法
- バージョン管理で変更を追跡する方法
- 開発のためにエディタをカスタマイズする方法
前提条件
始める前に、GitHub のアカウントを作成する必要があります。GitHub にアクセスし、まだアカウントを持っていない場合は作成してください。
はじめに
コードエディタは、プログラムを書くため、また既存のコーディングプロジェクトと協力するための重要なツールです。エディタの基本とその機能の使い方を理解すれば、コードを書く際にそれらを活用できるようになります。
VSCode.dev の使い方
VSCode.dev はウェブ上で動作するコードエディタです。ウェブサイトを開くのと同じように、何もインストールせずに使用できます。エディタを始めるには、次のリンクを開いてください：https://vscode.dev。GitHub にサインインしていない場合は、指示に従ってサインインするか、新しいアカウントを作成してサインインしてください。
ロードが完了すると、次のような画面が表示されます：
左から右に向かって、主に3つのセクションがあります：
- アクティビティバー：虫眼鏡アイコン 🔎、歯車アイコン ⚙️ などのアイコンが含まれています。
- 展開されたアクティビティバー（デフォルトでは エクスプローラー）で、サイドバー と呼ばれます。
- 右側のコードエリア。
各アイコンをクリックして異なるメニューを表示します。終わったら、エクスプローラー をクリックして元の状態に戻ります。
コードを作成したり既存のコードを変更したりする際は、右側の最も大きなエリアを使用します。このエリアを使って既存のコードを確認することもできます。次にそれを行います。
GitHub リポジトリを開く
最初に必要なのは、GitHub リポジトリを開くことです。リポジトリを開く方法はいくつかあります。このセクションでは、リポジトリを開いて変更作業を始めるための2つの方法を紹介します。
1. エディタを使用する
エディタ自体を使ってリモートリポジトリを開きます。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 ですが、GitHub ドメインを VSCode.dev/github に置き換えることで、リポジトリを直接ロードできます。結果の URL は次のようになります：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 を使用して履歴書ウェブサイトを作成する
復習と自己学習
VSCode.dev とその他の機能についてさらに学びましょう。
免責事項:
この文書は、AI翻訳サービス Co-op Translator を使用して翻訳されています。正確性を追求しておりますが、自動翻訳には誤りや不正確な部分が含まれる可能性があります。元の言語で記載された文書を正式な情報源としてお考えください。重要な情報については、専門の人間による翻訳を推奨します。この翻訳の使用に起因する誤解や誤解釈について、当方は一切の責任を負いません。