【Vue.js+firebase】アプリ開発未経験者がTechTrain MISSIONに挑戦したので振り返る

こんな人に読んでほしい(検索で来た人向け)

・TechTrainのMISSIONやメンター制度について知りたい人

・アプリ開発初心者がVue.js+firebaseを勉強した流れについて知りたい人

・Progateやドットインストールなど、プログラミング未経験者向けの教材を一通りこなしたが、次に何をしたらいいか迷っている人

1. はじめに

こんにちは！辻野です。

今回はTechbowlさんが展開するオンラインインターンシップ「TechTrain」のうち、サイボウズさんが提供するMISSION『就活に便利！会社情報をみんなで共有しよう』に挑戦してみました。

現在まだ挑戦中ではありますが、一区切りとして本MISSIONへの取り組みを記事にしたいと思います（githubリポジトリはこちら）。

私自身について簡単に自己紹介をしますと、私は現在IT業界とは全く関係のない日系企業で正社員として働いている社会人です。

その傍ら、大学時代のプログラミング経験と、社会人以降の独学で得た知識をベースにして、副業として某ITベンチャーからデータ分析業務(言語はpython)に取り組んでいます。

ITエンジニアを自称していいのかどうか、すごく微妙な立ち位置にいる感じです（気になった方は是非、私のブログを読んでみてください）。

さて、今回私がTechTrainに参加しようと思った理由は、シンプルに「アプリ開発を経験してみたかったから」です。

そもそも私にとってはアプリ開発経験自体、本MISSIONが初めてでした。

参加時点では、Progateやドットインストール、Udemyで基本的なWeb系言語に触れたことはあるものの、なんらかの成果物を自力で作ったことはない、という段階にいました。

TechTrainは、

・大まかな成果物完成までの道筋を提示してくれる
・プロのエンジニアとコミュニケーションを取れるメンター制度がある
・学生に限らず、U30あれば社会人でも参加できる
・オンラインで完結でき、かつ自分のペースで進められるため、本業を抱えている社会人でも気軽に利用できる
・なのになぜか無料

などの理由から、自分にピッタリのサービスだと思い、参加させていただくことにしました

そんな私のMISSIONの振り返りが、誰かの役に立てばと思います（アドベントカレンダーという文化自体、今回初めて触れるのですが、こういう内容でいいのかな・・・？）

2.雛形を作りながら基礎学習

私が参加したサイボウズさんのMISSIONについて軽くおさらいすると、「就活生同士で会社情報を共有できるアプリを作成する」ことを目的としたものになります。

本MISSIONは、以下の９つのSTEPから構成されています。

STEP1. UIと画面遷移を設計しよう
STEP2. 対象プラットフォームや使用する言語を決めよう
STEP3. Firebaseを使えるようにしよう
STEP4. Cloud Firestoreに会社情報のサンプルデータを登録して画面に表示しよう
STEP5. 会社情報の一覧画面から詳細画面に遷移しよう
STEP6. Firebase Authenticationを用いてGoogleアカウントでサインアップ、ログイン、ログアウトしよう
STEP7. 会社情報を登録しよう
STEP8. 会社情報に対してコメントを投稿しよう
(STEP9. オプション機能にチャレンジしよう)

STEP8まで必須機能、STEP9は努力目標、といった感じです。

加えて、フロントエンドの言語（フレームワーク）選択は自由、サーバー側の処理はfirebaseを利用すること、となっておりました。

今回私は、Javascritは少し触れたことがあった経験から、Vue.jsをフロントエンドフレームワークとして選定しました。

もちろん、Javascritを少し触れたことがあるとはいってもほんの少しですし、何よりVue.jsに関しては完全に初心者です。そのため、まずは基礎の勉強から始める必要がありました。

ただ今回は、教科書的なものから一歩ずつ進めるやり方ではなく、「コピペでもなんでもいいから、とにかく動くもの作る」ことを優先させました

理由としては、後ほどメンター制度を利用することを考えた際「知識はそこそこ身につけましたが、まだ何も作っていません」という状態よりも「中身はよくわかってませんが、とりあえずこんなもの作ってみました」という状態の方が、目的物が具体化されている分、相談や質問がしやすくなるかな？と考えたからです。

（今振り返っても、この判断は正しかったように思います）

成果物の雛形作りにあたり、

・Vue+firebaseのアプリ開発について、初心者向けの解説がなされている
・完成品が本MISSIONの内容にかなり合致している

という理由から、こちらのnoteを参考にしました。

『Vue.jsとFirebaseで、noteライクなSNSアプリを5時間で作ろう！』

このnote記事は、

・Vue-cliによる開発環境構築とVue-cliの大まかな仕組み
・Firebaseの初期設定
・Googleアカウントでのサインアップ、ログイン、ログアウト機能の実装
・ユーザー投稿機能の実装
・Hostingの方法

など、今回のMISSIONで必要とされる知識を一通り学習できる教材でした。

後半部分の閲覧するためには¥500が必要ですが、「Vue.js+firebaseでとりあえず動くものを作りたい」という需要には答えてくれる記事でしたので、¥500分の価値はあったかなと思います。

コピペ箇所を間違えるなどの初歩的なミスにつまづきながらも、まずは無事に成果物の雛形が完成しました。この時点で ”成果物上は” 本MISSIONで示すところのSTEP7まで進めたことになります。

もちろん、かなりの部分をコピペで進めたため、中身を十分に理解できていたわけではありません。それでも、「Vueって機能が簡単に変えられて楽しいなー」「firebaseを使うとログイン機能がすごい簡単に実装できるなー」という、アプリ開発の全体像をざっくりと把握することはできました。

3.コメント機能実装でSTEP8までクリア

さて、STEP8のコメント機能さえ実装すれば必須機能は完成、という段階まで来れました。

しかし、Vueやfirebaseについての基礎知識が曖昧な状態では、先のnote記事には含まれない”新しい機能”の追加は、自力ではできそうにありませんでした（特にVue.js）

そのため、ここで初めてVue.jsの体系的な学習を始めることにしました。何らかの書籍を教科書として決めても良かったのですが、今回はこちらを使用しました。

『Vue.js + Firebaseで作るシングルページアプリケーション』
『Vue JS 入門決定版！jQuery を使わない Web 開発 - 導入からアプリケーション開発まで体系的に動画で学ぶ』

Udemyで評価の高かった、Vue.jsの講座です。

定価は1~2万円くらいする動画教材なのですが、私が買ったときは偶々セール中で90%OFF（すごい）で売られていました。試しに二つ購入してみましたが、どちらもとても分かりやすい内容だったため、Vue初学者の方はどちらを買ってもいいかと思います。

上記のUdemy教材で一からVueを学び、自身の成果物の仕組みについてそれなりに理解ができた時点で、真の意味でSTEP7までクリアできたかな、と感じました。

その後、コメント機能の実装には Firebase Cloud Firestore の「サブコレクション」の概念についても理解する必要がありましたが、その際には下記のqiitaの記事が参考になりました。同じところでつまづいている人は読んでみてください。

『Firebase Cloud Firestoreの使い方』

ここまでで、STEP8、すなわち「必須の機能」と定義しているものまでは完成させることができました。

4.メンター制度を利用

さて、ここからメンター制度の話です。最低限のMISSION課題はクリアしていましたが、よりアプリの完成度を高めるために、メンター制度を利用することにしました。

これまでは「○○の機能を追加するためにはどうしたらよいか」という、答えが明確に存在する課題について取り組んできた印象がありました。そのため、独学でも十分に進めることができました。

しかしながら、

・どんな機能が追加であったら便利か
・良いUI/UXデザインとは何か

といったような、必ずしも答えが一様に定まらないオープンなクエスチョンについては、最前線の現場で経験を積んできたプロのエンジニアの方に直接お聞きする方がいいかな、と思いました

正直、最初はzoomの使い方すら怪しい状態だったので、初利用は緊張しました笑。主にWebフロントを担当しているメンター何名かにお話を伺わせてもらったのですが、全体的な印象として、

「メンターみんな知識量ヤバすぎ！」

でした（もちろん良い意味で）

メンター制度は、1回30分の制限があります。限られた時間を有効に活用するためにも、「ざっくり見てもらって何か感想ください」というふわっとした相談ではなく「○○について困っているのですが、どうしたらいいですか」という、答えが明確に返ってきそうな質問を事前に用意しておくことを心がけていました

しかし、実際にメンターの方とお話をすると、こちらが用意した質問以上の情報や知見を得ることができました。1質問すると10返ってくるイメージです。

こちらのQに対してAを返すだけでなく「この周辺の知識が必要な時は、このサイトを参考にした方がいい」など、私が後々の勉強がしやすくなるようなサポートまでしていただきました。

それに加え、「実際の開発の現場ではこのような進め方をする」など、現役のエンジニアだからこそ語れる内容についても、お聞きすることができました。

魚を与えるのではなく、魚の釣り方を教える、という態度を徹底しているメンターが多いと感じました。

同時に「メンター制度、もっと早くから使っておけばよかったかも」とも思いました。

今回私にとって、本MISSIONが初めてのアプリ開発でした。「何もかも分からないので一から教えてください！」という態度は、さすがに指導を受ける側としては不適切だと思い「まずは一人できるところまではやってみよう」という思いで、MISSIONを進めてきました。

もちろん、その考え自体が間違っていたとは思いません。「メンターの方の仰っている言葉の意味すら分からない」という状態には陥らなかったのは、基礎の基礎を独学で固めたおかげだったとは思います。

ただ、もう少しフランクに利用してみてもよかったかもしれません。自分一人で教材片手に勉強するのとは比べものにならないスピードで知識を吸収できると感じました

どのメンターの皆さん気さくに相談に乗ってくださった上、こちらがうまく言葉にできない疑問についても、先回りして答えをくれる印象でした（多分、初心者がつまづく箇所はだいたい同じなので、こちらが悩んでいることを経験的に読めるのかもしれません）

なぜこのサービスが無料なの？と思えるくらいです。

失礼な言い方にはなりますが、「やっぱプロのエンジニアは違う」という、至極当たり前の事実を、改めて認識した次第です。

私のようなガチガチの初心者に限らず、「歴の浅い経験者」であっても、得るものは多いサービスかと思います。

5.最後に

以上、MISSION振り返りでした。

まだまだMISSIONの完成度アップは続けていく予定です。今後はメンター制度ももっと積極的に活用していく所存です。

この記事を機に、一人でもプログラミング初学者がTechTrainに参加してくれるのであれば、投稿者冥利につきます。