はじめに

先日 Compose for Web というライブラリが発表されました。

Kotlinを使って、フロントエンドのReactぽい記法でWebを作ることができます。

まだプレビュー版なのでプロダクションコードに組み込むのは厳しいです。
そこでとあるプロジェクトの裏側にある開発者向けページに導入してみて使い心地を試しました。

いままで

そのとあるプロジェクトではKotlinでサーバーを開発しているためKotlinエンジニアはたくさんいます。しかし、ページを作るにはHTMLやJavaScriptを書かないといけないので普段やっていないことをやる煩わしさがありました。また、ReactやVueJSなどのWebフレームワークは使っていなくてjQueryで作っているのでコピペでidが重複して動かなくなったりDOM操作があちこちにあって後から修正しずらいなどの課題がありました。

導入してみる

Compose for Web の導入は簡単で公式サンプル( https://github.com/JetBrains/compose-jb/tree/master/examples/web_landing )から build.gradle.kts などをコピーしてパスなどをちょっと合わせるだけで導入できました。

また既存のサイトにIDを指定して部分適用できるため、jQueryで書かれたページの一部分だけに導入することができました。少しずつ置き換えていけるのはとてもありがたいですね。

fun main() {
    renderComposable(rootElementId = "root") {
        // ...
    }
}

また onClick などのイベントリスナーを直接書けるので、jQueryの時のようにidをつけて対応づけるひつようがなくなりとても楽ちんになりました。

Button(
  onClick = {
    viewModel.showPopUp()
  }
) {
  Text("Button")
}

またReactやAngularJSなどの既存のWebフレームワークと違うと思ったのが表示を更新したいときです。今までのWebフレームワークではステートやスコープなどのフレームワーク独自の約束事がたくさんありました。Compose for Web ではほとんど意識することなく普段Kotlinを書いている感覚で実装できました。

val counter = mutableStateOf(0)

@Composable
fun MyButton() {
  Button(
    onClick = {
      counter.value += 1
    }
  ) {
    Text("Button ${counter.value}")
  }
}

このあたりの書き方は本家のサンプルを眺めればすぐ理解できると思います。

感想

開発してみた感想としては

導入は思ったより簡単で安心。
ページの一部分からちょっとずつ導入できる。
jQuery時代の悩みが解決でき進化を実感。
サンプルを見ながら素朴に作っていけばだいたい思ったように動いてしまう。学習コストはとても低そう。

おまけですが欠点としては

まだデベロッパープレビューなので安定感はない
コンパイラが自動生成したJavaScriptが長くて解読できない

ちょっとしたツールや社内向けのサイトを作るには現時点ですでに十分便利そうです。

これからに期待します。

Compose for Web を導入してみた感想

はじめに

いままで

導入してみる

感想