Jetpack Compose for Web は、Web 開発用の新しい UI フレームワークです

click fraud protection

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 リポジトリに移動します.