文字列を画面に表示させてみよう。Composeによる画面作成の基本

Jetpack Compose入門 第1回

　Androidアプリ開発において、画面を作成する際、長らくXML記述が利用されてきました。昨今、そのXML記述に代わる後発のJetpack Composeがデファクトスタンダードになりつつあります。さらに、正式リリースから5周年となる2026年に、GoogleはComposeファーストを提唱し、ComposeがAndroidの画面作成の第一の選択肢となりました。本連載では、3回にわたりComposeによる画面作成の入門的内容を紹介していきます。初回は、画面に文字列を表示する方法を紹介しながら、Composeによる画面作成の基礎を紹介します。

宣言的UIであるCompose

　本連載は、Jetpack Compose、略してComposeを紹介していきます。なお、本連載のサンプルソースコードは、こちらから参照できます。

5周年記念のCompose

　Androidアプリ開発では、その最初期から、画面はレイアウト.xmlファイルに記述したXML記述が利用されてきました。これを、ビューベースの画面作成といいます。

　その手法に代わるものとしてGoogleが考え出したのが、全く新しい画面作成方法であるComposeです。Composeは、Kotlinコードのみで画面を作成する方法であり、2019年に実験的にリリースされました。その後、2021年にバージョン1.0として正式リリースされます。

　この原稿を執筆している2026年は、正式リリースから5周年となります。その2026年のGoogle I/Oで、Googleは、Composeファーストを発表しています。今後は、XMLベースの画面部品は全てメンテナンスモードとなり、新規機能は追加されなくなります。もちろん、メンテナンスとしてサポートはされますので、しばらく使い続けることはできますが、これからAndroidアプリを作成する際は、Composeがデファクトスタンダードとなります。

命令的UI vs 宣言的UI

　そのようなComposeの特徴を一言で表すと、宣言的UI（Declarative UI）です。対して、ビューベースのUIを命令的UI（Imperative UI）といいます。

　というのは、画面の表示内容の元となるデータに変更があった場合、表示させる画面部品を取得し、その画面部品への表示を変更するコードをプログラマーが記述する必要があるからです。つまりは、変更命令があって、初めて表示が変更されるUIということです。

　それに対して、宣言的UIの場合は、データが〇〇の場合は、画面は△△の表示となる、というコードをあらかじめ記述します。あとは、データの変更に応じて、画面も自動的に表示が変わります。

図1：命令的UIと宣言的UIの違い（筆者がGoogle Geminiで生成）

　現段階では、イメージしづらいと思いますので、あくまで雰囲気だけ掴んでいただければかまいません。詳細は、実際にコードを交えながら理解していけばよいでしょう。そのため、ここではキーワードだけ紹介して、次に進んでいきます。

Android Studioで選択するテンプレート

　さて、具体的なコードを交えながらComposeの基礎を紹介していこうと思いますが、その前に、Android StudioでComposeによるアプリを作成する際の注意点を紹介します。それは、プロジェクトを作成する際のウィザードの第1画面のテンプレートの選択において、図2のように、Empty Activityを選択する必要がある、ということです。

　他のテンプレート、特に似たような名称であるEmpty Views Activityを選択すると、従来のXMLベースの画面作成となるので注意してください。

図2：AndroidプロジェクトのテンプレートではEmpty Activityを選択

［NOTE］Android Studioのインストール

　Android Studioのインストール、および、AVD（エミュレーター）の設定など、Android開発環境構築に関しては、誌面の都合上、本稿では紹介しませんので、こちらの記事を参照してください。