この記事では、初心者からのFlutter入門方法を、わかりやすく解説します。
Flutterを使ってモバイルアプリを開発するにはどうしたらいいんだろう？
何から始めればいいのかわからない…
Flutterでモバイルアプリを開発しようにも、何から始めればいいのかわからない人は多くいますよね。また、問題なく使用できるアプリが作れるのか不安な人もいるはず。
そこで、今回はFlutterの基礎知識を解説したうえで、モバイルアプリの開発手順や覚えておきたい便利機能を紹介します。加えて、Flutterの学習方法も解説しますので、ぜひ参考にしてください。
- FlutterはGoogleが開発したスマホアプリ開発用のフレームワーク
- Flutterを利用するにはSDKのインストールが必要
- Flutterを用いたアプリ開発はプロジェクト生成→シミュレータ起動の順で進める
【入門者向け】Flutterの基礎知識
Flutterの特徴や開発に使用する言語などを押さえておけば、スムーズにモバイルアプリの開発を進められます。そこで、まずはじめに3点のFlutterに関する基礎知識を解説します。
Flutterとは
FlutterはGoogleによって開発された、モバイルアプリを開発するためのフレームワークです。近年では「モバイルアプリケーションフレームワーク」と呼ばれることもあります。
Flutterを利用すれば「iOS」「Android」それぞれのアプリケーションを、同じ開発言語、同じ開発環境で作成可能です。それだけではなく、Windows・Mac・Linuxといった複数のプラットフォームにも対応しています。
通常モバイルアプリ開発では、iOSとAndroidで同じアプリを作る場合、それぞれにあわせたプログラミング言語や開発環境を準備しなければいけません。
iOS用に作成したコードはAndroid用には使用できず、逆も同様です。その点、Flutterを使用すれば、作成したコードをiOS用・Android用それぞれに使いまわせます。
実際には多少の改良が必要ですが、コード作成が1回で済むのは大きなメリットです。このような特徴から、FlutterはiOS・Android両方でアプリをリリースしたい場合に使用されます。
また、次の記事ではそもそもFlutterとは何なのか、その特徴を事例も交えて紹介しているので良ければ参考にしてください。
Flutter開発に使用されるDartとは
Dart（ダート・ダーツ）は、2011年にGoogleによって発表されたプログラミング言語です。主に、Flutterを使った開発に使用されます。
もともとDartは、JavaScriptの欠点を補う目的で開発されたプログラミング言語です。JavaScriptは拡張性やメンテナンス性があまりよくなく、大規模開発には向いていません。その弱点を補うために開発されたのがDartです。
そのため、Dartには次のような特徴があります。
- 習得難易度が低め
- コードの実行パフォーマンスが優れている
- 大規模開発に向いている
DartはJavaScript同様、学習難易度が低めです。とくにJavaScriptと文法が似ているため、JavaScriptを習得している人であればDartは習得しやすいといえます。
また、Dartはコードの実行速度が早く、パフォーマンスが優れているため大規模な開発に利用できます。あわせて、開発時に実行結果をすぐ確認できる「ホットリロード機能」が搭載されているため、開発の生産性も向上します。
Dartのメリット・デメリットについては、次の記事で詳しく解説しているので、ぜひ参考にしてください。
Flutter for Webとは
Flutter for Webとは、簡単にいえばFlutterのWebアプリ開発版です。主にFlutterはモバイルアプリ開発ができるツールですが、Flutter for WebはWebアプリの開発に特化しています。
Flutter for Webは、Fulutterで開発したDartコードをブラウザ―上で動くようにすることで、Windows・Mac・LinuxなどOS問わず動かすことを可能にします。また、開発時のテストやデバッグはブラウザ上でできるため、パソコンのスペックが低くても開発できます。
高スペックパソコンが必要になると、準備コストも上がるため、コストを抑えて開発ができる点はメリットです。このように、Flutter for WebもFlutter同様に便利なツールです。
次の記事ではFlutter for Webの特徴を使うメリットや導入方法も交えて解説しているので、良ければ参考にしてください。
Flutterで開発する3つのメリット
Flutterで開発する3つのメリットを紹介します。
iOS/Androidの開発が一度に済む
Flutter最大のメリットは、iOSとAndroidの両プラットフォームに対応したアプリを一度に開発できることです。
一般的に、iOSアプリとAndroidアプリを別々に開発する場合、各プラットフォームに特化した開発環境が必要です。一方Flutterなら、1つのコードベースで両方のプラットフォームに対応するアプリ開発ができるため、開発時間の短縮や開発コストを削減できます。
また、iOSアプリとAndroidのコード一貫性が保たれるため、バグ修正や機能追加も容易です。
ホットリロード機能でコードの変更の挙動がすぐに確認できる
Flutterには「ホットリロード」という機能があります。
コード変更後には一般的に、ビルド作業が必要で、変更した結果を確認するまでに時間がかかりますが、ホットリロード機能を使用すると変更後すぐにアプリへの反映が可能です。そのため、開発時間の短縮や作業効率向上が期待できます。
ほかにも、アプリを特定の状態で維持したまま修正が行えるなど、開発者目線で嬉しい機能も豊富です。
UIデザインをプラットフォームに依存せず統一できる
Flutterは、iOSやAndroidのプラットフォーム固有デザインを意識する必要がないため、同じデザインを両方のプラットフォームに適用できます。
これにより、iOSやAndroidでばらばらだったUIデザインの統一表示が可能になり、それぞれのUIデザインをどのように統一性も持たせるかを設計する時間が不要になります。
企業のブランディングに合わせた一貫性のあるデザインを保ちたい場合に、Flutterの活用が有効です。
Flutterで開発する3つのデメリット
Flutterで開発する3つのデメリットを紹介します。
OS独自のカメラや通知の機能は個別に対応しなければならない
Flutterは、前述した通り、iOSとAndroidのプラットフォームを意識する必要がないクロスプラットフォーム開発が可能です。
一方で、カメラや通知をはじめiOSやAndroid独自の機能を使用したい場合には、プラットフォームごとにネイティブコードを追加して対応しなければなりません。
そのため、独自機能を使用する場合にはクロスプラットフォームのメリットが失われ、独自機能のコード管理をする手間が増えます。
ライブラリが少ないため、効率的な作業ができない場合がある
Flutterは比較的新しいフレームワークであるため、利用できるライブラリやプラグインの数が少ないというデメリットがあります。
もし、適用できるライブラリがない時には、必要な機能を自分で開発しなければならず、想定以上に開発に時間がかかる可能性があります。利用できるライブラリやプラグインがない場合は、想定していたよりも開発時間が増加してしまい開発効率が低下することがあります。
ほかにも、ライブラリのメンテナンスが不十分で最新バージョンとの互換性がなく、バグ修正されていないこともリスクになります。
アプリサイズが大きくなる傾向がある
Flutterで作成されたアプリは、他のフレームワークと比較して、アプリサイズが大きくなる傾向があります。
Flutterには、特定のコンポーネントが必要になるため、小規模場アプリであってもアプリサイズが大きくなるデメリットがあります。特に、アプリの初回ダウンロード時や、モバイルデータ通信量が限られているユーザーにとっては、このサイズの大きさが問題になることがあります。
例えば、ドコモの「ahamo」アプリをFlutterで開発したインタビュー記事にはFlutterを使用することでアプリサイズが大きくなることや、バージョンアップへの対応、webview機能の追加に苦労した点も述べられています。
Flutterで使うプログラミング言語Dartとは？
Flutterで使われるプログラミング言語Dartは、Googleが開発した新しいプログラミング言語です。
Dartは、簡単で読みやすい文法で構成されているため、初心者でも使用しやすいというメリットがあります。また、Dartは、JavaやC#などに構文が似ているため、JavaやC＃の経験者にとっても学びやすいプログラミング言語です。
「Flutter」と「 Flutter for Web」の違い
「Flutter」と「Flutter for Web」は、同じFlutterフレームワークを使用して異なるプラットフォーム向けにアプリを開発するためのツールです。
Flutterは、前述した通り、主にiOSとAndroidなどのモバイルアプリを開発するために使用されます。対して、Flutter for Webは、Webアプリケーションを開発するためのツールです。
Flutter for Webを使用すると、Flutterのウィジェットを活用して、Webブラウザ上で動作するアプリを作成できます。Web向けに最適化された機能が含まれており、Webアプリのレスポンシブデザインを実現することが可能です。
Flutterを使ったモバイルアプリの開発手順
開発に必要なFlutterの基礎知識を押さえたところで、いよいよここからはFlutterを使ったモバイルアプリの開発手順を4つのステップで解説します。
ステップ1：Flutterをダウンロード＆インストール
まずはじめに、モバイルアプリの開発に必要なFlutter SDK（ソフトウェア開発キット）をダウンロードしてインストールしましょう。
WindowsとMacで少しインストールの手順が異なりますが、基本的な流れは同じです。大まかなインストール手順は次のとおりです。
- ステップ1：Flutter SDKをダウンロードする
- ステップ2：ダウンロードファイルを解凍する
- ステップ3：所定のディレクトリに配置する
- ステップ4：pathを通す（Macのみ）
Flutterで開発を行うには、Flutterの公式サイトからSDKをダウンロードし、PC内に配置する必要があります。
ダウンロードファイルの解凍は、表示される指示に従いながら進めれば難しくありません。ディレクトリの配置は「C:\src\flutter」のように任意のディレクトリを設定してください。
ただし、あまり深い階層へディレクトリを置いてしてしまうと、あとでどこに設定したかがわかりにくくなります。「C:\src\flutter\〇〇〇\〇〇」のように階層を深くするのではなく、できるだけ浅めに設定しておくことをおすすめします。
また、Macでの開発のみ、ディレクトリ配置後にpathを通す作業が必要になります。
次の記事ではMacとWindowsのそれぞれについてFlutterのインストール方法を詳しく解説しているので、あわせて参考にしてください。
ステップ2：Flutterの開発環境を構築する
Flutter SDKを準備できたら、次は開発環境を構築します。「SDKがあれば、モバイルアプリ開発はできるのでは？」と感じている人もいるかもしれません。しかし、次のツールを使えば、よりスムーズに開発を進められます。
具体的には次のツールを使用します。
| 特徴 | |
| Android Studio | ・アプリのテストが簡単 ・コード作成支援機能がある ・アプリ作成が楽にできる機能が豊富 |
| Visual Studio Code | ・セットアップが簡単 ・動作が軽い ・拡張機能が豊富 |
| Xcode | ・直感的に開発できる ・ソース管理がしやすい ・アプリのテストが簡単 |
上記のツールのなかで特に便利なのが、XcodeのシミュレータとAndroid Studioのエミュレータ機能です。この機能を使用すれば、作成したコードの実行結果をパソコン内で確認できます。わざわざ実行環境を準備する必要がないため、開発の手間を削減できるのです。
なお、それぞれのツールはインストールした後、初期設定を行う必要があります。設定する方法は、各公式サイトからご確認ください。
ステップ3：Flutterを使ってアプリを開発する
Flutterの開発環境が準備できたら、いよいよアプリ開発を行います。アプリ開発をスタートするときは、次の手順で開発準備をしてください。
- ステップ1：Flutter内でプロジェクトを生成
- ステップ2：コマンドラインでアプリ起動
- ステップ3：シミュレーターを起動する
- ステップ4：開発スタート
まずは、Flutter内でプロジェクトを生成します。プロジェクトは「flutter create プロジェクト名(アプリ名)」で作成してください。プロジェクトを作成することで、アプリのコーディングなどを行えるようになります。
プロジェクトを立ち上げたら、次はアプリ・シミュレータを起動して、コードの実行を確認できる準備をしてください。
ここまで準備できれば、後はアプリ開発を行うだけです。自分が開発したいアプリにあわせてDartでコーディングしていきます。
また、次の記事ではFlutterを使ったiOSアプリの開発手順を注意点も交えて解説しているので、良ければ参考にしてください。
ステップ4：Flutterで開発したアプリをリリースする
アプリが開発できたら、iOS・Androidそれぞれでアプリをリリースしましょう。
Flutterで開発したアプリを公開するためには、申請が必要です。iOS向けアプリの場合、Appleデベロッパープログラムに登録しなければいけません。公開に必要な情報（アプリケーションのタイトルや説明文・スクリーンショットなど）を用意し、Appleへ申請をしましょう。
Android向けアプリケーションの場合は、Google Playに申請をする必要があります。どちらも審査があるため、公開までに時間がかかる場合もあるようです。公開予定日がある場合、審査が難航することも予想し、早めに開発を完了する必要があります。
なお、上記の手順をもとに自力でFlutterのスキルが習得できるか不安な人は「侍エンジニア」をお試しください。
侍エンジニアでは、現役エンジニアと学習コーチの2名体制で学習をサポートしてもらえます。
「受講生の学習完了率98%」「累計受講者数4万5,000名以上」という実績からも、侍エンジニアなら未経験からでも挫折なくFlutterを扱うスキルが習得できますよ。
入門者が覚えておきたいFlutterの主な機能
Flutterには、モバイルアプリ開発を助ける便利な機能が数多くあります。そこで、ここからは入門者が覚えておきたいFlutterの便利機能を紹介します。
ウィジェット
ウィジェットは、スマホの画面に表示されるボタンやテキストなどのパーツのことです。
テキストであれば、Text Widget、ナビゲーションバーであれば、Appbar Widgetなどがあります。それぞれウィジェット単位で文字の内容や大きさ、色などを指定・管理します。
Flutterのウィジェットにはたくさんの種類があり、Webアプリのボタン・アラート機能・アイコンデザインなど、よく使う機能が使用可能です。
具体的には次のようなウィジェットが用意されています。
| ウィジェット名 | 内容 |
| Icon | マテリアルデザインのアイコン |
| Image | 画像を表示するウィジェット |
| Check box | ユーザーが対象を選択しチェックできる |
引用：Flutter公式サイト
ウィジェットを使えば、難しいコーディングをしなくても直感的にデザイン・機能を実装できます。Flutterを使うなら、覚えておきたい機能です。
パッケージ
Flutterで開発を行う場合、パッケージを使いこなせると便利です。
パッケージとは、アプリ開発に便利な機能をまとめたものです。パッケージを読み込むことで、自分で一からプログラミングをせずとも、すでに用意されている機能を使って効率的に開発を進められます。
また、Flutterでは、Dartのパッケージと、iOSやAndroidのネイティブプラットフォーム固有機能を利用するためのプラグインパッケージを利用できます。それぞれのパッケージを組み合わせることで、実現したい機能を素早くプログラミングすることが可能です。
これは、Flutterで使用できるパッケージの具体例です。
モバイルアプリに搭載される機能のなかには、パッケージを使っているものもたくさんあります。開発を効率化するためにも、パッケージについて学んでおくとよいでしょう。
ホットリロード
Flutterを使う場合、ホットリロードは頭に入れておきたい機能です。
ホットリロードとは、記載したコードがリアルタイムで作成中のアプリに反映される仕組みです。ホットリロード機能があれば、すぐに記述したコードの確認ができます。
Flutterのホットリロード機能は常時使用可能なため、利用者は特に設定は必要ありません。ただ、ホットリロード機能があることを頭に入れておくと、開発時に活用しやすいはずです。
Flutterの学習方法
Flutterでモバイルアプリ開発を行うには、Flutterの使い方はもちろんDartといったプログラミング言語を扱うスキルを習得しなければいけません。ここでは、Flutterの学習方法を3つ解説します。
学習サイトで学ぶ
Flutter入門者におすすめの学習サイトは、この5つです。
無料で学べるサイトのなかでは、Flutterの公式サイトをおすすめします。Flutterの公式サイトには、学習を始めるためのサポートページが用意されています。英語ではありますが、コマンドや画面のキャプチャーを用いて丁寧に解説されています。
例えば、先ほど紹介したウィジェットやパッケージなど、開発で使用するツールの導入方法なども解説されています。自分で学習していて分からないときなど、参考にしながら学ぶのもよいでしょう。
有料学習サイトのなかでは、Udemyがおすすめです。Udemyでは、たくさんの講座が開講されています。現役エンジニアや分野の専門家が開講している講座も多く、教材の質も高いです。
コストはかかりますが、効率的に学習するならおすすめのサイトといえます。ちなみに、Flutterが学べるおすすめ有料サイトは次の記事で解説しているので、ぜひ参考にしてください。
本で学ぶ
Flutter入門者向けのおすすめ学習サイトは、次の3冊です。
| 書籍タイトル | 対象者 |
| 基礎から学ぶFlutter | 初心者向け |
| Flutter×Firebaseで始めるモバイルアプリ開発 | 初心者向け |
| Flutterモバイルアプリ開発バイブル | 初心者～中級者向け |
「基礎から学ぶ Flutter」は、次のようなFlutter全般の基礎知識がまとめられています。
- Flutterの歴史からインストール方法
- Dartの基本的な文法解説
- Flutterのアーキテクチャー・ライブラリの使い方
この本には、初級者から実務レベルのFlutterエンジニアになるための知識が網羅的に解説されています。
「Flutter×Firebaseで始めるモバイルアプリ開発」は、AndoroidとiOSで動作するモバイルアプリ開発について書かれた入門書です。
AndroidとiOS上で動作する「貸し借りをメモするアプリ」の開発をとおして、実践的な学習ができます。
「Flutter モバイルアプリ開発バイブル」は、豊富なサンプルが魅力です。Flutter開発の始め方や、ライブラリの活用法、テストの仕方など実務レベルで有益な知識を解説している書籍です。
Flutterの基礎から開発後の運用までを解説しているため、開発の一連の流れを学べます。
今回紹介した本を含め、Flutter入門者におすすめの本を次の記事で解説しているので、ぜひ参考にしてください。
プログラミングスクールで学ぶ
挫折なくFlutterを活用したモバイルアプリ開発を学ぶなら、プログラミングスクールがおすすめです。
そもそも、モバイルアプリの開発に限らず、プログラミング学習の途中で挫折する独学者は多くいます。事実、弊社の調査では
- 不明点を聞ける環境になかった
- エラーが解決できなかった
- モチベーションが続かなかった
などの理由から、87.5%が「プログラミング学習で挫折や行き詰まりを感じた」と回答しています。
調査概要：プログラミング学習の挫折に関するアンケート
調査対象：10代〜80代の男女298名
調査期間：2019年8月13日~8月20日
調査方法：インターネット調査
掲載元：PR TIMES
また、こうした背景もあってか、弊社がプログラミングに興味がある人100名へ実施した別の調査では
- 確実にスキルを身につけられると思ったから
- 独学では不安がある
- 効率よく学べそう
などの理由から、61%が「プログラミングの勉強を始めるならスクールを選ぶ」と回答しています。
調査概要：プログラミングに興味がある方の意識調査
調査期間：2021/11/19~2021/12/3
対象者：プログラミング学習を検討している10代~50代の男女100名
調査媒体：クラウドワークス
掲載元：PR TIMES
加えて、プログラミングスクールの卒業生に「独学ではなくスクールを活用した理由」を聞いたところ「できるだけ短い期間でITエンジニアへの転職や副業に必要なスキルを身につけたかった」という回答も多く寄せられました。
上記から、1人でプログラミングスキルを習得できるか不安な人や短期間でスキルを習得したい人ほど確実性を求め、現役エンジニアといったプロの講師に質問できるプログラミングスクールを利用する傾向にあるのがわかります。
いざ独学でFlutterを活用したモバイルアプリ開発を学び始めても、勉強の最中に挫折しまっては学習にかけた時間を悔やむだけでなく「モバイルアプリの開発って思っていたよりも難しいんだな…」とスキルの習得自体を諦めかねません。
仮にわからないことを飛ばしながら勉強を進めたとしても、転職や副業などの目的を実現できるほどの実践的なスキルが身につかなければ、結局後悔することになります。
そこで、おすすめしたいのが「SAMURAI ENGINEER（侍エンジニア）」です。
| 料金 | 月分割4.098円~ |
| 実績 | ・累計指導実績4万5,000名以上 ・受講生の学習完了率98% ・受講生の転職成功率99% |
侍エンジニアをおすすめする最大の理由は「挫折しづらい学習環境」にあります。
先ほど述べたとおり、独学者の多くは自力で不明点やエラーを解決できないためにプログラミング学習を挫折しています。そのため、未経験者が現役エンジニアのようなプロに質問や相談できない状況で、モバイルアプリの開発スキルを習得するのは非常に難易度が高いといえます。
しかし、侍エンジニアでは
- 現役エンジニア講師によるマンツーマンレッスン
- 現役エンジニアに質問できるオンラインでのQ&Aサービス
- 不安や悩み・勉強の進み具合を相談できる学習コーチ
といったサポート体制を整えているため、学習中に出てきたわからないことや不明点をいつでも相談可能です。「受講生の学習完了率98%」という実績からも、侍エンジニアなら挫折しづらい環境でプログラミング学習を進められるといえます。
また、侍エンジニアではカウンセリングにて受講生一人ひとりの目的をヒアリングしたうえでカリキュラムを作成するため、限られた受講期間でもFlutterを活用したモバイルアプリの開発に必要なスキルだけを効率的に習得可能です。
最短距離で目的を実現できるようカリキュラムが組まれているため、勉強する順番や内容を誤り非効率に時間や手間を費やす心配もありません。
なぜ侍エンジニアが挫折せずFlutterを活用したモバイルアプリの開発スキルを習得できるのか気になる人はぜひ公式サイトをご覧ください。
公式サイトで詳細を見るまとめ
今回は、Flutter入門者向けに、Flutterの特徴や開発手順などを解説しました。
Flutterは、iOS・Androidの両方でモバイルアプリを開発できるツールです。Flutterはウィジェットやパッケージなど、便利機能も充実しているため、習得すれば活用の場はたくさんあります。
Flutterで使用するDartの難易度は低めであるため、プログラミング未経験者が学習するにもおすすめです。モバイルアプリ開発に興味がある人は、ぜひスキル習得にチャレンジしてみてください。
本記事の解説内容に関する補足事項
本記事はプログラミングやWebデザインなど、100種類以上の教材を制作・提供する「侍テラコヤ」、4万5,000名以上の累計指導実績を持つプログラミングスクール「侍エンジニア」を運営する株式会社SAMURAIが制作しています。
また、当メディア「侍エンジニアブログ」を運営する株式会社SAMURAIは「DX認定取得事業者」に、提供コースは「教育訓練給付制度の指定講座」に選定されており、プログラミングを中心としたITに関する正確な情報提供に努めております。
参考：SAMURAIが「DX認定取得事業者」に選定されました
記事制作の詳しい流れは「SAMURAI ENGINEER Blogのコンテンツ制作フロー」をご確認ください。
この記事の監修者
フルスタックエンジニア
音楽大学卒業後、15年間中高一貫進学校の音楽教師として勤務。40才のときからIT、WEB系の企業に勤務。livedoor（スーパーバイザー）、楽天株式会社（ディレクター）、アスキーソリューションズ（PM）などを経験。50歳の時より、専門学校でWEB・デザイン系の学科長として勤務の傍ら、副業としてフリーランス活動を開始。 2016年、株式会社SAMURAIのインストラクターを始め、その後フリーランスコースを創設。現在までに100名以上の指導を行い、未経験から活躍できるエンジニアを輩出している。また、フリーランスのノウハウを伝えるセミナーにも多数、登壇している。
