Kotlin/JSを始めよう

このチュートリアルでは、Kotlin/JavaScript (Kotlin/JS) を使用してブラウザ向けのウェブアプリケーションを作成する方法を説明します。アプリケーションを作成するには、ワークフローに最適なツールを選択してください。

IntelliJ IDEA: バージョン管理からプロジェクトテンプレートをクローンし、IntelliJ IDEAで作業します。
Gradle ビルドシステム: プロジェクトのビルドファイルを自分で作成し、内部でセットアップがどのように機能するかをより深く理解します。

ブラウザをターゲットにするだけでなく、Kotlin/JSを使用すると他の環境向けにコンパイルできます。詳細については、「実行環境」を参照してください。

IntelliJ IDEA でアプリケーションを作成する

Kotlin/JS ウェブアプリケーションを作成するには、 IntelliJ IDEA の Community 版または Ultimate 版のいずれかを使用できます。

環境をセットアップする

IntelliJ IDEA の最新バージョンをダウンロードしてインストールします。
Kotlin Multiplatform 開発用に環境をセットアップします。

プロジェクトを作成する

IntelliJ IDEA で、File | New | Project from Version Control を選択します。
Kotlin/JS テンプレートプロジェクトの URL を入力します。

text

https://github.com/Kotlin/kmp-js-wizard

Clone をクリックします。

プロジェクトを設定する

kmp-js-wizard/gradle/libs.versions.toml ファイルを開きます。このファイルには、プロジェクトの依存関係のバージョンカタログが含まれています。
Kotlin バージョンが、Kotlin/JS をターゲットとするウェブアプリケーションを作成するために必要な Kotlin Multiplatform Gradle プラグインのバージョンと一致していることを確認します。

text

[versions]
kotlin = "2.2.21"

[plugins]
kotlin-multiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }

Gradle ファイルを同期します（libs.versions.toml ファイルを更新した場合）。ビルドファイルに表示されるLoad Gradle Changesアイコンをクリックします。

Load the Gradle changes button

または、Gradle ツールウィンドウの更新ボタンをクリックします。

マルチプラットフォームプロジェクトの Gradle 設定に関する詳細については、 Multiplatform Gradle DSL リファレンスを参照してください。

アプリケーションをビルドして実行する

src/jsMain/kotlin/Main.kt ファイルを開きます。

src/jsMain/kotlin/ ディレクトリには、プロジェクトの JavaScript ターゲット用の主要な Kotlin ソースファイルが含まれています。
Main.kt ファイルには、kotlinx.browser API を使用してブラウザページに「Hello, Kotlin/JS!」をレンダリングするコードが含まれています。

main() 関数内のRunアイコンをクリックしてコードを実行します。

Run the application

ウェブアプリケーションはブラウザで自動的に開きます。または、実行が完了したら、ブラウザで次の URL を開くこともできます。

text

   http://localhost:8080/

ウェブアプリケーションが表示されます。

Application output

アプリケーションを初めて実行すると、IntelliJ IDEA はトップバーにそれに対応する実行構成（jsMain [js]）を作成します。

Gradle run configuration

IntelliJ IDEA Ultimate では、 JS デバッガーを使用して、IDE から直接コードをデバッグできます。

継続ビルドを有効にする

変更を加えるたびに、Gradle はプロジェクトを自動的にリビルドできます。

実行構成のリストでjsMain [js]を選択し、More Actions | Editをクリックします。
Run/Debug Configurationsダイアログで、RunフィールドにjsBrowserDevelopmentRun --continuousと入力します。
OKをクリックします。

これで、アプリケーションを実行して変更を加えるたびに、 Gradle はプロジェクトのインクリメンタルビルドを自動的に実行し、保存（/）またはクラスファイルの変更時にブラウザをホットリロードします。

アプリケーションを変更する

アプリケーションを変更して、単語の文字数をカウントする機能を追加します。

入力要素を追加する

src/jsMain/kotlin/Main.kt ファイルに、ユーザー入力を読み取るための拡張関数を介してHTML input要素を追加します。

kotlin

// Replace the Element.appendMessage() function
fun Element.appendInput() {
    val input = document.createElement("input")
    appendChild(input)
}

main() でappendInput()関数を呼び出します。これにより、ページに入力要素が表示されます。

kotlin

fun main() {
    // Replace document.body!!.appendMessage(message)
    document.body?.appendInput()
}

アプリケーションを再度実行します。
アプリケーションは次のようになります。

Application with an input element

入力イベント処理を追加する

appendInput()関数内にリスナーを追加して、入力値を読み取り、変更に反応するようにします。

kotlin

// Replace the current appendInput() function
fun Element.appendInput(onChange: (String) -> Unit = {}) {
    val input = document.createElement("input").apply {
        addEventListener("change") { event ->
            onChange(event.target.unsafeCast<HTMLInputElement>().value)
        }
    }
    appendChild(input)
}

IDEの提案に従って、HTMLInputElement依存関係をインポートします。

Import dependencies

main()でonChangeコールバックを呼び出します。これにより、入力値が読み取られ、処理されます。
kotlin
```
fun main() {
    // Replace document.body?.appendInput()
    document.body?.appendInput(onChange = { println(it) })
}
```

出力要素を追加する

パラグラフを作成する拡張関数を定義して、出力を表示するテキスト要素を追加します。

kotlin

 fun Element.appendTextContainer(): Element {
     return document.createElement("p").also(::appendChild)
 }

main()でappendTextContainer()関数を呼び出します。これにより、出力要素が作成されます。

kotlin

 fun main() {
     // Creates a text container for our output
     // Replace val message = Message(topic = "Kotlin/JS", content = "Hello!")
     val output = document.body?.appendTextContainer()

     // Reads the input value
     document.body?.appendInput(onChange = { println(it) })
 }

入力を処理して文字数をカウントする

入力から空白を削除し、文字数とともに出力を表示して、入力を処理します。

main()関数内のappendInput()関数に、以下のコードを追加します。

kotlin

fun main() {
    // Creates a text container for our output
    val output = document.body?.appendTextContainer()

    // Reads the input value
    // Replace the current appendInput() function
    document.body?.appendInput(onChange = { name ->
        name.replace(" ", "").let {
            output?.textContent = "Your name contains ${it.length} letters"
        }
    })
}

上記のコードについて：

replace()関数は、名前内の空のスペースを削除します。
let{}スコープ関数は、オブジェクトコンテキスト内で関数を実行します。
文字列テンプレート (${it.length}) は、ドル記号（$）を前に付け、波括弧（{}）で囲むことにより、単語の長さを文字列に挿入します。一方、itはラムダパラメーターのデフォルト名です。

アプリケーションを実行する

アプリケーションを実行します。
名前を入力します。
キーを押します。

結果が表示されます。

Application output

入力を処理して一意の文字をカウントする

追加の演習として、単語内の一意の文字数を計算して表示するように入力を処理してみましょう。

src/jsMain/kotlin/Main.kt ファイルに、String用の.countDistinctCharacters()拡張関数を追加します。

kotlin

fun String.countDistinctCharacters() = lowercase().toList().distinct().count()

上記のコードについて：

.lowercase()関数は、名前を小文字に変換します。
toList()関数は、入力文字列を文字のリストに変換します。
distinct()関数は、単語から重複しない文字のみを選択します。
count()関数は、重複しない文字をカウントします。

main()で.countDistinctCharacters()関数を呼び出します。これにより、名前の一意の文字数がカウントされます。

kotlin

 fun main() {
     // Creates a text container for our output
     val output = document.body?.appendTextContainer()

     // Reads the input value
     document.body?.appendInput(onChange = { name ->
         name.replace(" ", "").let {
             // Prints the number of unique letters
             // Replace output?.textContent = "Your name contains ${it.length} letters"
             output?.textContent = "Your name contains ${it.countDistinctCharacters()} unique letters"
         }
     })
}

アプリケーションを実行して名前を入力する手順に従います。

結果が表示されます。

Application output

Gradle を使用してアプリケーションを作成する

このセクションでは、Gradle を使用して Kotlin/JS アプリケーションを手動で作成する方法を学びます。

Gradle は、Kotlin/JS および Kotlin Multiplatform プロジェクトのデフォルトのビルドシステムです。また、Java、Android、およびその他のエコシステムでも一般的に使用されます。

プロジェクトファイルを作成する

Kotlin Gradle プラグイン (KGP) と互換性のある Gradle バージョンを使用していることを確認してください。詳細については、互換性表を参照してください。
ファイルエクスプローラー、コマンドライン、または任意のツールを使用して、プロジェクトの空のディレクトリを作成します。
プロジェクトディレクトリ内に、以下の内容でbuild.gradle.ktsファイルを作成します。

KotlinGroovy

kotlin

// build.gradle.kts
plugins {
    kotlin("multiplatform") version "2.2.21"
}

repositories {
    mavenCentral()
}

kotlin {
    js {
        // Use browser() for running in a browser or nodejs() for running in Node.js
        browser() 
        binaries.executable()
    }
}

groovy

// build.gradle
plugins {
    id 'org.jetbrains.kotlin.multiplatform' version '2.2.21'
}

repositories {
    mavenCentral()
}

kotlin {
    js {
        // Use browser() for running in a browser or nodejs() for running in Node.js
        browser() 
        binaries.executable()
    }
}

browser()やnodejs()など、さまざまな実行環境を使用できます。各環境は、コードがどこで実行されるかを定義し、プロジェクト内でGradleがタスク名をどのように生成するかを決定します。

プロジェクトディレクトリ内に、空のsettings.gradle.ktsファイルを作成します。
プロジェクトディレクトリ内に、src/jsMain/kotlinディレクトリを作成します。
src/jsMain/kotlinディレクトリ内に、以下の内容でhello.ktファイルを追加します。

kotlin

fun main() {
    println("Hello, Kotlin/JS!")
}

慣例により、すべてのソースはsrc/<target name>[Main|Test]/kotlinディレクトリに配置されます。

Mainはソースコードの場所です。
Testはテストの場所です。
<target name>はターゲットプラットフォーム（この場合はjs）に対応します。

browser環境の場合

browser環境で作業している場合は、次の手順に従ってください。 nodejs環境で作業している場合は、プロジェクトのビルドと実行セクションに進んでください。

プロジェクトディレクトリ内に、src/jsMain/resourcesディレクトリを作成します。
src/jsMain/resourcesディレクトリ内に、以下の内容でindex.htmlファイルを作成します。

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Application title</title>
</head>
<body>
    <script src="$NAME_OF_YOUR_PROJECT_DIRECTORY.js"></script>
</body>
</html>

<YOUR_PROJECT_DIRECTORY>プレースホルダーをプロジェクトディレクトリの名前に置き換えます。

プロジェクトをビルドして実行する

プロジェクトをビルドするには、ルートプロジェクトディレクトリから次のコマンドを実行します。

bash

# For browser
gradle jsBrowserDevelopmentRun

# OR

# For Node.js
gradle jsNodeDevelopmentRun

browser環境を使用している場合、ブラウザがindex.htmlファイルを開き、ブラウザコンソールに「"Hello, Kotlin/JS!"」と出力することがわかります。/コマンドを使用してコンソールを開くことができます。

Application output

nodejs環境を使用している場合、ターミナルが「"Hello, Kotlin/JS!"」と出力することがわかります。

Application output

IDEでプロジェクトを開く

Gradleをサポートする任意のIDEでプロジェクトを開くことができます。

IntelliJ IDEAを使用する場合：

File | Open を選択します。
プロジェクトディレクトリを見つけます。
Open をクリックします。

IntelliJ IDEAは、それがKotlin/JSプロジェクトであるかどうかを自動的に検出します。プロジェクトで問題が発生した場合、IntelliJ IDEAはBuildペインにエラーメッセージを表示します。

次のステップ

Kotlin/JS プロジェクトをセットアップする。
Kotlin/JS アプリケーションをデバッグする方法を学ぶ。
Kotlin/JS でテストを作成および実行する方法を学ぶ。
実際の Kotlin/JS プロジェクト用の Gradle ビルドスクリプトを作成する方法を学ぶ。
Gradle ビルドシステムに関する詳細を読む。

概要

ビルダー

Spring

Spring Bootを使用してデータベースを持つRESTful Webサービスを作成する

JavaからKotlinへの移行ガイド

C interop

Objective-C interop

メモリマネージャー

リファレンスとヒント

JSプラットフォーム向けKotlin

概要

Dokkaを実行する

出力形式

認知複雑度の最小化

Kotlin/JSを始めよう

IntelliJ IDEA でアプリケーションを作成する

環境をセットアップする

プロジェクトを作成する

プロジェクトを設定する

アプリケーションをビルドして実行する

継続ビルドを有効にする

アプリケーションを変更する

入力要素を追加する

入力イベント処理を追加する

出力要素を追加する

入力を処理して文字数をカウントする

アプリケーションを実行する

入力を処理して一意の文字をカウントする

Gradle を使用してアプリケーションを作成する

プロジェクトファイルを作成する

プロジェクトをビルドして実行する

IDEでプロジェクトを開く

次のステップ

Spring Bootを使用してデータベースを持つRESTful Webサービスを作成する

Kotlin/JSを始めよう ​

IntelliJ IDEA でアプリケーションを作成する ​

環境をセットアップする ​

プロジェクトを作成する ​

プロジェクトを設定する ​

アプリケーションをビルドして実行する ​

継続ビルドを有効にする ​

アプリケーションを変更する ​

入力要素を追加する ​

入力イベント処理を追加する ​

出力要素を追加する ​

入力を処理して文字数をカウントする ​

アプリケーションを実行する ​

入力を処理して一意の文字をカウントする ​

Gradle を使用してアプリケーションを作成する ​

プロジェクトファイルを作成する ​

プロジェクトをビルドして実行する ​

IDEでプロジェクトを開く ​

次のステップ ​

Kotlin/JSを始めよう

IntelliJ IDEA でアプリケーションを作成する

環境をセットアップする

プロジェクトを作成する

プロジェクトを設定する

アプリケーションをビルドして実行する

継続ビルドを有効にする

アプリケーションを変更する

入力要素を追加する

入力イベント処理を追加する

出力要素を追加する

入力を処理して文字数をカウントする

アプリケーションを実行する

入力を処理して一意の文字をカウントする

Gradle を使用してアプリケーションを作成する

プロジェクトファイルを作成する

プロジェクトをビルドして実行する

IDEでプロジェクトを開く

次のステップ