はじめに

初めまして、seiboyです！
先日、エンジニア未経験の自分が
Flutterを使って初めてのアプリをリリースする事ができました。

そのアプリがこちらです↓↓
FamilyMeal　〜ステキな食事を公開しよう〜

iOS
https://apps.apple.com/jp/app/familymeal/id1522986648
Android
https://play.google.com/store/apps/details?id=net.sei.weight

このアプリは、Flutterを勉強し初めて1ヶ月で作る事ができました。
このアプリの詳しい説明はまた次の投稿でします。

今回は、
プログラミング学習で挫折していた僕がFlutterと出会ってプログラミングに希望を感じられた理由について話させてもらいます。

誰しも訪れであろう諦めムード

プログラミングの勉強を始めたばかりで全然分からずに
「いつまで経っても上達しないのじゃないか」、「自分には向いてないのではないか」など
不安を感じてしまっている人が多いのではないかと思います。

もちろん自分もそんな風に感じていた一人です。

そんな僕が、Flutterに出会ってプログラミングに対するアプローチを変えれば1ヶ月でアプリを作る事ができました

その時の心境、考え方の変化についてシェアさせてもらいたいと思います。
これを機に、プログラミング学習に限界を感じている人たちが勇気をもってもらえると嬉しいです！

HTML,CSS学習での失敗談

自分はまず初めに王道とも言えるHTML,CSSから勉強を始めました。

その時の勉強方法は以下のような流れ出始めました。

Progateでまず網羅的に学習
Udemyで写経したり、ハンバーガーメニューを作って見たりとにかく写経
それらを活かして、JavaScriptも交えつつ今あるウェブサイトをコピーする作業

結論
こんなやり方で自分は挫折しました。
具体的には、サンプルコードなしで、ウェブサイトのコピーを作るところで挫折しました。

その理由を後になってから分析してみました。

Progateや写経では、サンプルもアウトプットも用意されていて思考停止でコードを書いていた
そこで書いたコードを暗記しようとしていた
いきなりサンプルがなくなると何をしていいか分からなっていた
問題が起きたときに、サンプル以外のことができないから対応力が皆無だった

そんな感じで勉強進めていたんですが、案の定目標の成果物はいつまで経っても出来上がらずにだんだん自分のモチベーションも下がっていきました。

そしていつしか
「はあ、今日もやらなくちゃ」なんて思いながらパソコンを開くようになってました。

今、思うといつ挫折してもおかしくないような状態でしたww

Flutterとの出会い

そんな僕の価値観を変えてくれたのがFlutterです！
YouTubeでたまたま海外の人がFlutterのSpeed Codeをしているのを見て
UIがどんどん積み上がっていくのを見て、「おおお、すげぇ楽しそう」って思ったし直感的にできそうだなって思いFlutterの勉強を始めました。

オススメのFlutterのYouTube

speed code系

解説付きで基礎から学なぶなら

KBOYのFlutter大学

Flutterの詳しい説明が書かれた記事

それからガラリと変わった勉強方法

それから学習方法はガラリと変わったのですが
具体的には次のように取り組むようになりました。

- Youtubeの真似をして自分も同じものを作ってみる。（写経）
- そのとき使ったもの（widget)をWebで調べてどんどんいじって違うものを作ってみる。（応用）
- 使えるものが増えてきたらそれを応用してアプリの画面を真似して作ってみたり、少し変えてみたりしてみる（サンプルコードなしで）
- それをある程度したら自分のアプリを作り始めました。

HTML,CSSを勉強している時と大きく変わったのがサンプルで書いてあるものを積極的に応用していったことです。真似して作ったものを応用することで、要件に柔軟に対応できる対応力が身につきました。そうやって身に付けた対応力が、比較的早く初めてのアプリを作り切れた要因になったと思います。

Flutterを学習の最初の段階に使うことのメリット

なぜ、Flutterを使い始めてから僕がいきなり成長できたのか？？

結論
Widgetが扱いやすい

Widgetとは
Flutterアプリの「見た目に関わる部分」を構成する部品（パーツ）
のことです。

Widgetについて詳しく書かれた記事
[Flutter]Widgetとは①（Flutterではほぼ全てがWidget！）

このWidgetが非常に豊富に用意されており、あらゆる状態に適したWidgetが用意されているので、このWidgetを使いこなせればアプリの見た目を自由に作ることができます。

そこで僕は、色んなWidgetを使いこなすために以下の手順で訓練しました。
1. ますはサンプルコードを引っ張ってきてシュミレータで動かす。
2. その中で使ったWidgetについて、公式ドキュメントやWeb記事で調べて応用していく

ただこれをひたすら繰り返しました。そうするとだんだん使いこなせるようになってきたし、ドキュメントを読む事にも慣れてきて課題解決能力の向上にもつながりました。
これを繰り返すと、Widgetが遊び道具と錯覚するほど楽しくなっていました。

皆さんも沢山のWidgetに触れて引き出しを増やしてってください！

Widgetが沢山紹介されているサイトやYouTube紹介しときます

Flutterの公式YouTubeの「Widget of the Week」というシリーズ
Flutter公式ドキュメントの「Widget catalog」
Flutter開発する前に知っておきたい35のWidget一覧

あの時とは違う意味での自信喪失

これなら自分でも何か作れるんじゃないかなと思い自分でアプリ作ってみようと思いました。

そんな感じでノリノリで個人アプリ開発を進めたわけですが、、、
もちろんそんな一朝一夕にうまくいく訳はなく、サンプルがあってそれを動かすのとは違って一から自分で要件定義から設計実装は悩まされる事が多く学んでも学んでも無限に学ぶ事が出てくるような状態でした。

そこで自分まだまだだなと思い一瞬伸びた鼻はすぐにへし折れましたww

しかし、この挫折はプログラミングを始めた頃の挫折とは全然違う心境です。
今はできない事が出てくると嬉しくて飛びつくように課題に取り組むような状態です！！

そして最近は、自分で課題見つけるより働いて他のできる人たちと仕事する方が勉強になるのではないかなと思い現在転職活動中です。

このようにFlutterに出会った事がきっかけでここまで心境が変化しました。

最後に

自分は、KBOYのFlutter大学と言うオンラインサロンに所属しています！！
そこでたくさんの人と交流でき毎日勉強になることばかりです。

そのことについては YouTubeで発信しているのでよかったら見てください
- ふらっとFlutter大学

HTML,CSSで挫折した僕が、Flutterで初めてのアプリをリリースできた理由