JetBrains は、Google の Android 用宣言型デザイン フレームワークである Jetpack Compose を Web に導入します。 現在プレビューとして利用可能です。
ここ数年、クロスプラットフォーム プログラム開発がかなり推進されてきました。 React や Flutter などのフレームワークは、開発者が Android、iOS、デスクトップ、さらには Web 上で単一のコードベースを共有できるようにするために作成されました。 最も人気のある IDE と Kotlin プログラミング言語のいくつかを開発している JetBrains でさえ、クロスプラットフォーム開発に取り組んでいます。 最初は Kotlin Multiplatform でしたが、最近では Jetpack Compose でした。
少し前に、JetBrains は Google の Android 用宣言型デザイン フレームワークである Jetpack Compose を移植しました。 デスクトップへ. これにより、Java の JVM をベースにしたクロスプラットフォームのデスクトップ開発が可能になりました。 Jetpack Compose を使用すると、Android、macOS、Windows、さらには Linux 用のアプリをすべて 1 つのコードベースから作成できます。 しかし、iOS のほかに、Compose にはかなり大きなプラットフォームが欠けています。それは Web です。
しかし、それは変わろうとしています。 JetBrains は 解放された Jetpack Compose for Web のテクノロジー プレビューと呼ばれるもの。
さて、テクノロジープレビューは基本的にプレアルファの派手な名前です。 Compose for Web は、運用環境で使用できる状態にはまだ達していません。 チュートリアルはなく、ドキュメントもほとんどなく、API は完全には程遠いです。 そうは言っても、Compose for Web がこれまでに提供しているものを見てみましょう。
現在のバージョンでは、Compose for Web で開発できる方法は 2 つあります。DOM API を使用する方法と、列やテキストなどの既存の Compose ウィジェットを使用する方法です。
DOM API を使用する場合、さまざまな HTML 要素を表す API 名が得られます。
p, ある、 等々。 ただし、Compose と従来の Kotlin JS の大きな違いは、状態ベースの宣言型デザインを使用できることです。 このオプションは、従来の Web 開発と完全な宣言型 UI 開発の間のちょっとした橋渡しのように思えます。 Compose for Web では、レイアウトの作成に加えて、動的な状態ベースのスタイルシートを作成することもできます。2 番目のオプションは、Android および Compose 開発者にとってより馴染みのあるものです。 列、行、スライダーなど、Web UI の構築に使用できる既製のコンポーネントがあります。 現時点では、これらはあまり完全ではなく、スタイルとオプションは完全には実装されていません。 しかし、少なくとも、JetBrains が Compose for Web に何を用意しているのかを知ることができます。
全体として、現時点では、Web 用に Compose できるものはそれほど多くありません。 それはまだその中にあります とても 初期。 しかし、それは将来にとって大きな意味を持つ可能性があります。 個人的には、Android 開発者として、ブラウザベースのレイアウト フレームワークに慣れるのに苦労しました。 基本的な HTML と CSS は扱いにくい場合があり、React と Flutter の構文は依然として HTML デザインに基づいています。
Web デザインの原則に基づいていない、フル機能のクロスプラットフォームのデザイン言語は非常に魅力的です。 Jetpack Compose の実現にはまだ長い道のりがありますが、JetBrains が計画していることは UI デザインの将来にとって大きな意味を持つ可能性があります。
Compose for Web について詳しく知りたい場合は、 JetBrains の発表をチェックしてください. 現在の実装を試してみたい場合は、 GitHub リポジトリに移動します.