315日目 Flutterについて深堀してみる 社畜ママ

こんにちは、社畜ママです！

先月までPHP＋vue.jsの開発をしていたのですが、今月からFlutterを使ったスマホアプリの開発にも携わることになりました。
初めてだらけだったので復習の意味を込めて、Flutterについてまとめていきたいと思います！

# Flutter(フラッター)って何？
Flutterは、Googleが開発したUIフレームワークで、**iOS、Android、Web、デスクトップ（Windows、macOS、Linux）向けのアプリを1つのコードベースで開発できる**のが特徴です。
Dartというプログラミング言語を使い、ネイティブに近いパフォーマンスを持つアプリを作成できます。

## Flutterで何ができるの？
1.iOS / Androidアプリの開発
　・iPhone / iPadアプリの開発が可能
　・1つのコードで両方のOSに対応
　・ネイティブアプリ並みのパフォーマンス

2.Webアプリの開発
　・Flutter for Webを使えば、ブラウザで動くアプリも作れる

3.デスクトップアプリの開発
　・Windows、Mac、Linux向けのアプリも作成可能

## Flutterのメリット
✔ マルチプラットフォーム対応 → 1つのコードで複数のプラットフォーム向けに開発
✔ 高速な開発（Hot Reload） → コードを書いてすぐに結果を確認できる
　(自分の環境だとHot Reloadが効かない(笑))
✔ 美しいデザイン → カスタマイズ可能なUIウィジェットが豊富
✔ ネイティブに近いパフォーマンス → 直接GPUを使うので動作が軽い
✔ Googleがサポート → 長期的な発展が期待できる

## Flutterのデメリット
✔ アプリサイズが大きくなりがち → ネイティブよりもサイズが少し大きい
✔ Dart言語の学習が必要 → Flutter専用の言語（Dart）を習得する必要がある
✔ 一部ネイティブ機能はプラグインが必要 → すべての機能をFlutterだけで実装できるわけではない

1つコードでiOSとAndroidのどちらも開発できるのはすごく便利ですね！
私が担当しているスマホアプリも1つコードでiOSとAndroidのアプリが開発されているので、複数のプラットフォームでアプリをリリースしたい場合はとても便利に思いました。

# Flutterのファイル構成
では、次にFlutterのファイル構成について詳しく見ていきます。
Flutterのファイルを作成すると、以下のフォルダが作られます。
```
my_flutter_app/     ← プロジェクトのルートフォルダ
 ├── android/       ← Android用の設定やコード
 ├── ios/           ← iOS用の設定やコード
 ├── lib/           ← ⭐️ アプリのメインコード（ここを編集する）
 │   ├── main.dart  ← ⭐️ アプリの起点（最初に実行される）
 │   ├── screens/   ← 画面ごとのファイルをここに入れる（例：home_screen.dart）
 │   ├── widgets/   ← 小さい部品（ボタンやカードなど）を分ける場合に使う
 │   ├── models/    ← データの型（User, Product など）を定義する場所
 │   ├── services/  ← APIやFirebaseとの連携用のファイルを置く
 ├── assets/        ← 画像やフォントを保存するフォルダ
 ├── pubspec.yaml   ← パッケージや画像の設定を書く（※重要）
 ├── test/          ← テスト用のフォルダ
 ├── build/         ← アプリをビルドしたときに自動で作られる（触らなくてOK）
```
 ## よく使うファイルとフォルダ
 <table>
  <thead>
    <tr>
      <th>ファイル・フォルダ名</th> <th>役割</th>
    </tr>
  </thead>
  <tr>
    <td> lib/ </td> <td>アプリのメインコードを書く場所（ここが重要）</td>
  </tr>
  <tr>
    <td> lib/main.dart </td> <td>アプリが最初に実行されるファイル</td>
  </tr>
  <tr>
    <td> lib/screens/ </td> <td>画面ごとにファイルを分ける（例：home_screen.dart）</td>
  </tr>
  <tr>
    <td> lib/widgets/ </td> <td>ボタンやカードなどの小さい部品を作る</td>
  </tr>
  <tr>
    <td> lib/services/ </td> <td>FirebaseやAPIとの通信をまとめる</td>
  </tr>
  <tr>
    <td> assets/ </td> <td>画像やフォントを保存する場所</td>
  </tr>
  <tr>
    <td> pubspec.yaml </td> <td>パッケージや画像の設定を書くファイル</td>
  </tr>
 </table>

 # 最初に編集するファイル
 ### ① main.dart（アプリの起点）
 main.dart は、Flutterアプリが最初に実行されるファイルです。
 簡単なアプリの例：
 ```dart:main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());  // アプリを起動
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("初めてのFlutterアプリ")),
        body: Center(child: Text("こんにちは、Flutter！")),
      ),
    );
  }
}
 ```
 これを実行すると、アプリの画面に「こんにちは、Flutter！」と表示されます。


 ### ② pubspec.yaml（アプリの設定ファイル）
 pubspec.yaml には、パッケージ（ライブラリ）や画像、フォントの設定を書きます。

例：画像を使う場合
```yaml:pubspec.yaml
flutter:
  assets:
    - assets/images/logo.png
```
この設定をすると、assets/images/logo.png の画像をアプリで使えるようになります。

### ③ screens/ フォルダを作って、画面を分ける
大きなアプリを作ると、コードが増えて main.dart だけでは管理が大変になります。
そこで、画面ごとにファイルを分けます！

例えば、lib/screens/home_screen.dart を作る：
```dart:home_screen.dart
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("ホーム画面")),
      body: Center(child: Text("これはホーム画面です！")),
    );
  }
}
```

そして、main.dart でこの HomeScreen を呼び出す：
```dart:main.dart
import 'package:flutter/material.dart';
import 'screens/home_screen.dart'; // 画面を読み込む

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),  // ホーム画面を表示
    );
  }
}
```

これで、画面の管理が楽になります！

# まとめ
📝 アプリのメインのコードは lib/ に書く
📝 最初に編集するのは main.dart（アプリの起点）
📝 画面ごとに screens/ フォルダを作って分けると便利
📝 画像やフォントを使うときは pubspec.yaml に書く

最初は main.dart にコードを書いて試しながら、
アプリが大きくなってきたら screens/ や widgets/ に整理すると良いみたいです！

Flutterについては以上です。
ここで開発したアプリはAndroidアプリとしてならGoogle Playストア、iOSアプリとしてならApple Storeでリリースすることができます。
次回はGoogle PlayストアとApple Storeそれぞれでリリースする際の手順についてまとめることができたらと思っています。

今回は以上です。
また次回よろしくお願いいたします。