未経験のプログラミング学習者の君も「100時間」で初級ミッション達成だ！！

みなさん、お久しぶりです！高専からAPUへ編入したなんちゃんです。

この記事は僕がTechbowlさんのTechTrainというサービスを利用し、ミッション開始から完了までの記録をまとめたものになります。
これから、未経験でプログラミングを始めたい方は「サービスを作るのにどれくらいの時間がかかるんだろう。。」だったり、「自分はアウトドア派だからずっとパソコンと向き合い続けられるか不安だ。。」などの気持ちがあると思います。
そんな、未経験からでもプログラミングを楽しく始められる参考記事になればと良いと思い、この記事を作っております！
※ちなみに100時間は未経験者を想定しております。現役エンジニアの方に初級のミッションをどのくらいで終わるかと聞くと「頑張ったら2日で終わるよ！」と聞いた時は絶望しました（笑）

※TechTrainとは
U30エンジニア向けの有名企業のエンジニアから実務が学べるオンラインコミュニティ　詳細はこちら

全体像（100H)

まずミッション開始からミッション完了までは4つのフェーズに分かれております。前半は少し頑張らないといけないパートで、後半はめちゃめちゃ楽しいパートになります。実感として、フェーズ２までを乗り越えると、一気にプログラミングをしている気分になります。最低でも50時間はプログラミングを楽しむにはかかるかと思いますが、それを乗り越えたらもうめちゃめちゃ楽しいです！！プログラミング未経験者は是非フェーズ２を乗り越えることを目標に頑張ってください！！
（前半：50H）
フェーズ１[目安：30h]は0からのプログラミング言語を教材などで学び、実際に自分で手を動かして教材を参考にプログラミングしていく段階です。
フェーズ２[目安：20h]は実際のミッションの条件にしたがって、仕様書通りにコーディングしていく。ここで、ミッションと全く同じ教材があるわけではないので、教材しか真似してこなかった場合、どうしたら良いか混乱する時期に入ります。また、この辺からだんだんと辛くなってきたりもします。そんな時は是非、「なぜ自分はエンジニアになりたいのか」や「どんなエンジニアになりたいのか」思い出したり、改めて考えたりすることをお勧めします。ぜひ、辛くなったら一度立ち止まってプログラミング初日の高揚を思い出してみてください。一気にモチベーションが回復しますよ！
（後半：50H）
フェーズ３[目安：40h]は一度教材のことは忘れて、ミッションの仕様書通りにUI設計から始める段階です。ある程度、教材を真似したことで全体像を掴めるようになっていると思うので、自分なりに画面設計をしやすくなっていることに気づきます。自分なりにシステムの画面設計ができたら、あとはそれを自分の選択した言語で公式ドキュメントを参考にコーディングしていきます。だいたい、コーディングのパターンが決まっているため、１つの画面設計ができると残りの画面も時間さえ確保できればサクサクとコーディングできると思います。そして、全ての仕様書通りの機能実装が完了したらここで一度、ミッションの評価をしてもらいましょう。
フェーズ４[目安：10h]はメンターからミッションの修正箇所を直すのみです。そしたら、再度ミッションの評価をしてもらい、ミッション完了になります！！

以下ではもっと詳しく各フェーズに何をしたかについて書いております。ただし、言語は自分の好きなものを選んで挑戦することをお勧めします！

[参考]
ミッション：「就活に便利！会社情報をみんなで共有しよう」by サイボウズ
使用した言語：Vue.js　（Vue CLI 3.6.0、Vue.js 2.6.11、Vuetify 2.0）
教材：Udemy (Vue.js + Firebaseで作るシングルページアプリケーション)
4つの成長段階（形成期・混乱期・標準期・達成期）の参考URL

フェーズ１（形成期）目安時間：30H

○このフェーズのポイント
・教材を一通り学ぼう
・教材をGitHub上にプッシュしながら、手を動かして真似して書いてみよう

まずはミッションを自分で決めましょう。随時ミッションは追加されているため、現在は色々なミッションがあるのできっと迷われると思います。なので、一度キャリアアドバイザーの方と面談をすることをお勧めいたします。自分の思考性やキャリアに合ったミッションを一緒に探してくれます！！

ミッションが決まったら、そのミッションで使う言語を学べる教材を探しましょう。プログラミング未経験者の場合、無駄に言語の勉強に時間を使ってしまう可能性があるのでここはミッションで扱う言語に精通しているエンジニアの方と面談して、教材を選ぶと良いかもです。巷ではいろんなプログラミング学習サイトが流行っていますが、一番の勉強は自分でプロダクトを作ってみることに限るので何個か教材を決めたらメンターの方に相談してみましょう。また、メンターは自分で好きに面談予約ができるのでメンター情報を確認しながら、面談予約を進めましょう。何より、メンターを使わずにあまり効率的ではない独学法で始めるのは避けたいところですね。面談予約などにはルールがあるので以下の使い方を参照してみてください。
※TechTrainの使い方について　

[自分の場合　フェーズ１(面談４回＋作業時間：３０H)]
1日目 2/12 面談(おざまささん) => サイボウズのミッションに決定！！
2日目 2/13 (7h) Udemy教材
3日目 2/14 (4h) Udemy教材=> 面談(吉野さん：Vue.jsの学習について)、面談(外松さん：サイボウズミッションの進め方について)
※現在は1日に2回以上の面談予約はできなくなっております。
4日目 2/17 (5h) GitHubにソースを上げて、ミッション開始！ Vue-CLI、Vuetify、Vue-routerについて理解する、面談(おざまささん)
5日目 2/18 (7h) Vuex、Firebase Authentication、FirestoreのCRUDについて
6日目 2/19 (7h) ミッション完成予定だった。(笑）
未実装：一覧表示の文字制限とコメント機能

フェーズ２（混乱期）目安時間：20H

○このフェーズのポイント
・公式ドキュメントを読もう
・ミッションの仕様書で求められる機能を再度確認しよう。

フェーズ１では0からプログラミング言語を勉強し、自分で教材を参考にGitHubにソースコードをプッシュしながら開発する感覚が新鮮で、凄く頑張れたと思います。しかしながら、普段ずっと机の上でパソコンと向き合うことに慣れていないため、かなりの疲労感を感じる人もいるかもしれません。でも、安心してください。僕も頭ばっかり使うと心を使わなさすぎて、少し辛くなったので（笑）人は心を使わないとワクワクしなくなって、何のためにプログラミングをしているのだろうっていう時期が来たりもします。プログラミングが初心者に挫折しやすい理由も分かりますね。教材をなぞるだけなら、達成感もあって楽しいですが、いざ自分でコーディングし始めると雰囲気でコードを書いてしまい、エラーが多発。そして、訳が分からず挫折。
「もう、プログラミングしたくない、、、」そんな気持ちになった時は、いっそのこと遊びましょう。（笑）心がやりたくないって言っているのに無理やり頭で「やらなければ！！」と思い込むことは良くありませんし、効率的ではないんです。たまに、頭ではやらないといけないってわかってはいるんだけどやれないっていうことありませんか？それは頭と心の不一致問題が発生しているお知らせです！！！今すぐ心が思っているやりたいことに従いましょう。意外と遠回りのようで近道だったりするんです。

そして、心に余裕を取り戻せたら、ここで一度「なぜ自分はプログラミングをやってるんだろう」と振り返ってみましょう。ミッションを始めた頃はキャリアアドバイザーとともに「〜のためにミッションをやる！！！」と高いモチベーションで始めたことでしょう。しかしながら、心は頭と違って高いモチベーションを記憶することはできないのです。だから、ふと立ち止まってもう一回思い出してみましょう。きっと、また高いモチベーションが取り戻せると思います！！もし、この「なぜ今自分はプログラミングをやっているのだろう？」を問いかけずにいると、グダグダと時間を過ごしてしまい、エンジニアになる道から遠ざかってしまいます、、、。

ちなみに、自分の場合は「とにかく就活で見せられる自分の作った成果物を作るんだ！」というモチベーションでやっていました。誰でも一度は自分のサービスを0から作ってみたいものですよね。「きっと成果物を作った自分は自信に溢れていることだろう！」と想像してモチベを上げていました。

[自分の場合　フェーズ２(面談２回＋作業時間：２０H)]
7日目 2/21 (2.5h) 公式ドキュメント(Vuetify2.0)をとにかく読む
8日目 2/22 (3.5h) なぜエンジニアになりたいか考える
9日目 2/23 (3h) どんなエンジニアになりたいか考える
10日目 2/24 (3.5h) エンジニアとしてのキャリアを固める。
11日目 2/26 (4h) 公式ドキュメント(Cloud Firestore)を徹底的に読む
12日目 2/28 (3.5h) ミッションで求められる機能が教材とは違い混乱。
13日目 3/2 面談(外松さん：ミッションで求められる機能の再確認）
14 日目 3/3 面談(おざまささん：エンジニアキャリア面談）

フェーズ３（標準期）目安時間：40H

○このフェーズでのポイント
・教材のことは一旦忘れ、自分なりに紙にUI設計をしてみよう。
・公式ドキュメントを元にUI設計をコーディングしよう。

さて、ここまでで教材を通して言語を学習し、自分で実際にコーディングをして来たと思います。しかしながら、教材で学んだ機能をそのまま雰囲気で使っている場合、ミッションで求められる機能を実現できていない場合があります。こうなると、さあパニックです。雰囲気で機能を使っていたものだから、どこを修正したらいいかも分からず混乱します。そんな時に、大切なのが公式ドキュメントをしっかり読むことになってくるんですね。機能自体を知らないと使いこなせないのも当然なんですがね。（後々わかって来ます）
例えば自転車でも動画編集ツールでもそのモノ自体にどんな機能が備わっているのか説明書を読まないと使いこなせないというのは日常生活においても一緒ですよね。その感覚です。まずはモノの構造を知り、それから自分なりにいろんな機能を少しずつアレンジして使いましょう。

では、フェーズ３になりますが、ここでは一旦教材のことは忘れましょう。

教材から入るとどうしても教材の機能を使いたくなってしまいます。ですが、それでは自信を持って自分のサービスだと名乗ることはできませんよね？ なので、ミッションで実現したいことを紙に設計していきましょう。いきなりUI設計をしろと言われると、どうしたらいいか分からないんですが、一度フェーズ１で教材を通してサービスを真似して作っているため、ある程度の画面レイアウトはイメージしやすくなっていると思います。思いっきり、自分のクリエイティビティを発揮しちゃってください！！！

[自分の場合　フェーズ３(面談１回＋作業時間：４０H)]
15日目 3/4 (7.5h) Firestoreでマルチユーザがデータベース参照できる構造に変更（この部分が教材ではシングルユーザーのみの参照だったため混乱した）
16日目 3/5 (6.5h) 全てのUI設計を紙に書いてシステムのイメージを作る、3/5の実装を完了（会社一覧、レビュー一覧、レビュー新規追加）
17日目 3/6 (3h) Vuetifyの機能を色々試してみる
18日目 3/8 (3h) 4/5 実装完了（詳細画面）
19日目 3/9 (3h) 5/5 実装中（コメント機能）
20日目 3/10 (2h) 5/5 実装完了（コメント機能 ）バグ１：ページ遷移する度にVuexのstoreの配列にデータが追加される問題、バグ２：データを追加してもブラウザの更新をしないとデータが反映されない
21日目 3/12 (5h) バグ１の修正、削除機能追加
22日目 3/13 (10h) 細かいバグとデザインの修正、面談(外松さん：メンタージャッジメント）アドバイス＝＞Vuexのstoreのstateの情報がすぐに反映されるように修正しよう（まさにバグ２を残したままだったため、同様の箇所を指摘される）

フェーズ４（達成期）目安時間：10H

いよいよ、完成目前ですね。このフェーズ４では主にメンタージャッジメントにてメンターの方からアドバイスをもらった修正箇所を修正します。

[自分の場合　フェーズ４（面談１回＋作業時間：１０H)]
23日目 3/25 (9h) バグ２の修正
24日目 3/26 (1h) デプロイ、面談(外松さん：再メンタージャッジメント）

ミッションを終えて

お恥ずかしながら、高専卒ながらも自分で一からサービスを作った経験をしたことがなかったため、これまで自信を持ってプログラミングをできるとは言えませんでした。（高専では卓球一筋人間でした。）ですが、TechTrainさんに出会ってミッションを始めてから、日々Twitter上で同じく駆け出しエンジニアとして頑張る人から刺激をもらったり、Techbowlの方々の応援をもらったりしながらサービスを開発する経験は非常にモチベーションを高く保つことができ、一から自分でサービスを開発し、デプロイまで経験できたことはこれからの開発を進めていく上で第一歩の自信に繋がりました！！
本当に感謝です！おざまささん、スーさんありがとうございました！！
また、サイボウズで実際にエンジニアをされている外松さんをメンターとすることができたのもTechTrainならではの特権ではないでしょうか。
外松さん本当に貴重なお時間頂きありがとうございました！

以下にはプログラミングをこれまで挫折したことがある方も、これからするかもしれない方も僕のミッション完了までのいろんな気持ちの移り変わりを表してますので、決して自分はエンジニアに向いていないんだと諦めないでください。エンジニアはこれからさらに魅力的な職種になっていきます。
一緒に世界に通用する日本の優秀なエンジニアを目指しましょう！

おまけ（ミッション開始ー終了の間の行動や気持ち）

※実際にプログラミングをした日は太字のところです。
どれだけ、いろんなことに手を出しているかがよく分かりますね！！（笑）
是非みなさんもプログラミング以外の色んなことに手を出した時、なんちゃんも出してたからいっか！と早めに開き直り、なんちゃんよりは早くミッション完成したろ！って感じでぜひやり遂げる経験をしてみてくださいね！
事実、僕みたいにYouTubeを始めなかったらちょうど1ヶ月くらいで絶対ミッション完了するんで！！（笑）
何かをやり遂げると自信につながり、さらに次の開発がしたくなりますから！（僕は同じサービスをiOS版でやることにしました！）

[2/12-2/19(第１フェーズ)本気でミッション一週間完了を目指した模様]
2/12　Techbowl代表のおざまささんと初面談！
2/13　Udemyの教材でビデオ視聴
2/14　Udemyの教材一周終える。吉野さん、外松さんと面談。
別府から東京へ向かう。
2/15　サポーターズ逆求人イベント
2/16　逆求人イベントを終えて、自分がエンジニアに向いていないのではないかと不安になり、少しエンジニアになりたくない気持ちが出てしまう。
その結果、おざまささんとの面談を急遽キャンセル（笑）
2/17　しかし、一晩寝て考えるとやっぱりエンジニアになりたい気持ちが出てくる。急遽、面談取り消しを無くしてもらい面談してもらう（笑）
Vue-CLI、GitHub、Vuetify、Vue-routerなど教材で出てきたわからない言葉を一つ一つ理解する学習をする。
2/18　Vuex、Firebase、Firestore、CRUDなどまたまた分からない言葉を理解することに徹する。
2/19　この日はミッションの成功定義を一週間以内に終えるとした最終日だが、完全に工数の見積もりが甘く完全に撃沈。ミッション完了はそう甘くないと実感する。

[2/20-3/3(第２フェーズ)せっかくだから東京満喫したい欲があった模様]
2/20　いきなりぶっ続けでパソコンと向き合い続けた生活をしたため、リフレッシュをしたくなる。久しぶりに感情を使うため、クラブへGO。
2/21　公式ドキュメント読むことを始め、エンジニア特有の公式ドキュメントの読む感覚に感動する。この日もクラブへGO。女の子とデートする。
2/22　なぜエンジニアに？どんなエンジニアになりたいのか考え始める。
2/23　同じ大学の友達と東京観光。おとといの女の子と再びデートする。
2/24　エンジニアとしてのキャリアが固まる。美容院でリフレッシュ。
2/25　Type就活の合説と初社長メシ
2/26　公式ドキュメントを読む。2回目の社長メシ
2/27　東京観光と３、４回と昼・夜で社長メシ
2/28　Firestoreの公式ドキュメントを読むがわけわかめ状態。発熱の疑い
2/29　発熱、夢の中で40度の熱を浴びる、急遽大分に帰ることを決める。
3/1　大分帰省し、休養を優先する（コロナではないことを祈る）
3/2　体調はすっかり元気になって一安心。早速、外松さんと面談する。
3/3　おざまささんと海外のエンジニアになるためのキャリア相談をする。

[3/4-3/14(第３フェーズ)再びモチベーションが高まり、再開した模様]
3/4　マルチユーザーのデータ構造ができて感動する。公式ドキュメント読んだかいがあった。
3/5　５つの画面設計を紙に書いて、そのうち３つの画面設計をコーディングし、Firestoreからデータ表示まで完了する。
3/6　友達と卓球。
3/7　サポーターズ逆求人イベント
3/8　４つ目の画面設計を完了。
3/9　５つ目の画面設計開始。コメント機能の部分。
3/10　５つ目の画面設計完了。バグが２つほど見つかる。
3/11　友達と卓球。「面白い」になぜかはまってしまう。この辺でYouTubeで「面白い」を発信しようと決意する。
3/12　バグの１つを解決し、削除機能を追加
3/13　10時間のバグやデザイン修正後、初のメンタージャッジメント！もう一つのバグを指摘され、一発でミッション完了とはならず。考えが甘い。
3/14　サポーターズ主催　技育祭

[3/15-3/26(第４フェーズ)ミッション完了気分 修正を後回しにした模様]
3/15　YouTube撮影
3/16　友達と卓球。YouTube初動画投稿。サムネ考えるのに時間がかかる。
3/17　「面白い」のネタ探し　東洋思想とか西洋思想とか。
3/18　「面白い」のネタ探し　中田敦彦のYouTube大学にハマる。
3/19　YouTube動画撮影。中田敦彦のYouTube大学
3/20　YouTube動画編集、２本目の動画投稿。中田敦彦のYouTube大学
3/21　サポーターズ逆求人イベント
3/22　教養勉強中。中田敦彦のYouTube大学
3/23　教養勉強中。中田敦彦のYouTube大学
3/24　一日中情報収集する（ソフトバンクやコロナ関連）　しかし、いくらインプットをしても意味がないことが分かる。そのため、これ以降不要不急のインプットを辞めた。
3/25　そろそろ、ミッションの修正をしないとやばいと思い、9時間かけてバグ２を修正する。すごい疲れたのは久しぶりにコードを読んだからかな。
3/26　デプロイをあっけなく終わらせ、ミッション完了。