QML での JavaScript リソースの定義

QMLアプリケーションのプログラムロジックは、JavaScriptで定義することができます。JavaScriptコードは、QMLドキュメント内にインラインで記述することも、JavaScriptファイル（QMLでは「JavaScript Resources 」と呼ばれます）として分離して記述することも可能です。

QMLでサポートされているJavaScriptリソースには、「コードビハインド実装ファイル」と「共有（ライブラリ）ファイル」の2種類があります。どちらの種類のJavaScriptリソースも、他のJavaScriptリソースからインポートしたり、QMLモジュールに組み込んだりすることができます。

コードビハインド実装リソース

QMLドキュメントにインポートされるJavaScriptファイルのほとんどは、それらをインポートするQMLドキュメントに対するステートフルな実装です。このような場合、ドキュメント内で定義されたQMLオブジェクト型の各インスタンスが正しく動作するためには、JavaScriptオブジェクトと状態の個別のコピーが必要となります。

JavaScript ファイルをインポートする際のデフォルトの挙動は、QML コンポーネントのインスタンスごとに一意で独立したコピーを提供することです。その JavaScript ファイルが `.import ` ステートメントを使用してリソースやモジュールをインポートしていない場合、そのコードは QML コンポーネントのインスタンスと同じスコープで実行されるため、その QML コンポーネントで宣言されたオブジェクトやプロパティにアクセスして操作することができます。 それ以外の場合は、JavaScriptファイルに独自の一意なスコープが割り当てられ、QMLコンポーネントのオブジェクトやプロパティが必要な場合は、それらをJavaScriptファイルの関数にパラメータとして渡す必要があります。

以下に、コードビハインド実装リソースの例を示します。

// MyButton.qml
import QtQuick 2.0
import "my_button_impl.js" as Logic // A new instance of this JavaScript resource
                                    // is loaded for each instance of Button.qml.

Rectangle {
    id: rect
    width: 200
    height: 100
    color: "red"

    MouseArea {
        id: mousearea
        anchors.fill: parent
        onClicked: Logic.onClicked(rect)
    }
}

// my_button_impl.js
var clickCount = 0;   // this state is separate for each instance of MyButton
function onClicked(button) {
    clickCount += 1;
    if ((clickCount % 5) == 0) {
        button.color = Qt.rgba(1,0,0,1);
    } else {
        button.color = Qt.rgba(0,1,0,1);
    }
}

一般に、単純なロジックは QML ファイル内でインラインで定義すべきですが、より複雑なロジックは、保守性と可読性を高めるために、コードビハインド実装リソースに分離する必要があります。

共有 JavaScript リソース（ライブラリ）

デフォルトでは、QML からインポートされた JavaScript ファイルは、QML コンポーネントとコンテキストを共有します。つまり、JavaScript ファイルは同じ QML オブジェクトにアクセスでき、それらを変更することができます。その結果、各インポートにはこれらのファイルの一意のコピーが必要です。

前のセクションでは、JavaScript ファイルの状態保持型のインポートについて説明しました。しかし、一部の JavaScript ファイルは状態を持たず、インポート元から何も要求しない一連のヘルパー関数を提供するという意味で、再利用可能なライブラリのように振る舞います。 次の例に示すように、そのようなライブラリに特別なプラグマを指定することで、メモリを大幅に節約し、QMLコンポーネントのインスタンス化を高速化できます。

// factorial.js
.pragma library

var factorialCount = 0;

function factorial(a) {
    a = parseInt(a);

    // factorial recursion
    if (a > 0)
        return a * factorial(a - 1);

    // shared state
    factorialCount += 1;

    // recursion base-case.
    return 1;
}

function factorialCallCount() {
    return factorialCount;
}

プラグマ宣言は、コメントを除く JavaScript コードのどの部分よりも前に記述する必要があります。

複数の QML ドキュメントが `"factorial.js" ` をインポートし、そこで提供される `factorial` 関数および `factorialCallCount` 関数を呼び出すことができる点に注意してください。JavaScript インポートの状態は、それをインポートする QML ドキュメント間で共有されるため、`factorial` 関数を一度も呼び出さない QML ドキュメント内で `factorialCallCount` 関数を呼び出した場合、その戻り値が 0 以外になる可能性があります。

例：

// Calculator.qml
import QtQuick 2.0
import "factorial.js" as FactorialCalculator // This JavaScript resource is only
                                             // ever loaded once by the engine,
                                             // even if multiple instances of
                                             // Calculator.qml are created.

Text {
    width: 500
    height: 100
    property int input: 17
    text: "The factorial of " + input + " is: " + FactorialCalculator.factorial(input)
}

共有されているため、.pragmaライブラリファイルはQMLコンポーネントのインスタンスオブジェクトやプロパティに直接アクセスすることはできませんが、QMLの値を関数のパラメータとして渡すことは可能です。