Primary About Development

モバイルアプリ開発におけるUI概念の定義：View、Screen、Page

2024-07-01

本記事では、モバイルアプリケーション開発、特に Flutter フレームワークにおける View、Screen、Page の概念について定義と解釈を提示します。これらの定義は以下の通りです：

  • View: UI の中の視覚的、機能的に区切られた部分を表す最小単位のモジュール
  • Screen: View のコンテナとして機能し、1つの画面に表示される UI を表現するモジュール
  • Page: View や Screen のコンテナとして機能し、ルーティングに結びつく UI を表現するモジュール

本記事で紹介する View、Screen、Page の定義は、筆者の経験と理解に基づいています。これらの概念の解釈はプロジェクトやチームによって異なる場合があります。

はじめに

モバイルアプリケーション開発、特に Flutter を使用する際に、UI 構造を整理するための概念として「View」「Screen」「Page」という用語がよく使用されます。これらの用語の定義を明確にすることで、アプリケーション構造の理解と設計をより効果的に行うことができます。

View（ビュー）

定義

View は、UI の中の視覚的、機能的に区切られた部分を表す最小単位のモジュールです。

特徴

  • UI の特定の機能や表示を担当する
  • 再利用可能で、異なる Screen や Page 内で使用できる
  • 単一の責任を持つ（単一責任の原則）

例

  • ボタン
  • テキストフィールド
  • カスタムリストアイテム
  • グラフやチャートのコンポーネント

コード例

class CustomButton extends StatelessWidget {
  final String text;
  final VoidCallback onPressed;

  const CustomButton({Key? key, required this.text, required this.onPressed}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: onPressed,
      child: Text(text),
    );
  }
}

Screen（スクリーン）

定義

Screen は、View のコンテナとして機能し、視覚的、機能的に 1つの画面に表示される UI を表現するモジュールです。

特徴

  • 複数の View を組み合わせて、完全な画面 UI を構成する
  • 特定の機能やタスクに関連する UI ロジックを含む
  • 必ずしもルーティングに直接結びつかない
  • アプリ内の特定の機能や状態に対応する

例

  • ユーザープロフィール画面
  • 設定画面
  • 商品詳細画面

コード例

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        UserAvatarView(),
        UserInfoView(),
        UserStatsView(),
        UserActionButtonsView(),
      ],
    );
  }
}

Page（ページ）

定義

Page は、View や Screen のコンテナとして機能し、ルーティングに結びつく UI を表現するモジュールです。

特徴

  • アプリのナビゲーション構造に直接関連する
  • 1つ以上の Screen や複数の View を含むことができる
  • アプリの主要な移動可能な「場所」を表す
  • ナビゲーションスタックの管理に関与する

例

  • メインページ（複数のタブを持つ）
  • 認証ページ（ログインとサインアップ Screen を含む）
  • 設定ページ（複数の設定 Screen を含む）

コード例

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  int _currentIndex = 0;

  final List<Widget> _screens = [
    HomeScreen(),
    SearchScreen(),
    ProfileScreen(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: _screens,
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) => setState(() => _currentIndex = index),
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'ホーム'),
          BottomNavigationBarItem(icon: Icon(Icons.search), label: '検索'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'プロフィール'),
        ],
      ),
    );
  }
}

結論

本記事で紹介した View、Screen、Page の定義を使用することで、UI モジュールの階層を以下のように整理できます：

  1. View: 最小の機能単位
  2. Screen: View の集合体で、特定の機能や状態を表現
  3. Page: Screen や View の集合体で、ナビゲーション構造の一部を形成

この階層構造を意識することで、より整理された、保守性の高いアプリケーション構造を実現できる可能性があります。ただし、これらの概念の境界は時に曖昧になることがあり、プロジェクトやチームの規約によって解釈が異なる場合もあります。

重要なのは、チーム内で一貫した理解と使用方法を共有することです。アプリケーションの要件や開発チームの方針に応じて、これらの概念を適切にカスタマイズし、プロジェクトに最適な構造を見出すことが大切です。

プロフィール写真

Soraef

ソフトウェアエンジニア。趣味は競馬、写真、ゲーム。

お問い合わせはTwitterのDMでお願いします。