0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@Sakaaaaai

FlutterとDartではじめるクロスプラットフォームアプリ開発入門

0
Posted at

はじめに：「iOSとAndroid、両方作るのは大変そう…」と感じていませんか？

スマホアプリを作ってみたい、と思ったときに立ちはだかる壁がこれではないでしょうか。

  • iOSはSwift、AndroidはKotlin…2つの言語を学ぶ気力が湧かない
  • 個人開発なのに、同じ機能を2回実装するのは非効率すぎる
  • Web開発の経験はあるけど、ネイティブアプリ開発は敷居が高そう
  • 学習を始めたものの、環境構築でつまずいて挫折しかけている

こうした悩みを一気に解決してくれるのが、Googleが開発する Flutter と、その言語である Dart です。1つのコードベースでiOS・Android・Web・デスクトップまで動かせるため、近年モバイル開発の主流の1つになっています。

この記事では、Flutter/Dartがなぜ選ばれているのかという背景から、実際にコードを書く上で押さえておきたい基本概念、そして初心者がつまずきやすいポイントまで、体系的に解説します。読み終わる頃には「自分でも作れそう」という感覚を掴んでいただけるはずです。

なぜ今、Flutterなのか？

「1つのコードでマルチプラットフォーム」の本当の意味

React Nativeなど競合フレームワークもある中で、Flutterが支持されている理由は主に3つあります。

  1. 描画エンジンを自前で持っている
    FlutterはSkia（現在はImpeller）という描画エンジンを使い、OSのUIコンポーネントに依存せず自前でピクセルを描画します。そのため、iOSでもAndroidでも見た目が完全に一致します。

  2. ホットリロードによる圧倒的な開発体験
    コードを保存すると、アプリの状態を保ったまま数百ミリ秒でUIが更新されます。この体験は一度味わうと戻れません。

  3. 豊富なウィジェットとパッケージ
    公式が提供するウィジェットだけで、Material DesignとCupertino（iOS風）の両方をカバーできます。

Dart言語ってどんな言語？

Dartは「JavaScriptとJavaを足して2で割ったような」言語と表現されることが多いです。以下の特徴があります。

  • 静的型付け（型推論あり）で安全性が高い
  • null安全が標準搭載
  • 非同期処理をasync/awaitで書ける
  • クラスベースのオブジェクト指向

JavaScriptやTypeScriptの経験があれば、数日で書けるようになります。

Flutterの基本概念：すべてが「Widget」

Widgetツリーという考え方

Flutter開発を始めるにあたって、絶対に押さえておきたい概念が 「すべてはWidgetである」 という思想です。

  • 画面全体 → Widget
  • ボタン → Widget
  • 余白（Padding） → Widget
  • 中央寄せ（Center） → Widget

つまり、Flutterのアプリは Widgetを入れ子にして組み立てたツリー構造 そのものなのです。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My First App',
      home: Scaffold(
        appBar: AppBar(title: const Text('こんにちは Flutter')),
        body: const Center(
          child: Text(
            'はじめてのアプリ',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

たった数十行で、iOSでもAndroidでも動くアプリが完成します。MaterialApp → Scaffold → Center → Text というWidgetの入れ子構造が見えるでしょうか。

StatelessとStatefulの使い分け

Widgetには大きく2種類あります。

種類 特徴 使いどころ
StatelessWidget 状態を持たない 表示するだけの静的なUI
StatefulWidget 状態を持ち、変化できる ボタン押下でカウントが増える等

初心者が最初にぶつかる壁がこの使い分けです。「時間が経つと変わる要素があるか？」 で判断すればOKです。

class CounterPage extends StatefulWidget {
  const CounterPage({super.key});

  @override
  State<CounterPage> createState() => _CounterPageState();
}

class _CounterPageState extends State<CounterPage> {
  int _count = 0;

  void _increment() {
    setState(() {  // 状態変更をFlutterに通知
      _count++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('カウント: $_count', style: const TextStyle(fontSize: 32)),
            ElevatedButton(
              onPressed: _increment,
              child: const Text('増やす'),
            ),
          ],
        ),
      ),
    );
  }
}

ポイントは setState() です。これを呼ばないとFlutterはUIを再描画してくれません。ここは初心者がハマる代表的なポイントなので、覚えておきましょう。

つまずきやすいポイントと解決策

1. レイアウトエラー「RenderFlex overflowed」

Flutter初心者の9割が遭遇するエラーです。RowやColumnの中身が画面に収まらないときに発生します。

解決策： Expanded や Flexible でラップする、もしくは SingleChildScrollView でスクロール可能にする。

// ❌ overflowする可能性あり
Row(
  children: [
    Text('とても長いテキストがここに入ります...'),
    Icon(Icons.star),
  ],
)

// ✅ Expandedで残りスペースに収める
Row(
  children: [
    Expanded(
      child: Text('とても長いテキストがここに入ります...'),
    ),
    Icon(Icons.star),
  ],
)

2. 非同期処理とFutureBuilder

APIからデータを取ってくる処理は非同期です。UIに反映するにはFutureBuilderを使うのが定石です。

FutureBuilder<String>(
  future: fetchUserName(),  // Future<String>を返す関数
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return const CircularProgressIndicator();
    }
    if (snapshot.hasError) {
      return Text('エラー: ${snapshot.error}');
    }
    return Text('ようこそ、${snapshot.data}さん');
  },
)

「ローディング表示 → 成功 → エラー」の3分岐を1つのウィジェットで書けるのがFlutterの強みです。

3. 状態管理はどれを選べばいい？

アプリが大きくなると、setStateだけでは辛くなります。選択肢は複数ありますが、初心者〜中級者には以下がおすすめです。

  • Provider … 公式が推奨するシンプルな状態管理
  • Riverpod … Providerの発展版。近年のデファクトスタンダード
  • Bloc … 大規模アプリ向け。学習コストは高め

まずはsetStateで慣れて、必要になったらRiverpodを触ってみる、という順序が無理なく進められます。

開発を加速させる小技

constを積極的に使う

変化しないWidgetにはconstを付けましょう。Flutterが再描画時にそのWidgetをスキップしてくれるため、パフォーマンスが向上します。

// ✅ 変化しないなら const を付ける
const Text('固定テキスト')

DevToolsでUIを可視化する

Flutter DevToolsを使うと、Widgetツリーの構造やレイアウトの余白を視覚的に確認できます。「なぜここに余白が空いているのか分からない」ときの強い味方です。

パッケージエコシステムを活用する

pub.dev には数万のパッケージが公開されています。よく使うものを紹介します。

  • http … APIリクエスト
  • shared_preferences … 簡易的なローカル保存
  • go_router … 画面遷移
  • flutter_hooks … Reactライクなフックが使える

車輪の再発明をせず、公式・準公式パッケージを積極的に活用しましょう。

まとめ

ここまでの内容を振り返ります。

  • Flutterは 1つのコードでiOS・Android両対応 できるフレームワーク
  • Dartは 静的型付け＋null安全 で、JavaScript経験者なら馴染みやすい
  • Flutterの基本は 「すべてはWidget」 というツリー構造
  • 状態が変化する場合はStatefulWidgetとsetState()を使う
  • レイアウトエラーはExpandedやSingleChildScrollViewで解決
  • 非同期処理はFutureBuilderで3状態を綺麗に扱える
  • パフォーマンスのためにconstを積極活用する

最初は覚えることが多く感じるかもしれませんが、「Widgetを組み合わせているだけ」 と思えるようになれば、開発がぐっと楽しくなります。ホットリロードで即座に結果が見える体験は、他の開発とは一線を画す気持ち良さです。

次のステップ：手を動かしながら定着させたい方へ

Flutter学習で最も大切なのは、「理屈を追うより、とにかく書いてみる」 ことです。Widgetの入れ子構造は、頭で理解するより、実際にコードを打ってエラーを出して直す、というサイクルを繰り返すことで身についていきます。

とはいえ、いざ環境構築の段階で「Android StudioのSDKパスが通らない」「シミュレータが起動しない」といった問題に阻まれ、コードを書き始める前に挫折してしまう人も少なくありません。やる気があるうちに手を動かせる状態を作ること が、Flutter学習の最初の関門です。

そんな方の選択肢の1つとして、【超初心者向け】Flutter / Dart アプリ開発50問ドリル〜環境構築ゼロで今日から始める〜 というUdemy講座があります。

タイトルの通り環境構築を必要とせずに始められる構成になっており、50問のドリル形式でDartの基礎からFlutterのWidget操作までを反復的に学べるようになっています。「まずは挫折せずコードに触れる時間を確保したい」「体系的に問題を解きながら手を慣らしたい」というフェーズの方には、ひとつの選択肢になるかもしれません。

もちろん学習リソースは講座だけではありません。公式ドキュメント（flutter.dev）は非常に質が高く、YouTubeのFlutter公式チャンネルにも良質な解説動画が揃っています。ご自身の学習スタイルに合わせて、書籍・動画・ドリル・実際のアプリ開発を組み合わせながら、着実にステップアップしていってください。

0
1
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
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?