見出し画像

30時間で始めるFlutter

田畑浩平 | Flutter Engineer

ここ最近、iOSエンジニア界隈ではFlutter(Googleによるクロスプラットフォームフレームワーク、iOS/Androidアプリを開発可能)がホットな技術になっています。

だいぶ前からFlutterに軸足を移しており、Mediumで積極的に情報発信をしている_monoさん、

KBOY君、

業務でがっつりFlutterを触ってるはまぁさん、

個人開発の技術選定でFlutterを選んだ、普段は第一線でiOSエンジニアとして活躍する皆さんetc...

先行者の皆さん👆による知見が溜まってきており、キャッチアップするには今ぐらいのタイミングが良さそうだったので、ゴールデンウィークにFlutterを始めてみました。

Flutterの学習については、_monoさんがFlutterの効率良い学び方という記事を公開されているので、それに従い、Flutterの勉強を進めてみました。

👆を参考に、実際にやった内容は以下の通りです。
(☆付きはオススメ、これだけやれば30時間くらいで終わる)
1. Android Studioのショートカットキーの変更(7.75h)
2. ☆Flutter公式のiOSエンジニア向けドキュメントの読み込み(3.0h)
3. Flutter公式のチュートリアルの消化(11.0h)
4. ☆Flutterチームによるチュートリアル@Udacityの消化(前半)(6.75h)
5. ☆Dartの文法をサラッと流し読み(5.0h)
6. ☆Dartのガイドラインを流し読み(前半)(1.25h)
7. ☆Flutterチームによるチュートリアル@Udacityの消化(後半)(16.75h)

開発未経験の人はKBOY君のFlutter大学が良いかもしれません。
(Flutterについて初心者向けに情報発信しているエンジニアは、KBOY君くらいしかいなさそう、_monoさんの記事はプログラミング経験者&英語のリーディング・ヒアリングできることが前提の教材が多く、開発未経験者にはハードルが高い)

1. ショートカットキーの変更(7.75h)

普段、Xcodeでの開発に慣れており、Android Studioのショートカットが手になじまなかったので、👇などを参考に自分が使いやすいようにプロジェクト設定やショートカットの設定を書き換えました。

書き換えた設定ファイル(keymapのxml)をGitHubにアップロードし、どこでも作業環境を復元できるようにしたので、これで心置きなく作業に入れます。

2. Flutter for iOS developers(3.0h)

Flutter for iOS developersは、Flutter公式によるiOSエンジニア向けの資料で、iOSエンジニアがiOSの知識とFlutterの概念を結びつけやすいように、iOSネイティブの概念とFlutterの概念を対応させて説明してくれています。
(例：FlutterのWidget = iOSネイティブのUIView / UIViewController)

そのため、目を通しておくと、ふわっとですがイメージしやすくなるので。おすすめです。
(iOS以外にもAndroid / React Native / web / Xamarinエンジニア向けのドキュメントも用意されています。)

3. チュートリアル(11.0h)

なんとなくではありますが、👆でイメージはついたので、Flutter公式のチュートリアルを手を動かしながら進めていきます。

・レイアウトの実装
・インタラクションの実装
・アニメーションの実装
・多言語対応についての説明

が用意されているので、本当に初歩の初歩、Hello worldくらいはできるようになります。
ただ、4. のUdacityのLesson1👇でも同様の内容を学習でき、そちらの説明のほうが全体感を把握しやすくわかりやすいので、そちらを見るのであれば、こちらはやらない、もしくはそちらを消化してからアニメーションの実装と多言語対応の部分だけ読むでも良いかなと思います。

4. Build Native Mobile Apps with Flutter Lesson1
(6.75h)

GoogleのFlutterチームの方々によるチュートリアル動画です。
Lesson1では
・Flutterのメリット
・環境構築からプロジェクト作成、アプリのビルド
・StatelessWidgetの説明
・StatefulWidgetの説明
・CustomWidgetの作成
・画面遷移の実装
が動画でわかりやすく説明されているので、Flutter公式サイトのチュートリアルよりわかりやすいんじゃないかと思います。
(英語が早いので、そこだけ苦労するかもですが)

5. A Tour of the Dart Language & DartPad(5.0h)

4. 👆に続けてLesson2を始める前に、このあたりでDartの文法を固めておきます。
こちら👇の方のオススメにしたがい、Dartの言語仕様を読みながら、気になる内容はDartPadで実行していきます。

A tour of the Dart language(Dart公式)

DartPad(Dartの実行環境)

言語仕様をおおよそ把握し、「ああいう書き方できたような気がする」くらいを目指してやっていきます。

6. Effective Dart(1.25h)

言語仕様をなんとなく把握したので、次はEffective Dartを読み、Dartらしい書き方について学んでいきます。

Overview / Style / Documentationあたりまで読めば良いんじゃないかと思います(UsageとDesignはある程度経験溜まってからのほうが効率良さそう)。

スキマ時間に...👉Widget of the Week

 5. A tour of the Dart languageと6. Effective DartでDartについての知識は増やしたので、Widget of the Weekを見てWidgetについての知識を増やしていきます。

Widget of the WeekはFlutterチームによる動画で、1分程度で1つのWidgetをコンパクトに説明してくれています(動画は現時点では80本ほどあります)。

集中的に勉強できないタイミングや、何かをしながらの流し見に良さそうです。

7. Building Interactive Apps(16.75h)

ここまででDartの文法、Widgetの知識をある程度増やせたので、Udacityのチュートリアル後半を片付けていきます。

穴埋めが多かった前半とは違い、ゴリゴリに実装していくことになるので、
適宜material libraryなどでpropertyなどを参照しながら進めていきます。

後半では
・インタラクションの実装
・Responsive Designへの対応
・ライブラリの取り込み
・アセットの読み込み
・API呼び出し
・エラーハンドリング

などが取り上げられており、Flutterでの基本的実装について、一通り学べるようになっていました。

まとめ

ここまでで、Flutterの超初歩 はわかるようになったので、
・Google Codelabs
・Cookbook - flutter.dev
あたりを読みつつ、_monoさんが👇のツイートで言及している状態管理周りも並行して勉強していくのがFlutterの習熟には良さそうです。
それらと並行してFlutterでアプリをいくつか実装してみて、実際の開発で遭遇する問題への対応経験を積んでおけば、個人開発でもFlutterを使えるようになりそうです。

僕もFlutterはぺーぺーなので、間違いのご指摘や良い資料など教えていただけるとありがたいです🙏


サポートする代わりに個人開発はじめましょ！ iOS👇 https://developer.apple.com/jp/support/enrollment/ Android👇 https://play.google.com/apps/publish/signup/