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

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

そのアプリがこちらです↓↓
FamilyMeal　〜ステキな食事を公開しよう〜
<img width="525" alt="スクリーンショット 2020-08-01 12.53.17.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/408813/4351015d-5f1b-bf39-278b-cb33916badcc.png">

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から勉強を始めました。

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

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

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

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

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

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

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

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

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

オススメのFlutterのYouTube

speed code系

- https://www.youtube.com/channel/UCJm7i4g4z7ZGcJA_HKHLCVw
- https://www.youtube.com/channel/UC6Dy0rQ6zDnQuHQ1EeErGUA

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

- [KBOYのFlutter大学](https://www.youtube.com/channel/UCReuARgZI-BFjioA8KBpjsw)

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

- https://note.com/heavenosk/n/n245b72973600
- https://www.flutter-study.dev/introduction/about-flutter/

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

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

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

## Flutterを学習の最初の段階に使うことのメリット
なぜ、Flutterを使い始めてから僕がいきなり成長できたのか？？

結論
**Widgetが扱いやすい**

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

Widgetについて詳しく書かれた記事
[[Flutter]Widgetとは①（Flutterではほぼ全てがWidget！）](https://minpro.net/flutter-everything-is-a-widget)



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

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


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

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

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

- [Flutterの公式YouTube](https://www.youtube.com/channel/UCwXdFgeE9KYzlDdR7TG9cMw)の「Widget of the Week」というシリーズ
- [Flutter公式ドキュメントの「Widget catalog」](https://flutter.dev/docs/development/ui/widgets)
- [Flutter開発する前に知っておきたい35のWidget一覧](https://qiita.com/coka__01/items/dedb569f6357f1b503fd)





#あの時とは違う意味での自信喪失
これなら自分でも何か作れるんじゃないかなと思い自分でアプリ作ってみようと思いました。

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

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

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

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

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

#最後に
自分は、[KBOYのFlutter大学](https://kboy-salon.com/)と言うオンラインサロンに所属しています！！
そこでたくさんの人と交流でき毎日勉強になることばかりです。

そのことについては YouTubeで発信しているのでよかったら見てください
- [ふらっとFlutter大学](https://www.youtube.com/channel/UCR87z9l0GT_6V0-y7rTtoTg)