Kotlin/JavaScriptを試してみた

Kotlin

Kotolinとは

ググって

KotlinでJavaScriptにトランスコンパイル

スタンドアロンコンパイラを使う方法とGradle等のJVMビルドツールを使う方法がある。実際に開発すると仮定すると、インクリメンタルビルドが可能なGradleを使うことになると思われる。

手順としては、

  1. JREをインストール（JVMやAndroid向けの開発も行う場合はJDKが必要だが、JavaScript開発の場合はJREで良い）
  2. Gradleをインストール（当然、Gradle Wrapperを使ってもよい）
  3. プロジェクトのスケルトンを作る（build.gradle）

という感じになる。

Hello World

ブラウザでHello Worldが動くところまでを試してみた。IntelliJ IDEA等のIDEを使えばプロジェクトテンプレートがあるかもしれないが、IDEを使わずにテキストエディタのみでやってみた。

ここに記載する手順は、次の環境で確認した。

  • Windows 10 Creators Update
  • JDK 8
  • Kotlin 1.1.4
  • Gradle 4.1

まずビルドファイルを作る。任意の空ディレクトリ内で次のように build.gradle ファイルを作成する。 ext.kotlin_version の部分は、使いたいKotlinのバージョンを指定する。

group 'org.example'
version '1.0-SNAPSHOT'

buildscript {
    ext.kotlin_version = '1.1.4'
    repositories {
        mavenCentral()
    }
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}

apply plugin: 'kotlin2js'

repositories {
    mavenCentral()
}

dependencies {
    compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
}

task assembleWeb(type: Sync) {
    configurations.compile.each { File file ->
        from(zipTree(file.absolutePath), {
            includeEmptyDirs = false
            include { fileTreeElement ->
                def path = fileTreeElement.path
                path.endsWith(".js") && (path.startsWith("META-INF/resources/") || 
                    !path.startsWith("META-INF/"))
            }
        })
    }
    from compileKotlin2Js.destinationDir
    into "${projectDir}/web"

    dependsOn classes
}

assemble.dependsOn assembleWeb

次にMainとなるコードを記述する。

fun main(args: Array<String>) {
    println("Hello World")
}

ビルドは gradle build コマンドを実行する。ビルドに成功すると、 web ディレクトリ以下にJavaScriptが生成される。

ブラウザで実行するために、HTMLファイルを作成する。ここでは作業ディレクトリ直下にHTMLファイルを作成する（webディレクトリ配下にHTMLファイルを配置してしまうと、ビルド時に消えてしまう）。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<script type="text/javascript" src="web/kotlin.js"></script>
<script type="text/javascript" src="web/kotlin_main.js"></script>
</body>
</html>

作成したHTMLファイルをブラウザで読み込み、開発者ツールのコンソールを確認すると、 Hello World と表示されているはずである。

試してみた感想

実用レベルだが、自分で積極的に使うことはないかなぁというのが正直な感想。

実用となる根拠としては、

  • DOM操作が可能
  • js()関数で生JavaScriptコードの埋め込みが可能
  • Dynamic型でJavaScript側のオブジェクトが操作可能
  • CommonJS, AMD形式のモジュールとしてビルド可能
  • SourceMapが出力可能
  • dead code elimination (DCE) が使える

というあたり。

一方で積極的に使うことはないなぁという根拠としては、

  • 実行時にKotlin Runtime (kotlin.js) に依存しなければならず、非圧縮状態で1.3MB程度ある

というところが個人的に最大のネックになる。kotlin.jsはminifyすれば数百KB程度になると思われるが、どうせRuntimeに依存しないといけないのであれば、私ならScala.jsを選択する。

Scala.jsの場合、

というメリットがあるため、Kotlinの現状では、チームメンバーがKotlinに精通しまくっているということでもない限りは選ぶことはない。

（蛇足として、そもそもHaxeおじさんなのでScala.jsも積極的には選択しないのだけど、自社の人間はScala.js経験値を積み上げているという…