Skip to main content

github.dev Web ベース エディター

リポジトリから github.dev web-based editorを使うか、pull request を使って、変更を作成およびコミットします。

注: 現在、github.dev web-based editorはベータ プレビュー段階です。 ユーザーはディスカッションでフィードバックを提供できます。

web-based editorについて

web-based editorでは、完全にブラウザー内で実行される軽量の編集エクスペリエンスが導入されています。 web-based editorを使うと、GitHub からファイルとソース コード リポジトリに移動し、コードの変更を行ってコミットできます。 ユーザーは任意のリポジトリ、フォーク、または pull request をエディターで開くことができます。

web-based editorは、GitHub.com から誰でも無料で入手できます。

web-based editorでは、検索、構文の強調表示、ソース管理ビューなど、Visual Studio Code の多くの利点が提供されます。 Settings Sync を使用して、独自の VS Code 設定をエディターと共有することもできます。 詳しい情報については、VS Code ドキュメントの「Settings Sync」を参照してください。

web-based editorは、完全にブラウザーのサンドボックス内で実行されます。 エディターではリポジトリは複製されず、代わりに GitHub Repositories 拡張機能を使用して、ユーザーが使用するほとんどの機能が実行されます。 作業内容は、コミットするまでブラウザーのローカル ストレージに保存されます。 変更内容に常にアクセスできるようにするために、変更を定期的にコミットするようにしてください。

Web ベースのエディターを使用するには、サインインする必要があります。

web-based editorを開く

web-based editorで GitHub リポジトリを開くには、次のいずれかの方法を使用できます。

  • 同じブラウザー タブでリポジトリを開くには、. キーを押します (GitHub のリポジトリまたは pull request を参照しているとき)。

    新しいブラウザー タブでリポジトリを開くには、> キーを押します。

  • URL を "github.com" から "github.dev" に変更します。

  • ファイルを表示する場合は、 の横にあるドロップダウン メニューを使用し、 [github.dev で開く] を選びます。

    ファイルの編集ボタンのドロップダウン メニュー

Codespaces と web-based editor

web-based editorと GitHub Codespaces のどちらでも、リポジトリから直接コードを編集できます。 ただし、ユース ケースによって、それぞれの利点が若干異なります。

web-based editorGitHub Codespaces
コストフリー。個人用アカウントでの 1 か月あたりの使用量の Free クォータ。 詳しくは、「GitHub Codespaces の課金について」を参照してください。
可用性GitHub.com のすべてのユーザーが利用できます。GitHub.com のすべてのユーザーが利用できます。
起動web-based editorは、キーを押すとすぐに開き、追加の構成やインストールを待たずに、すぐに使い始めることができます。codespace を作成または再開すると、codespace に VM が割り当てられ、devcontainer.json ファイルの内容に基づいてコンテナーが構成されます。 この設定では、環境の作成に数分かかる場合があります。 詳しくは、「リポジトリの codespace を作成する」を参照してください。
Compute関連付けられたコンピューティングがないので、コードをビルドして実行したり、統合ターミナルを使用したりすることはできません。GitHub Codespaces を使うと、専用の VM を通じてアプリケーションを実行およびデバッグできます。
ターミナル アクセス[なし] :GitHub Codespaces には、既定で共通のツール セットが用意されています。つまり、ローカル環境の場合とまったく同じようにターミナルを使用できます。
拡張機能Web で実行できる拡張機能のサブセットのみが拡張機能ビューに表示され、それらをインストールできます。 詳細については、「拡張機能の使用」を参照してください。GitHub Codespaces では、Visual Studio Code Marketplace のほとんどの拡張機能を使用できます。

引き続き Codespaces で作業する

web-based editorでワークフローを始めて、codespace で作業を続けることができます。 実行およびデバッグ ビューまたはターミナルにアクセスしようとすると、web-based editorでは使えないことが通知されます。

codespace で作業を続行するには、 [Continue Working on…](作業の続行...) をクリックし、 [Create New Codespace](新しい codespace の作成) を選択して、現在のブランチに codespace を作成します。 このオプションを選択する前に、変更をコミットする必要があります。

UI の [Continue Working on](作業の続行) ボタンを示すスクリーンショット

ソース管理の使用

web-based editorを使うときは、左側のアクティビティ バーにあるソース管理ビューですべてのアクションが管理されます。 ソース管理ビューの詳細については、VS Code ドキュメントの「バージョン管理」を参照してください。

Web ベース エディターでは GitHub Repositories 拡張機能を使用して機能が強化されるため、変更を一時退避することなくブランチを切り替えることができます。 詳しい情報については、VS Code ドキュメントの「GitHub Repositories」を参照してください。

新しいブランチを作成する

  1. 現在のブランチがステータス バーに表示されていない場合は、codespace の下部でステータス バーを右クリックし、 [ソース コントロール] を選択します。
  2. ステータスバーでブランチ名をクリックします。 ステータス バーにあるブランチ
  3. ドロップダウンで、切り替えるブランチをクリックするか、新しいブランチ名を入力して、 [新しいブランチの作成] をクリックします。 ブランチ メニューから選択 古いブランチで行った変更のうち、コミットされていないものは新しいブランチで使用できます。

変更をコミットする

  1. アクティビティ バーで、 [ソース管理] ビューをクリックします。 ソースコントロールビュー
  2. 変更をステージングするには、変更したファイルの横の [+] をクリックします。複数のファイルを変更してすべてをステージングする場合は、 [変更] の横のものをクリックします。 ステージング ボタンが強調表示されているソース管理のサイドバー
  3. 行った変更について説明するコミットメッセージを入力します。 コミット メッセージがあるソース管理のサイドバー
  4. ステージされている変更をコミットするには、ソース管理のサイドバーの上部にあるチェック マークをクリックします。 チェック マーク アイコンをクリックする
  5. 変更をコミットすると、GitHub のブランチに自動的にプッシュされます。

pull request を作成する

  1. リポジトリのローカル コピーに変更をコミットし、 [pull request の作成] アイコンをクリックします。 ステージング ボタンが強調表示されているソース管理サイドバー
  2. マージ元のローカルブランチとリポジトリ、およびマージ先のリモートブランチとリポジトリが正しいことを確認します。 そして、プルリクエストにタイトルと説明を付けます。 ステージング ボタンが強調表示されているソース管理サイドバー
  3. [作成] をクリックします。

既存の pull request の操作

web-based editorを使って、既存の pull request を操作できます。

  1. web-based editorで開きたい pull request を参照します。
  2. . キーを押して、web-based editorで pull request を開きます。
  3. 変更を行ったら、「変更をコミットする」の手順を使用して変更をコミットします。 変更はブランチに直接コミットされます。変更をプッシュする必要はありません。

拡張機能の使用

web-based editorでは、Web で実行するように特に作成または更新された VS Code 拡張機能がサポートされています。 これらの拡張機能は、"Web 拡張機能" と呼ばれます。 Web 拡張機能を作成する方法、または Web で動作するように既存の拡張機能を更新する方法については、VS Code ドキュメントの「Web 拡張機能」を参照してください。

web-based editorで実行できる拡張機能は、拡張機能ビューに表示され、インストールできます。 Settings Sync を使用すると、互換性のある拡張機能も自動的にインストールされます。 詳細については、VS Code ドキュメントの「Settings Sync」を参照してください。

トラブルシューティング

web-based editorを開くときに問題が発生する場合は、次の手順を試してください。

  • GitHub にサインインしていることを確認します。
  • 広告ブロッカーを無効にします。
  • ブラウザーで incognito 以外のウィンドウを使って、web-based editorを開きます。

既知の制限事項

  • 現在、web-based editorは、Chrome (およびその他の各種 Chromium ベース ブラウザー)、Edge、Firefox、Safari でサポートされています。 最新バージョンの SDK を使用することをお勧めします。
  • 使用しているブラウザーによっては、一部のキー バインドが機能しない場合があります。 これらのキー バインドの制限事項は、VS Code ドキュメントの既知の制限事項と対応に関するセクションに記載されています。
  • 使っているローカル キーボード レイアウトによっては、. キーで web-based editorを開けない場合があります。 その場合は、URL を github.com から github.dev に変えることで、GitHub リポジトリを web-based editorで開くことができます。