KotlinでVue.jsを動かしてみた

この記事はVOYAGE GROUP Advent Calendar 2015の12日目となります。

こんにちは,VOYAGE GROUPの16卒内定者の@takeru0911です.内定者でだれかAdventなCalendar書かないか?と聞かれたのでチャレンジしてみました.

最近私が結構触っているKotlinについて少し書いてみようかなと思って書いてみます. 当初は巡回サンタさん問題を蟻コロニー最適化で解こうかな,と思ってました(解いてみて記事も書き終わってました)が当日になってこっちの方が良いのでは(?)と謎の発想により書いてみました.

今回のコードなんかはこちらです.

github.com

Kotlinについて

JetBrain社が開発しているJVM言語です. 静的型付け言語とか型安全とかNull安全とかAndroid開発が捗るとか特徴あります. 他にもいろいろ語るべきことはあるかと思いますがKotlin Advent Calendarがあるのでそちらをぜひお読み下さい.

ちなみにちょっと試したい,触ってみたいといった場合はWeb上で動かすことも可能(Try Online)となっております.

KotlinでJS

KotlinはJavaScriptコンパイルするコンパイラーを搭載しております. Androidに関して,Kotlin今すごく盛り上がっていますが,AltJSとしてのKotlinの記事はあまり見かけないし,せっかくなので遊びがてら少し触れてみようと思います. 仕組みとかは公式のドキュメント見るか日本語だと少し古いですが

yyyank.blogspot.jp

上記の記事が参考になります.

Hello World

はじめにHello Worldをさせてみます. 下のコードがconsole.log('hello world')を実行するコードです.

fun main(args: Array<String>){
    console.log("hello world")
}

このコードをコンパイルするとこんなjsのコードに生まれ変わります.

(function (Kotlin) {
  'use strict';
  var _ = Kotlin.defineRootPackage(null, /** @lends _ */ {
    main_kand9s$: function (args) {
      console.log('hello world');
    }
  });
  Kotlin.defineModule('hello', _);
  _.main_kand9s$([]);
}(Kotlin));

mainmain_kand9s$という名前の関数に変換されていることがわかりますね.Kotlinというオブジェクトに対して関数をつけていくような感じで動いていきます(多分).

Vue.jsを動かす

ここからが本題です. hello worldできたんでじゃあなんかのライブラリを動かしてみるかと思い,インターン*1で使ったVue.jsを動かしてみようと思いました.(Vue.jsについてもはしょります)

目標としては単純ですが,テキストボックスに入力した文字列がリアルタイムにどこかしらの要素に反映されるような単純なアプリを目指します.

KotlinでJSのライブラリを使う際は一部を除いて*2,そのライブラリのインターフェースの定義が必要となります. ここら辺はこの記事を参考にさせていただきました.

arata.hatenadiary.com

scala-js-ts-importerという便利なツールがあるらしい,ならkotlin-js-ts-importerもあるやろ!と思ってぐぐったところ

_人人人人人人_

>ないです!!<

 ̄^Y^Y^Y^Y^Y ̄

自分が探した限りありませんでした.悲しい(もしご存知の方がおられましたら教えていただけると,とてもとても嬉しいです). ないものは仕方ないので上の記事や下のリポジトリを参考にTypeScript → Scala → Kotlinとなるようにインターフェースを手作業で変換することにしました.

github.com

github.com

正直わりと似ていたりしたのでそんなに苦労はしませんでした.

Scala Kotlin
js.native noImpl
@JSName("") @native("")

上の表に対応するような形でそれぞれ書き換えたくらいだった気がします.(細かいところは他にもちょいちょいありましたが・・・)

実際に作ったkotlinコードです.

import vue.Vue

@native("window")
val w: dynamic = noImpl

fun main(args: Array<String>) {
  Vue.config.delimiters = arrayOf("{!", "!}")

  val option = json(
          Pair("el", "#app"),
          Pair("data",
                  json(
                          Pair("text", "")
                  )
          ),
          Pair("methods",
                  json(
                          Pair("clickedResetBtn", {
                            w.app.`$data`.text = ""
                          })

                  ))
  )
  w.app = Vue(option)
}

Pairはキーバリュなオブジェクトで,これを用いてjsのオブジェクトを作ります. 変数wにjsのnativeなオブジェクトwindowを割り当てたりしています.

実行結果は以下の様な感じです. f:id:tkr911:20151212102622g:plain

ちゃんとテキストに入力したのがリアルタイムに反映されているかと思います.

まとめ

あまり情報が多くなく(数というより種類),なかなか苦労しましたがなんとか動かせました. 自分もいつもはKotlinでAndroidを書いていますが,たまにはこうしてaltJSとして書くのも面白いので時々は書いて,情報をしっかり追っていければなと思います.

明日は@TachibanaKaoruさんです!お楽しみに!

*1:VOUYAGE GROUPインターンTreasure

*2:jQueryは使用可能