# Flutter でクロスプラットフォーム開発

Flutter は、Google が開発したオープンソースの UI ソフトウェア開発キット（SDK） Flutter を使うと、単一のコードベースから iOS、Android、Web、およびデスクトップアプリケーションを構築できます。

# 特徴

• 言語: Dart
• 開発元: Google
• UI フレームワーク: ウィジェットベースの独自の UI
• パフォーマンス: 高速でネイティブのようなパフォーマンス
• ホットリロード: 迅速な開発サイクル
• サポートプラットフォーム: iOS、Android、Web、デスクトップ

# Why Not React Native

React Native の特徴

• 言語: JavaScript
• 開発元: Facebook
• UI フレームワーク: React コンポーネントベース
• パフォーマンス: ブリッジを通じてネイティブコードを呼び出すため、高速だが Flutter ほどではない
• ホットリロード: 迅速な開発サイクル
• サポートプラットフォーム: iOS、Android、（コミュニティサポートで Web、Windows、macOS）

React Native のメリット

• JavaScript を使用するため、Web 開発経験がある開発者には習得が容易
• 広範なライブラリとプラグイン
• 大規模なコミュニティとエコシステム
• 多くの企業で実際に使用されている

React Native のデメリット

• パフォーマンスが Flutter より劣る場合がある
• ブリッジのオーバーヘッドによるパフォーマンスの低下

Flutter のアプリケーションはネイティブコードにコンパイルされるため、パフォーマンスが非常に高く、スムーズなユーザー体験を提供できます。そのため、React Native より Flutter でアプリ開発することにしました。

# Flutter の使い方

1. Flutter SDK のインストール (opens new window)
2. Flutter プロジェクトの作成

flutter create my_app

3. iOS シミュレータインストール

xcodebuild -downloadPlatform iOS

4. シミュレータ起動

open -a simulator

5. flutter run

# Flutter ディレクトリ構成

my_app/
├── android/
├── build/
├── ios/
├── lib/
│   ├── main.dart
├── test/
├── web/
├── .dart_tool/
├── .idea/
├── .vscode/
├── .gitignore
├── analysis_options.yaml
├── pubspec.yaml
├── pubspec.lock
└── README.md

• android/
  Android プラットフォーム用のネイティブコードや設定ファイルが含まれています。例えば、Gradle ビルドファイルや Android マニフェストファイルなど

• ios/
  iOS プラットフォーム用のネイティブコードや設定ファイルが含まれています。例えば、Xcode プロジェクトファイルや Info.plist ファイルなど

• build/
  アプリのビルド成果物が含まれるディレクトリ 通常、手動で編集することはありません。

• lib/
  Dart コードが含まれるディレクトリで、アプリの主要なソースコードがここに配置されます。main.dart ファイルは Flutter アプリのエントリーポイント

• test/
  ユニットテストやウィジェットテストのコードが含まれるディレクトリ テストは Dart で記述されます。

• web/
  Flutter for Web 用のファイルが含まれます。このディレクトリは、Flutter Web プロジェクトを作成した場合に使用されます。

• .dart_tool/
  Dart ツールによって使用されるファイルが含まれます。通常、手動で編集することはありません。

• .idea/
  IntelliJ IDEA や Android Studio の設定ファイルが含まれます。

• .vscode/
  Visual Studio Code の設定ファイルが含まれます。

• .gitignore
  Git でバージョン管理しないファイルやディレクトリを指定するためのファイル

• analysis_options.yaml
  Dart のコード解析オプションを設定するファイル

• pubspec.yaml
  Flutter プロジェクトの設定ファイルで、依存関係（パッケージ）やプロジェクトのメタデータを定義します。このファイルには、アセットやフォントの指定も含まれます。

• pubspec.lock
  プロジェクトの依存関係のバージョンをロックするファイル これにより、依存関係のバージョンが固定され、一貫したビルドが保証されます。

• README.md
  プロジェクトに関する情報や説明を提供する Markdown ファイル