Kotlin/JavaScript
Kotlin/JavaScript (Kotlin/JS) を使用すると、Kotlinコード、Kotlin標準ライブラリ、および互換性のある依存関係をJavaScriptにトランスパイル（transpile）できます。これにより、KotlinアプリケーションをJavaScriptがサポートされているあらゆる環境で実行できるようになります。
Kotlin Multiplatform Gradleプラグイン (kotlin.multiplatform) を通じてKotlin/JSを使用することで、JavaScriptをターゲットとするKotlinプロジェクトの設定と管理を一箇所で行うことができます。
Kotlin Multiplatform Gradleプラグインを使用すると、アプリケーションのバンドリングの制御や、npmからのJavaScript依存関係の直接追加といった機能にアクセスできます。利用可能な設定オプションの概要については、「Kotlin/JSプロジェクトの設定」を参照してください。
Kotlin/JSのユースケース
Kotlin/JSの一般的な活用方法は以下の通りです。
フロントエンドとJVMバックエンド間での共通ロジックの共有
バックエンドがKotlinまたは他のJVM互換言語で書かれている場合、Webアプリケーションとバックエンドの間で共通のコードを共有できます。これには、データ転送オブジェクト（DTO）、バリデーション（検証）や認証のルール、REST APIエンドポイントの抽象化などが含まれます。
Android、iOS、およびWebクライアント間での共通ロジックの共有
ネイティブのユーザーインターフェースを維持しながら、WebインターフェースとAndroid・iOS向けのモバイルアプリケーション間でビジネスロジックを共有できます。これにより、REST APIの抽象化、ユーザー認証、フォームバリデーション、ドメインモデルなどの共通機能の重複を避けることができます。
Kotlin/JSを使用したフロントエンドWebアプリケーションの構築
既存のツールやライブラリと統合しながら、Kotlinを使用して従来のWebフロントエンドを開発できます。
Android開発に慣れている場合は、KobwebやKiluaなどのComposeベースのフレームワークを使用してWebアプリケーションを構築できます。
JetBrainsが提供する一般的なJavaScriptライブラリ用のKotlinラッパー（
kotlin-wrappers）を使用して、Kotlin/JSで完全に型安全なReactアプリケーションを構築できます。これらのラッパーは、Reactやその他のJavaScriptフレームワークのための抽象化と統合を提供します。これらのラッパーは、React Redux、React Router、styled-componentsなどの補完的なライブラリもサポートしています。また、JavaScriptエコシステムとの相互運用性（interoperability）を通じて、サードパーティのReactコンポーネントやコンポーネントライブラリを使用することも可能です。
Kotlinエコシステムと統合され、簡潔で表現力豊かなコードをサポートするKotlin/JSフレームワークを使用できます。
古いブラウザをサポートするマルチプラットフォームアプリケーションの構築
Compose Multiplatformを使用すると、Kotlinを使用してアプリケーションを構築し、モバイルやデスクトップのユーザーインターフェースをWebプロジェクトで再利用できます。この目的にはKotlin/Wasmが主なターゲットとなりますが、Kotlin/JSもターゲットに含めることで、より古いブラウザへのサポートを拡張できます。
Kotlin/JSを使用したサーバーサイドおよびサーバーレスアプリケーションの構築
Kotlin/JSのNode.jsターゲットを使用すると、JavaScriptランタイム上のサーバーサイドまたはサーバーレス環境向けのアプリケーションを作成できます。これにより、高速な起動と低メモリ使用量が実現します。
kotlinx-nodejsライブラリは、KotlinからNode.js APIへの型安全なアクセスを提供します。
ユースケースに応じて、Kotlin/JSプロジェクトではKotlinエコシステムの互換性のあるライブラリや、JavaScriptおよびTypeScriptエコシステムのサードパーティライブラリを使用できます。
Kotlinコードからサードパーティライブラリを使用するには、独自の型安全なラッパーを作成するか、コミュニティによって維持されているラッパーを使用できます。さらに、Kotlin/JSのdynamic型を使用すると、型安全性を犠牲にする代わりに、厳密な型定義やライブラリラッパーをスキップして利用することも可能です。
Kotlin/JSは、ESM、CommonJS、UMD、AMDといった主要なモジュールシステムとも互換性があります。これにより、構造化された方法でモジュールを作成および利用し、JavaScriptエコシステムと統合できます。
ユースケースの共有
Kotlin/JSのユースケースに挙げたリストがすべてではありません。さまざまなアプローチを試して、あなたのプロジェクトに最適な方法を見つけてください。
あなたのユースケース、経験、質問などは、Kotlin Slackの#javascriptチャンネルでKotlin/JSコミュニティと共有してください。
Kotlin/JSを始める
Kotlin/JSでの開発を始めるための基本事項と最初のステップを確認しましょう。
- Kotlinが初めての場合は、まず基本構文を復習し、Kotlinツアーを体験することをお勧めします。
- インスピレーションを得るために、Kotlin/JSサンプルプロジェクトのリストを確認してください。これらのサンプルには、プロジェクトを開始するのに役立つ便利なコードスニペットやパターンが含まれています。
- Kotlin/JSが初めての場合は、より高度なトピックを調べる前にセットアップガイドから始めてください。
Kotlin/JSを自分で試してみませんか？
Kotlin/JSのサンプルプロジェクト
以下の表は、さまざまなKotlin/JSのユースケース、アーキテクチャ、およびコード共有戦略を示すサンプルプロジェクトのリストです。
| プロジェクト | 説明 |
|---|---|
| Petclinic with common code between Spring and Angular | データ転送オブジェクト、バリデーションおよび認証ルール、REST APIエンドポイントの抽象化を共有することで、エンタープライズアプリケーションにおけるコードの重複を避ける方法を示します。コードは、Spring BootバックエンドとAngularフロントエンド間で共有されます。 |
| Fullstack Conference CMS | 最も単純なものから、Ktor、Jetpack Compose、Vue.jsアプリケーション間でのフルスタックなコード共有まで、複数のコード共有アプローチを紹介します。 |
| Todo App on a Compose-HTML-based Kobweb framework | Android開発者に馴染みのある手法を再利用して、ToDoリストアプリケーションを作成する方法を示します。Kobwebフレームワークを利用したクライアントUIアプリケーションを構築します。 |
| Simple logic sharing between Android, iOS, and web | Kotlinで共通ロジックを構築し、それをAndroid（Jetpack Compose）、iOS（SwiftUI）、Web（React）の各プラットフォームネイティブUIアプリケーションで利用するためのテンプレートが含まれています。 |
| Full-stack collaborative to-do list | JSとJVMターゲットを持つKotlin Multiplatformを使用して、共同作業用のToDoリストアプリケーションを作成する方法を示します。バックエンドにはKtor、フロントエンドにはReactを用いたKotlin/JSを使用しています。 |
Kotlin/JSフレームワーク
Kotlin/JSフレームワークは、モダンなWebアプリケーションを構築するためのコンポーネント、ルーティング、状態管理、その他のツールを提供することで、Web開発を簡素化します。
さまざまな作者によって作成された、Kotlin/JSで利用可能なフレームワークを確認してください。
Kotlin/JSコミュニティに参加する
公式のKotlin Slackにある#javascriptチャンネルに参加して、コミュニティやKotlin/JSチームとチャットできます。