Reference
最もメインの説明はここ
![](https://techatoq.net/wp-content/uploads/cocoon-resources/blog-card-cache/8b630ff3446fce4d51f7cfe34cb772e4.png)
Set up a Kotlin/JS project | Kotlin
Kotlin/JS projectとされていますが、実質としてKotlin Multiplatformの1プロジェクトとして規格されていますので、最もベーシックなProject Structureは以下が詳しいです
![](https://techatoq.net/wp-content/uploads/cocoon-resources/blog-card-cache/8b630ff3446fce4d51f7cfe34cb772e4.png)
The basics of Kotlin Multiplatform project structure | Kotlin
React + KotlinのTutorial
![](https://techatoq.net/wp-content/uploads/cocoon-resources/blog-card-cache/8b630ff3446fce4d51f7cfe34cb772e4.png)
Set up a Kotlin/JS project | Kotlin
kotlinとjavascriptの型定義の対照表は以下
![](https://techatoq.net/wp-content/uploads/cocoon-resources/blog-card-cache/8b630ff3446fce4d51f7cfe34cb772e4.png)
Use Kotlin code from JavaScript | Kotlin
Kotlin Multiplatform
Kotlin code setから、web (javascript), ios, android等の様々なplatformに使用可能なライブラリへ変換を行います。
Multiplatformは以下のページが詳しい
![](https://resources.jetbrains.com/storage/products/jetbrains/img/meta/preview.png)
Get started with Kotlin Multiplatform | Kotlin Multiplatform Development
Sample Project
以下から選択的に作成可能です
Kotlin Multiplatform Wizard | JetBrains
Create your first multiplatform project using the Kotlin Multiplatform wizard for Android, iOS, and Desktop, or use one of the pre-made templates.
KotlinからJavascriptのコードを生成する
上記の機能を使用することで、KotlinからJavascriptを作成し、JavascriptからKotlinライブラリを使用することができます。
以下がProject Structureです。
![](https://techatoq.net/wp-content/uploads/2024/02/image-5.png)
build/js下に個別パッケージごとに、build/dist下にバンドル化された単一のjavascript codeが生成されます。
build.gradle.ktsは以下です。
plugins {
kotlin("multiplatform") version "1.9.22"
}
group = "org.example"
version = "1.0-SNAPSHOT"
repositories {
mavenCentral()
}
kotlin {
js{
browser {
}
binaries.executable()
generateTypeScriptDefinitions()
}
sourceSets {
val commonMain by getting {
dependencies {
implementation("org.jetbrains.kotlinx:multik-core:0.2.2")
implementation("org.jetbrains.kotlinx:multik-default:0.2.2")
implementation("org.jetbrains.kotlin:kotlin-stdlib-jdk8")
implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.3")
}
}
}
}
generateTypeScriptDefinitions()を付与することで、Typescriptのためのt.dsを作成することが可能です。
![](https://techatoq.net/wp-content/uploads/cocoon-resources/blog-card-cache/8b630ff3446fce4d51f7cfe34cb772e4.png)
Kotlin/JS IR compiler | Kotlin
また、JavascriptからKotlin Codeを使用するためにはJavascriptに対してexposeする対象を指定する必要があり、以下のように@JsExportアノテーションを付与します。
@OptIn(ExperimentalJsExport::class)
@JsExport
class BSplineFunc {
後は生成されたライブラリを使用したいモジュールにインポートすれば利用することができます