Typesafe HTML DSL

kotlinx.html ライブラリは、静的に型付けされたHTMLビルダーを使用してDOM要素を生成する機能を提供します（JavaScriptの他に、JVMターゲットでも利用できます！）。ライブラリを使用するには、対応するリポジトリと依存関係をbuild.gradle.ktsファイルに含めます。

repositories {
    // ...
    mavenCentral()
}

dependencies {
    implementation(kotlin("stdlib-js"))
    implementation("org.jetbrains.kotlinx:kotlinx-html-js:0.8.0")
    // ...
}

依存関係が含まれると、DOMを生成するために提供されるさまざまなインターフェースにアクセスできます。 見出し、テキスト、およびリンクをレンダリングするには、たとえば、次のスニペットで十分です。

import kotlinx.browser.*
import kotlinx.html.*
import kotlinx.html.dom.*

fun main() {
    document.body!!.append.div {
        h1 {
            +"Welcome to Kotlin/JS!"
        }
        p {
            +"Fancy joining this year's "
            a("https://kotlinconf.com/") {
                +"KotlinConf"
            }
            +"?"
        }
    }
}

この例をブラウザで実行すると、DOMは簡単な方法で組み立てられます。これは、ブラウザの開発者ツールを使用してWebサイトの要素を確認することで簡単に確認できます。

kotlinx.htmlライブラリの詳細については、GitHub Wikiを確認してください。ここでは、DOMに追加せずに要素を作成する方法、onClickなどのイベントへのバインド方法、HTML要素にCSSクラスを適用する方法などの詳細情報を確認できます。