Flutterを使ってみよう その3(開発前準備)

公開日: 2024/10/3
前回のサンプル実行の記事の続きです。

今回は、サンプルプロジェクトから開発のために何を抑えておけばよいか知識を深めていきましょう。

環境

 ・MacOS Ventura 13.6.3
 ・Xcode 15.1
 ・VSCode 1.85.1
 ・Flutter 3.16.5
 ・Dart 3.2.3

1. プロジェクトフォルダの構成

前回、作成したプロジェクトは、次のようなフォルダ構成で作成されます。


フォルダの分類としては、下記のように分類で分かれます。

1.各プラットフォームごとの設定(プロジェクト等)を格納するもの

 ・android:Andoridのビルド設定等を格納するフォルダ

 ・ios:iOSのプロジェクト設定等を格納するフォルダ

 ・linux:Linuxのビルド設定等を格納するフォルダ

 ・macos:MacOSのプロジェクト設定等を格納するフォルダ

 ・web:Webのページコード等を格納するフォルダ

 ・windows:Windowsのビルド設定等を格納するフォルダ

2.プラットフォーム関係なく、共通を格納するもの

 ・lib:本実装を格納するフォルダ

 ・test:テストコードを格納するフォルダ

 ・pubspec.yaml:外部パッケージなどを使用する際の設定ファイル

3.README.mdや、.gitignoreなどのその他ファイル



基本、開発したコードは、libフォルダに格納します。

 直下に格納されているmain.dartは、アプリケーションのメイン処理となるルールなので変更できませんが、その他のソースは、フラット配置だと見にくいので、各フォルダに分けて管理するのが一般的なようです。

フォルダ分けとして、アーキテクチャによる分類分けや機能に基づいた構成など、自由に決めて、方針を決めれば良いと思います。


例えば、アーキテクチャによる分類分けにする場合で、MVC の例だと、下記のようなフォルダ分けをするのがいいでしょう。

lib
- controllers
- models
- views

他に、MVVM の例だと、

lib
- models
- views
- viewModels

VIPER の例だと、

lib
- views
- interactors
- presenters
- entities
- routers

のようなフォルダ分けをするのがいいでしょう。

2. Dart言語について


Flutterで開発する場合は、Dart というコンパイル型言語が採用されています。

Dart は、Java/Python/JavaScriptなどに類似した記載方法を備えており、ある程度のプログラミング言語を習得されている方であれば、理解できるようになっています。


公式には、下記の特徴をあげてます。

1.わかりやすい

null safetyやパターンマッチングなどの最新の機能を提供する、一貫性があり、簡潔で、厳密に型指定されたプログラミング言語を使用して開発でできる

2.生産的な開発

繰り返し変更を加えます。ホットリロードを使用すると、実行中のアプリで結果を即座に確認できる

3.すべてのプラットフォームでポータブルかつ高速

モバイル、デスクトップ、バックエンド向けにARM、x64、RISC-Vなど、マシンコードにコンパイル、または、Web用のJavaScript、およびWebAssemblyにコンパイルすることで高速化。

コード記載は、一般的な演算(+、-、*、/、% 等)や、制御構文(if文、switch文、for文、 try〜catch文 等)、関数/メソッドなどが記載でき、オブジェクト指向で記載できます。


オブジェクト指向の記載法としては、下記のとおりです。

1.クラス(class)

 ・コンストラクタ:クラス名と同名のメソッド → インスタンス生成時

 ・インスタンスの生成:new

 ・継承:extends

 ・抽象クラス(継承での利用を前提とした、インスタンス化できないクラス):abstruct

 ・Mixin:with

2.フィールド/メソッド

 ・プライベートフィールド/メソッド:_xxx → _で始めるとプライベートになる

 ・staticフィールド/メソッド:static

 ・setter/getter:get/set → setter/getterでフィールドにアクセスする

3. サンプルコードでの説明


サンプルとして、main.dart がアプリのコードして、生成されますが、その内容が何を表しているのか説明します。

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

mainが最初にプログラムを起動します。mainは、MyAppクラスを実行しています。

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

MyAppクラスは、MaterialAppという外枠で、画面の中身の部分はMyHomePageクラスを呼び出しています。

MyAppクラスは、StatelessWidgetというWidget抽象クラスを継承して、生成しています。

Flutterは、画面構成する際は、Widgetというパーツを組み合わせて構成しています。

Widgetを利用する場合、import 'package:flutter/widgets.dart' を定義します。

StatelessWidgetを継承する場合、状態を持たない静的なWidgetのときに利用し、例えば、一度画面が描画されると後から再描画されることはなく状態も変える必要がないときに使われます。

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  // 「+」ボタン押されたとき、実行
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // タイトル
      appBar: AppBar(
   &nb

4. まとめ


今回は、開発前段階での基礎知識を補うのを目的で記事を書きました。

次回は、コードの中身を中心に解説できる記事になればと思います。