8.1 JavaScriptにコンパイル

 Kotlinは、Javaバイトコードだけでなく、JavaScriptへもコンパイルが可能です。JavaScriptは、AjaxやらサーバサイドやらMVCフレームワークやらで近年非常に注目の集まっている技術です。しかし、JavaScriptで書かれたコードは冗長的な表現が少なくなく、また弱い型付けの動的言語ゆえに読解が困難なことがあります。Kotlinなら、そのような欠点を回避してJavaScriptコードを生成することができます。

開発の準備

 IntelliJ IDEAを起動します。新規プロジェクトを作成しましょう(ここでは「Sample」という名前のプロジェクトを作成するとします)。このとき「Select type」の箇所は「Java Module」でOKです(図8.1.1)。プロジェクトを作成したらKotlinソースファイルを作成しましょう。すると、プロジェクトで使用するKotlinライブラリをJVM用かJavaScript用か選択肢が表示されますので、JavaScript用を選択します(図8.1.2)。

図8.1.1 新規プロジェクトの作成

図8.1.2 JavaScript用のライブラリを選択する

Kotlinでプログラムを書く

 では早速Kotlinでプログラムを書いていきます。今回はシンプルにコード8.1.1のようなコードを書きました。

コード8.1.1 JS用HelloWorld

package com.taroid.sample

import js.dom.html.window

fun main(args : Array<String>) {
    val target = window.document.getElementById("target")
    target!!.textContent = "Kotlin"
}

 行っている処理は至って単純です。IDがtargetである要素を取得し、そのテキストを「Kotlin」に書き換えようとしています。プログラムを書けたらビルドしてjsファイルを生成します。

Kotlin製JavaScriptコードを動かす

 次に生成したJavaScriptコードを動かすためのhtmlファイルを作ります。配置する場所は任意ですが、今回はプロジェクトルート直下に「html」という名前でディレクトリを作り、その下に「index.html」ファイルを作成しました。その内容をコード8.1.2に示します。

コード8.1.2 JSコードの動作確認用HTML

<html>
<head>
    <meta charset="utf-8">
    <title>Hello, world!</title>
    <script src="../lib/kotlinLib.js"></script>
    <script src="../Sample.js"></script>
</head>
<body onload="Kotlin.defs.com.taroid.sample.main()">
    <p>Hell, <span id="target">world</span>!</p>
</body>
</html>

 ポイントは3つです。1つ目は最初のscript要素の属性srcの値です。これはKotlinコードから生成したJavaScriptコードを走らせるために必要なファイルです。
 2つ目のポイントは、その次のscript要素の属性srcの値です。これはKotlinコードから生成したjsファイルです。IntelliJ IDEAを使用した場合は次に示すパスに出力されます。

<プロジェクトルート>/<プロジェクト名>.js

 そして3つ目のポイントは、関数main()の呼び出し方法です。今回はbody要素の属性onloadとして呼び出していますが、その値に注目してください。次のような書式になります。

Kotlin.defs.<パッケージ>.main()

注意してください!この呼び出しパスはKotlin M2(バージョン 0.1.2580)では有効ですが、最新ビルド(バージョン 0.1.2869)では若干異なります。最新ビルドでは次のように呼び出してください。

Kotlin.modules.<プロジェクト名>.<パッケージ>.main()

 ここまでで必要なjsファイルとhtmlファイルが揃いました。実行のための設定をIntelliJ IDEAで行います。メニューから「Run」「Edit Configurations...」を選択します。実行の設定ウィザードが開いたら、プラスボタンを押して新しい実行設定を作成します(図8.1.3)。図8.1.4の画面のように、先に作成したhtmlファイルを指定し、また「Before Launch」部分では「Make」をチェックしておきます。

図8.1.3 実行の設定を追加

図8.1.4 実行設定ウィザード

 これで準備完了です。編集した実行の設定から、プログラムを実行します。すると自動的にWebブラウザが起動し、結果を表示してくれます。

図8.1.5 Webブラウザで動作確認

 すばらしい!しかし実は、JavaScriptへのコンパイル機能は使い物になるには、まだまだ早い印象を受けます。