Kotlin/JavaScript
Kotlin/JavaScript (Kotlin/JS) を使用すると、Kotlinコード、Kotlin標準ライブラリ、および互換性のあるすべての依存関係をJavaScriptにトランスパイルできます。これにより、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互換言語で記述されている場合、ウェブアプリケーションとバックエンド間で共通コードを共有できます。これには、データ転送オブジェクト (DTO)、バリデーションおよび認証ルール、REST APIエンドポイントの抽象化などが含まれます。
Android、iOS、およびウェブクライアント間での共通ロジックの共有
ウェブインターフェースとAndroidおよびiOSのモバイルアプリケーション間でビジネスロジックを共有しつつ、ネイティブのユーザーインターフェースを維持できます。これにより、REST APIの抽象化、ユーザー認証、フォームバリデーション、ドメインモデルなどの一般的な機能の重複を避けることができます。
Kotlin/JSを使用したフロントエンドWebアプリケーションの構築
既存のツールやライブラリと統合しながら、Kotlinを使用して従来のWebフロントエンドを開発できます。
Android開発に慣れている場合、Kobweb や Kilua のようなComposeベースのフレームワークでWebアプリケーションを構築できます。
JetBrainsが提供する一般的なJavaScriptライブラリ用のKotlinラッパーを使用して、Kotlin/JSで完全に型安全なReactアプリケーションを構築できます。Kotlinラッパー (
kotlin-wrappers) は、Reactやその他のJavaScriptフレームワークのための抽象化と統合を提供します。これらのラッパーは、React Redux、React Router、styled-components などの補完的なライブラリもサポートしています。JavaScriptエコシステムとの相互運用性を通じて、サードパーティのReactコンポーネントやコンポーネントライブラリを使用することもできます。
Kotlinエコシステムと統合し、簡潔で表現力豊かなコードをサポートするKotlin/JSフレームワークを使用します。
古いブラウザをサポートするマルチプラットフォームアプリケーションの構築
Compose Multiplatformを使用すると、Kotlinでアプリケーションを構築し、ウェブプロジェクトでモバイルおよびデスクトップのユーザーインターフェースを再利用できます。この目的の主要なターゲットは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の動的型を使用することもできます。これは、型安全性を犠牲にして、厳密な型付けやライブラリラッパーをスキップすることを可能にします。
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)、およびウェブ (React) のプラットフォームネイティブUIアプリケーションで利用されます。 |
| Full-stack collaborative to-do list | JSおよびJVMターゲットを持つKotlin Multiplatformを使用して、共同作業用のToDoリストアプリケーションを作成する方法を示します。バックエンドにはKtorを、フロントエンドにはKotlin/JSとReactを使用します。 |
Kotlin/JSフレームワーク
Kotlin/JSフレームワークは、すぐに使えるコンポーネント、ルーティング、状態管理、および最新のWebアプリケーションを構築するためのその他のツールを提供することで、Web開発を簡素化します。
異なる作者によって書かれたKotlin/JSの利用可能なフレームワークをチェックする。
Kotlin/JSコミュニティに参加する
公式のKotlin Slackの#javascriptチャンネルに参加して、コミュニティやKotlin/JSチームとチャットできます。