JSプレーンオブジェクトコンパイラプラグイン
JavaScript (JS) プレーンオブジェクトコンパイラプラグイン（js-plain-objects）を使用すると、型安全な方法でプレーンJSオブジェクトを作成およびコピーできます。
ここでは、プレーンJSオブジェクトに関する情報と、Kotlin/JSプロジェクトでjs-plain-objectsコンパイラプラグインを使用する方法について説明します。
js-plain-objectsプラグインは、新しいK2 Kotlinコンパイラでのみ動作します。
プレーンJSオブジェクト
プレーンオブジェクトとは、オブジェクトリテラル（{}）を介して作成され、データプロパティを含むシンプルなJSオブジェクトです。 多くのJS APIは、設定やデータ交換のためにプレーンJSオブジェクトを受け取ったり、返したりします。
js-plain-objectsプラグインを使用すると、オブジェクトの形状を記述するためにKotlinのexternal interfaceを宣言し、@JsPlainObjectでアノテーションを付けます。 コンパイラはその後、Kotlinの型安全性を維持しながら、そのようなオブジェクトを構築およびコピーするための便利な関数を生成します。
プラグインを有効にする
プロジェクトのGradle設定ファイルにjs-plain-objectsプラグインを追加します。以下にKotlin DSLの例を示します。
// build.gradle.kts
plugins {
kotlin("multiplatform") version "2.2.21"
kotlin("plugin.js-plain-objects") version "2.2.21"
}
kotlin {
js {
browser() // or nodejs()
}
}// build.gradle
plugins {
id 'org.jetbrains.kotlin.multiplatform' version '2.2.21'
id 'org.jetbrains.kotlin.plugin.js-plain-objects' version '2.2.21'
}
kotlin {
js {
browser() // or nodejs()
}
}プレーンオブジェクト型を宣言する
js-plain-objectsプラグインを有効にすると、プレーンオブジェクト型を宣言できます。 external interfaceに@JsPlainObjectをアノテーションとして付けます。例：
@JsPlainObject
external interface User {
val name: String
val age: Int
// You can use nullable types to declare a property as optional
val email: String?
}プラグインがこのようなインターフェースを処理すると、オブジェクトの作成とコピーのための2つのヘルパー関数を持つコンパニオンオブジェクトを生成します。
@JsPlainObject
external interface User {
val name: String
val age: Int
val email: String?
// Generated by the plugin
@JsExport.Ignore
companion object {
inline operator fun invoke(name: String, age: Int, email: String? = NOTHING): User =
js("({ name: name, age: age, email: email })")
inline fun copy(source: User, name: String = NOTHING, age: Int = NOTHING, email: String? = NOTHING): User =
js("Object.assign({}, source, { name: name, age: age, email: email })")
}
}上記の例から：
nameとageはnull許容マークなしで宣言されているため、必須です。emailはnull許容として宣言されているため、オプションであり、作成時にスキップできます。- 演算子
invokeは、指定されたプロパティを持つ新しいプレーンJSオブジェクトを構築します。 copy関数は、sourceをシャローコピーし、指定されたプロパティを上書きすることによって新しいオブジェクトを作成します。- これらのヘルパーがJSエクスポートに漏洩するのを避けるため、コンパニオンは
@JsExport.Ignoreでマークされています。
プレーンオブジェクトを使用する
生成されたヘルパーを使用してオブジェクトを作成およびコピーします。
fun main() {
val user = User(name = "Name", age = 10)
val copy = User.copy(user, age = 11, email = "[email protected]")
println(JSON.stringify(user))
// { "name": "Name", "age": 10 }
println(JSON.stringify(copy))
// { "name": "Name", "age": 11, "email": "[email protected]" }
}KotlinコードはJavaScriptにコンパイルされます：
function main () {
var user = { name: "Name", age: 10 };
var copy = Object.assign({}, user, { age: 11, email: "[email protected]" });
println(JSON.stringify(user));
// { "name": "Name", "age": 10 }
println(JSON.stringify(copy));
// { "name": "Name", "age": 11, "email": "[email protected]" }
}このアプローチで作成されたJavaScriptオブジェクトはすべて安全です。誤ったプロパティ名または値の型を使用した場合、コンパイル時エラーが発生します。生成されたコードはシンプルなオブジェクトリテラルとObject.assign呼び出しとしてインライン化されるため、このアプローチはゼロコストでもあります。
次へ
JavaScriptとの相互運用性については、KotlinからJavaScriptコードを使用するおよび動的型のドキュメントで詳細をご確認ください。