Zenn
🕸️

Kotlin で本格 Web アプリを作る Kobweb の紹介

に公開
Kotlin
Web
compose
tech

最近 教えてもらった Kobweb というフレームワークについて、個人的見解も含めて 導入, 構成要素, 検証, 考察の 4段階で紹介します。

⭐️ 導入-1: Kobweb is 何？

https://kobweb.varabyte.com/

Kobweb は Kotlin と Compose で Webアプリを作るフレームワークです。

Compose で HTML/CSS を記述しながら アノテーションを使用したWebアプリ構築が可能になっています。
また クライアント側のみならず サーバ側も実装でき、Nextjs のようなクライアントと距離の近いサーバの開発もできるフレームワークになっています。

⭐️ 導入-2: Kobweb のここがすごい！

  • 開発サーバが ホットリロード に対応している！
  • HTML/CSS を Compose ライクに記述 できる Silk
  • 静的 export (SSG) がデフォルトで できる！

⭐️ 導入-3: Compose Multiplatform じゃダメなの？

Compose Multiplatform では 1つの <canvas> タグ上に SEO に弱く、Webサイトを作るにはあまり向いていません。(どちらかというと Compose の資産をそのまま Webで実行することがメリットになるツール向けに作られていそうです)

CMP ではなく Kobweb を使用することで以下のような利点を得ることができるでしょう。

  • 最終的には HTML, CSS, JS の集まりになるので、SEO に強い。
  • UI を Compose ライク にかける
  • Webサイトの構築のみにとどまらずデプロイしやすいよううまくパッケージングされている。

また CMP と Kobweb の比較については先日参加した勉強会でも発表したので、発表資料も併せてご覧ください。

https://speakerdeck.com/tbsten/composetewebahuriwozuo-ruji-shu

⭐️ 導入-4: コンセプトになるコード

Kobweb では以下のような HTMLとCompose のキメラ のようなコードを書いてWebサイトのUIを構築していくことができます。

@Page
@Composable
fun HomePage() {
  Column(
    Modifier.fillMaxWidth().textAlign(TextAlign.Center),
    horizontalAlignment = Alignment.CenterHorizontally
  ) {
    Button(
      onClick = { colorMode = colorMode.opposite },
      Modifier.borderRadius(50.percent).padding(0.px).align(Alignment.End)
    ) { Text("⭐️ ボタン") }
  }
  H1 {
    Text("Welcome to Kobweb!")
  }
}

❤️ 構成要素-1: アプリのルーティング

また ルーティング (URL とページコンテンツの紐付け) に関しては、Nextjs のファイルベースルーティングのように pages ディレクトリ配下にURLに対応したファイルを配置 することでします。

例えば com/mygroup/pages/hello/World.kt に以下のようなファイルを配置することで /hello/World という URL で HTML を表示することができます。

site/src/com/mygroup/pages/hello/World.kt
@Page
@Composable
fun HelloWorldPage() {
  Column {
    Text("Hello")
    Text("World")
  }
}

そのほか 詳しいルーティング方法についてはドキュメントをご覧ください。

https://kobweb.varabyte.com/docs/concepts/foundation/routing

個人的に、以前の Navigation Compose や Ktor のデフォルトのルーティング方法である 文字列によるルーティング管理でもなく、Typesafe なオブジェクトを使ったルーティング方法でもない新しいタイプのルーティング方法を Kotlin のフレームワークで導入したという意味で目新しさを感じたものの、ファイル名とURL が完全一致しなかったり、動的ルーティングの扱い方がちょっとビミョい気がするので 50点くらいの印象でした。これだったら文字列管理でいいかなと正直思ってしまっています（）

❤️ 構成要素-2: Silk

Kobweb では本来 HTML/CSS を書かないといけないところを、Compose ユーザ向けに Column Row Modifier などの Compose の要素に合わせてラップしてくれている Silk が組み込まれています。CSS に明るくない人であっても Web アプリのUI を整えられるようになっています。
（とはいえ全く知識0だと流石につらかったりするので あくまで段階的に CSS をキャッチアップする手助けくらいに思っておいた方が良さそうです）

もちろん HTML タグと混在させることもできるので、以下のように基本は Compose っぽく書き、要所要所で HTML/CSS を書くみたいなこともできるようになっています。

Column {
  Div(
    modifier = Modifier.fillMaxWidth().padding(200.px)
  ) {
    H1 { Text("...") }
  }
}

また CSS を kobweb に変換してくれるサイトもあるようです。(ｽｺﾞｲ)
やりたいことを調べて見つかった CSS コードをパッと kobweb に変換できそうですね！

https://opletter.github.io/css2kobweb/

CSS StyleSheet としてまとめることでパフォーマンスを向上させれるようになっていたりするなど、うまいこと手が込んでいる仕組みの部分でもあると思うので、ぜひドキュメントのスタイリング周りのページを一読ください。

🤔 残念ポイント: metadata の対応がちょっと雑

<title> タグや <meta> タグなどの対応について、ドキュメントにはクライアントの JS で処理すればいいんじゃない? とあります 😢

最近の Google の検索エンジンは JS での インジェクションを考慮してくれるとはいえ、OGP など考慮してくれない制御もあるため、ここのあたりで痛い目を見そうですね...

とはいうものの現状では サーバ側のプリレンダリング (metadata などをクライアント側で組み立てるのではなく、HTML として出力する) には対応していなさそうなので現状はこれで我慢するほかなさそうです... 😢 Compose HTML に これらの機能追加が来てくれると嬉しいですね...

まとめ

  • Kobwebは Kotlin + Compose で Webアプリを作るフレームワーク
  • クライアント・サーバ両対応 → Next.jsのような構成が可能
  • ホットリロード対応の開発サーバ
  • SEO 対応・静的Export・ホットリロード

Discussion