
30時間で始めるFlutter
ここ最近、iOSエンジニア界隈ではFlutter(Googleによるクロスプラットフォームフレームワーク、iOS/Androidアプリを開発可能)がホットな技術になっています。
だいぶ前からFlutterに軸足を移しており、Mediumで積極的に情報発信をしている_monoさん、
なので、FlutterとFirebaseしかやらないマンになった( ´・‿・`)
— mono 🎯 @自宅 💙 (@_mono) January 20, 2020
(iOSネイティブ開発スキルや過去の様々な知見も活かしつつ)
もちろんその技術が廃れてきてヤバいと思ったらシュッと方向転換する前提だけど、そういう状況はなるべく避けたいので自分がしばらく安泰だろうと判断できたものを選んでる https://t.co/F4AB04TMjZ
KBOY君、
凡才の動画出しました。
— KBOY(プログラマー系YouTuber) (@kboy_silvergym) March 28, 2020
こう思っています。
Swift歴5年だけどもうFlutterだけで行こうと思います【プログラミング】【アプリ開発】 https://t.co/POrwZ0FTgr pic.twitter.com/fZEFIlS91t
業務でがっつりFlutterを触ってるはまぁさん、
Flutterの何がやべえって、記述量に対してのアウトプット、すなわち時間に対してのレバレッジが凄まじいことだな…
— 慰謝亮孔明 (@hummer) February 10, 2020
短時間の勉強で相当に作れちゃうこの感じは、中毒になる。
抱える課題のウェイトが
「どうやって作るか」
から
「何を作るべきか」
にどんどんシフトしてる。
まさにPoC向き。
個人開発の技術選定でFlutterを選んだ、普段は第一線でiOSエンジニアとして活躍する皆さんetc...
Flutterで個人開発1日目:
— su-🐈 | Flutter, 時々 iOS (@_sgr_ksmt) February 16, 2020
再出発ということで開発作業したらツイッターに進捗を貼るようにしてみようと思う。
今日は手始めにサインアップ機能を想定して初期画面→メイン画面を行き来できるところまで作った。
少ないコード量で実現できて感動した#すーのFlutter開発奮闘記 pic.twitter.com/2Bjd51mbTO
<1日目>
— Objective-ひろC🍜iOS / Flutter (@hirothings) January 26, 2020
今日から開始⏰
Udemyの課題でFlutter x Firebaseでチャットアプリを作った。まだ個人アプリのソースは一行も書いてない..。
ListViewのプロパティでreverse: trueにすると下から上にスクロールするリストがシュッと作れてすごい。#100日後にFlutterアプリ出すひろし pic.twitter.com/JYOfs6jXDY
Flutter製の新作アプリの実装が全て終わった!
— 文字数カウントメモ開発者🎉 takashi (@cloverkizuna) April 17, 2020
めちゃくちゃ嬉しい😂
あとはアプリの申請作業のみ💪✨
個人開発の新作です。Flutterで作りました。よかったら使ってみてください!
— moga🍳 (@_mogaming) February 4, 2020
レシピ管理アプリをつくった|mogaming @_mogaming #note https://t.co/bilvtnb1nN
先行者の皆さん👆による知見が溜まってきており、キャッチアップするには今ぐらいのタイミングが良さそうだったので、ゴールデンウィークに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にアップロードし、どこでも作業環境を復元できるようにしたので、これで心置きなく作業に入れます。
よっしゃ。
— 田畑 浩平@個人アプリがDomani掲載🎉 (@nerd0geek1) April 2, 2020
Android Studio本来の⌘↑と⌘↓を潰して、
Move Caret To Text Startと
Move Caret To Text Endを割り当ててやった。
これで、Xcodeと同じ感覚で使える。https://t.co/ez1E9YhZeY
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状態管理フローチャートを書いた( ´・‿・`)https://t.co/YS9wqexLtQ 周りを勉強する際に見通しが良くなるはず( ´・‿・`) pic.twitter.com/zCczrCEZJ6
— mono 🎯 @自宅 💙 (@_mono) September 8, 2019
僕もFlutterはぺーぺーなので、間違いのご指摘や良い資料など教えていただけるとありがたいです🙏
いいなと思ったら応援しよう!
