1. 仮想DOMアーキテクチャを使用したOracle JETアプリケーションの開発
  2. Oracle JETでの仮想DOMアーキテクチャの開始

1 Oracle JETでの仮想DOMアーキテクチャの開始

Oracle JETは、仮想DOMエンジンを使用してコンポーネントをレンダリングする仮想DOMアーキテクチャを使用して、アプリケーションとWebコンポーネントを構築する機能を提供します。

Oracle JET仮想DOMアーキテクチャについて

仮想DOMアーキテクチャは、Oracle JETがこれまで提供していたModel-View-ViewModel (MVVM)アーキテクチャとは異なる方法で、アプリケーションとWebコンポーネントを構築します。両方のアーキテクチャがサポートされます。使用するアーキテクチャを選択します。

仮想DOMアーキテクチャは、DOMの仮想表現がメモリーに保持され、JavaScriptライブラリによってライブDOMと同期されるプログラミング・パターンです。パターンとして、ブラウザのDOM (ライブDOM)を効率的に更新する機能が普及しています。Preactは、仮想DOMの変更をライブDOMと同期するためにOracle JETが使用するJavaScriptライブラリです。

次の図は、状態変更の発生時に仮想DOMアーキテクチャ・アプリケーションが仮想DOMを使用して差異を計算して、1つのアクション(影響を受けるDOMノードの再レンダリング)のみがライブDOMで行われるようにする方法を示しています。

周囲のテキストで説明された画像

JavaScriptライブラリの1つとして、仮想DOMアーキテクチャの使用を普及させるためのReactには、多くの主要概念を説明する広範なドキュメントが用意されています。これらの概念の詳細について学ぶには、Reactのドキュメントを読むことを検討してください。Preactは、仮想DOMを管理し、Oracle JETの仮想DOMアーキテクチャを使用して開発するアプリケーションおよびWebコンポーネントのライブDOMを更新するためにOracle JETが使用するJavaScriptライブラリです。詳細は、https://preactjs.com/を参照してください。

Oracle JET仮想DOMアーキテクチャで実現できること

Webアプリケーションを構築したり、他のOracle JET Webアプリケーションに含めるために公開するWebコンポーネントを作成することもできます。

これらのタスクのいずれかを実行するには、「Oracle JETツールのインストール」の説明に従って、最初にOracle JETツールをインストールする必要があります。Oracle JETツールをインストールしたら、次のコマンドを使用して仮想DOMアプリケーションを作成します:

ojet create your-First-JET-VDOM-app --template=basic --vdom

Oracle JETツールによって仮想DOMアプリケーションが作成されたら、アプリケーションの機能の開発を開始できます。これを行うには、TypeScriptとJavaScript XML (JSX)を記述します。JavaScriptの使用は、仮想DOMアーキテクチャではサポートされていません。

後でコンポーネント交換に公開するVComponentベースのWebコンポーネントを開発する場所として作成した仮想DOMアプリケーションを使用する場合、Oracle JETツールを使用してコンポジット・コンポーネント・アーキテクチャベースのWebコンポーネントをこれまでに開発したことがあれば、ステップについて理解できます。つまり、次の操作を実行します:

  1. Oracle JETツールを使用し、次のコマンドを実行してコンポーネントを作成します:

    ojet create component oj-hello-world --vcomponent

    classオプションを--vcomponentパラメータとともに指定するクラスベースのVComponentを作成する場合を除き、--vcomponentパラメータの使用はオプションです:

    ojet create component oj-hello-world --vcomponent=class

    デフォルトでは、Oracle JETツールによって関数ベースのVComponentが作成されます。

  2. 複数のコンポーネントを作成する場合は、JETパックを使用します。次のコマンドは、JETパックyourJETPackを作成し、そこに3つのコンポーネント(2つの関数コンポーネントと1つのクラス・コンポーネント)を追加する方法を示しています。 
    ojet create pack yourJETPack
ojet create component oj-class-component-1 --pack=yourJETPack 
ojet create component oj-function-component --vcomponent=function --pack=yourJETPack 
ojet create component oj-class-component-2 --vcomponent=class --pack=yourJETPack

これらのタスクの詳細は、このガイドで後ほど説明します。この概要は、Oracle JET WebアプリケーションやWebコンポーネント開発にすでに慣れているユーザーを対象としています。

前提知識

仮想DOMアプリケーションとコンポーネントを開発するには、次のトピックを理解する必要があります:

  • Preact: Preactとその延長線上にあるReactの機能を理解します。最初に、Reactドキュメントの「主な概念」を参照してください。Reactの概念をよく理解している場合は、Preactドキュメントの「Reactとの違い」を参照してください。
  • TypeScriptとJSX: TypeScriptとJSXを使用して、すべての仮想DOMアプリケーションとWebコンポーネントを記述します。MVVMアーキテクチャを使用して以前にOracle JETアプリケーションを開発した場合は、MVVMアーキテクチャがビュー(HTML)レイヤーに実装したバインディングおよび条件付き動作を仮想DOMアーキテクチャがJSXを使用して実装することを知っておく必要があります。TypeScriptの詳細はhttps://www.typescriptlang.org/を参照し、JSXの詳細はReactのドキュメントの「JSXの詳細」を参照してください。

仮想DOMアプリケーションの開発環境

仮想DOMアプリケーションは、TypeScript、HTMLおよびCSSをサポートするすべての統合開発環境(IDE)で開発できます。ただし、IDEは必須ではなく、アプリケーションの開発には任意のテキスト・エディタを使用できます。

IDEをOracle JETツールとともに使用して、提供されたアプリケーション・テンプレートを使用して仮想DOMアプリケーションを作成できます。選択したIDEでアプリケーションの開発を進めるには、そのIDEで、Oracle JETツールを使用して作成されたプロジェクトを開きます。IDEでアプリケーション・ファイルに変更を保存した後、Microsoft Visual Studio Codeからの次の例に示すように、Oracle JETツールを使用してアプリケーションを作成し、実行します。

周囲のテキストで説明された画像

Oracle JETツールのインストール

Oracle JETツールを使用してWebアプリケーションを開発する場合は、Node.jsおよびOracle JETコマンドライン・インタフェース(CLI) ojet-cliをインストールする必要があります。

Oracle JETツールを開発プラットフォームにすでにインストールしている場合は、Oracle JETでサポートされる最小バージョンを使用していることを確認し、必要に応じてアップグレードしてください。サポートされる最小バージョンのリストは、Oracle JETサポートを参照してください。

ノート:

Oracle JET CLIをインストールしない場合は、Node.jsパッケージ・ランナー(npx)を使用して、Oracle JETアプリケーションを作成および管理できます。
前提条件パッケージをインストールするには:
  1. Node.jsのインストール
  2. Oracle JETコマンドライン・インタフェースのインストール
Node.jsのインストール

開発マシンにNode.jsをインストールします。

Webブラウザで、Node.jsダウンロード・ページからOSに適したインストーラをダウンロードしてインストールします。Oracle JETでは、最新のLTSバージョンをインストールすることをお薦めします。Node.jsは、macOS上で事前インストール済ですが、古いバージョンである可能性があるため、必要に応じて最新のLTSバージョンにアップグレードしてください。

インストールおよび設定の完了後、コマンド・プロンプトからnpmコマンドを入力して、インストールが成功したことを検証できます。たとえば、npm config listと入力して、Node.jsの構成設定を表示します。

コンピュータが、プロキシ・サーバーを使用する必要があるネットワーク(会社のネットワークなど)に接続されている場合は、npmインストールが正常に機能するように、次のコマンドを実行します。このタスクは、ネットワークでプロキシ・サーバーを使用する必要がある場合にのみ必要です。たとえば、自宅からインターネットに接続する場合は、このタスクを実行する必要がない可能性があります。

npm config set proxy http-proxy-server-URL:proxy-port
npm config set https-proxy https-proxy-server-URL:proxy-port

コマンドに完全なURLを含めます。たとえば:

npm config set proxy http://my.proxyserver.com:80
npm config set https-proxy http://my.proxyserver.com:80
Oracle JETコマンドライン・インタフェースのインストール

npmを使用して、Oracle JETコマンドライン・インタフェース(ojet-cli)をインストールします。

  • 開発マシンのコマンド・プロンプトで、Windowsでは管理者として、またはMacintoshおよびLinuxシステムではsudoを使用して次のコマンドを入力します。
    [sudo] npm install -g @oracle/ojet-cli

    インストールが成功したことがはっきりわからない場合があります。インストールが成功したことを確認するには、ojet helpを入力します。使用可能なOracle JETコマンドが見つからない場合は、インストール・コマンドの出力をスクロールして、失敗の原因を探します。

    • ネットワーク障害に関連するエラーを受信した場合は、必要に応じてプロキシを正しく設定したことを確認してください。

    • npmのバージョンが古いというエラーを受信した場合は、次を入力してバージョンを更新してください: [sudo] npm install -g npm。

    ojet --versionを使用してOracle JETバージョンを確認して、Oracle JETコマンドライン・インタフェースの現在のバージョンを表示することもできます。現在のバージョンが表示されない場合は、使用しているプラットフォーム用のnpm installコマンドを使用して再インストールしてください。

npx Node.jsパッケージ・ランナーの使用

開発コンピュータにOracle JET CLI NPMパッケージをインストールする場合は、Oracle JETアプリケーションを作成および管理するための代替手段としてnpx Node.jsパッケージ・ランナーを使用できます。

Oracle JET CLIのリリースの変更には、Oracle JET CLIを提供するNPMパッケージをアンインストールして再インストールする必要があるため、リリースを頻繁に変更する場合にもこの代替手段が役立つ可能性があります。

npxを使用するには、Node.jsをインストールし、グローバルにインストールされたOracle JET CLIのインスタンスをコンピュータからアンインストールする必要があります。グローバルにインストールされたパッケージをリストするには、ターミナル・ウィンドウでnpm list --depth=0 -gコマンドを実行します。グローバルにインストールされたOracle JET CLIのインスタンスをアンインストールするには、npm -g un @oracle/ojet-cliコマンドを実行します。

Node.jsをインストールしたら、npxおよび希望するOracle JET CLI NPMパッケージのバージョンと、適切なコマンドを使用できます。次の例は、様々なリリースのCLIを使用してOracle JETアプリケーションを作成してから、それらをローカル開発コンピュータで使用する方法を示しています。 

// Create and serve an Oracle JET 12.0.0 app
$ npx @oracle/ojet-cli@12.0.0 create myJET12app --template=basic --vdom
$ cd myJET12app
$ npx @oracle/ojet-cli@12.0.0 serve

// Create and serve an Oracle JET 16.1.0 app
$ npx @oracle/ojet-cli@16.1.0 create myJETapp --template=basic --vdom
$ cd myJETapp
$ npx @oracle/ojet-cli@16.1.0 serve

前述の例に示されている構文(npx package command)に従って、すべてのOracle JET CLIコマンド(create、build、serve、strip、restoreなど)を使用できます。

npxパッケージ・ランナーは、必要なパッケージ(@oracle/ojet-cli@16.1.0など)をNPMレジストリからフェッチして実行します。パッケージは、次のWindowsコンピュータの例のような一時キャッシュ・ディレクトリにインストールされます:

C:\Users\JDOE\AppData\Roaming\npm-cache\_npx

前述の例に示したOracle JET CLIのリリース用のNPMパッケージは、コンピュータにインストールされません。これは、グローバルにインストールされたNPMパッケージをリストするコマンドを実行するとわかります:

$ npm list --depth=0 -g
C:\Users\JDOE\AppData\Roaming\npm
+-- json-server@0.16.3
+-- node-gyp@9.0.0
+-- typescript@4.2.3
`-- yarn@1.22.18

npxの詳細は、Node.jsのドキュメントを参照してください。Oracle JET CLIで提供されるコマンドの詳細は、「Webアプリケーション・ワークフローの理解」を参照してください。

Yarnパッケージ・マネージャ

Oracle JET CLIでは、Yarnパッケージ・マネージャの使用がサポートされています。

Oracle JETではデフォルトでnpmパッケージ・マネージャが使用されるため、Node.jsをインストールする必要があります。ただし、Yarnをインストールした場合は、Oracle JETコマンドを呼び出すときに--installer=yarnパラメータ・オプションを指定することで、デフォルトのnpmパッケージ・マネージャのかわりにYarnを使用できます。

--installer=yarnパラメータは、次のOracle JETコマンドで使用できます:

  • ojet create --installer=yarn
  • ojet build --installer=yarn
  • ojet serve --installer=yarn
  • ojet strip --installer=yarn

ターミナル・プロンプトでojet helpと入力すると、Oracle JET CLIのその他のヘルプを取得できます。

コマンドごとに--installer=yarnパラメータ・オプションを指定するかわりに、次のように"installer": "yarn"をOracle JETアプリケーションのoraclejetconfig.jsonファイルに追加します: 

{
. . . 
  "generatorVersion": "16.1.0",
  "installer": "yarn"
}

これにより、Oracle JET CLIでYarnがOracle JETアプリケーションのデフォルトのパッケージ・マネージャとして使用されます。

Yarnパッケージ・マネージャのインストール方法などの詳細は、YarnのWebサイトを参照してください。