Oracle JET仮想DOMアプリケーションのデバッグ

イントロダクション

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

ブラウザでのデバッグは、問題のあるコードをすばやく分離し、解決策をテストするのに役立ちます。すべてのブラウザには、HTMLの表示や改訂、Cascading Style Sheets (CSS)、Oracle JET仮想DOMアプリケーションのその他のソース・コード・ファイルなどのタスクを実行するために使用できる開発者ツールがあります。また、仮想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: インストール前のDevTools

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

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

開発ツールのタブを優先する

図preact- tab.pngの説明

タスク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 @oracle/ojet-cli serve
```
ブラウザに、棒グラフまたは円グラフではない圧縮チャートのサンプルが表示されます。「チャートの選択」ドロップダウン・リストは機能しません。

図app- open.pngの説明
デフォルトのブラウザがGoogle Chromeでない場合は、ブラウザを開いて、開いているページのアドレスをGoogle ChromeのURLアドレス・フィールドにコピーします。

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

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

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

図スタイルの説明- tab.png

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プロパティが設定されているソース・コードを確認する必要があることを示しています。

図update-chart-console.pngの説明

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

JET-Virtual-DOM-app/src/stylesディレクトリに移動し、エディタでapp.cssファイルを開きます。
まだ存在しない場合は、appRootDir/src/css/app.cssファイルの最後にスタイル・クラスchartStyleを追加します。
```
.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ツール・バッチ・ジョブを終了します。
次のチュートリアルでは、ターミナル・ウィンドウを開いたままにします。

次のステップ

この学習パスの次のチュートリアルに進むには、ここをクリックしてください。

その他の学習リソース

他のラボをdocs.oracle.com/learnで探すか、Oracle LearningのYouTubeチャネルでより無料の学習コンテンツにアクセスします。また、education.oracle.com/learning-explorerにアクセスしてOracle Learningエクスプローラになります。

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

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

Debug an Oracle JET virtual DOM app

F62131-01

December 2022