はじめに

この記事は「KotlinJSでReact Nativeを書いてみたかった話」です。つまりできなかった話 であることをあらかじめご了承ください。

では本題。

年末になり会社のAdvent Calendarのネタ探しをしている最中に電波が降りて来た。

KotlinでReact Nativeっていけるのかな。Kotlin 1.1 からJavaScriptサポートしてるからいける気もする。可能ならiOS Appも部分的にKotlinで開発できるのでは？
— むーむー (@muumuumuumuu) 2017年10月25日

当時Kotlinが好きすぎてちょっとおかしくなっていたのか、「SwiftではなくKotlinでiOSかけたら最高では？😇 」「でもKotlin/Native で書くのはちょっとまだ早すぎるよな〜〜😓」「あれ？KotlinJSでReactNativeいける！？！？」

ネタとしてもちょっとおもしろいかなと思いやってみることに。

ちなみにKotlin/Nativeまだ実務ではつらいよねって話は同僚がまとめてくれた記事が良いので興味ある人はぜひ読んでほしい。せめて補完が効くようになったら起こしてください( ˘ω˘ ) ｽﾔｧ…

React NativeとKotlinについて

React NativeはJavascriptで記述する。その名の通りReactベースなのだが、コンポーネント部分をそれぞれのプラットフォームのブリッジでごにょごにょしてくれるのでnativeとして動く。つまり、AndroidであればJavaに¹、iOSであればSwiftのコードになる。²

一方Kotlinは1.1よりJavascriptへのコンパイルをサポートした。どういうことかというと、Kotlinで書いたコードがJavascriptにconvertされるということ。

これらを組み合わせて、

これにより実質KotlinでReactNativeでは？というのがやりたいことになる。

このへんをみて適当にプロジェクトを作る。まずはデフォルトで生成されるJavascriptがちゃんとアプリで表示されることを確認。デフォルトの画面が表示されえたのでOK。

Kotlin JS がサポートしているビルド方法は下記4種類。

それぞれCompile後にjsファイルが吐き出される。

React NativeはReactで動いているので、まずはReactをimportする。 Kotlinを開発しているJetBrains社がWrapperを用意してくれているのでこいつをinstallする。

npm i @jetbrains/kotlin-react

次にReactNativeのコンポーネント部分をimportしよう、と思ったところでそんなものは世の中に存在しないことに気がついてしまった。

Kotlin JS でReact Nativeのcomponentが使えないことに気がついてしまった😇 Bridge使うのもやりたいことと違うんだよな… #AndroidMokuMokuRetty
— むーむー (@muumuumuumuu) 2017年11月30日

自分で書くにはJS力足りないし、何よりもはやAdvent Calendarのネタとしては重すぎるよな〜〜というわけでお蔵入りになりました :p

というわけでボツネタ供養でした :pray: