Flutter開発をマスターするための手引き 2022年版
はじめに
知っている人も少なくないが、FlutterはAndroid/iOS開発で最も注目を集めているフレームワークの１つである。モバイル開発に携わらないプログラマーでもFlutterが人気であることを見聞きしたことはあるのではないだろうか。
そこで、今回の記事ではFlutter開発をマスターするためのスキルや確認するべき情報源をまとめる。今回の記事を参考に、Flutterに興味を持ってくれる人が少しでも増えたら幸いである。
Flutter開発をマスターするのに必要なスキル
Visual Studio Code
FlutterはVisual Studio Codeで開発を進めるのが通例となっている。Flutterを学ぶ前に、必ずVisual Studio Codeをインストールし、基本的な使い方を十分にマスターしておこう。
Visual Studio Codeの基本的な使い方が十分にわからなければ、以下の記事を参考にしてほしい。
▼Visual Studio Codeの公式サイト
Dart言語
Dart言語はGoogleが開発したプログラミング言語である。FlutterはDart言語で開発されているので、FlutterをマスターするにはDart言語の基礎知識は必要不可欠だ。Dart言語の基本を理解していれば、Flutterをマスターするのに苦労することはないだろう。そうでなければ、以下の内容をDart言語を使った簡単なプログラムで実装できるようにしなければならない。
- データ型・変数
- 演算子
- 制御構文
- 関数
- クラス
- リスト
Map- 非同期通信
- JSON操作
Dart言語の基本を学ぶには、freeCodeCampが出している次の動画が参考になるだろう。2時間もある長尺の動画だが、リアルタイムでプログラムの挙動や書き方を学べる。Dart言語の基本を学ぶ上では絶対に確認してほしい。
日本語でDart言語の基本を学びたいなら以下の記事とZenn書籍がおすすめ。
Flutterの基本
最初に、Flutterの公式ドキュメント(以下のリンク)にアクセスして環境構築をする。
その後に、こちらの記事にあるTutorialsにあるサンプルを作ってみる。
上記のTutorialsで学べることは次の4つ。(Tutorials|Flutterから引用・翻訳)
- レイアウトの作り方：サンプルのスクリーンショットのレイアウトを作る。
- Flutterアプリに動きをつける方法"Build Layouts in Flutter"で作成したシンプルなレイアウトアプリを拡張して、アイコンをタップできるようにする。Widgetの状態管理方法について学べる。
- Flutterでアニメーションを実装する方法：Flutterで使われるアニメーションの基本的なパッケージを説明し、Flutterで実装できるアニメーションの作り方について学べる。
-
Flutterアプリケーションの国際化(
i18n)：Flutterアプリケーションを国際化する方法を学ぶ。国際化とは、簡単に言えばアプリケーションを様々な言語で利用できるようにすること。主に、アプリケーションがユーザの言語とフォーマット規則を使ってコンテンツを表示できるようにするウィジェットとクラスを通して説明される。
UI設計
FlutterにおいてUI設計はもっとも重要な要素の１つである。なぜなら、Flutterアプリケーションの開発はUI(簡単に言えば、ユーザから見える画面のこと)を基準に進めるからである。初心者の場合、見やすいあるいはわかりやすいUIがどのようなものなのかについて具体的にイメージするのは困難である。そこで、YouTubeで実際にどのようにしてUIを設計しているのかを確認しておこう。
一番有効な方法の一つとして、YouTubeでflutter app uiと検索して動画を探すことが考えられる。YouTubeにはリアルタイムでFlutterのUIを開発したり、設計の手順を説明したりしている動画(ライブコーディング)が多い。ところが、初心者はどの動画を見るべきかわからないと思うので、FlutterのUI設計の方法を学ぶ上でオススメの動画を以下に貼っておく。
FlutterでのUI設計でいちばん重要なことは、質が高いUIをひたすらまねすることである。要は、自分が作りたいと思ったUIを完コピすることが非常に重要である。UI設計に正解はないので、何回も何回もサンプルをコピペして習得していくしかない。
Firebase
ほとんどのケースで、FlutterのバックエンドとしてFirebaseが選択される。FirebaseはGoogleが提供しているクラウドサービスの１つだ。Firebaseを使うことで、アプリケーションに必要なサーバ上の機能を一から実装する手間が省けるのだ。
最初にマスターするべきことは、自分が開発したFlutterアプリケーションをFirebaseと連携させることである。FlutterとFirebaseを連携する方法を学びたいなら、以下の記事が参考になるので確認しておくといいだろう。
下記の動画は、FlutterとFirebaseを連携させてCRUD(create, read, update, deleteの頭文字を取ったもの)機能を実装する方法を丁寧に解説されている。FlutterとFirebaseを連携させてアプリケーションを開発したいなら必見である。
ほとんどの場合、Flutterでアプリケーションを開発するならFirebaseが採用される。Firebaseの基本的な知識や使い方を学んでおくといいだろう。Firebaseの公式ドキュメント等を活用して理解を深めてほしい。
Flutter Web
Flutterはモバイル開発に特化しているフレームワークであるものの、実はWebアプリを開発できるのだ。FlutterでWebアプリを開発する方法も学んでおきたい。
Flutter Webを学ぶ上で最も優先して取り組むべきことはレスポンシブデザインの制作である。レスポンシブデザインとは、様々な種類の機器(スマートフォンやPC、タブレット)や画面のサイズに１つのファイルで対応するデザインを意味する。
余談だが、今後のWeb開発においてレスポンシブデザインは避けて通れない。スマートフォンでブラウザの画面を開くユーザが急増している中、レスポンシブ対応がなければデバイスにあったレイアウトができずにユーザに違和感を与えてしまう。
Flutter Webでレスポンシブデザインを実装する方法を学ぶなら以下の記事がオススメである。(後日著者のZenn記事でも紹介する予定)
クローンアプリの開発
一通りFlutter開発の基本を学んだあとは、「クローンアプリ」を開発してみよう。クローンアプリとは、簡単に言えば有名なアプリケーション(AmazonやYouTube, Facebookなど)の仕組みやUIを模倣したアプリである。実務で開発されるアプリケーションはクローンアプリの開発にほぼ類似していることを行っている。
クローンアプリを開発する主なメリットは以下の通り。
- アプリケーション開発の手順を手を動かして学べる
- エラーの解決方法・効果的なUIデザインの設計を実例から学べる
- 自分が作りたいと思っているアプリの構造や仕組み、重要なポイントを学べる。作りたいアプリのイメージだけではなく、必要なスキルもセットで学べる。
クローンアプリを開発する上で確認しておきたいサンプルやリソースは以下の通り。
▲Flutterで開発されたTwitterアプリのクローン。
▲上記の２つのGitHubリポジトリはFlutterで開発されたTodoアプリ。
▲こちらの動画ではFlutterでFacebookのクローンアプリを開発する手順を徹底解説されている。
登録するべきYouTubeチャンネル
Flutter
Flutter公式が運営しているYouTubeチャンネル。Flutterに関するイベントの告知やFlutter開発で役立つWidgetをアニメーション形式で丁寧に解説されている。実務・学習関係なくFlutterに携わっているなら必見である。
The Flutter Way
FlutterアプリのUI設計の方法をライブコーディング形式で丁寧に解説されているYouTubeチャンネル。Flutter開発においてUI設計は非常に重要である。UI設計を学ぶなら本チャンネルは絶対に外せない。見やすいUI設計のコツがわからないならこのチャンネルの動画をいますぐチェックしよう。UI設計を最も効率的に学ぶ方法は上手なサンプルをコピペすることである。
Flutter Mapp
主にFlutter開発で必要なDart言語の基礎知識やFlutterのWidgetの設計方法を丁寧に解説されている。動画の尺もそこまで長くないので気軽に確認できる。Flutterのコーディングテクニックを上げたいプログラマーは全員必見。
CodeX
主にFlutter開発のテクニック(状態管理、API連携、FirebaseやUI設計)を徹底解説されているYouTubeチャンネル。ライブコーディング形式で丁寧に解説されているものが大半だが、動画の尺が1時間を下回るので気軽にFlutterを学習できる。
Flutterの基本を学び直したい、あるいはFlutterの知識を確実に定着したいなら必見のチャンネルである。
必見のGitHubリポジトリ・WEBサイト
詳細は以下の記事を参照。
上記の記事で紹介されているGitHubリポジトリ・WEBサイトの中で、特に優先して確認するべきものは以下の３つ。
おわりに
今回の記事では、初心者向けにFlutter開発をマスターするのに必要なスキルと学習に役立つサイト・YouTubeを紹介した。
【Flutter開発をマスターする上で必要なスキル】
- Visual Studio Code
- Dart言語
- Flutterの基本
- UI設計
- Firebase
- Flutter Web(レスポンシブデザイン)
- クローンアプリの開発
【Flutter開発で必ず登録するべきYouTubeチャンネル】
- Flutter
- The Flutter Way
- Flutter Mapp
- CodeX
【Flutter開発で確認するべきWebサイト・GitHubリポジトリ】
- awesome-flutter
- flutterawesome.com
- flutter_roadmap
本記事が読者の今後のFlutter学習・開発の質を向上させる際に参考になれば幸いである。
参考サイト
Discussion