Kotlin Academy · レッスン

Kotlin/WASM：ブラウザー向けWebAssemblyへのコンパイル

Q: 「Kotlin/WASM：ブラウザー向けWebAssemblyへのコンパイル」で何を学びますか？

Kotlin/WASMをターゲットにし、JavaScriptと連携してブラウザー環境で実行します。 ブラウザで直接実行するハンズオンコードでKotlin Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Kotlin/WASMをターゲットにし、JavaScriptと連携してブラウザー環境で実行します。

「Kotlin/WASM：ブラウザー向けWebAssemblyへのコンパイル」はCoddyKit上の無料Kotlin Academyレッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはKotlin Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Kotlin Academyコースには全4レッスンが含まれています。

Kotlin/WASMとは

Kotlin/WASMは、ブラウザーやサーバーサイドのWASMランタイムで実行するWebAssembly（.wasm）モジュールを生成するKotlinのコンパイルターゲットです。Kotlin/JSとは別のもので、計算負荷の高いコードでより優れたパフォーマンスと小さなバイナリサイズを実現します。

現在の状況（Kotlin 2.0）

Kotlin 2.0の時点で、Kotlin/WASMはWasmGC提案をターゲットにしています。これは、ガベージコレクションされるオブジェクトをWebAssemblyでネイティブに扱えるようにするW3C標準です。WasmGCはChrome 119以降、Firefox 120以降、Safari 18以降でサポートされています。Kotlin/WASMはKotlin 2.1でStableになりました。

Kotlin/WASMターゲットの設定

KMPのbuild.gradle.ktsで、WASMターゲットと実行可能バイナリを宣言します。

kotlin {
    wasmJs {
        browser()
        binaries.executable()
    }
    sourceSets {
        val wasmJsMain by getting {
            dependencies {
                implementation("org.jetbrains.kotlinx:kotlinx-browser:0.3")
            }
        }
    }
}

WASM向けKotlinコードの記述

Kotlin/WASMのコードは通常のKotlinコードと同じように見えます。commonMainを介して、他のKMPターゲットとロジックを共有できます。ブラウザーのDOMにはkotlinx-browserライブラリを使ってアクセスします。

import kotlinx.browser.document
import kotlinx.browser.window

fun main() {
    val p = document.createElement("p")
    p.textContent = "Hello from Kotlin/WASM!"
    document.body!!.appendChild(p)
}

ビルドと実行

./gradlew wasmJsBrowserDevelopmentRunを実行すると、ライブリロードに対応した開発サーバーが起動します。本番ビルドには./gradlew wasmJsBrowserDistributionを使用します。出力先はbuild/dist/wasmJs/productionExecutable/です。

Kotlin/WASMでのJavaScript相互運用

@JsExportを使うと、Kotlinの関数をJavaScriptに公開できます。KotlinからJavaScript APIを呼び出すには、external宣言を使用します。

external fun console_log(msg: String): Unit

@JsExport
fun add(a: Int, b: Int): Int = a + b

Kotlin/WASMとKotlin/JSの比較

Kotlin/JS：JavaScriptにトランスパイルされます。JavaScriptエコシステム全体にアクセスでき、ツールが成熟しており、JavaScriptが動作する環境ならどこでも実行できます。Kotlin/WASM：WebAssemblyにコンパイルされます。計算負荷の高いコードをより高速に実行でき、型安全なメモリモデルを備えていますが、WasmGCに対応したブラウザーが必要です。一般的なWebアプリにはKotlin/JSを使用し、パフォーマンスが重要なモジュールにはKotlin/WASMを検討してください。

Compose for Web（WASM）

JetBrainsのCompose Multiplatformは、AndroidやDesktopで使用されるものと同じCompose APIを使ってWeb UIを構築するために、Kotlin/WASMをターゲットにしています。UI全体はWASMを介してCanvas要素に描画されます。

// build.gradle.kts with Compose Multiplatform
plugins { id("org.jetbrains.compose") }

// In wasmJsMain
@OptIn(ExperimentalComposeUiApi::class)
fun main() = CanvasBasedWindow("MyApp") {
    Text("Hello, Compose WASM!")
}

バイナリサイズと最適化

WASMバイナリは、本番ビルド中にwasm-optで最適化されます。Tree shakingによって、使用されていないKotlin標準ライブラリのコードが削除されます。Kotlin/WASMの一般的なHello Worldのサイズは、gzip圧縮後で200～400 KBです。最大限に最適化するには、binaryenArgs = listOf("-O3")を有効にします。

JVMおよびNativeとのコード共有

Kotlin/WASMはKMPのターゲットであるため、commonMainにあるドメインロジック、アルゴリズム、データモデルは自動的に共有されます。DOM操作やファイルI/Oなどのプラットフォーム固有のコードは、actual宣言を使ってwasmJsMainに記述します。

制限事項とロードマップ

現在の制限事項には、NPMパッケージに直接アクセスできないこと（JS相互運用を使用します）、Kotlin/JSと比べてデバッガーのサポートが限られていること、WasmGCに対応したブラウザーが必要であること（古いブラウザーでは利用できません）があります。Kotlinチームは、WASMのツール、パフォーマンス、標準ライブラリの対応範囲を積極的に改善しています。

クイックチェック

Kotlin/WASM（Kotlin 2.0以降）がターゲットとするWebAssemblyの提案は何ですか。これにより、WASMでガベージコレクションされるオブジェクトをネイティブに扱えるようになります。

まとめ：Kotlin/WASM

重要なポイント：

Kotlin/WASMはWasmGC提案を介してWebAssemblyにコンパイルされます（Kotlin 2.1でStable）
KMPのGradle設定でwasmJs { browser(); binaries.executable() }を宣言します
DOMにはkotlinx-browserを介してアクセスし、JS相互運用にはexternalと@JsExportを使用します
wasmJsBrowserDistributionでビルドし、wasmJsBrowserDevelopmentRunで開発サーバーを起動します
ドメインロジックはcommonMainで共有し、プラットフォーム固有の処理はwasmJsMainに記述します

よくある質問

「Kotlin/WASM：ブラウザー向けWebAssemblyへのコンパイル」レッスンは無料ですか？

はい。「Kotlin/WASM：ブラウザー向けWebAssemblyへのコンパイル」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Kotlin Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Kotlin Academyコースには全4レッスンが含まれています。

「Kotlin/WASM：ブラウザー向けWebAssemblyへのコンパイル」で何を学びますか？

Kotlin/WASMをターゲットにし、JavaScriptと連携してブラウザー環境で実行します。ブラウザで直接実行するハンズオンコードでKotlin Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Kotlin Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのKotlin Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン4/4です。

「Kotlin/WASM：ブラウザー向けWebAssemblyへのコンパイル」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このKotlin Academyレッスンでコードを書いて実行できますか？

はい。すべてのKotlin Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Kotlin Academyに戻る