QMLにおけるJavaScriptリソースのインポート

JavaScriptリソースはQML文書や他のJavaScriptリソースからインポートすることができます。JavaScriptリソースのインポートには、相対URLと絶対URLがあります。相対 URL の場合、インポートを含むQML 文書やJavaScript リソースの場所を基準に解決されます。スクリプトファイルにアクセスできない場合、エラーが発生します。JavaScriptをネットワークリソースから取得する必要がある場合、スクリプトがダウンロードされるまで、コンポーネントのstatus は "Loading" に設定されます。

JavaScriptリソースは、QMLモジュールや他のJavaScriptリソースをインポートすることもできます。JavaScriptリソース内のimport文の構文は、QMLドキュメント内のimport文とは若干異なります。

QMLドキュメントからのJavaScriptリソースのインポート

QML文書からJavaScriptリソースをインポートする場合、以下のような構文でインポートすることができます：

import "ResourceURL" as Qualifier

例えば

import "jsfile.js" as Logic

インポートされたJavaScriptリソースは常に "as "キーワードで修飾されます。JavaScriptリソースの修飾子は大文字で始まり、一意でなければならないため、修飾子とJavaScriptファイルは常に一対一に対応します。(これは、Date やMath のような組み込み JavaScript オブジェクトと同じ名前を修飾子が付けられないことも意味します)。

インポートされた JavaScript ファイルで定義された関数は、インポートする QML ドキュメントで定義されたオブジェクトで"Qualifier.functionName(params)" の構文を使って利用することができます。JavaScriptリソースに含まれる関数は、通常のJavaScript型だけでなく、 QMLの値型やオブジェクト型を持つパラメータを受け取ることができます。このような関数を QML から呼び出す場合、パラメータや戻り値には通常のデータ型変換ルールが適用されます。

JavaScript リソース内のインポート

QtQuick 2.0 では、JavaScript リソースが他の JavaScript リソースや QML の名前空間をインポートできるようになりました。

QtQuick 2.0 では、JavaScript リソースが他のスクリプトや QML モジュールをインポートできるため、いくつかの特別なセマンティクスが定義されています：

• importsを持つスクリプトは、そのスクリプトをインポートしたQMLドキュメントからのimportsを継承しません（そのため、例えばComponent.errorStringへのアクセスは失敗します）。
• importを持たないスクリプトは、そのスクリプトをインポートしたQMLドキュメントからimportを継承します（例えば、Component.errorStringへのアクセスは成功します）。
• 共有スクリプト（つまり.pragma libraryとして定義されたもの）は、他のスクリプトやモジュールをインポートしていなくても、どのQMLドキュメントからもインポートを継承しません。

特定のスクリプトがいくつものQMLファイルからインポートされる可能性があることを考えると、最初の意味は概念的に正しいです。2番目の意味は後方互換性のために残されています。3番目の意味は、現在の共有スクリプトの意味と変わりませんが、新たに考えられるケース（スクリプトが他のスクリプトやモジュールをインポートする場合）に関して、ここで明確にします。

他の JavaScript リソースからの JavaScript リソースのインポート

JavaScriptリソースは、以下の方法で別のリソースをインポートすることができます：

import * as MathFunctions from "factorial.mjs";

または

.import "filename.js" as Qualifier

前者は ECMAScript モジュールをインポートするための標準的な ECMAScript 構文で、mjs ファイル拡張子で示されるように、ECMAScript モジュール内部からのみ動作します。後者はQML エンジンによって提供される JavaScript の拡張で、モジュール以外でも動作します。ECMAScript 標準に取って代わられた拡張であるため、その使用は推奨されません。

この方法でJavaScriptファイルをインポートすると、修飾子とともにインポートされます。そのファイルの関数は、インポートしたスクリプトから修飾子を通して（つまりQualifier.functionName(params) ）アクセスできるようになります。

時には、インポートコンテキストで関数を修飾することなく利用できるようにすることが望まれます。この場合、ECMAScriptモジュールとJavaScriptのimport ステートメントをas 修飾子なしで使用する必要があります。

factorial.mjs import例えば、左のQMLコードはscript.mjs でshowCalculations() を呼び出し、factorial.mjs でfactorial() を呼び出しています。

import QtQuick
import "script.mjs" as MyScript

Item {
    width: 100; height: 100

    MouseArea {
        anchors.fill: parent
        onClicked: {
            MyScript.showCalculations(10)
            console.log("Call factorial() from QML:",
                MyScript.factorial(10))
        }
    }
}

// script.mjs
import { factorial } from "factorial.mjs"
export { factorial }

export function showCalculations(value) {
    console.log(
        "Call factorial() from script.js:",
        factorial(value));
}

// factorial.mjs
export function factorial(a) {
    a = parseInt(a);
    if (a <= 0)
        return 1;
    else
        return a * factorial(a - 1);
}

Qt.include() 関数は、ECMAScript モジュールを使わず、インポートの修飾もせずに、別の JavaScript ファイルをインクルードします。これは、他のファイルのすべての関数と変数を現在のファイルの名前空間で使用可能にしますが、そのファイルで定義されたすべてのプラグマとインポートを無視します。関数の呼び出しが呼び出し元のコンテキストを変更してはならないので、これは良い考えとは言えません。

Qt.include() は非推奨であり、避けるべきです。将来のバージョンでは削除される予定です。

JavaScriptリソースからのQMLモジュールのインポート

JavaScriptリソースは、以下のような方法でQMLモジュールをインポートすることができます：

.import TypeNamespace MajorVersion.MinorVersion as Qualifier

以下の例では、javascript でインポートされたモジュールから QML の型を利用する方法を示しています：

.import Qt.test 1.0 as JsQtTest

var importedEnumValue = JsQtTest.MyQmlObject.EnumValue3

特に、シングルトン型で提供される機能にアクセスする場合に便利です。詳しくはQML_SINGLETON を参照してください。

JavaScriptリソースはデフォルトで、リソースをインポートしたコンポーネントのすべてのインポートにアクセスすることができます。ステートレスライブラリとして宣言されている場合 (.pragma library を使用)、または明示的な.import ステートメントが含まれている場合は、コンポーネントのインポートにアクセスすることはできません。