Flutterでスマホアプリ作成の道のり｜必要な情報まとめ
自分が欲しいスマホアプリがない。。
そこで、自作するかと自主学習がてらスマホアプリ作ることにしました。
ここでは、スマホアプリをflutterで作るまでの勉強の道のりを残しています。
◆
すごく丁寧には説明しておりません。
だがしかし
迷えるスマホアプリ開発民に、迷いなきFlutterアプリ開発をと記録しています。
flutter選ぶの前提だけどね。
メモアプリが作れるレベルまでの道のりとして、所要時間とともに書き残しています。
html5+css+jsとかゲロ吐きそうって人には、悪くないかなと思ってます。htmlとかもやってるけど、アプリ屋はアプリ屋で良い感じですよ。一見の価値なし？
10時間くらい触ってみた所感
スマホつないでアプリテストしたり、ホットリロード早いなと感じたりと、そこそこ作りやすそうな印象は受け始めました。
不安な所としては、ライブラリまわりですかね。
例えば、グーグルドライブ連携したいとかしたときに、楽に繋げられるライブラリをGitとかでサクッと持ってこれるの？とか。ライブラリなかったら詰みそうだなってことですね。
pythonやってる時は、
「あれやりたいな…」→「楽できるライブラリ探そう」→「見つけた！」→「ちゃちゃっとGitでダウンロード」→「とりこんでサクッと連携」
こんなことが出来ていたので、楽するライブラリのすごさを享受できなかったらと一抹の不安は残っています。
20時間くらい触ってみた所感
・楽にスマホアプリ作れるように整備されていると感じる
・C＋＋言語プログラマでも、比較的とっつきやすい
・ホットリロードすげー
一時期、jsフレームワークとかも少し習ってましたが、こっちの方が個人レベルでは作りやすいんじゃないかなと感じます。
結論：個人でやるなら学習コスト低めなflutterという選択肢はあり。
DART言語っていっても、他と対して変わらないのですしね。
苦手な表現のコードが出てきた、自分が飲み込みやすいコードに変換する方法とかメモっておくと困ることもすくなくなってきました。（アロー関数を多用してるコード見ると寒気がするとか）
ライブラリまわりでは、まだ困っていないですね。
1.Flutterを選んだ理由（所要時間：調査で2時間）
アンドロイドでもアイフォンでも動くスマホアプリを学習コスト低めで作りたかったから。
DART言語は確かに現時点でマイナーですが、Googleがフクシアという次期OSでもDARTをサポートしようとしている動きをみるに、しばらくは使えそうな言語だと分かったから。
あとは、最近のjsフレームワークによるWebアプリ開発とは見てると、htmlいったり、cssいったり、jsいじったりとなんだか好きになれない。
こんな理由から、Flutterを選んでみました。
あと
ついでに、これを読んだところ
「たくろーーよ。お前にはネイティブ言語は高尚すぎる。心折れる前にやめとけって書いてました。」
React Nativeを回避した判断材料にもなりました。感謝。
◆
スマホ作りたいと思ってから、Flutterがなんだかんだで良さそうだなと判断できるまで、２時間くらい調べました。
一応、私のプロフィール
・10年前はC++をゴリゴリ触っていたプログラマ
・現在はITインフラ専門なので、とっくに非プログラマ
・HTMLやCSSはWordPressでいじる程度には少し知識あり
・jsフレームワークはちょっと習ってみたけど、なんだか好きになれなかった
こんな人はFlutterも選択肢の一つにしていいかもしれません。
2.Flutterの開発環境に必要なモノ
最低限必要なモノは以下でした。
本当はもっと、高機能なPCが良いけどテスト用のスマホがあるとギリギリなんとかなります。
・Win10の端末(Core i5、4GMem、128GB SSD）…SurfacePro3
・テスト用のアンドロイドスマホ
・Win10端末とスマホをつなぐUSBケーブル（充電ケーブル代用可能）
テスト用のスマホがないとPC側で、スマホエミュレータを起動してテストすることになります。
このスマホエミュレータがくそ重いです。
スマホエミュレータでやるなら、10GBメモリはないと普通に動かないんじゃないかと正直思いました。4GMemでもきつめですが、SSDなのでそこそこサクサク動いてくれています。
3.いざ、Flutter環境セットアップ（所要時間：３０分～４時間）
セットアップ自体は30分とかで出来ますが、そこからHello Worldを自分のスマホに表示するまで、3時間以上かかりました。
（十分なスペックがある端末をお持ちの場合は左程時間かかりません。）
環境セットアップに参考にしたサイトはこちら
ダウンロードするのは、Flutter開発モジュール群とアンドロイドSDKの2つ。
①Flutter開発モジュール群は、Flutter公式サイト（https://flutter.dev/docs/get-started/install）より入手
②アンドロイドSDK入手
（https://developer.android.com/studio/index.html）より入手
上記をもとにまずは”Hello World”まで頑張る。
補足）プロキシ環境におけるアンドロイドスタジオ環境構築
別な環境で同じ開発環境を作ろうとしたら、ドハマりしました。
プロキシ環境ではファイルいじったりしないとビルドすらできませんでした。
参考サイト：http://www.takemisousaku.com/?p=1200
4.Flutterの仕組みの超入門レベル（所要時間：３０分）
Flutterを習うには、まずDART言語からやってるのではスピード感が悪すぎるので、”Hello World”できたら以下のページを元にウィジェットを並べてみることにした。
ウィジェットとは、ボタンとかテキストとかを入れる箱もしくは、ボタンなどのアイテムそのものという作りになっている。
箱の中にアイテムを配置して、アクションを作ってという風に開発していく。以下をざっくり20分程度流し読みしてみると感じがなんとなくだけど分かった気がする。
5.試しにテキストウィジェット配置（所要時間：３０分）
実は、今回作りたいのはスマホで動くエディタソフトです。
自分用のかゆいところに手が届くエディタが欲しくて作ることにしました。
そんな訳でさっそく、デモのコードを編集してテキストウィジェットを配置
6.まずはヘッダーメニューを実装（所要時間：１時間）
サンプルにそって、appbar()の中身を以下のように修正しました。
// ボタン設定
actions: <Widget>[
// １つ目のボタン
IconButton(
// 設定画像アイコン利用
icon: Icon(Icons.settings),
// ボタン押したときのアクション
onPressed: () {
// Pressed Action
},
),
// ２つ目のボタン
IconButton(
// メニュー画像アイコン利用
icon: Icon(Icons.menu),
// ボタンを押したときのアクション
onPressed: () {
// Pressed Action
},
),
]appbar関数内にサンプルのように記述すればそれなりに動いてくれます。
ヘッダーの左側にメニューが出てくるサンプル記事を探したら、見つけました。
どうにか、作りたいヘッダーメニューは作れたがAppBarの仕様がイマイチ分からなかった。
7.リファレンスがちゃんとあった（所要時間：１５分）
しっかりしたリファレンスがないか探したらありました。
AppBarの更新でたまたま作りたいメニューそのままのプログラムが落ちていたから今回はどうにか実装できた。
でも、サンプルにありつけなかったら
ちゃんとリファレンスがありました。
8.Web上でエミュレータ動作確認が可能（素晴らしい）★★★（所要時間：１５分）
リファレンスのページでそのまま簡単な動作確認ができることが分かった。簡単な動作ならここで確認するのが良さそうです。
Webでちょっとだけ確認したいときとか、本当に便利ですよね。
出先でも一部分のコードだけ書いて、家戻ったら実装なんてこともできてしまいます。
例えば、AppBarの時のリファレンスページ
リファレンスを読んでみて感じたこと
やっぱりサンプルプログラムないかな…？プロパティとか１つずつ動作を確認しながらアタリを見つけて実装していくスタイルも最後は必要になってくるのは知ってます。
でも、やっぱりサンプルプログラムを見つけてそれを咀嚼しながら体得していく方が楽そうだな
素直にそう感じました。ちゃんとわかっている人のプログラムから色々勉強になるし……これ意外と大事ですよね。
ということで、
作りたいアプリの要素が入っているサンプルを探しました。
今回でいくと、メモアプリなので探せばありそうです。
ありました。
ご丁寧にGitHUBにも公開していただいており、感謝しかありません。
9.本格的にコーディングに入る前にステートレスとステートフル（所要時間：１５分）
flutterはウィジェットで組んでいくんだなー・・・っていうのは
だんだんと分かってきましたが
はじめに触ったデモアプリでステートレスとかステートフルって出てきました。
プログラム組めれば文句ないやろって疎かにしていましたが
flutterの仕組みの根源的な部分であるので、念のため理解
こちらのサイトに丁寧な説明がありました。
まとめると
・flutterアプリはウィジェットで構成される（知ってるよ！）
・大きくウィジェットは２種類
・ステートレスとステートフル
・ステートレスは静的なウィジェット（一回定義したら変わらないタイトルとかそういう感じ）→★つまり軽量ウィジェット
・ステートフルは動的に変われるウィジェット→★使い方によっては重くなったりする
・つまりステートレスにできるものはステートレスにすべし
こんな感じでした。
10.flutterアプリの基本的な作りを理解（所要時間：３０分）
いきなりsetstateとか出てきて、なんだろうー…丁寧に教えてもらえるWeb記事とかありませんか？
と探してみたらありました。
flutterって基本的な作りはこうなってるんだね。
この枠組にそって実装すればいいのね。
と理解できました。
11.メモサンプルアプリをいじり（所要時間：１０時間）
いくつかのサンプルアプリをいじりながら、気付いた事があります。
リファレンス読みながら実装したら、圧倒的に遅かったな…と
10年前にゴリゴリのプログラマやってた時も、他の人のコードみながら開発もスタートして必死こいて遅れないように頑張ってたこと思い出しました。
こっちの方が資格の本見ながら勉強するより、成果が早く出ます。
そして最終的には、体系的な知識を覚えるという意味で本などでまんべんなく知識をつけていったほうがいいです。
とは言っても、Flutterに良い本があるようには思えないので
サンプルとリファレンスで地道に力つける
そうした方がよさそうです。
他人のコードを参考にする理由は２つあります。
理由①：すでにあっちこっち迷った後にスマートにコーディングされたコードがあるので楽。
理由②：大体は正常動作するので、必要な所を参考にどんどん情報が集められます。
とりあえず、自分専用のライティングアプリが作りたいので以下を参考にしました。
先駆者様。ありがたや。ありがたや。
◆
ここで、人のコードを読むときの注意点
レガシープログラマはモダンなソースコードを見ると、うげーーーって来ます。日々すこしずつ読めるようにすると多少楽な気がします。
後は、イケイケなプログラマとの差に落ち込まないことが大事かな！！
人は人。自分は自分！
12.いざ欲しいアプリの設計と実装（所要時間：２０時間）
テスト込みでやく、２０時間くらいかかりそうです。
今はここをやっています。
13.サンプルアプリにない機能だけリファレンスと格闘（所要時間：１０時間）
サンプル学習で得られなかった部分を最後に加えていきます。
これは、まだ未実装ですが後に書き加えていきます。
東京ぷらぷら、ぷらリーマン いつの間にか2児のパパ 【借金が見つかってからの夫婦の情景】や【実際に金欠に役立だった事】を書いてます。なんだかんだで、人の役に立つのが好きですが、 根っこは他力本願でぼけーーっ♨︎としたい。本業 ITインフラ屋さん