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

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

DevTools でワークスペースをセットアップして使用する方法を示す次の手順を読むか、それに従うことができます。 ワークスペースを設定した後、DevTools を使用してワークスペース内のファイルに加えた変更は、ローカル コンピューターに保存されます。

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

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

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

  1. まだ行っていない場合は、 git をダウンロード してインストールします。

  2. 新しいウィンドウまたはタブで MicrosoftEdge / Demos リポジトリに移動します。

  3. [ コード ] ドロップダウン ボタンをクリックし、[ URL をクリップボードにコピー] ボタンをクリックします。

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

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

    または、Visual Studio Code の [ ソース管理 ] ウィンドウを使用してリポジトリを複製し、以下のコマンド プロンプト手順をスキップすることもできます。

  4. git bash などのコマンド プロンプトを開きます。

  5. GitHub リポジトリからコピーした URL 文字列を入力して、リポジトリをローカル ドライブに複製します。 git bash コマンド プロンプトを使用する場合:

    # Example location where the repo directory will be added:
cd ~/GitHub
git clone https://github.com/MicrosoftEdge/Demos.git

リポジトリのクローニングの詳細については、次を参照してください。

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

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

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

    関連項目:

  2. git bash シェルなどのコマンド プロンプト、または Microsoft Visual Studio Code のターミナル ウィンドウに移動します。

  3. Demos リポジトリ ディレクトリの workspaces ディレクトリに変更します。

    cd ~/GitHub/Demos/workspaces
pwd

    [ソース] ツールの [ワークスペース] タブで使用するディレクトリには、任意の名前を付けることができます。 このデモ ディレクトリの名前は /workspaces/ です。

  4. "test" という名前の作業ブランチを作成し、それに切り替えます ("main" ブランチ内のデモのファイルが変更されないようにするため):

    git checkout -b test

    これは、以下と同等です。

    git branch test
git switch test

  5. 次のいずれかのコマンドを実行して、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

  6. Microsoft Edge でタブを開き、ローカルでホストされているバージョンのサイトに移動します。 通常、以下にアクセスしてアクセスしますlocalhost:8080:

    DevTools ワークスペースのデモ

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

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

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

関連項目:

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

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

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

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

    DevTools が開きます。

  2. [ ソース]([ソース] ツール アイコン) タブをクリックします。

  3. [ ナビゲーター ] ウィンドウ (左側) で、[ ワークスペース ] タブ ([ ページ] タブでグループ化されています) をクリックします。

    [ワークスペース] タブ

  4. [ フォルダの追加 ] ボタンをクリックします。

    [ フォルダの選択 ] ダイアログが開きます。

  5. 作成したクローン /Demos/workspace/ ディレクトリに移動します。 たとえば、[ フォルダー: ] テキスト ボックスに、 C:\Users\localAccount\GitHub\Demos\workspaces\ などのパスを入力します。

  6. [ フォルダの選択 ] ボタンをクリックします。

    DevTools は、DevTools に /workspaces/ ディレクトリへのフル アクセスを許可するかどうかを尋ねます。

  7. [ 許可 ] ボタンをクリックして、DevTools にディレクトリの読み取りと書き込みのアクセス許可を付与します。

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

    [ワークスペース] タブには、サーバーから受信したリソースとローカル ソース ファイル間のマッピングを示す緑色の

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

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

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

CSS ファイルに変更を加え、[ 要素 ] ツールの [スタイル ] タブを使用してディスクに保存するには、次の手順を実行します。

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

    テキスト エディターでstyles.cssを表示する

  2. 要素 (要素ツール アイコン) ツールを選択します。次に、DOM ツリーで <body> 要素を展開します。次に、<h1>要素を選択します。

    [ スタイル] ウィンドウには、 <h1> 要素に適用される CSS ルールが表示されます。 styles.css:1の横にあるマップ済みファイル (マップ済みファイル アイコン) は、緑色の "マップ済み" ドットが付いたページです。 緑色の "マップされた" ドットは、この CSS ルールに加えたすべての変更が /Demos/workspace/ ディレクトリ内の styles.css にマップされることを意味します。

    [マップされたファイル] アイコン、双方向矢印を含むページ

  3. <h1>要素の color プロパティの値をオレンジ色に変更します。 これを行うには、DOM ツリーで <h1> 要素を選択します。 h1 の CSS ルールで、[fuchsia] をクリックし、「オレンジ」と入力し、色の一覧から [オレンジ] を選択します。

    styles.css の色プロパティの変更

  4. [ソース] ツールを選択し、[styles.css] を右クリックして、[含まれるフォルダーで開く] を選択します。

    エクスプローラーまたは Finder が開きます。

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

  6. ページを更新します。

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

ヒント: フクシア色の見本をクリックしてカラー ピッカーを開いて新しい色を選択することによって、色を変更することもできます。 選択した色の 16 進数値が色の名前です。

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

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

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

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

  1. 上記から続けて、DevTools で、[ ソース] ([ソース] ツール アイコン) タブをクリックします。

  2. 左側の ナビゲーター ウィンドウの [ ワークスペース ] タブ ( [ページ] タブとともにグループ化) で、[ index.html] を選択します。

    [ソース] ツールで [index.html] タブが開きます。

  3. <h1> タグで、"DevTools Workspaces Demo" を "I Love Cake" に置き換えます。

    index.htmlの横にアスタリスクが表示されます。

  4. Ctrl+S (Windows、Linux) または Command + S (macOS) を押します。

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

    要素ツールの DOM ツリーではなく、ファイル リストで変更を加えました。

  5. ページを更新します。 レンダリングされたページの見出しが "I Love Cake" に変わります。これは、その文字列がマップされた /Demos/workspace/ ディレクトリの index.html に保存されているためです。

    ソース ツールから HTML を変更する

  6. [ソース] ツールで、[index.html] を右クリックし、[含まれるフォルダーで開く] を選択します。

    エクスプローラーまたは Finder が開きます。

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

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

    多くの開発者は HTML を直接記述するのではなく、代わりに次のようなアプローチを使用します。

    • Java、Python、PHP などのサーバー側言語。
    • Eleventy などのサイト ジェネレーター。
    • JavaScript コードを使用するクライアント側フレームワーク。
    • Markdown など、HTML 以外のマークアップ言語。

    つまり、実際には、ワークスペースタブで HTML ファイルを変更する開発者はほとんどいません。ほとんどの開発者は、React コンポーネントの JS ソース ファイルなどの別の種類のソース ファイルを使用して HTML ファイルを生成し、再ビルドして再読み込みします (これは自動的に行われる場合があります)。

  8. Microsoft Edge の [更新 ] ボタンを長押しまたは右クリックし、[ ハード リフレッシュ] (Ctrl+Shift+R) を選択します。

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

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

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

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

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

  1. DevTools で、[ソース] ツールを選択し、[ページ] タブにグループ化されている [ワークスペース] タブを選択します。

  2. [ ワークスペース ] タブで、[ script.js] を選択します。

    script.js [ソース] ツールのエディター ウィンドウ内のタブで開きます。

  3. エディター ウィンドウで、 script.jsの下部に次のコードを追加します。

    document.querySelector('a').style = 'font-style:italic';

    [ script.js ] タブにアスタリスクが表示されます。

  4. Ctrl+S (Windows、Linux) または Command + S (macOS) を押します。

    script.js が保存され、アスタリスクが [ script.js ] タブから削除されます。

  5. ページを更新します。

  6. HTML、JS、または CSS ファイルに緑色の "マップ" ドットがなくなった場合は、Microsoft Edge の [更新 ] ボタンを長押しまたは右クリックし、 ハード更新 (Ctrl+Shift+R) を選択します。

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

    ページ上のリンクが斜体になりました

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

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

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

    NewFile という名前のファイルが追加されます。

    [ワークスペース] タブを使用して追加された新しいファイル

  2. [ワークスペース] タブの [NewFile] を右クリックし、[名前の変更] を選択します。

  3. ファイル名を test.js に変更します。

  4. test.js で、次の行を追加します。console.log('hello from test.js');

  5. [ソース] ツールの [ワークスペース] タブで、[index.html] を選択します。

  6. index.html の行 <script src="./script.js" defer></script> の下に、次の行を追加します。<script src="./test.js" defer></script>

  7. Ctrl+S (Windows、Linux) または Command + S (macOS) を押します。

    index.html が保存されます。

  8. Microsoft Edge の [更新 ] ボタンを長押しまたは右クリックし、[ ハード リフレッシュ] (Ctrl+Shift+R) を選択します。

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

    HTML ファイルで JS ファイルへの参照を追加し、すべての Web ページ ファイルに緑色の

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

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

関連項目

注:

このページの一部の情報は、 Google によって 作成および共有されている著作物に基づいており、 Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。 元のページは ここ にあり、Kayce Basques によって作成されています。

Creative Commons ライセンス この著作物は、 Creative Commons Attribution 4.0 International License に従って使用許諾されています。

  • 最終更新: