Skip to main content

.dev Web ベース エディター

メモ

.dev エディターは現在、パブリック プレビュー 段階にあります。 ユーザーはディスカッションでフィードバックを提供できます。

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

.dev エディターは、.com から誰でも無料で入手できます。

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

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

.dev エディターを使用するには、 にログインする必要があります。

.dev で リポジトリを開くには、次のいずれかの方法を使用できます。

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

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

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

  • ファイルを表示しているとき、 ドロップダウン メニューを選び、 [.dev] をクリックします。

    編集アイコンのドロップダウン メニューのスクリーンショット。 オプション [github.dev] が濃いオレンジ色の枠線で強調表示されています。

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

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

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

Screenshot of the "Run and Debug" side bar with a message saying that this feature is not available, and a "Continue Working On" button.

.dev を使うときは、左側のアクティビティ バーにある [ソース管理] ビューですべてのアクションが管理されます。 [ソース管理] ビューについて詳しくは、VS Code のドキュメントのバージョン管理に関する記事をご覧ください。

.dev では リポジトリ拡張機能を使って機能を強化しているため、変更を一時退避することなくブランチを切り替えることができます。 VS Code のドキュメントの Repositories に関する記事をご覧ください。

  1. 現在のブランチがステータス バーに表示されていない場合は、codespace の下部でステータス バーを右クリックし、 [ソース コントロール] を選択します。

  2. ステータスバーでブランチ名をクリックします。

    VS Code のステータス バーに表示されているブランチ名のスクリーンショット。

  3. ドロップダウンで、切り替えるブランチをクリックするか、新しいブランチ名を入力して [新しいブランチの作成] をクリックします。

    VS Code で新しいブランチを作成するためのドロップダウンのスクリーンショット。
    古いブランチで行った変更のうち、コミットされていないものは新しいブランチで使用できます。

  1. アクティビティ バーで、 [ソース管理] ビューをクリックします。

    VS Code アクティビティ バーのスクリーンショット。ブランチ アイコンのラベルが付いたソース管理ボタンがオレンジ色の枠線で強調表示されています。

  2. 変更をステージングするには、変更したファイルの横の [] をクリックします。複数のファイルを変更してすべてをステージングする場合は、 [変更] の横のものをクリックします。

    [ソース管理] サイド バーのスクリーンショット。[変更] の右側にあるステージング ボタン (プラス記号) が濃いオレンジ色の枠線で強調表示されています。

  3. テキスト ボックスに、行った変更について説明するコミット メッセージを入力します。

    [ソース管理] サイド バーのスクリーンショット。[コミット] ボタンの上にあるテキスト ボックスにコミット メッセージが入力されています。

  4. [コミット & プッシュ] をクリックします。

    変更は でブランチに自動的にプッシュされます。

  1. 変更をリポジトリのローカル コピーにコミットしたら、[ソース管理] サイド バーの上部にある pull request アイコンをクリックします。

    [ソース管理] サイド バーの上部のスクリーンショット。 pull request アイコンが濃いオレンジ色の枠線で強調表示されています。

  2. マージ元のローカルブランチとリポジトリ、およびマージ先のリモートブランチとリポジトリが正しいことを確認します。 そして、プルリクエストにタイトルと説明を付けます。

    [GitHub pull request] サイド バーと pull request を作成するフォームのスクリーンショット。[タイトル] と [説明] のフィールドが表示されています。

  3. [作成] をクリックします。

.dev を使って、既存の pull request を操作できます。

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

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

.dev で実行できる拡張機能は、拡張機能ビューに表示され、インストールできます。 Settings Sync を使用すると、互換性のある拡張機能も自動的にインストールされます。 詳しくは、VS Code のドキュメントの「設定の同期」をご覧ください。

ファイアウォールの内側で作業している場合は、ファイアウォールの許可リストに次の URL を追加する必要があります。

URL用途
https://*.vscode-cdn.net.dev は、完全にブラウザー内で実行されます。 そのためには、この URL のエンドポイントから VS Code アセットをダウンロードする必要があります。
https://update.code.visualstudio.com.dev は、完全にブラウザー内で実行されます。 そのためには、この URL のエンドポイントから VS Code アセットをダウンロードする必要があります。
https://api..comからソース ファイルを取得するために使用されます
https://vscode-sync-insiders.trafficmanager.net省略可。 Settings Sync を使って設定を同期できるようにします。

.dev にインストールされているすべての拡張機能は、独立した worker ロールの下で実行されます。 これにより、同じブラウザーで実行されている複数の拡張機能の間にセキュリティ レイヤーが追加されます。 その結果、拡張機能から送信される要求 URL は、https://v--151hfiju3s93ktt2rqh65902gukb27osot905m4g52k40kaea3h6.vscode-cdn.net のようになります。

データは、 リポジトリ拡張機能を使って、実行時にリポジトリから取得されます。 このデータは、保存されていないファイルと現在表示されているファイルのブラウザー ストレージを除いて .dev セッション間でローカル コンピューターには格納されません (ページの再読み込みを可能にするため)。 セッション間でローカルに格納される非リポジトリ データは、一部のユーザー設定と、 の認証フローによって送信される資格情報のみです。

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

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

  • 現在、.dev エディターは、Chrome (およびその他の各種 Chromium ベース ブラウザー)、Edge、Firefox、Safari でサポートされています。 最新バージョンの SDK を使用することをお勧めします。
  • 使用しているブラウザーによっては、一部のキー バインドが機能しない場合があります。 これらのキー バインドの制限事項は、VS Code ドキュメントの既知の制限と対応に関するセクションに記載されています。
  • 使っているローカル キーボード レイアウトによっては、. キーで .dev を開けない場合があります。 その場合は、URL を .com から .dev に変えることで、任意の リポジトリを .dev で開くことができます。
  • Web エディターでドキュメントまたはコードを集中的に記述する場合、一部のコミットのプッシュに関する問題が発生する可能性があります。 これを解決するには、API レート制限がリセットされるまで数分待ちます。