この記事は Android デベロッパー リレーションズ エンジニア、Jolanda Verhoef による Android Developer Blog の記事 " What’s new in Jetpack Compose" を元に翻訳・加筆したものです。詳しくは元記事をご覧ください。
Jetpack Compose 初の安定版をリリースしてから、もうすぐ 2 年が経ちました。それ以来、採用数と機能セットは大きく拡大しています。Compose なら、スマートフォン、折りたたみ式、タブレット、ChromeOS デバイス、スマートウォッチ、TV など、あらゆるデバイスを対象にしてアプリケーションを記述できます。Wear OS、スマートフォン、大画面向けの新しいアプリには、ぜひ Compose をお使いください。新しいツールとライブラリ機能、拡張されたマテリアル デザイン 3、大画面、Wear OS サポート、そしてホーム画面ウィジェットや TV 向けの Compose のアルファ版など…今、期待が大きく膨らんでいます！
昨年は、多くの企業が調査のうえ、本番環境のアプリケーションで新機能を開発したり、画面を移行したりするために Compose を選択しました。Google Play のトップ 1,000 アプリの 24% で、Compose がすでに採用されています。たとえば、Dropbox のエンジニアは、わずか数週間で検索エクスペリエンスを Compose に書き換えたことを話してくれました。これは、想定時間よりも 40% 早く、iOS での開発時間の半分以下でした。さらに、Compose の採用に関心があったのは 「デザインシステムとツールのサポートが第一級であるため」だったことも教えてくれました。Google ドライブ チームも、Compose とアーキテクチャの改善を組み合わせることで、開発時間をほぼ半分に短縮できました。
うれしいことに、このようなチームでは開発サイクルを高速化させ、UI コードのテスト性向上も実感しています。興味を持った方は、まずチームで Compose を採用する方法を説明したガイドをお読みください。このガイドでは、どこからどのように始めたらよいかを説明しているほか、Compose が大きな付加価値を提供できる開発領域を示しています。
昨年 10 月には、初めての Compose の部品構成表 (英語) をリリースしました。その後も、新機能、バグの修正、パフォーマンスの改善に加えて、スマートフォンやタブレット、折りたたみ式、スマートウォッチ、TV、ホーム画面など、UI を開発するすべての場所に Compose を導入するための作業を続けています。すべての変更点は、Compose ライブラリの 2023 年 5 月のリリースと最新のアルファ版で確認できます。
パフォーマンスを気にかけているが、パフォーマンスの高い Compose アプリケーションを作成する方法がわからないときがある、という声も寄せられています。私たちは、Compose のパフォーマンスを継続的に改善しています。たとえば、昨年 10 月時点で修飾子を効率のよい新システムに移行する作業を始めており、この移行の結果が現れ始めています。テキストだけでも、この作業によって平均して 22% のパフォーマンス向上を実現しています。この改善は最新のアルファ版リリースで確認でき、全体にわたって適用されます。Compose のバージョンをアップデートするだけで、アプリでこのメリットを活用できます。
ここ数か月間で、Text と TextField は何度もアップグレードされています。すでに説明したパフォーマンス改善と合わせて、Compose で最新バージョンの絵文字 🫶 がサポートされ、テキストのアウトライン化、ハイフネーションのサポート、改行動作の設定などの新しいテキスト機能も追加されています。詳しくは、compose-foundation と compose-ui ライブラリのリリースノートをご覧ください。
新しい Pager コンポーネント (英語) を使うと、横または縦にコンテンツをめくることができます。これはビューの ViewPager2 (英語) と同等の機能です。カスタマイズ オプションを細かく調整できるので、驚くような視覚効果を実現することもできます。
新しいフロー レイアウトである FlowRow と FlowColumn を使うと、段落にテキスト行を配置するかのように、縦または横方向に簡単にコンテンツを並べることができます。ウェイトを使った動的なサイズ調整もできるので、項目をコンテナに自在に配置できます。
新機能、パフォーマンスの改善、バグの修正の詳細について知りたい方は、Compose ライブラリの最新の安定版と最新のアルファ版リリースのリリースノートをご覧ください。
新しいツールやツールの改善により、Jetpack Compose を使ったアプリ開発はとても簡単になっています。Android Studio にたくさんの新機能を追加し、ワークフローと効率を改善しました。ここでは、主な機能を紹介します。
最新安定版リリースの Android Studio Flamingo では、以下の機能が提供されます。
デフォルトのプロジェクト テンプレートで Compose とマテリアル 3 を使用 : これは、推奨方法を反映したものです。
Compose プレビューの Material You ダイナミック カラー : ユーザーのデバイスで異なる色の壁紙にコンポーザブルがどのように反応するかをすぐに確認できます。
システム トレースの Compose 関数 : システム トレース プロファイラを使って、どの Compose 関数で再コンポーズが行われているかを把握できます。
最新ベータ版リリースの Android Studio Giraffe (英語) には、次のような機能が含まれています。
ライブ編集 : エミュレータまたは実機で、アプリの再ビルドや再デプロイをすることなく、コードの反復作業をすばやく繰り返すことができます。
アニメーション プレビューでの新しいアニメーション API のサポート: animate*AsState、CrossFade、rememberInfiniteTransition、AnimatedContent を使ったどんなアニメーションでもデバッグできます。
Compose プレビューでの複数ファイルのライブ アップデートのサポート : たとえば Theme.kt ファイルを変更した場合、UI ファイルのすべてのプレビューが自動的に更新されます。
自動補完動作の改善 : たとえばマテリアル アイコンを追加しているなら、アイコンのプレビューが表示されます。また、「メンバーの実装」の実行中に、@Composable アノテーションが保持されます。
Android Studio Hedgehog (英語) には、次のようなカナリア機能が含まれます。
デバッガに Compose の状態情報を表示 : アプリのデバッグ時に、厳密にどのパラメータが「変更された」または「変更されなかった」のかがデバッガに表示されます。そのため、再コンポーズの原因を調査する際の効率が上がります。
新しい Studio Bot : AI を活用した試験運用版会話型エクスペリエンスを Android Studio で試すことができます。コード生成、問題の修正、ベスト プラクティスの学習など、Compose に関するあらゆることをサポートします。これは早期試験運用版ですが、ぜひお試しいただきたいと考えています。(* 現時点では、まだ日本向けには未公開)
新たに発表された Pixel Fold と Tablet 仮想デバイスのエミュレータ サポート : これらのデバイスは今年中に発売される予定ですが、その前に Compose アプリをテストできます。
新しい Espresso Device API: テスト中の仮想デバイスに、画面の向きの変更や、折りたたみなどの同期的構成変更を適用できます。
Compose UI の自動監査や、さまざまな画面サイズで問題のチェックができるように、ビジュアル lint やユーザー補助チェックのプレビューに向けた作業も活発に続いています。また、一般的なプレビュー セットをすばやく追加する際に役立つマルチプレビュー (英語) テンプレートの作業も進めています。
マテリアル 3 は、Android アプリの推奨デザインシステムです。最新の 1.1 安定版リリース (英語) では、たくさんのすばらしい新機能が追加されました。ボトムシート、日付と時刻のピッカー、検索バー、ツールチップなどの新しいコンポーネントを追加しました。さらに、多くのコア コンポーネントが安定版になり、サポートされるモーションやインタラクションが増え、多くのコンポーネントにエッジツーエッジのサポートが組み込まれます。こちらの動画を視聴し、アプリで Material You を実装する方法を学びましょう。
Google は、Android が動作するすべての場所で、Compose を UI 向けのプログラミング モデルにしたいと考えています。その一環として、折りたたみ式やタブレットなどの大画面を完全サポートし、Compose でホーム画面ウィジェットやスマートウォッチ アプリ、TV アプリを書けるようにするライブラリを公開します。
Google は、Compose を使って簡単に大画面向けに開発できるようにする努力を続けています。今回リリースした Pager とフロー レイアウトは、大画面デバイスで使われる一般的なパターンです。さらに、デバイスのウィンドウ サイズ クラスを監視できる新しい Compose ライブラリも追加したので、アダプティブ UI を簡単に構築できるようになります。
Android デバイスにマウスを接続し、マウスカーソルをテキスト フィールドや選択可能なテキストに合わせたときに、Compose でカーソルの形状が正しく変化するようになります。そのため、どの画面上の要素を扱っているのかがわかりやすくなります。
Jetpack Glance ライブラリの最初のベータ版を公開しました。Glance を使うと、Android スマートフォン、タブレット、折りたたみ式のホーム画面に最適化されたウィジェット (英語) を Jetpack Compose で開発できます。このライブラリでは、Kotlin と Compose から、次のような最新の Android ウィジェットの機能改善をすぐに利用できます。
インタラクティブ ウィジェットの実装がシンプルになるので、アプリのトップ機能をユーザーのホーム画面に表示できます。
さまざまなフォーム ファクタで美しく表示されるレスポンシブ ウィジェットを簡単に作成できます。
デザイナーとの間で高速な UI 反復作業ができるようになり、高品質なユーザー エクスペリエンスを実現できます。
昨年 12 月に Compose for Wear OS 1.1 安定版 (英語) をリリースしました。そして今、現在はアルファ版である新しい 1.2 リリースに懸命に取り組んでいます。ここでは、皆さんにお届けするために継続的に行っている改善作業と新機能の中から、いくつかを紹介します。
placeholder (英語) と placeholderShimmer (英語) に洗練された読み込みアニメーションが追加されます。チップやカードでコンテンツを読み込む際に利用できます。
expandableItems で、長いリストやテキストを折りたためるようになります。その場合、ユーザーが操作した場合のみ、完全な長さに展開されます。
Horologist で利用できるロータリー入力を強化し、ロータリー入力でリストを操作する際の直感的な snap と fling 動作を追加します。
Android Studio で Compose アプリを開発している場合に、複数の時計の画面とテキストサイズをプレビューできるようになります。追加したアノテーションの使用については、こちら (英語) をご覧ください。
TV 向け Compose のアルファ版リリースで、ピクセル パーフェクトなリビングルーム体験を開発できるようになります。新しい AndroidX TV ライブラリを使うと、Compose のすべてのメリットを Android TV の独自要件に適用できます。私たちはコミュニティと密接に連携し、強力な機能を搭載した直感的な API を開発しました。Soundcloud のエンジニアは、「TV 向け Compose のおかげでコンポーネントを再利用でき、かつての Leanback ビュー API よりもかなり速く開発を進めることができました」と話しています。また、Plex は、「Compose で TV のフォーカスとスクロールがサポートされたので、デベロッパーの生産性とアプリのパフォーマンスが大幅に向上しました」と述べています。
TV 向け Compose には、リビングルーム体験に特化して最適化された ImmersiveList や Carousel などのさまざまなコンポーネントが含まれています。数行のコードだけで、優れた TV 向け UI を作成できます。
TvLazyColumn {
items(contentList) { content ->
TvLazyRow {
items(content) { cardItem ->
Card(cardItem)
}
このリリースの詳細については、こちらのブログ投稿 (英語) をご覧ください。または、TV の新機能と Compose の紹介 (動画/英語 - 日本語字幕あり) セッションを視聴するか、TV のドキュメントをご覧ください。
うれしいことに、Compose をサポートするライブラリの数は、内部と外部で開発されているものを問わず、増加の一途をたどっています。たとえば、Glide ライブラリの GlideImage コンポーザブルを使うと、簡単に非同期で写真を読み込むことができます。また、Google マップがリリースしたライブラリでは、はるかに簡単な方法で宣言的にマップ実装を作成できます。
GoogleMap(
//...
) {
Marker(
state = MarkerState(position = LatLng(-34, 151)),
title = "Marker in Sydney"
)
state = MarkerState(position = LatLng(35.66, 139.6)),
title = "Marker in Tokyo"
学習の進捗に関係なく、すべての方に対応できるように、Compose に関するたくさんのガイドを追加したり、刷新したりしました。
Android デベロッパー向けの Compose コースで体験的に学習できます。基本から、レイアウト、状態、フォーム ファクタなどの詳しい内容まで学べます。コースを改訂して、すべての最新リソースを含めています。
動画で視聴したい方は、好評の Compose の基本 MAD スキルシリーズ (動画/英語 - 日本語の自動字幕あり) をご覧ください。レイアウトと修飾子を取り上げた新 MAD スキルシリーズ (動画/英語 - 日本語の自動字幕あり) も新たに公開しています。このシリーズには、基礎的な内容から高度な考え方や機能、Google 社員 との Q&A、コミュニティ ヒントまで、すべてを網羅した 5 つのエピソードがあり、Compose のレイアウトに関する知識を短時間で深めることができます。
Compose 関連の I/O セッションは、すべてもれなく確認しましょう。Jetpack Compose のデバッグ、TV の新機能と Compose の紹介、大画面と折りたたみ式で優れた Android アプリを作る方法、あらゆる画面サイズをテストする方法、Material You for Compose による最新の Android アプリ開発 (動画/英語 - 日本語の自動字幕あり) について取り上げます。または、インストラクターが説明するワークショップ、Compose の状態と副作用（上級編）(動画/英語 - 日本語の自動字幕あり) でコーディングを体験しましょう。
タッチと入力に関する拡張ガイドをご覧ください。新しく追加されたジェスチャーの理解 (英語) に関するページや、フォーカスの操作方法 (英語) についてのセクションが含まれています。
新しい Codelab では、アプリでマテリアル 3 テーマを実装する方法について学習します。
今回の進展について、Google と同じくらい期待していただけると嬉しいです。まだ Jetpack Compose を使ったことがない方は、ぜひこの機会に学習し、チームや開発プロセスをどのように改善できるかを確認してみてください。向上した速度と生産性を体験しましょう。ぜひ Compose を使ってみてください！
Reviewed by Mari Kawanishi - Developer Marketing Manager, Google Play
