Help us understand the problem. What is going on with this article?

Kotlin/JSを触ってみる

追記

も少し触ってできたことがあったので書き足しました。

最近になりJavaScriptを初めて触れ、試してみたかったけれど、なかなか手を付けられずに
いたKotlin/JSをリファレンスを見ながら試してみました。
https://kotlinlang.org/docs/tutorials/javascript/running-kotlin-js.html
https://kotlinlang.org/docs/tutorials/javascript/using-packages-from-npm.html

Kotlin/JS とは

簡単に言ってしまうと、Kotlin/JVMで書いていたコードをJavaScriptに変換してくれるといったことをしてくれます。
ただし変換してくれるのはあくまでKotlinが対応しているモジュールだけであって、JDKや
一般的なサードパーティー製のJavaライブラリ、Springなどのフレームワークは対象外とのことです。

詳しくは公式リファレンスの概要にて。
https://kotlinlang.org/docs/reference/js-overview.html

早速触ってみる

私は「Kotlin/JS for browser」を選択しました。
2020-05-21.png
プロジェクト名は「sample-js」で行きます。

Gradleの中身です。

build.gradle.kts
plugins {
    id("org.jetbrains.kotlin.js") version "1.3.72"
}

group = "org.example"
version = "1.0-SNAPSHOT"

repositories {
    mavenCentral()
}

dependencies {
    implementation(kotlin("stdlib-js"))
}

kotlin.target.browser { }

プロジェクトのフォルダ階層は一般的なGradleプロジェクトと変わらないですね。
2020-05-21 (1).png

ブラウザのコンソール上に「Hello, World!」

それでは「src\main\kotlin」にいつも書いているようなKotlinのコードを書いていきます。

App.kt
fun main() {
    println("Hello, World!")
}

Node.jsであればこのまま実行すればいいのですが、今回はbrowserなので
「src\main\resources」にhtmlを用意します。

index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Kotlin/JS</title>
    </head>
    <body>
        <h1>これはKotlin</h1>
    </body>
    <script src="sample-js.js"></script>
</html>

ここで見ていただきたいのはscriptタグ内のソース名です。
実はKotlin/JSで生成されるJavaScriptのモジュールはアーティファクトの名前がそのまんま使われます。
「kotlin-for-javascript」とプロジェクト名を付ければ「kotlin-for-javascript.js」となります。
(何故かtype宣言をするとコンソール上にエラーが出てしまう。純粋なJavaScriptではないから?)

ようやく準備が出来たので実行してみましょう。
gradleツールウインドウからrunを実行します。

するとブラウザが立ち上がりhtmlが表示されます。
結果を確認したいので「開発者モード→Console」へ
2020-05-21 (3).png
きちんと実行がされていました。

ちなみに引数に「--continuous」を付けるとコンパイルを自動的に実行してくれます。

DOMの操作。

document.bgColor = "FF33AA"

2020-05-23.png
色は特に意味なく値を入れましたが、鮮やかなピンクが背景色になりました。
ここも触れるようになりたいですね。

入力した値も取り出せるようです。

<input type="text" id="name">
<input type="button" id="output" value="コンソールに表示">
val button = document.getElementById("output") as HTMLInputElement

    button?.addEventListener("click", {
        val name = (document.getElementById("name") as HTMLInputElement).value
        println(name)
    })

2020-05-23 (1).png
試行錯誤しながら書いていたのでこの記述であっているかは定かではありませんが...
JS側のリファレンスと対応関係関係がほぼ同じみたいなので
わからなくなったらmozillaのリファレンス見ればなんとかなりそうと感じました。

npmパッケージのライブラリを使用してみる

KotlinからJavaScriptのパッケージを呼び出しせるようです。
JavaScriptに関する知識が皆無のため、リファレンスの実行例を実際にやってみます。

Kotlin DSLに使用したいパッケージを宣言

build.gradle.kts
implementation(npm("is-sorted"))

is-sortedというパッケージはソートしているかを判別し、真理値を返すプログラムです。

次にkotlin側で外部宣言というものをしてあげます。

is-sorted.kt
@JsModule("is-sorted")
@JsNonModule
external fun <T> sorted(a: Array<T>): Boolean

この外部宣言はJavaScriptん動的型付けの変数とKotlinの静的な型付けを
接続する為に使用される宣言だそうです。
@JsModuleは使用するパッケージのインポート宣言、
@JsNonModuleはJavaScriptのモジュールではないという意味を示しております。
どちらも外部宣言をする際には必要とのこと。

それではmain関数に追記していきます。

App.kt
fun main() {
    println("Hello, World!")
    println(sorted(arrayOf(1, 2, 3)))
    println(sorted(arrayOf(3, 1, 2)))
}

これで実行をすると、
2020-05-21 (6).png

結果が表示されました。
最初の比較はきちんと昇順なのでtrue
もう一つは並びがバラバラなのでfalseが表示されています。

おわり

まだ全然基礎レベルでしか触っていないですが、普段使っている言語で色んなものが書けるっていいですね...

まだまだkotlinは勉強中でhtmlやJavaScriptなどもまともに扱えていない状態なので
もう少し勉強をしてから続きを書きたいと思います。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした