👏

Flutter公式チュートリアルをやった

2021/05/21に公開

やりました。
これはそのノートです。

https://zenn.dev/st43/scraps/1ead346aaf8174

導線がわかりづらい?

Flutterの公式ドキュメントは十分わかりやすいので、基本は公式中心に進めました。

https://flutter.dev/docs

ただチュートリアルまわりの導線はなんかわかりづらさを感じて、若干迷子になりました。
Get Started 1〜3を見て環境構築終わらせて、さあチュートリアルだ! となったときに、どう回ったらいいのかよくわかりませんでした。
(そもそも順番にやることを想定してないつくりなのかもしれませんが)

Get Started 4がチュートリアルPart 1なんですが、
Widgetの説明がないままどんどんチュートリアルが進んで、オイオイオイオイとなりました。

よく確認したら、GoogleのCodelabからの転載みたいですね。

https://flutter.dev/docs/development/ui/widgets-intro

↑こっちを最初にやるといいのかなと思いました。

また、Flutter公式ドキュメントのチュートリアル集があるんですが↓

https://flutter.dev/docs/reference/tutorials

内容的にはCodelabより難易度低いし、こっち先がいいんじゃない? と感じたりしました。
なんか歴史的経緯とか大企業故のしがらみとかあるのかもしれません。

個人的に推奨する導線

やってみた感想としては、この順にチュートリアルしてくのがいいかなと感じました。

Dartの基礎文法をさらっとおさえる
https://dart.dev/guides/language/language-tour

環境構築を終える
Get Started 1〜3

FlutterにおけるWidgetの概念を理解する
https://flutter.dev/docs/development/ui/widgets-intro

(tutorial part1)無限スクロールするListViewをつくって状態のあるWidgetをつくってみる
https://flutter.dev/docs/get-started/codelab

(tutorial part2)イベント処理、画面遷移を扱ってみる
https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2#0

さらに意欲的な学習者なら

https://flutter.dev/docs/reference/tutorials

をこなしてく。
ちなみに僕はtutorial part2までやって一週間使いました。
(一週間フルフルで時間使ったわけではありませんが)

Dartの基礎文法は、公式を見ていなくて、Qiitaの↓の記事を見ました。

https://qiita.com/teradonburi/items/913fb8c311b9f2bdb1dd

環境

Flutter開発はAndroid StudioかVSCodeかが二代派閥になるんですが、僕はVSCodeを使いました。

環境構築で時間食ったけど感動した

環境構築で結構時間使います。
といっても別に全プラットフォームを整備する必要はないんですが、せっかくなのでと思ってがんばりました。

フルでやると、iOS/Android/Web/MacOS(Windows,Linux)の4プラットフォームになります。
iOSは本職なので、さすがに環境あったので何もしなくてよかったんですが、Androidの開発環境は1から構築しました。
WebはChromeがあればOK、MacOSも特に何もインストールしなくてOKです。

MacOSはサイトにBeta!!! と書かれていたので、スルーでもいいかなと思っていたんですが、せっかくなのでやりたくなりました。
追加でインストールは不要なんですが、Flutter側の設定が色々あって、ちょっと時間食いました。

iOS/Android環境がない人だったら、Webだけでやるのが一番楽だと思います。
……が、それだとあんまりFlutterのうま味が感じられないと思うので、どっちかは入れるべきだと思います。

単一のコードベースでiOS/Android/Web/デスクトップ全部イケる、とは聞いていましたが、
実際に自分の手で全環境でビルドできると、デフォルトプロジェクトのアプリとはいえ、感動しました。
これがクロスプラットフォームかあ〜という感じ。

また、hot reloadも感動します。
デバッグ中に、コードをちょちょっと書き換えて、VSCode上で、⌘+Sを押すだけで、デバッグに修正が反映されるのは気持ちよかったです。

Dartはなんかちょっと

Dartもモダンな言語で、だいたいやりたいことはできるようになってると感じましたが、
母語がSwiftの僕からすると、記法がちょっとなあと感じたのが正直なところでした。

Flutterは武器になる

まだ僕はそこまで深く進んでないですが、高度な機能になると、Flutterだとまだ実現できなくて、
結局ネイティブアプリにするか、そこの実装を自分でライブラリつくらないといけないところはあるんだと思います。

ですが、オーソドックスなアプリだったら、もう正直Flutterでほぼイケるな、という感じはしました。
たとえば飲食店の注文アプリとか、小売のECアプリとか、アプリ自体はそんなに機能要らないから、むしろ保守コスト削りたいみたいなものであれば、Flutterを採用してもいい気がします。

また、個人開発ならまずFlutterを考える、というのは道理にかなっていると思います。
iOS開発・Android開発・Web開発(あとデスクトップアプリも)で、それぞれ最低限のアプリを提供できるようになるためには、
少なく見積もって1ジャンル3ヶ月くらい必要なので、9ヶ月くらいかかっちゃう(それでも早い)と思いますが、
Flutter習得すれば、Flutter習得に3ヶ月かかると見て、1/3の工数で実現できます。

そういう意味で、Flutterは武器になるなあと思います。

来週はFlutter使って、ビンゴゲームみたいなものをつくってみたいと思います。
まだ全然実装イメージ浮かんでませんが……

Discussion