2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Android UI開発の15年を振り返る:XML地獄からComposeの光明まで

Posted at

はじめに

こんにちは!Android開発の世界に足を踏み入れてもう15年以上が経ちます。最近新しく入った後輩から「昔のAndroid開発ってどんな感じだったんですか?」と聞かれて、ふと時の流れを感じました😅

思い返せばAndroid 1.0時代から、XMLレイアウトと格闘し、findViewById地獄で苦しみ、そして今やJetpack Composeの恩恵を受けている自分がいます。この変遷を肌で感じてきた開発者として、Android UI開発の歴史を振り返ってみようと思います。

特に最近は、従来のXML + ViewSystemから宣言的UIの概念を導入したJetpack Composeへの移行が進んでいますが、「本当にComposeって良いの?」「移行する価値あるの?」と疑問に思っている方も多いのではないでしょうか。

この記事では、私が実際に体験してきたAndroid UI開発の変遷を、技術的な比較とともに、開発者目線でのリアルな感想を交えながらお話ししたいと思います。

Android UI開発の歴史

第1期: 誕生期(2008-2009年)

2008年9月23日、私たちの人生を変えることになるAndroid 1.0がリリースされました。

この時期を「誕生期」と呼ぶのは、文字通りAndroidプラットフォームが生まれた時期だからです。Android 1.0(Apple Pie) から Android 1.6(Donut) まで、モバイルOSとしての基礎を築き上げた重要な時期でした。XMLベースのレイアウトシステムとJavaによる開発という、その後10年以上続くAndroid UI開発の基本パターンが確立されたのがこの時期です。

この頃のUI開発は、今思うと非常にシンプルでした。むしろ、シンプルすぎて物足りないくらい:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Me" />

</LinearLayout>

そして、対応するJavaコード:

public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        TextView textView = (TextView) findViewById(R.id.textView);
        Button button = (Button) findViewById(R.id.button);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView.setText("Button Clicked!");
            }
        });
    }
}

第2期: 拡張期(2010-2015年)

Android 3.0 Honeycombのタブレット登場からAndroid 5.0 Lollipopまで、Androidエコシステムが急速に拡張していった時期です。スマートフォンだけでなくタブレットへの対応が求められ、画面サイズの多様化に応じた柔軟なレイアウトシステムが次々と導入されました。

この時期はレイアウトの複雑化が進んだ時代でした。タブレット対応もあって、UIの表現力が求められるようになったんです。「拡張期」と呼ぶのは、単に機能が増えただけでなく、Androidプラットフォーム自体が多様なデバイスへと拡張していったからです。

主な進化ポイント:

  • RelativeLayoutの導入 → 「あ、相対配置ができる!」
  • GridLayoutの追加 → 「表形式のレイアウトが楽に!」
  • Fragmentの概念導入 → 「これでタブレット対応できる!」
  • ActionBarからToolbarへの移行 → 「カスタマイズ性が向上!」
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/profileImage"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp" />

    <TextView
        android:id="@+id/userName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/profileImage"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp" />

</RelativeLayout>

第3期: 完成期(2016-2019年)

Android 6.0 MarshmallowからAndroid 9.0 Pieまで、従来のXMLベースのUI開発が完成の域に達した時期です。2014年のGoogle I/Oで発表されたMaterial Designが本格的に浸透し、2016年のConstraintLayout登場により、XMLベースのレイアウトシステムは技術的な頂点を迎えました。

この時期を「完成期」と呼ぶのは、XML + View Systemという枠組みの中で、レイアウトシステム、デザインガイドライン、開発ツールのすべてが最高レベルに到達したからです。findViewById地獄を解消するViewBindingやData Bindingも登場し、従来の開発手法が洗練され尽くした時期でした。

主な進化ポイント:

  • ConstraintLayoutのパワフルな制約システム
  • Material Designコンポーネントの美しさ
  • でも、XMLの複雑化は止まらない...😅
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/emailInputLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="24dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toTopOf="@id/loginButton">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Email" />

    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.button.MaterialButton
        android:id="@+id/loginButton"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginHorizontal="24dp"
        android:text="ログイン"
        app:layout_constraintTop_toBottomOf="@id/emailInputLayout"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

第4期: 変革期(2020年-現在)

Android 10以降、そして2021年7月のJetpack Compose 1.0正式リリースにより、Android UI開発は根本的な変革を迎えています。この時期を「変革期」と呼ぶのは、単なる機能追加や改良ではなく、開発パラダイム自体が命令的(Imperative)から宣言的(Declarative)へと転換したからです。

2019年にアルファ版が登場し、約2年の開発期間を経てリリースされたJetpack Composeは、12年以上続いたXMLベースのUI開発を完全に刷新しました。React、SwiftUI、Flutterなどの影響を受けながら、Kotlin言語の特性を最大限に活かしたモダンで宣言的なUI構築フレームワークとして誕生したのです。この変革は、Android開発の歴史において第二の創世記とも言える大きな転換点となっています。

従来のView System vs Jetpack Compose:徹底比較

さて、ここからが本題です!実際に私が15年間体験してきた従来のView Systemと、最近愛用しているJetpack Composeを、ガチで比較してみたいと思います。

開発手法の違い

従来のView System

従来のView Systemは 命令的(Imperative) なアプローチです。「どのように(How)」UIを変更するかを開発者が明示的に指示します。状態が変わるたびに、「このTextViewのテキストを更新しなさい」「このViewの可視性を変更しなさい」といった具体的な命令を書く必要があります。

主な特徴:

  • XMLでレイアウト定義、Kotlinでロジック実装という二重構造
  • findViewById()またはViewBindingでViewへの参照を取得
  • 状態変更時に手動でUIを更新する必要がある
  • updateUI()のような更新メソッドを呼び忘れるとバグになる
class MainActivity : AppCompatActivity() {
    private lateinit var counterText: TextView
    private lateinit var incrementButton: Button
    private var counter = 0

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        counterText = findViewById(R.id.counterText)
        incrementButton = findViewById(R.id.incrementButton)
        
        updateUI()
        
        incrementButton.setOnClickListener {
            counter++
            updateUI()
        }
    }
    
    private fun updateUI() {
        counterText.text = "Count: $counter"
    }
}

Jetpack Compose

Jetpack Composeは 宣言的(Declarative) なアプローチです。「何を(What)」表示したいかだけを記述すれば、「どのように(How)」更新するかはフレームワークが自動的に処理します。状態が変わると、Composeが自動的にUIを再構成(Recomposition)してくれるため、手動でUI更新処理を書く必要がありません。

主な特徴:

  • KotlinのみでUIを構築(XMLファイル不要)
  • 状態が変わると自動的にUIが再構成される
  • findViewById()やViewBindingが不要
  • UIとロジックが同じ場所に記述できる単一構造
  • 関数型プログラミングの概念を取り入れた直感的な記述
@Composable
fun CounterApp() {
    var counter by remember { mutableStateOf(0) }

    Column {
        Text("Count: $counter")
        Button(onClick = { counter++ }) {
            Text("Increment")
        }
    }
}

まとめ

いかがでしたでしょうか?Android UI開発の長い歴史を、実体験を交えながら振り返ってみました。XML + View SystemからJetpack Composeへの移行は、単なる技術の更新ではなく、開発パラダイムの根本的変化なんです。

主要な変化点

観点 XML Jetpack Compose
開発手法 命令的(Imperative) 宣言的(Declarative)
コード量 findViewById地獄 簡潔で読みやすい
状態管理 手動同期が必要 自動同期
パフォーマンス 手動最適化 Smart Recomposition
テスト UI階層に依存 セマンティクス重視
学習コスト 低(既存知識活用) 中(新概念の習得)

最後に

この15年間で、Android UI開発は本当に大きく変わりました。findViewById地獄から始まって、今やこんなに簡潔で美しいコードでUIが書けるなんて...感慨深いものがあります。

何か質問や「実際のところどうなの?」といった疑問があれば、コメントで気軽に聞いてください!みんなでより良いAndroid開発を目指していきましょう🚀


参考資料

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?