) を接頭辞として付け、中括弧 ({}) で囲むことで、文字列内に単語の長さを挿入します。 一方、it は ラムダパラメータ のデフォルト名です。
アプリケーションの実行
- アプリケーションを実行します。
- 名前を入力します。
- を押します。
結果を確認できます。
入力を処理して一意の文字数をカウントする
追加の演習として、入力を処理して、単語内の一意の（重複しない）文字の数を計算して表示してみましょう。
src/jsMain/kotlin/Main.ktファイルに、String用の.countDistinctCharacters()拡張関数 を追加します。kotlinfun String.countDistinctCharacters() = lowercase().toList().distinct().count()上記のコードについて：
.lowercase()関数 は、名前を小文字に変換します。toList()関数 は、入力文字列を文字のリストに変換します。distinct()関数 は、単語から重複しない文字のみを選択します。count()関数 は、一意の文字をカウントします。
main()で.countDistinctCharacters()関数を呼び出します。これにより名前の中の一意の文字数がカウントされます。kotlinfun main() { // 出力用のテキストコンテナを作成 val output = document.body?.appendTextContainer() // 入力値を読み取る document.body?.appendInput(onChange = { name -> name.replace(" ", "").let { // 一意の文字数を出力 // output?.textContent = "Your name contains ${it.length} letters" を置き換える output?.textContent = "Your name contains ${it.countDistinctCharacters()} unique letters" } }) }アプリケーションを実行して名前を入力する 手順に従います。
結果を確認できます。
Gradle を使用してアプリケーションを作成する
このセクションでは、Gradle を使用して Kotlin/JS アプリケーションを手動で作成する方法を学びます。
Gradle は、Kotlin/JS および Kotlin Multiplatform プロジェクトのデフォルトのビルドシステムです。 また、Java、Android、その他のエコシステムでも一般的に使用されています。
プロジェクトファイルの作成
Kotlin Gradle プラグイン (KGP) と互換性のある Gradle バージョンを使用していることを確認してください。詳細は 互換性テーブル を参照してください。
ファイルエクスプローラー、コマンドライン、またはお好みのツールを使用して、プロジェクト用の空のディレクトリを作成します。
プロジェクトディレクトリ内に、次の内容の
build.gradle.ktsファイルを作成します。kotlin// build.gradle.kts plugins { kotlin("multiplatform") version "2.3.0" } repositories { mavenCentral() } kotlin { js { // ブラウザで実行する場合は browser()、Node.js で実行する場合は nodejs() を使用 browser() binaries.executable() } }groovy// build.gradle plugins { id 'org.jetbrains.kotlin.multiplatform' version '2.3.0' } repositories { mavenCentral() } kotlin { js { // ブラウザで実行する場合は browser()、Node.js で実行する場合は nodejs() を使用 browser() binaries.executable() } }browser()やnodejs()など、さまざまな 実行環境 を使用できます。 各環境はコードがどこで実行されるかを定義し、Gradle がプロジェクト内でタスク名を生成する方法を決定します。プロジェクトディレクトリ内に、空の
settings.gradle.ktsファイルを作成します。プロジェクトディレクトリ内に、
src/jsMain/kotlinディレクトリを作成します。src/jsMain/kotlinディレクトリ内に、次の内容のhello.ktファイルを追加します。kotlinfun main() { println("Hello, Kotlin/JS!") }慣例により、すべてのソースは
src/<ターゲット名>[Main|Test]/kotlinディレクトリに配置されます。Mainはソースコードの場所です。Testはテストの場所です。<ターゲット名>はターゲットプラットフォーム（この場合は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>$NAME_OF_YOUR_PROJECT_DIRECTORYプレースホルダをプロジェクトのディレクトリ名に置き換えてください。
プロジェクトのビルドと実行
プロジェクトをビルドするには、プロジェクトのルートディレクトリから次のコマンドを実行します。
# ブラウザの場合
gradle jsBrowserDevelopmentRun
# または
# Node.js の場合
gradle jsNodeDevelopmentRunbrowser 環境を使用している場合、ブラウザが index.html ファイルを開き、ブラウザコンソールに "Hello, Kotlin/JS!" と出力されるのを確認できます。 コンソールは / コマンドを使用して開くことができます。
nodejs 環境を使用している場合、ターミナルに "Hello, Kotlin/JS!" と出力されるのを確認できます。
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 ビルドシステム についてさらに読む。