Zenn
🚀

Flutter3超入門【概要 / メリットとデメリット / 環境構築 / メリットとデメリット】

2022/09/08に公開
Flutter
Dart
入門
tech

はじめまして、ますみです！

株式会社Galirage（ガリレージ）という「生成AIのシステム開発会社」で、代表をしております^^

自己紹介.png

みなさんは、Flutterというフレームワークを聞いたことがありますか？

Flutterとは、2018年にGoogleが発表したモバイルアプリを作るためのフレームワークなのですが、圧倒的なイチオシ技術です。

そして、Flutterにはクロスプラットフォーム開発ができるという特徴があります。別の言い方をすると、Flutterを用いることで、iOS / Android / Web / Desktopのアプリを作ることができます（詳細は後述）。

この記事は、そんなFlutterについて入門レベル知っておきたいという方々に向けて、わかりやすく入門記事としてまとめました。

今後、情報の更新も行なっていく予定なため、ぜひブックマークすることをおすすめします。

具体的なコンテンツとしては、下記の5つをまとめました。

  1. Flutterとは？
  2. Flutterのメリットとデメリット
  3. Flutterの環境構築
  4. Flutterでアプリを作成して、動かしてみよう
  5. Flutterのおすすめ教材

Flutterとは？

Flutterとは「Googleによって2018年に発表された比較的新しいクロスプラットフォームフレームワーク」です。

クロスプラットフォームフレームワークとは？

ここで「クロスプラットフォーム（マルチプラットフォーム）フレームワーク」とは、同一のソースコードでiOS / Androidなどの様々なプラットフォームへ展開 / 配布することができる便利なツールのことを指します。より正確には、ソフトウェア開発キット（SDK; Software Development Kit）という開発ツールを指します。

通常の開発（ネイティブ開発）では、iOSアプリをリリースするためにSwiftという言語でコードを書き、AndroidアプリをリリースするためにJavaやKotlinという言語でコードを書き、WebアプリやサイトをリリースするためにHTML / CSS / JavaScriptなどの言語でコードを書きます。

Flutterでは現在（2022年9月時点）、下記のアプリケーションへビルドできます。

  • iOS apps
  • Android apps
  • Web apps
  • Windows apps
  • macOS apps
  • Linux apps
  • (Apps in Embedded Devices)

cross_platform.png
クロスプラットフォーム開発のイメージ図

Flutter以外にも、React NativeやXamarinなどの他のクロスプラットフォームフレームワークはありますが、Googleによる安定的なメンテナンス（アップデート）が行われていることが一つの強みとしてあげられます（詳細は後述）。

Dartとは？

Flutterの特筆すべき特徴として、Dart言語で記述するという点が挙げられます。

「FlutterとDartの違いは？」と質問されることがあるのですが、Flutterは「アプリケーション開発をする際の枠組みとなる開発ツール（フレームワーク）」であり、Dartは「開発に用いられるプログラミング言語使われるです。

Dartとは「2011年に発表されたGoogle製のプログラミング言語」です（当時はDashという名前でした）。JavaScriptの代替言語とも言われていて、JS経験者にはわかりやすい言語になっています。

以下の例では、Hello, World!と出力する例とと変数定義の例を示しています。

main() {
  // Hello World
  print("Hello, World!");

  // Variable Examples
  final name = 'Masumi Morishige';
  final birthYear = 1997;
  final skills = ['Python', 'Dart', 'TypeScript'];
  final image = {
    'altText': 'profile',
    'url': '/img/profile.jpg'
  };
}

オープンソースとは？

Flutterは、オープンソース（無償で一般公開されたソースコード）のフレームワークです。

Flutter以外にも、オープンソースのクロスプラットフォームフレームワークとして、「FacebookのReact Native」や「MicrosoftのXamarin」などがあります。

ちなみに、最近のGoogle Trendによる人気を見ると、他の二つに比べて高いトレンドスコアを得ていることがわかります（参考リンク）。

flutter_trend.png
Google Trendでのトレンドスコアの比較

ここまでのFlutterの概要をまとめると次の通りです。

  • Googleが2018年に正式版を発表。
  • クロスプラットフォームフレームワークで、iOS / Android / Web / Windows / macOS / Linuxのアプリケーションを開発することができる。
  • Dart言語によって開発。
  • オープンソース。
  • React NativeやXamarinよりもトレンドスコアが高い。

Flutterのメリットとデメリット

ここからは、Flutterのメリットとデメリットを説明します。
どんな時でもFlutterが必ずいいわけではなく、開発チームの状況や開発するプロダクトによっては、他のフレームワークや言語を選定した方が良い場合もあります。

まずメリットとしては、次の5つがあります。

  1. クロスプラットフォーム
  2. 安定したメンテナンス
  3. ホットリロード機能
  4. Googleサービスとの親和性
  5. 依存しない開発環境

次に、デメリットとしては、次の3つがあります。

  1. 開発経験者が少なさ
  2. Swiftでしか表現できない痒いところがある
  3. 日本語の情報が少ない

それぞれについてより詳しく解説します。

Flutterのメリット

(1) クロスプラットフォーム

上述した通り、Flutterは同一のソースコードからiOS / Android / Web / Desktopなどの複数のプラットフォーム上へ展開できます。

ソフトウェア開発の要件定義の際に、iOSとAndroidの両方のストアに配布したいという要件があった時に、開発チームをそれぞれ設ける必要はなく、一つのチームで開発および保守をできます。

ちなみに、他にも以下のようなクロスプラットフォームフレームワークがあります。

ここで私自身の経験（所感）として、他のフレームワークよりもFlutterはビルド時のエラーが出づらい（他のライブラリのバージョンへの依存性が低い？）印象があります（React Native, Xamarin, Kotlin, Ionic, Capacitor, Electron, Unityのビルド経験あり）。

(2) 安定したメンテナンス

個人的に、ここがFlutterの一番の強みだと考えています。

まず前提として、クロスプラットフォーム開発における一つの大きな障壁となり得るのが、iOSやAndroidのバージョンがアップデートされたりすることによるバグの発生です。

たとえば、いつかのApple Eventにおいて、iPhoneの画面の縦横比やiOSのアップデートがされた時に、複数のアプリで想定しない挙動が起きたりしたことがあるかと思います。

Googleが主体となってメンテナンスをしていることもあり、上記のような変更に対しても迅速に対応されます。とくに、Androidアプリに関しては、プラットフォーム自体をGoogleが握っているため、OSのアップデートによるバグが他のフレームワークに比べて少ないです。

(3) ホットリロード機能

ホットリロード機能とは「デザインを変更し保存すると、自動的に画面がリロードされる機能」です。

公式サイトでもメリットとして挙げられている通り、開発中の画面描画が非常に速いこともメリットとして挙げられます。

(4) Googleサービスとの親和性

FlutterはGoogle製なこともあり、他のGoogleサービスとの親和性が高いです。
とくに、Firebaseとの親和性が高いです。

Firebaseとは、モバイルアプリやWebアプリが必要とするサーバ側の機能を提供するmBaaS（mobile Backend-as-a-Service）のサービスです。

ちなみに、Flutter 3.0のリリースの際に、GoogleがFlutterとFirebaseとの連携をさらにシームレスにしました。
https://zenn.dev/umi_mori/articles/5e49f437387a0c#【firebase】

(5) 依存しない開発環境

ネイティブ開発に用いられるSwiftやKotlinの開発にはXcodeやIntelliJなどの開発環境が必要になるケースがあります。

Flutterは、このように開発環境に依存しないこともメリットとしてあげられます。どのような環境でも、開発をスターとできるということです。

しかし、実際にiOSアプリをリリースするときやより正確なシミュレータを動かしたい時などは上記のアプリケーション制約を受けることがあります。

Flutterのデメリット

(1) 開発経験者が少なさ

やはり2018年にローンチされたこともあり、SwiftやJavaに比べるとエンジニアの少ない開発言語 / フレームワークに感じます。エンジニア人口も案件人口も以前と比べれば、急激に増えてきましたが、人材不足という状況は否定できないと思います。

(2) Swiftでしか表現できない痒いところがある

稀にSwiftのコードを編集しないと表現できない（しづらい）機能が出てくることがあります。
別の言い方をすると、OSのアップデートに伴い、新しいNativeの機能（カメラやBluetoothなどの機能）にFlutterのレイヤーではリーチしづらいことがあるとも言えます。

(3) 日本語の情報が少ない

他のフレームワークや言語に比べると新しいため、まだまだ日本語のドキュメントは少ないです。開発をしていると、しばしば英語のドキュメントに遭遇します。

とはいえ、最近はmonoさんやFlutter大学さんの活動のおかげもあり、だいぶ充実してきた感じもします。

Flutterの環境構築

では、ここまで座学が多かったですが、ここからは実際に手を動かしてみましょう。

まず最初に、実際にFluterのアプリを動かすための環境構築の方法を下記にまとめました。

macOSへのFlutterのインストール

手順1：Flutter SDKのダウンロード

まず下記サイトへアクセスして、Flutter SDKをダウンロードしましょう。
この時、自分のPCのチップに応じたSDKを選択します。
https://docs.flutter.dev/get-started/install/macos#get-sdk

download_sdk_macos.png
Flutter SDKのダウンロード画面（macOS）

手順2：Terminalを開き、任意のフォルダで解凍

ここでダウンロードしたSDKを参照して、flutterのコマンドを実行します。そのため、自分にとって管理のしやすいフォルダで解凍することをおすすめします。

ここでは、公式サイトの例に従って、ホームディレクトリ（~）の配下にdevelopmentというフォルダを作成して、そこに解凍する方法で進めます。

まずTerminalというアプリを開き、下記のように入力します。

% mkdir ~/development
% cd ~/development
% unzip ~/Downloads/flutter_macos_3.3.1-stable.zip

上記のflutter_macos_3.3.1-stable.zipという名前は、適宜その時のダウンロードしたファイルに合わせて、変更してください。

手順3：PATHの設定

これ以降、flutterのコマンドをTerminal上で実行できるように、先ほど回答したフォルダの中のファイルをPATH（実行するための魔導書のようなもの）に登録します。

まず以下のようなwhich flutterと入力して、実行してみましょう。

% which flutter
flutter not found

すると、flutter not foundと出てきます。
これは、flutterのPATHがまだ通っていないことを示しています。

そこで、以下のように実行してみましょう。

% export PATH="$PATH:$HOME/development/flutter/bin"
% which flutter
/Users/your_name/development/flutter/bin

すると、which flutterに対して、flutterコマンドのPATHが返ってきます。
これでPATHの一時的な設定が完了しました。

Flutterのコマンドを永続的に実行できるようにするためには、~/.zshrcや~/.bash_profileなどのファイルを更新する必要があります。

まず以下のように実行をします。

% echo $SHELL
/bin/zsh

もしも/bin/zshと返ってきたらzshが、/bin/bashと返ってきたらbashが使われていることがわかります。それぞれの環境に従って、下記のボックスを開いて進めてください。

zshだった場合はこちらを開いてください。

Terminal上で、下記のように実行しましょう。

% touch ~/.zshrc
% open ~/.zshrc

すると、テキストエディタが開くと思うため、そこに下記のように追記します。
すでに何か入力されている場合、それらは消さずに末尾に追加しましょう。

export PATH="$PATH:$HOME/development/flutter/bin"
bashだった場合はこちらを開いてください。

Terminal上で、下記のように実行しましょう。

% touch ~/.bash_profile
% open ~/.bash_profile

すると、テキストエディタが開くと思うため、そこに下記のように追記します。
すでに何か入力されている場合、それらは消さずに末尾に追加しましょう。

export PATH="$PATH:$HOME/development/flutter/bin"

上記の設定が全て完了した場合、これ以降新しいTerminalを開いた時に、flutterのPATHが設定されるようになります。

以上で、macOSの環境構築は完了です。

WindowsへのFlutterのインストール

手順1：Flutter SDKのダウンロード

まず下記サイトへアクセスして、Flutter SDKをダウンロードしましょう。
https://docs.flutter.dev/get-started/install/windows#get-the-flutter-sdk

download_sdk_win.png
Flutter SDKのダウンロード画面（Windows）

手順2：Terminalを開き、任意のフォルダで解凍

ここでダウンロードしたSDKを参照して、flutterのコマンドを実行します。

この時、以下の条件を満たすフォルダを解凍先にしましょう。

  • 特殊な文字列（日本語など）が含まれたフォルダではないこと
  • C:\Program Files\などの管理者権限が必要なフォルダではないこと

公式サイトでは、C:\src\flutterが例として挙げられています。

手順3：PATHの設定

任意のフォルダで解答が終わったら、そのフォルダをPATHに登録します。
もしもPATHの設定方法がわからない場合は、下記のサイトをご参照ください。
https://atmarkit.itmedia.co.jp/ait/articles/1805/11/news035.html

最終的に、コマンドプロンプトもしくはPowershellというアプリを開き、以下のように実行して、flutterのコマンドリストが表示されれば設定完了です。

> flutter -h

その他の環境構築

ここまででFlutterの基本的な環境構築が完了しました。
また、下記の設定をすることを強くおすすめします。
https://docs.flutter.dev/get-started/install

  • Android Studio
    • アプリケーションのインストール
    • ライセンスの許可
    • Flutter / Dartのプラグインのインストール
    • Androidエミュレータの設定
  • Xcode (macOSユーザー向け)
    • アプリケーションのインストール
    • Xcode command-line toolsの設定
    • ライセンスの許可
    • iOSシミュレータの設定
  • VS Code
    • アプリケーションインストール
    • Flutter / Dartのプラグインのインストール

Flutterでアプリを作成して、動かしてみよう

アプリケーションの作成

では、早速Flutterでアプリケーションを作ってきたいと思います。
Terminal（もしくはコマンドプロンプト）を開き、下記のように実行しましょう。
first_appには、アプリ名を入力します。

% flutter create first_app
...
All done!
In order to run your application, type:

  $ cd first_app
  $ flutter run

Your application code is in first_app/lib/main.dart.

無事にアプリケーションの作成に成功すると、上記のようにAll done!と表示されます。

アプリケーションの実行

次に、アプリケーションを実際に実行してみたいと思います。
下記のように、アプリケーションフォルダへ移動して、flutter runを実行しましょう。

% cd first_app
% flutter run

もしも複数のデバイスで実行することができる場合、上記のように選択肢が出てくるため、実行したいデバイスの番号を入力しましょう。

Multiple devices found:
macOS (desktop) • macos  • darwin-x64     • macOS 11.6.8 20G730 darwin-x64
Chrome (web)    • chrome • web-javascript • Google Chrome 105.0.5195.102
[1]: macOS (macos)
[2]: Chrome (chrome)
Please choose one (To quit, press "q/Q"): 2

下記のようにデバイスの画面が出て来れば、ビルド成功です。
flutter_sample.png
デフォルトの初期画面

Flutterのおすすめ教材

この記事では、超入門部分だけを取り扱いましたが、実際に開発をしてみたいという方はぜひここから手を動かして、試行錯誤してみください。

その際に役立ちそうな、Flutterのおすすめ教材と学習ロードマップをまとめました。
これから先より良い教材に出会ったり、自分で書いたりする機会があれば、本記事を更新をしたいと思います。

1. Flutter大学

まずは、Flutter大学の動画を見ながら、「こういう変更を加えると、こういう風に画面が変わるのか」と雰囲気を掴むことをおすすめします。
https://www.youtube.com/channel/UCReuARgZI-BFjioA8KBpjsw

2. 一つアプリを作ってみる

いきなり作るのは難しそうと思うかもしれませんが、雰囲気がつかめたらクイックにシンプルなアプリを作ってみることを強くおすすめします。最近は、機能ベースの記事が増えてきたため、実装したいことで検索をしたら実装方法が見つかると思います。

3. Flutter of the Week

アプリを作り始めたら、引き出しを増やしたくなる時が来ると思います。

そういう時は、Flutter大学でもいいですが、公式が出しているFlutter of the Weekというしょーどビデオがわかりやすくておすすめです。私は、Widgetの名前を覚えるために、電車の中でラジオ感覚で聞いていました。

4. monoさんのブログ

最後に、よりベストプラクティスを知りたくなる時が来ると思います。
一通り基礎を身につけた後は、私自身が尊敬するエンジニアさんの一人であるmonoさんのブログがおすすめです。パッケージ開発などもされている方で、Flutterにおける開発思想のようなことも学ことができます。
https://mono0926.medium.com/

最後に

最後まで読んでくださり、ありがとうございました！
この記事を通して、少しでもあなたの学びに役立てば幸いです！

おまけ①：生成AIエンジニア塾

より専門的な「生成AIエンジニア人材」を目指しませんか？

そんな方々に向けて、「生成AIエンジニア塾」というプログラムを始めました🎉

最終的なゴールとして、『エンタープライズ向けの生成AIシステムを構築するためのスキルを習得し、大手案件で活躍できる人材』を目標とします。

また、一人一人にしっかりと向き合って、メンタリングをできるようにするため、現在メンバーの人数制限をしております。本気度やスキルレベルの高い人から、順番にご案内しております。

▼ 登録はこちらから ▼
https://bit.ly/generative_ai_engineer_school_by_zenn

おまけ②：AI Newsletter for Biz

最新のAIニュースの情報を収集しませんか？

AI Newsltter for Bizは、ビジネスパーソン向けに「AIニュース」を定期配信する完全無料のニュースレターです📩

一人でも多くの方にとって、「AI人材としてのスキルアップ」につながれば幸いです^^

また、現在、登録者限定で「明日から使える 無料AIサービス3選」のPDFを配布中です 🎁
※ ご登録完了のメールに、PDFリンクを添付いたします。

期間限定のプレゼントとなりますので、ぜひ、お早めにご登録ください！

▼ 登録はこちらから ▼
https://bit.ly/ai_newsletter_for_biz_zenn

参考文献

https://flutter.dev/

https://dart.dev/

https://qiita.com/ycrack/items/03887b872378c06e3afe

Discussion