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

2022/09/08に公開
Flutter
Dart
入門
tech
はじめまして、ますみです！
株式会社Galirage（ガリレージ）という「生成AIに特化して、システム開発・アドバイザリー支援・研修支援をしているIT企業」で、代表をしております^^
みなさんは、Flutterというフレームワークを聞いたことがありますか？
Flutterとは、2018年にGoogleが発表したモバイルアプリを作るためのフレームワークなのですが、圧倒的なイチオシ技術です。
そして、Flutterにはクロスプラットフォーム開発ができるという特徴があります。別の言い方をすると、Flutterを用いることで、iOS / Android / Web / Desktopのアプリを作ることができます（詳細は後述）。
この記事は、そんなFlutterについて入門レベル知っておきたいという方々に向けて、わかりやすく入門記事としてまとめました。
今後、情報の更新も行なっていく予定なため、ぜひブックマークすることをおすすめします。
具体的なコンテンツとしては、下記の5つをまとめました。
Flutterとは？
Flutterのメリットとデメリット
Flutterの環境構築
Flutterでアプリを作成して、動かしてみよう
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)


クロスプラットフォーム開発のイメージ図
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による人気を見ると、他の二つに比べて高いトレンドスコアを得ていることがわかります（参考リンク）。


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

 Flutterのメリットとデメリットここからは、Flutterのメリットとデメリットを説明します。

どんな時でもFlutterが必ずいいわけではなく、開発チームの状況や開発するプロダクトによっては、他のフレームワークや言語を選定した方が良い場合もあります。
まずメリットとしては、次の5つがあります。
クロスプラットフォーム
安定したメンテナンス
ホットリロード機能
Googleサービスとの親和性
依存しない開発環境
次に、デメリットとしては、次の3つがあります。
開発経験者が少なさ
Swiftでしか表現できない痒いところがある
日本語の情報が少ない
それぞれについてより詳しく解説します。

 Flutterのメリット
 (1) クロスプラットフォーム上述した通り、Flutterは同一のソースコードからiOS / Android / Web / Desktopなどの複数のプラットフォーム上へ展開できます。
ソフトウェア開発の要件定義の際に、iOSとAndroidの両方のストアに配布したいという要件があった時に、開発チームをそれぞれ設ける必要はなく、一つのチームで開発および保守をできます。
ちなみに、他にも以下のようなクロスプラットフォームフレームワークがあります。
React Native (Facebook)
Xamarin (Microsoft)
Vue Native
Kotlin Multiplatform
Ionic
Capacitor
Cordova
Monaca
Electron
Uno Platform
Unity
Unreal Engine
ここで私自身の経験（所感）として、他のフレームワークよりも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のインストール!【Apple Silicon Macを使用する方々へ】
Apple Silicon Macを使用する方々（Intelではないチップが入ったPCを使う方々）はRosetta Translation Environmentをインストールする必要があるそうです。
そのため、該当する方は、Terminalというアプリケーションを開き、下記のコマンドを実行しましょう。この時、%は入力せず、sudo以降のみを入力してください。また、実行後にパスワードを求められると思いますが、ライセンスやインストールに関して同意する場合、そこではパソコンのパスワードを入力します。
% sudo softwareupdate --install-rosetta --agree-to-license

 手順1：Flutter SDKのダウンロードまず下記サイトへアクセスして、Flutter SDKをダウンロードしましょう。

この時、自分のPCのチップに応じたSDKを選択します。

https://docs.flutter.dev/get-started/install/macos#get-sdk


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

 手順2：Terminalを開き、任意のフォルダで解凍ここでダウンロードしたSDKを参照して、flutterのコマンドを実行します。そのため、自分にとって管理のしやすいフォルダで解凍することをおすすめします。
ここでは、公式サイトの例に従って、ホームディレクトリ（~）の配下にdevelopmentというフォルダを作成して、そこに解凍する方法で進めます。
まずTerminalというアプリを開き、下記のように入力します。
!これ以降、各コマンドの先頭に%と記述していますが、これは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


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のプラグインのインストール

!個人的には、アプリケーションの軽量性を重視して、VS Codeで開発を進めることをおすすめします。

 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!と表示されます。
!実際にリリースを見据えたアプリを作成する場合、このタイミングで下記のようにorgを設定することを推奨します。後から変更可能ですが、変更箇所が多い上、バージョンによって変更箇所が異なることがあるためです。
% flutter create --org com.example first_app

 アプリケーションの実行次に、アプリケーションを実際に実行してみたいと思います。

下記のように、アプリケーションフォルダへ移動して、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のおすすめ教材この記事では、超入門部分だけを取り扱いましたが、実際に開発をしてみたいという方はぜひここから手を動かして、試行錯誤してみください。
その際に役立ちそうな、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/

 最後に最後まで読んでくださり、ありがとうございました！

この記事を通して、少しでもあなたの学びに役立てば幸いです！
!【📩 仕事の相談はこちら 📩】

お仕事の相談のある方は、下記のフォームよりお気軽にご相談ください。

https://forms.gle/G5g1SJ7BBZw7oXYA7
もしもメールでの問い合わせの方がよろしければ、下記のメールアドレスへご連絡ください。
info*galirage.com（*を@に変えてご送付ください）

 おまけ①：RaggleRAGの精度改善に挑戦しませんか？
Raggleにて、「法務RAGシステムの性能改善ハッカソン」を開催中です！（10月20日に募集締切）
Raggleは、RAGの性能改善技術を競い合い、AIエンジニアのスキルアップを支援するプラットフォームです🥇
優勝者（GOLD🥇）の賞金は、なんと30万円！！！
SILVERは10万円、BRONZEでも5万円の賞金を用意しています！
また、参加賞として、大会終了後に「RAG精度改善ハンドブック」を贈呈予定なため、初学者の方もぜひ挑戦してみてください 🔰
みなさん、奮ってご参加ください🔥
※ 生成AIエンジニアの権利を守るため、投稿されたソースコードの著作権は、投稿者に帰属する規約としているため、その点もご安心ください◎
▼ エントリーはこちら ▼

https://bit.ly/raggle_zenn

 おまけ②：書籍出版のお知らせついに『AIとコミュニケーションする技術（インプレス出版）』という書籍の事前予約が始まりました🎉
これからの未来において「変わらない知識」を見極めて、生成AIの業界において、読まれ続ける「バイブル」となる本をまとめ上げました。
かなり自信のある一冊なため、もしもよろしければ、ご一読いただけますと幸いです^^
▼ Amazonの事前予約はこちらから ▼

https://amzn.to/3ME8mLF

 おまけ③：生成AIアカデミーより専門的な「生成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

 おまけ⑤：生成AIの仕事をしたい仲間を募集中 🤝弊社Galirageでは常に、40-50件ほどの生成AI案件が走っております。
そして、ほとんどが「生成AIの案件（RAGシステム開発 / 精度改善の研究開発など）」の仕事になります！
かなり人手が不足しており、以下のポジションの仲間を募集しています💪
RAGエンジニア（RAG / LangChain / Python）
バックエンドエンジニア（Python / FastAPI）
フロントエンジニア（Next.js / TypeScript）
Azureエンジニア（AOAI / AI Search）
UI/UXデザイナー
生成AIリサーチャー（研究開発 / 論文執筆）
生成AIコンサルタント
PM / PMO
ご興味がある方は、下記のフォームよりお気軽にご連絡ください！
https://forms.gle/XMd19irZU4Fi7VAQ9
採用基準は下記の通りです。

平日の日中に動ける方だと嬉しいですが、週8時間くらいの副業でもOKです！
開始時期は、直近だと嬉しいですが、遠い未来でもOKです！まずはカジュアルに話しましょう😊
年齢は不問です！現状は、平均年齢は30歳前後の会社です！
「スキルセット」よりも「カルチャーマッチ・仕事への姿勢・ものづくりへのワクワク」を重視します。
10月には新しく10名採用しました。
その内、エンジニア経験が3年未満の方は、4名いました。
スキルについては、ジョインした後に、必要に応じて、キャッチアップする時間を作ります。
弊社は、正社員7名、業務委託80名の組織で構成されており、業務委託の仲間に支えられているため、正社員と業務委託の間にあまり差をつけていません。
契約形態に関わらず、一緒に働く仲間として受け入れたその日から、大切な仲間です！
新卒や転職の正社員採用もしていますが、業務委託での仕事を通して、お互いにWin-Winだと判断できた方のみを採用しています。
私自身、フリーランスを5年間やっていたため、個人事業主と正社員のメリデメは両方の立場から理解しています。

人手不足ではあるものの、採用基準をかなり厳しくしています。目の前の売上よりも、カルチャーのマッチする人だけを入れることにこだわっています。
ちなみに、弊社のリーダーを紹介したプロフィールページはこちらです！
Galirageに、本当に素敵な方が多いことは、保証します！



 参考文献https://flutter.dev/
https://dart.dev/
https://qiita.com/ycrack/items/03887b872378c06e3afe
Flutterとは？

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

Dartとは？

オープンソースとは？

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

Flutterのメリット

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

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

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

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

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

Flutterのデメリット

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

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

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

Flutterの環境構築

macOSへのFlutterのインストール

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

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

手順3：PATHの設定

WindowsへのFlutterのインストール

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

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

手順3：PATHの設定

その他の環境構築

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

アプリケーションの作成

アプリケーションの実行

Flutterのおすすめ教材

1. Flutter大学

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

3. Flutter of the Week

4. monoさんのブログ

最後に

おまけ①：Raggle

おまけ②：書籍出版のお知らせ

おまけ③：生成AIアカデミー

おまけ④：AI Newsletter for Biz

おまけ⑤：生成AIの仕事をしたい仲間を募集中 🤝

参考文献

Discussion
