タイプセーフな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は単純な方法で組み立てられます。これは、ブラウザの開発者ツールを使用してウェブサイトのElements (要素) を確認することで簡単に確認できます。

kotlinx.htmlライブラリについてさらに学ぶには、GitHub Wikiを参照してください。そこでは、DOMに要素を追加せずに要素を作成する方法、onClickのようなイベントへのバインド、HTML要素にCSSクラスを適用する方法など、いくつかの例を挙げると、詳細情報を見つけることができます。