📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）
編集の要約なし |
|||
| 30行目: | 30行目: | ||
==== dynamicRolesプロパティ ==== | ==== dynamicRolesプロパティ ==== | ||
モデル内の各アイテムが異なるロール (プロパティ名) を持つことを許可するかどうかを制御する。<br> | モデル内の各アイテムが異なるロール (プロパティ名) を持つことを許可するかどうかを制御する。<br> | ||
<br> | |||
dynamicRolesプロパティをtrueに指定する場合、異なるプロパティ構造を持つアイテムが追加できる。<br> | |||
例えば、あるアイテムにはemailプロパティがあり、別のアイテムにはphoneプロパティがあるような状況を許可する。<br> | |||
<br> | |||
以下の例では、同じListModel内で異なるプロパティの組み合わせを持つアイテムを管理している。<br> | |||
dynamicRolesプロパティをtrueに指定することにより、アイテムごとに必要なプロパティのみを定義することが可能になる。<br> | |||
<br> | |||
<u>※注意</u><br> | |||
<u>存在しないプロパティにアクセス (例: Aliceのデータでphoneにアクセス) した場合、undefinedが返る。</u><br> | |||
<u>そのため、必要に応じてプロパティの存在確認を行うことが必要となる。</u><br> | |||
<syntaxhighlight lang="qml"> | |||
ListModel { | |||
id: contactModel | |||
dynamicRoles: true // 異なるプロパティ構造を許可 | |||
Component.onCompleted: { | |||
// メールアドレスを持つ連絡先 | |||
append({ | |||
"name": "Alice", | |||
"email": "alice@example.com" | |||
}) | |||
// 電話番号を持つ連絡先 | |||
append({ | |||
"name": "Bob", | |||
"phone": "123-456-789" | |||
}) | |||
// メールアドレスと電話番号の両方を持つ連絡先 | |||
append({ | |||
"name": "Charlie", | |||
"email": "charlie@example.com", | |||
"phone": "987-654-321" | |||
}) | |||
} | |||
} | |||
// データの取得例 | |||
// name と email の取得 | |||
let emailContact = contactModel.get(0) // Aliceのデータ | |||
console.log("名前:", emailContact.name) | |||
console.log("メール:", emailContact.email) | |||
// name と phone の取得 | |||
let phoneContact = contactModel.get(1) // Bobのデータ | |||
console.log("名前:", phoneContact.name) | |||
console.log("電話:", phoneContact.phone) | |||
// name, email, phone の取得 | |||
let fullContact = contactModel.get(2) // Charlieのデータ | |||
console.log("名前:", fullContact.name) | |||
console.log("メール:", fullContact.email) | |||
console.log("電話:", fullContact.phone) | |||
</syntaxhighlight> | |||
<br><br> | <br><br> | ||
| 77行目: | 132行目: | ||
<br> | <br> | ||
<syntaxhighlight lang="qml"> | <syntaxhighlight lang="qml"> | ||
myModel. | myModel.clear() // 全アイテムを削除 | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | <br> | ||
| 84行目: | 139行目: | ||
<br> | <br> | ||
<syntaxhighlight lang="qml"> | <syntaxhighlight lang="qml"> | ||
myModel. | myModel.remove(2) // 要素位置が2番目のアイテムを削除 | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | <br> | ||
| 99行目: | 154行目: | ||
getメソッドは、指定したインデックスのアイテムを取得する。<br> | getメソッドは、指定したインデックスのアイテムを取得する。<br> | ||
setメソッドは、指定したインデックスのアイテムを更新する。<br> | setメソッドは、指定したインデックスのアイテムを更新する。<br> | ||
<br> | |||
また、setメソッドは、モデル全体を新しいデータで置き換えることもできる。<br> | |||
その場合は既存のデータは全て削除される。<br> | |||
<br> | <br> | ||
<syntaxhighlight lang="qml"> | <syntaxhighlight lang="qml"> | ||
// getメソッド | // getメソッド | ||
let person = myModel.get(0) // 最初のアイテムを取得 | let person = myModel.get(0) // 最初のアイテムを取得 | ||
</syntaxhighlight> | |||
<br> | |||
<syntaxhighlight lang="qml"> | |||
// 例1 : setメソッド | |||
// 初期値を定義する場合 | |||
ListModel { | |||
id: myModel | |||
Component.onCompleted: { | |||
set([ | |||
{ name: "Alice", age: 20 }, | |||
{ name: "Bob", age: 25 } | |||
]) | |||
} | |||
} | |||
// 例2 : setメソッド | |||
// ListModel全体を新しい値で置き換える | |||
ListModel { | |||
id: myModel | |||
ListElement { | |||
name: "Alice" | |||
age: 20 | |||
} | |||
} | |||
myModel.set([ | |||
{ name: "Bob", age: 25 }, | |||
{ name: "Charlie", age: 30 } | |||
]) | |||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | <br> | ||
| 143行目: | 231行目: | ||
モデルの変更操作に対するロールバック機能も提供されており、これは、特定の操作が失敗した場合、モデルの状態を以前の状態に戻すことができる。<br> | モデルの変更操作に対するロールバック機能も提供されており、これは、特定の操作が失敗した場合、モデルの状態を以前の状態に戻すことができる。<br> | ||
これにより、データの整合性を保ちながら、安全な操作を実現することができる。<br> | これにより、データの整合性を保ちながら、安全な操作を実現することができる。<br> | ||
<br> | |||
<syntaxhighlight lang="qml"> | |||
// 例 : nameプロパティの変更監視 | |||
ListModel { | |||
id: myModel | |||
ListElement { name: "Alice" } | |||
// 特定のインデックスのアイテムの監視 | |||
Connections { | |||
target: myModel | |||
function onNameChanged() { | |||
console.log("名前が変更されました") | |||
} | |||
} | |||
} | |||
</syntaxhighlight> | |||
<br><br> | <br><br> | ||