Download - KotlinJSって正直どうなん
![Page 1: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/1.jpg)
KotlinJSって正直どうなん
@kikuchy
![Page 2: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/2.jpg)
現状厳しい
![Page 3: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/3.jpg)
以上
![Page 4: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/4.jpg)
以上
![Page 5: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/5.jpg)
Who?
@kikuchy
菊池 紘
株式会社Diverse (ミクシィグループ)
コンソールアプリとかJavaFxアプリもKotlinで書くと便利
![Page 6: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/6.jpg)
ガッツリ使ってるわけではないので、その辺りはご了承ください
![Page 7: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/7.jpg)
KotlinJS使ってる方
![Page 8: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/8.jpg)
![Page 9: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/9.jpg)
とりあえずのはじめ方
![Page 10: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/10.jpg)
おもむろにIntelliJで新規プロジェクトを作ります
※Gradleを使った方法でいきます。他にもやり方はあります。
![Page 11: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/11.jpg)
Group ID, Artifact ID, Versionを指定します
Versionはnpmで使用できる表記に変更しておくこと。
1.0-SNAPSHOT のままだとnpmが使用できません。
![Page 12: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/12.jpg)
おもむろにコードを書きます
![Page 13: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/13.jpg)
compileKotlin2JS タスクを実行すると出来上がり
実行においては kotlin.js が必要らしいけれど吐いてくれない…
![Page 14: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/14.jpg)
nodeで動くプログラムを作ってみる
![Page 15: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/15.jpg)
npmを使えるようにする
kotlin-frontend-plugin が必要なので入れる。
https://github.com/Kotlin/kotlin‑frontend‑plugin
Readme通りに導入すれば大丈夫。
![Page 16: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/16.jpg)
moduleKind を commonjs にする
// build.gradle に以下を追加compileKotlin2Js { kotlinOptions.moduleKind = "commonjs"}
吐かれるコードがcommonjsで使える形になる。
詳しくはこちら Working with Kotlin and JavaScript Modules
![Page 17: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/17.jpg)
npmのパッケージを記入
// build.gradle に以下を追加kotlinFrontend { npm { dependency("colors", "̂1.1.2") // バージョン指定しない場合は以下でも可 // dependency "colors" }}
![Page 18: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/18.jpg)
パッケージの関数などを参照(その1)
型の恩恵を受けられるのでおすすめ。
@JsModule はいろんな使い方があるのでドキュメントを見るべしJavaScript Modules
@JsModule("colors/safe")external object Colors { fun rainbow(message: String): String}...println(Colors.rainbow("Hello KotlinJS World!!"))
// 上記のKotlinコードで、以下のCommonJsコード相当になる// var colors = require('colors/safe');// console.log(colors.rainbow('Hello KotlinJS World!!'));
![Page 19: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/19.jpg)
パッケージの関数などを参照(その2)
型宣言が面倒くさいときとか、ちょっと試すとき用に。
external fun require(module: String): dynamic...val colors = require("colors/safe")println(colors.rainbow("Hello Another KotlinJS World!!"))
// 上記のKotlinコードでも、以下のCommonJsコード相当になる// var colors = require('colors/safe');// console.log(// colors.rainbow('Hello Another KotlinJS World!!'));
![Page 20: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/20.jpg)
コンパイルして動かす
$ ./gradlew compileKotlin2Js$ node build/classes/main/{モジュール名}_main.js
![Page 21: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/21.jpg)
使ってみて思うこと
![Page 22: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/22.jpg)
思うこと
Pros
個人開発にもチーム開発にも対応できるKotlin文法
Cons
nodeアプリ作るなら使えるライブラリ豊富だし強力だしJavaの方がいい
「どうしてもnodeじゃないとできない!」ってあるのか…?
Webのフロント書くならすでに型定義ファイルたくさんあるしnpmとの統合も簡単だしTypeScriptの方がいい
![Page 23: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/23.jpg)
KotlinJS、どうして使う?
サーバサイド、スマートフォンアプリとロジックの一部を共有する
‑>
Null安全なAltJSとして使う‑>
どうしてもKotlinを使いたいから使う‑>
![Page 24: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/24.jpg)
KotlinJS、どうして使う?
サーバサイド、スマートフォンアプリとロジックの一部を共有する
‑> Javaの資産使えないので正直厳しい
Null安全なAltJSとして使う‑> TypeScriptとか優秀なAltJSがある
どうしてもKotlinを使いたいから使う‑>
![Page 25: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/25.jpg)
立ち位置が微妙!!!
エコシステムが弱い!!!
![Page 26: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/26.jpg)
ちょっと業務には使えない…
![Page 27: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/27.jpg)
今後のKotlinJSの発展に期待がんばれKotlin負けるなKotlin
![Page 28: KotlinJSって正直どうなん](https://reader034.vdocuments.pub/reader034/viewer/2022050613/5a6486257f8b9a2c568b536f/html5/thumbnails/28.jpg)