Oracle JET仮想DOMアプリケーションをデバッグします

はじめに

このチュートリアルでは、ブラウザ開発者ツールを使用してOracle JavaScript Extension Toolkit (Oracle JET)仮想DOMアプリケーションをデバッグする方法を示します。

ブラウザでのデバッグは、問題のあるコードを迅速に分離し、解決策をテストする場合に便利です。すべてのブラウザには、Oracle JET仮想DOMアプリケーションのHTML、カスケード・スタイルシート(CSS)およびその他のソース・コード・ファイルの表示と改訂などのタスクを実行するために使用できる開発者ツールがあります。さらに、仮想DOMアプリケーションのデバッグ時に、ご使用のブラウザの開発ツールに追加のデバッグ・ツールを提供するPreactブラウザ拡張機能をインストールできます。

目的

このチュートリアルでは、Preactブラウザ拡張機能をインストールし、ブラウザでWeb開発者ツールを使用して、Oracle JET仮想DOMアプリケーションで不正なコードを見つけ、提供されているサンプル・プロジェクト・ファイルを変更し、ブラウザで変更内容を確認する方法を学習します。

前提条件

Node.jsがインストールされたOracle JET仮想DOMアプリケーションを作成するように設定された開発環境
Google Chromeのインストール
この学習パスの前のチュートリアルの完了、 Oracle JET仮想DOMアプリケーションのコンポーネントへのデータ・バインド
JET-Virtual-DOM-app/src/components/contentディレクトリにダウンロードされたindex.tsxサンプル

タスク1: Preact DevToolsのインストール

Oracle JET仮想DOMアプリケーションには、デフォルトで、Chrome DevToolsに追加のデバッグ・ツールを提供するブラウザ拡張機能であるPreact DevToolsへの接続を初期化するインポート文が含まれています。Preactが提供するChromeブラウザ拡張機能(https://preactjs.github.io/preact-devtools/)をインストールします。

拡張機能をインストールすると、コンポーネント階層ビューアなど、仮想DOMアプリケーションをデバッグするための追加のツールを提供する「Preact」タブがChrome DevToolsに表示されます。

Preact開発者ツール・タブ

タスク2: Oracle JET仮想DOMアプリケーションの実行

JET-Virtual-DOM-app/src/components/contentディレクトリに移動し、index.tsxファイルのバックアップ・コピーを作成してから、指定されたindex.tsxサンプル・ファイルを同じディレクトリにダウンロードします。
Oracle JETツール・サーバー・バッチ・ジョブがターミナル・ウィンドウで実行されている場合は、Ctrl+Cを押し、プロンプトが表示された場合はyを入力してサーバー・バッチ・ジョブを終了します。サーバー・バッチ・ジョブでは、既存のアプリケーション・ファイルに対して行ったリビジョンのみが認識されます。新しいファイルを作成したら、アプリケーションを再度実行する必要があります。
ターミナル・ウィンドウで、JET-Virtual-DOM-appディレクトリからアプリケーションを実行します。
```
npx ojet serve
```
ブラウザに、棒グラフまたは円グラフ以外の圧縮チャートを含むサンプルが表示されます。「チャートの選択」ドロップダウン・リストは機能しません。
デフォルトのブラウザがGoogle Chromeでない場合は、それを開き、開いているページのアドレスをGoogle ChromeのURLアドレス・フィールドにコピーします。

タスク3: 仮想DOMアプリケーションのデバッグ

Google Chromeブラウザで、ページに表示されるチャートを右クリックし、表示されるコンテキスト・メニューから「検査」を選択します。

Chrome DevToolsが開き、仮想DOMアプリケーションをレンダリングするHTMLおよびCSSを示す要素およびスタイル・パネルが表示されます。
「要素」パネルで、<oj-chart id="barChart"で始まる要素を選択し、チャート・コンポーネントの位置ダイアグラムの下にある「スタイル」タブで、チャート・コンポーネントのwidth属性が値として135ピクセルを読み取る方法に注意してください。

oj-chartカスタムHTML要素は、幅を135pxに設定するHTMLのdiv要素によって格納され、チャート・コンポーネントはページ上で圧縮されて表示されます。したがって、チャート・コンポーネントは親コンテナから幅を継承し、100%のwidthスタイル設定を無視します。
ChromeのDevToolsで、Ctrl+Shift+Pを押して、表示されるメニューから「コンソールの表示」を選択します。
次のコマンドを入力して、単一コンポーネントの選択のvalueプロパティおよびチャート・コンポーネントのtypeプロパティの値を決定します。
```
document.getElementById("basicSelect").getProperty('value')
// The Console returns 'pie'
document.getElementById("barChart").getProperty('type')
// The Console returns 'funnel'
```
チャート・コンポーネントのtypeプロパティ値は、単一選択コンポーネントで指定された値と一致する必要がありますが、一致しません。
次のコマンドを入力して、ブラウザでチャート・コンポーネントのtypeプロパティ値をpieに設定します。
```
document.getElementById("barChart").setProperty('type', 'pie')
```
ブラウザが更新され、円グラフが表示されます。これは、チャート・コンポーネントのtypeプロパティが設定されているソース・コードを確認する必要があることを示唆しています。

タスク4: 仮想DOMアプリケーション・コードの修正

JET-Virtual-DOM-app/src/stylesディレクトリに移動し、エディタでapp.cssファイルを開きます。
まだ存在しない場合は、スタイル・クラスchartStyleをappRootDir/src/css/app.cssファイルの最後に追加します。
```
.chartStyle {
  max-width: 500px;
  width: 100%;
  height: 350px;
}
```
JET-Virtual-DOM-app/src/components/contentディレクトリに移動し、エディタでindex.tsxファイルを開きます。
oj-chart要素を検索し、oj-chartタグを囲む<div style="width:135px;">タグを削除します。
style属性を、appRootDir/src/styles/app.cssファイル内のスタイル・プロパティを参照するclass属性に置き換えます。
```
<oj-chart . . .	style="width:100%;height:350px;">
```
次になる
```
<oj-chart . . . class="chartStyle">
```
前の例で示したインラインstyle属性を使用するのではなく、コンポーネントに適用するスタイルを別のCSSファイルに配置することをお薦めします。
oj-chart要素で、typeプロパティを変更して、funnelチャート・タイプへのハードコードされた参照ではなく、useStateフックが追加したval変数を参照します。
```
<oj-chart
   id="barChart"
   type={val}
   // type="funnel"
```
ヒント:必要に応じて、index.tsxファイル内のチャートのタイプをリストするchartTypeData配列にfunnelを追加します。
```
const chartTypeData = [
  { value: "bar", label: "Bar" },
  { value: "pie", label: "Pie" },
  { value: "funnel", label: "Funnel" },
];
```
変更を確認するには、ファイルを保存し、ブラウザで仮想DOMアプリケーションの更新された出力を表示します。
サンプル・ファイルを元のindex.tsxファイルに置き換えます。
実行中の仮想DOMアプリケーションを表示するブラウザ・ウィンドウまたはタブを閉じます。
ターミナル・ウィンドウでCtrl+Cを押し、プロンプトが表示されたらyと入力してOracle JETツール・バッチ・ジョブを終了します。
次のチュートリアルのためにターミナル・ウィンドウを開いたままにします。

次のステップ

このモジュールの次のチュートリアルに進みます。

このチュートリアルは、「最初のOracle JET仮想DOMアプリケーション」モジュールの一部です。

スタータ・テンプレートを使用したOracle JET仮想DOMアプリケーションの作成
Oracle JET仮想DOMアプリケーションへのコンポーネントの追加
Oracle JET仮想DOMアプリケーションのコンポーネントのデータ・バインド
Oracle JET仮想DOMアプリケーションをデバッグします
Oracle JET仮想DOMアプリケーションへのユニット・テストの追加
Oracle JET仮想DOMアプリケーションのデプロイの準備

仮想DOM学習パスのメイン・ページに戻ると、仮想DOMアプリケーションの構築に関するすべてのモジュールにアクセスできます。

その他の学習リソース

docs.oracle.com/learnで他のラボを確認するか、Oracle Learning YouTubeチャネルで無料のラーニング・コンテンツにアクセスしてください。また、education.oracle.com/learning-explorerにアクセスして、Oracle Learning Explorerになります。

製品ドキュメントについては、Oracle Help Centerを参照してください。

タイトルおよび著作権情報

Debug an Oracle JET virtual DOM app

F74309-02

Oracle and/or its affiliates.