ワークスペースチュートリアル (ソースツールの [ワークスペース] タブ)

[ソース] ツールの [ワークスペース] タブで Web ページを編集し、ディスク上のソース ファイルに変更を保存するなど、DevTools を IDE として使用するには、次の手順に従います。

DevTools でワークスペースを設定して使用する方法を示すこれらの手順を読んだり、次の手順に従ったりできます。ワークスペースを設定すると、DevTools を使用してワークスペース内のファイルに加えた変更がローカルコンピューターに保存されます。

手順 1: Edge Demos リポジトリをローカルドライブに複製する

まず、ワークスペースのデモ Web ページなど、Web ページのソースファイルを含むローカルディレクトリを設定します。

次のように、/workspaces/デモフォルダーを含むローカルドライブに MicrosoftEdge/Demos リポジトリを複製します。

まだ完了していない場合は、 git をダウンロードしてインストールします。
新しいウィンドウまたはタブで MicrosoftEdge/Demos に移動します。
[ コード ] ドロップダウンボタンをクリックし、[ クリップボードに URL をコピー ] ボタンをクリックします。

URL はクリップボードにコピーされます。 https://github.com/MicrosoftEdge/Demos.git

または、GitHub Desktop がインストールされている場合は、[ GitHub Desktop で開く ] をクリックしてリポジトリを複製し、以下のコマンドプロンプトの手順をスキップします。

または、Visual Studio Code の [ソース管理 ] ウィンドウを使用してリポジトリを複製し、以下のコマンドプロンプトの手順をスキップすることもできます。
git bash などのコマンドプロンプトを開きます。
リポジトリをローカルドライブに複製し、GitHub リポジトリからコピーした URL 文字列を入力します。 git bash コマンドプロンプトを使用する場合:
```
# Example location where the repo directory will be added:
cd ~/GitHub
git clone https://github.com/MicrosoftEdge/Demos.git
```

リポジトリの複製の詳細については、次を参照してください。

リポジトリの複製 - GitHub ドキュメント。

次のセクションに進みます。

手順 2: Web ページのソースファイルディレクトリで localhost サーバーを起動する

まだ完了していない場合は、Node.jsから最新バージョンの Node.js と npm をインストールします。

関連項目:
- Visual Studio Code 用 DevTools 拡張機能のインストールに関するページで、Node.js と Node Package Manager (npm) をインストールします。
Git bash シェルや Microsoft Visual Studio Code の [ターミナル] ウィンドウなどのコマンドプロンプトに移動します。
Demos リポジトリディレクトリの workspaces ディレクトリに変更します。
```
cd ~/GitHub/Demos/workspaces
pwd
```
ソース ツールの [ワークスペース] タブで使用するディレクトリには、任意の名前を付けることができます。このデモディレクトリの名前は /workspaces/ です。
"test" という名前の作業ブランチを作成し、それに切り替えます ("main" ブランチでデモのファイルが変更されないようにします)。
```
git checkout -b test
```
これは次と同じです。
```
git branch test
git switch test
```
次のいずれかのコマンドを実行して、Web サーバーを起動します。
```
# Node.js option
npx http-server
```
詳細とオプションについては、「Visual Studio Code 用 DevTools 拡張機能のインストール」の「サーバーの起動 (npx http-server)」を参照してください。
```
# Python 2 option
cd ~/GitHub/demos/workspaces
python -m SimpleHTTPServer
```
```
# Python 3 option
cd ~/GitHub/demos/workspaces
python -m http.server
```
Microsoft Edge でタブを開き、ローカルでホストされているバージョンのサイトに移動します。通常は、次に進んでアクセスしますlocalhost:8080。

もう 1 つの一般的な同等の URL が http://0.0.0.0:8080。 Python サーバーオプションの既定のポート番号は 8000。正確なポート番号が異なる場合があります。

DevTools ワークスペースデモ Web ページが開きます。

(最新のデモのリンクには、「ワークスペースを使用してファイルを編集する」または「ワークスペースにファイルを編集して保存する ([ソース] ツールの [ワークスペース] タブ)」と表示される場合があります)。

手順 3: ソースツールにワークスペースフォルダーを追加する

次に、DevTools でワークスペースを定義します。

ローカルでホストされている DevTools ワークスペースデモ Web ページを右クリックし、[ 検査] を選択します。または、 Ctrl + Shift + J (Windows、Linux) または Command + Option + J (macOS) を押します。

DevTools が開きます。
[ソース] () タブをクリックします。
左側の [ ナビゲーター ] ウィンドウで、[ ワークスペース ] タブ ([ ページ ] タブでグループ化) をクリックします。
[ フォルダーの追加] ボタンをクリックします。

[ フォルダーの選択] ダイアログが開きます。
作成した複製された /Demos/workspace/ ディレクトリに移動します。たとえば、[ フォルダー:] テキストボックスに、パス ( C:\Users\localAccount\GitHub\Demos\workspaces\など) を入力します。
[ フォルダーの選択 ] ボタンをクリックします。

DevTools は、 /workspaces/ ディレクトリへのフルアクセス権を DevTools に付与するかどうかを確認するメッセージを表示します。
[ 許可 ] ボタンをクリックして、DevTools にディレクトリの読み取りと書き込みのアクセス許可を付与します。

[ ワークスペース ] タブには、 index.html、 script.js、 styles.cssの緑色の "マップ済み" ドットを持つページアイコンがあります。緑色の "マップ済み" ドットは、Web サーバーから受信したページのネットワークリソースと、 /Demos/workspace/ ディレクトリ内のローカルソースファイル間のマッピングが DevTools によって確立されたことを示します。

次のセクションに進みます。

手順 4: CSS の変更をディスクに保存する ([要素] ツールの [スタイル] タブを使用)

次に、CSS を編集し、ソースファイルに変更を保存します。ここでは、ソースツールの [ワークスペース] タブのファイルエディターで CSS ファイルを直接編集できますが、ここでは、ユーザーインターフェイスコントロールの支援を受けた [要素] ツールの [スタイル] タブを使用します。

CSS ファイルを変更し、[ 要素 ] ツールの [ スタイル ] タブを使用してディスクに保存するには:

[ソース] ツールの [ワークスペース] タブ ([ページ] タブでグループ化) で、[styles.css] を選択してエディターウィンドウで開きます。 h1 要素の color プロパティは、fuchsiaに設定されます。
[ 要素 ] () ツールを選択します。DOM ツリーで、 <body> 要素を展開し、 <h1> 要素を選択します。

[ スタイル ] ウィンドウには、 <h1> 要素に適用される CSS ルールが表示されます。 styles.css:1の横にあるマップされたファイル (は、緑色の "マップされた" ドットを持つページです。緑色の "マップ済み" ドットは、この CSS 規則に対して行った変更が、/Demos/workspace/ ディレクトリ内のstyles.cssにマップされることを意味します。
<h1> 要素の color プロパティの値をオレンジ色に変更します。これを行うには、DOM ツリーで <h1> 要素を選択します。 h1の CSS ルールで、[fuchsia] をクリックし、オレンジ色の入力を開始し、色の一覧からオレンジ色を選択します。
[ソース] ツールを選択し、[styles.css] を右クリックし、[フォルダーを含むで開く] を選択します。

エクスプローラーまたは Finder が開きます。
Visual Studio Code などのテキストエディターで、/Demos/workspace/ ディレクトリにあるstyles.cssのコピーを開きます。 color プロパティは、この例ではオレンジ色の新しい色に設定されました。変更は、Web サーバーから返されたファイルのコピーで行われただけではありません。変更は、 /Demos/workspace/ ワークスペースディレクトリ内のマップされたファイルでも行われました。
ページを更新します。

<h1>要素の色は、引き続き新しい色に設定されます。変更を行った場合、DevTools によって変更がディスクに保存されたため、変更は更新後も保持されます。ページを更新すると、ローカルサーバーがディスクからファイルの変更されたコピーを処理しました。

ヒント： また、fucshia 色の見本をクリックしてカラーピッカーを開き、新しい色を選択することで、色を変更することもできます。選択した色の HEX 値は、色名です。

次のセクションに進みます。

手順 5: HTML の変更をディスクに保存する ([ソース] ツールの [ワークスペース] タブを使用)

次に、HTML を編集し、ソースファイルに変更を保存します。 Web ページの HTML ファイルに変更を保存するには、[ ソース ] ツールの [ ワークスペース ] タブにソースコードフォルダーを追加し、[ ソース ] ツールで HTML を編集します。 ( 要素ツールの DOM ツリーの HTML を変更するだけで、ソースファイルに変更が加えられるわけではありません)。

[DevTools ワークスペース ] タブは、エディターを使用して HTML ソースファイルを編集するのと似ていますが、DevTools 内で HTML ソースファイルを直接編集できます。

上記の手順に進み、DevTools で [ソース ] () タブをクリックします。
左側の [ ナビゲーター ] ウィンドウの [ ワークスペース ] タブ ([ ページ ] タブでグループ化) で、[ index.html] を選択します。

[ソース] ツールで [index.html] タブが開きます。
<h1> タグで、"DevTools Workspaces Demo" を "I Love Cake" に置き換えます。

index.htmlの横にアスタリスクが表示されます。
Ctrl + S (Windows、Linux) または Command + S (macOS) を押します。

変更が保存され、アスタリスクは消えます。

要素ツールの DOM ツリーではなく、ファイル一覧で変更を行いました。
ページを更新します。レンダリングされたページの見出しが "I Love Cake" に変わります。これは、その文字列がマップされた/Demos/workspace/ ディレクトリのindex.htmlに保存されていたためです。
[ソース] ツールで、[index.html] を右クリックし、[フォルダーを含むで開く] を選択します。

エクスプローラーまたは Finder が開きます。
Visual Studio Code などのテキストエディターで、/Demos/workspace/ ディレクトリにあるindex.htmlのコピーを開きます。

<h1>要素には新しいテキスト "I Love Cake" が含まれています。これは、ソース ツールのエディターを使用して変更を行ってindex.htmlを編集し、変更を保存し、そのファイルがワークスペース (ワークスペース タブ) にマップされ、ファイルのアイコンの緑色の "マップ済み" ドットで示されているためです。

多くの開発者は HTML を直接記述せず、代わりに次のような方法を使用します。
- Java、Python、PHP などのサーバー側の言語。
- イレブンティなどのサイトジェネレーター。
- JavaScript コードを使用するクライアント側フレームワーク。
- Markdown などの HTML 以外のマークアップ言語。
つまり、実際には、[ワークスペース] タブで HTML ファイルを変更する開発者はほとんどありません。ほとんどの開発者は、React コンポーネント JS ソースファイルなど、別の種類のソースファイルを使用して HTML ファイルを生成し、再構築して再読み込みします (自動的に発生する可能性があります)。
Microsoft Edge の [更新 ] ボタンを長押しまたは右クリックし、[ ハード更新 ] (Ctrl + Shift + R) を選択します。

[ ワークスペース ] タブでは、すべての HTML、CSS、JS ファイルに緑色の "マップされた" ドットが表示されます。

次のセクションに進みます。

手順 6: JavaScript の変更をディスクに保存する

次に、ワークスペースデモの JavaScript ファイルを編集し、ソースファイルに変更を保存します。 JavaScript ソースファイルに編集内容を保存するには、ソースツールの [ワークスペース] タブにソースコードフォルダーを追加した後、IDE などの DevTools を使用できます。その後、 ソース ツールのエディターで JavaScript ファイルを編集して保存できます。

レンダリングされたデモ Web ページ で、ワークスペース内のファイルの編集と保存 ([ソース] ツールの [ワークスペース] タブ) ハイパーリンクのスタイルを 斜体で設定します。

DevTools で、[ ソース ] ツールを選択し、[ ワークスペース ] タブを選択します。このタブは [ ページ ] タブでグループ化されます。
[ ワークスペース ] タブで、[ script.js] を選択します。

script.js は、[ ソース ] ツールのエディターウィンドウ内のタブで開きます。
エディターウィンドウで、次のコードを script.jsの下部に追加します。
```
document.querySelector('a').style = 'font-style:italic';
```
[ script.js ] タブにアスタリスクが表示されます。
Ctrl + S (Windows、Linux) または Command + S (macOS) を押します。

script.js が保存され、[ script.js ] タブからアスタリスクが削除されます。
ページを更新します。
HTML、JS、または CSS ファイルに緑色の "マップされた" ドットが表示されなくなった場合は、Microsoft Edge の [更新 ] ボタンを長押しまたは右クリックし、[ ハード更新 ] (Ctrl + Shift + R) を選択します。

ページの [ワークスペースを使用したファイルの編集 ] (または ワークスペース内のファイルの編集と保存 ([ソース] ツールの [ワークスペース] タブ)) ハイパーリンクが斜体になりました。

次のセクションに進みます。

手順 7: DevTools を使用して .js ファイルを追加する

[ソース] ツールの [ワークスペース] タブで、/workspaces/ フォルダーを右クリックし、[新しいファイル] メニュー項目を選択します。

NewFileという名前のファイルが追加されます。
[ワークスペース] タブでNewFileを右クリックし、[名前の変更] を選択します。
ファイルの名前を test.js に変更します。
test.jsで、次の行を追加します。console.log('hello from test.js');
[ソース] ツールの [ワークスペース] タブで、[index.html] を選択します。
index.htmlで、行<script src="./script.js" defer></script>の下に行を追加します。<script src="./test.js" defer></script>
Ctrl + S (Windows、Linux) または Command + S (macOS) を押します。

index.html が保存されます。
Microsoft Edge の [更新 ] ボタンを長押しまたは右クリックし、[ ハード更新 ] (Ctrl + Shift + R) を選択します。

[ ワークスペース ] タブでは、すべての HTML、CSS、JS ファイルに緑色の "マップされた" ドットが表示されます。

これでチュートリアルは完了です。

/workspace/ フォルダーの編集内容を元に戻す場合は、コマンドプロンプトで git コマンドを使用するか、GitHub Desktop を使用して、現在のブランチの変更 ("main" や "test" など) を元に戻すことができます。

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-07-01

次の方法で共有

ワークスペース チュートリアル (ソース ツールの [ワークスペース] タブ)

手順 1: Edge Demos リポジトリをローカル ドライブに複製する

手順 2: Web ページのソース ファイル ディレクトリで localhost サーバーを起動する

手順 3: ソース ツールにワークスペース フォルダーを追加する

手順 4: CSS の変更をディスクに保存する ([要素] ツールの [スタイル] タブを使用)

手順 5: HTML の変更をディスクに保存する ([ソース] ツールの [ワークスペース] タブを使用)

手順 6: JavaScript の変更をディスクに保存する

手順 7: DevTools を使用して .js ファイルを追加する

関連項目

フィードバック

その他のリソース

ワークスペースチュートリアル (ソースツールの [ワークスペース] タブ)

手順 1: Edge Demos リポジトリをローカルドライブに複製する

手順 2: Web ページのソースファイルディレクトリで localhost サーバーを起動する

手順 3: ソースツールにワークスペースフォルダーを追加する