【初学者から中級者へ】Vue.js + Firebaseで作るマッチング＆チャットアプリ【個人開発】


Hello World！

独学10ヶ月程度でまだまだ未熟な自分ですが、
今回Vue.jsとfirebaseで
マッチング＆チャットWebアプリを開発できたので初投稿します。

https://vue-zangeapp.web.app/

教会での懺悔をイメージとして、
「友達や家族には言いづらいけど、誰かに話を聞いて欲しい人」と
「誰かの話を聞いて人の役に立ちたい人」
をなるべく現実の会話に近い形で実現するよう、開発しました。

ソースコードは下記です。
https://github.com/Kuroneko-mayuge/public_zanngeapp

開発期間は主に土日の空いた時間での作業のため、約2ヶ月となります。
今回の開発を通じて強く思った事などを書いていこうと思います。

#目次
- [主な対象](#主な対象)
- [この記事の目的](#この記事の目的)
- [本文](#本文)
 - [1.アイディアが最も重要](#1アイディアが最も重要)
 - [2.仲間がいるといい](#2仲間がいるといい)
 - [3.設計はしっかり！！！！！](#3設計はしっかり！！！！！)
 - [4.技術書を読もう](#4技術書を読もう)
 - [5.ミニマムから始める](#5ミニマムから始める)
- [まとめ](#まとめ)

#主な対象
・勉強を始めて半年程で、次に何をすればいいか迷う方
・昔の自分

#この記事の目的
- 昔の自分のように、CRUDやフレームワーク開発などひと通り基礎は理解したが、
次に何をどう作ればいいか迷う方へ1つの参考情報を残すため
- アプリの公開と振り返り

※この記事では技術的な事には触れません。要望があるか、気が向いたら投稿します。
※あくまで個人の見解です。

#本文

##1.アイディアが最も重要
開発期間中、最もやる気に関わるもの...それは当たり前と言えば当たり前ですが、
「何を作るか」という目標でした。
ここが弱い場合、いつか努力を続ける事が難しくなっていくと思っています。

今回の開発での主な目標は、1つの物をとりあえず作り、そしてこの記事を書き終えることでした。
それでも開発期間中に何度も自分の中で襲ってくるのは、

「こんな物を作って何のためになるんだろう？？」

という悪魔の囁きでした。
***「誰の何の役に立ちたいのか？」「これまでにあるサービスと何が違うから良いのか？」***
が明確である程、開発モチベーションは高く維持できるはずです。
初学者でできる事が限られていますが、
この軸は何度振り返って考えてもいいほど、重要だったと感じています。


##2.仲間がいるといい
ここもモチベーションに大きく関わりました。
今回、メインの開発は筆者ですが、
友人にも手伝ってもらいながら共同開発しました。
作業分担という意味以上に、
「独りではない」意味は余りに大きいと思います。


##3.設計はしっかり！！！！！
「コードを書きたい！」という欲求を何回も我慢し、
時間が許す限り、考えをクリアにして形にする時間に使うべきでした。
今回かなり意識しましたが、それでも足りませんでした。
100％想定通りに開発できる事はほぼないと思うので、
どれくらい変更の影響を少なくするか、が大事なんでしょうね。。

それでも初学者なのでそもそも何がどう動くのか分からない、
触ってみないとイメージがつかない、アーキテクチャ？と考える気持ちは分かります。
時として小さい単位で試してみる事は必要かもしれません。

その場合、絶対に変わらないであろう単位の物から作っていく事がお勧めです。
また、ワイヤーフレーム（画面の完成絵図）が重要だと思いました。
そこが完全にはっきり描けていれば、やるべき事や実装すべき機能は自ずと見えてくるのではないでしょうか。
Draw.ioを使用して2時間程で大体作成できました。
![Wireframe.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/795935/a37e7c71-e469-a395-fb3d-0c0c3d42a668.png)

具体的な話で言うと、最低限自分が必要だと思ったのは、

- なるべく機能ごとにコンポーネントを分ける事を意識する
- データの流れ（どんなデータをどのように扱うのか？）は必ずはっきりさせる
- コードは変数や定数や関数でまとめて、後で直しやすいように心がける

です。（3つにまとめましたが、本当はもっともっと反省点があります）

##4.技術書を読もう
専門の、人気の技術書をなるべく読むべきだと思います。
難しい事やオリジナルの事をしようと思う程、基礎への理解度が大きく響いてきました。
時間の制約があったり、どうしても理解できなかったりで、妥協は止む無しですが、
最終的には技術書によって基礎を理解すべきだと思います。（自戒を込めて）

今回の開発にあたっては[javascript本格入門](https://www.amazon.co.jp/%E6%94%B9%E8%A8%82%E6%96%B0%E7%89%88JavaScript%E6%9C%AC%E6%A0%BC%E5%85%A5%E9%96%80-%E3%83%A2%E3%83%80%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%AB%E3%81%AB%E3%82%88%E3%82%8B%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E7%8F%BE%E5%A0%B4%E3%81%A7%E3%81%AE%E5%BF%9C%E7%94%A8%E3%81%BE%E3%81%A7-%E5%B1%B1%E7%94%B0-%E7%A5%A5%E5%AF%9B/dp/477418411X)や[Vue.js入門](https://www.amazon.co.jp/Vue-js%E5%85%A5%E9%96%80-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%AE%9F%E8%B7%B5%E3%82%A2%E3%83%97%E3%83%AA%E3%82%B1%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E9%96%8B%E7%99%BA%E3%81%BE%E3%81%A7-%E5%B7%9D%E5%8F%A3-%E5%92%8C%E4%B9%9F/dp/4297100916/ref=sr_1_2?adgrpid=52896342363&dchild=1&gclid=Cj0KCQjwxNT8BRD9ARIsAJ8S5xafcEKMWpGXfxqrohmabC0pQo_z92vkuRxDnE578PWR8PjJLXA0UiUaAtxPEALw_wcB&hvadid=338546846359&hvdev=c&hvlocphy=1009303&hvnetw=g&hvqmt=e&hvrand=13086792736030444217&hvtargid=aud-1005806016232%3Akwd-572585848075&hydadcr=15818_11177340&jp-ad-ap=0&keywords=vuejs+%E5%85%A5%E9%96%80&qid=1603610140&sr=8-2&tag=googhydr-22)を多用しました。
firebaseは公式ドキュメントを何度も読み直していました。
順番としては、

1:Udemyで外縁を何となくイメージ
2:技術書を読んで基礎を改めて理解しつつ着手
3:分からない部分や独自機能はQiitaなどを参照

大まかに上記の流れで、分からない部分は2や3を何回も往復していました。


##5.ミニマムから始める
周りの凄いように見える人達に影響され過ぎず、
自分が今やるべき最も小さな単位の事を、1つずつこなしていきましょう。
これは、非常に自分向けの言葉でもあります。

目標の話で言うと
「とりあえずアプリを1つデプロイする」や
「記事を書いてみる」などです。

もっと具体的には
「チャットの機能を実装したコンポーネントを作ってみよう」や
「firestoreにデータを保存してみよう」
「3秒止める同期処理を書いてみよう」などです。
小さい機能単位で始めるのが個人的にはやりやすい進め方でした。
また、開発の途中で見つけた微妙なバグ、後で追加したい機能、デザイン
などはとりあえずリスト化して可視化するだけでも、
ゴールが見えるので良いかと思いました。



#まとめ

1. まずアイディアを考えて、それに1~2ヶ月の時間を費やせるか？確信できるまで磨く
2. 友達を誘って意見を聞いてみる（高評価だととても自信が湧く！）
3. とりあえず画面の絵を描く　設計をしっかり考える　やっぱり設計をしっかり考える
4. 動画→本→記事のサイクルで深く理解しながら進める
5. 辛くなっても1歩1歩進める。小さい機能単位で始める。

そして、楽しむために始めた事を忘れない！諦めない！！！
長文に最後までお付き合いいただき、ありがとうございました。