自己紹介
はじめまして em0 と申します。今回初投稿となりますが、Vue.js と Firebase について知識ゼロから開発を始め、約一か月でとりあえず動く Web アプリが完成しました。
せっかくなので初心者が学んでいく上での知見を残すとともに、突っ込みを頂けましたら今後の開発に生かして良いサービスへと発展させていきたいと考えております。
よろしくお願いいたします。
どんなアプリを作ったか
「JobQuest」という SNS 風の求人サービスを開発しました。
https://jquest.jp
学生時代、日雇いのアルバイトをするためにいくつかバイト探しのサイトに登録していたのですが、登録するのが手間であったり、希望の仕事を見つけ、働き、お金を得るという一連のフローにスピード感がなかったりと一定の敷居があるため気軽に仕事を探すのが難しいなあと感じていました。
また推測ですが、職探しをする側がこれだけ大変なのだから募集する側はあれやこれや申請する必要があったりとさらに大変なのではないかとも考えました。
それならばもっと皆が気軽に仕事を探せたり、募集出来たりするサービスがあったら便利かもしれない。
そう！まるで店舗に張り付けてあるアルバイト募集の張り紙のように！
とにかくシンプルに、まるで SNS をするような感覚でコミュニケーションを行えるような環境を提供できればという考えから Twitter や Instagram のような見た目を目指しました。
老若男女問わず、だれでも参加できるように動作もシンプルです。
ざっくりとですが以下のようなフローになっています。
- 【募集者】募集を投稿する ⇒ タイムラインに投稿が表示される
【参加者】希望の投稿を発見 ⇒ 詳細ページから参加希望を行う、募集者へ通知
【募集者】参加者のプロフィールを確認して承認 ⇒ チャットルームを作成して打ち合わせ、作業を行う。
【参加者】参加している募集の期限が来ると終了の通知がくるので、募集者の評価を行う。参加者には募集者があらかじめ設定しておいた評価数が、募集者には参加者からの評価数が届きプロフィールに反映される。
単なる SNS になってしまっては募集の品質を判断できなくなると思い、募集が終了した際に双方評価が行われる仕組みになっています。
プロフィールの評価数+過去の参加履歴からその人がどんな人か推測することで最低限の採用判断基準となるかなと考えています。
開発時期
2019/9/30 ~ 2019/11/5(現在も機能追加中)
開発人数
自分ひとりです。昨年新卒で入社した企業が IT 会社とは名ばかりでほぼ開発ゼロ、ギャップを感じて転職を決意し、何か技術を身に着けようと考え、学生時代のアルバイトで Web ページ作成を行った経験からフロントエンドに興味を持ち Vue.js を学習しようと思いました。
ただ・・・経験があった（WordpressでWebページ作成)だったので、基本的なHTML+CSSと本当に少しばかりのJavascriptの知識しかなく最初はフロントエンドエンジニア？なにそれの状態でした。
終業後の残業時間や休日に 1~2h/日程度でコツコツ開発に取り組んでいき、少しずつ知識が身についていった結果、なんとか動くものが作れるようになったかなというのが現状です。約1か月の内訳として、
最初の 1 週間程度は書籍やドキュメントの選定、（後ほど載せます）写経生活。
2 週目からはやりながら慣れろの精神でとにかく Qiita 等のチュートリアル記事を読みながら写経しつつ自身のアプリケーションの形に落とし込んでいきました。
使用技術
Vue.js
本アプリのメイン。書籍を読んで概念をつかんだらすぐにwebpackを構築して開発に移りました。内容が非常に豊富で、覚えてからよりも覚えながらのほうが効率が良いと感じたためです。実際、都度調べながら動かしていくとスッと使い方がなじむものが多かった気がします。
-
参考にした本、ドキュメント、サイト
- 基礎から学ぶ Vue.js https://www.amazon.co.jp/%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E5%AD%A6%E3%81%B6-Vue-js-mio/dp/4863542453/ref=sr_1_3?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=vue.js&qid=1572947490&sr=8-3
- 速習 Vue.js 速習シリーズ Kindle 版 https://www.amazon.co.jp/%E9%80%9F%E7%BF%92Vue-js-%E9%80%9F%E7%BF%92%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E5%B1%B1%E7%94%B0%E7%A5%A5%E5%AF%9B-ebook/dp/B07BS62Z94/ref=sr_1_7?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=vue.js&qid=1572947490&sr=8-7
- 公式ドキュメント
Firebase
これがとにかく一番扱いに苦労しました・・・ドキュメントが不足しているのと自身が全く触れたことがない分野でとにかく写経してコツをつかむようにしました。
-
参考にした本、ドキュメント、サイト
- 改訂新版 Vue.js と Firebase で作るミニ Web サービス (技術の泉シリーズ（NextPublishing）) Kindle 版 https://www.amazon.co.jp/%E6%94%B9%E8%A8%82%E6%96%B0%E7%89%88-Vue-js%E3%81%A8Firebase%E3%81%A7%E4%BD%9C%E3%82%8B%E3%83%9F%E3%83%8BWeb%E3%82%B5%E3%83%BC%E3%83%93%E3%82%B9-%E6%8A%80%E8%A1%93%E6%9B%B8%E5%85%B8%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA%EF%BC%88NextPublishing%EF%BC%89-%E6%B8%A1%E9%82%8A-%E9%81%94%E6%98%8E-ebook/dp/B07HXMHQQK/ref=sr_1_2?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&keywords=firebase&qid=1572947610&sr=8-2
- 公式ドキュメント
- https://qiita.com/subaru44k/items/a88e638333b8d5cc29f2#%E5%8D%98%E4%B8%80%E3%81%AE%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E5%8F%96%E5%BE%97 ※非常に詳細に書かれていて常に開いてました！（笑）
Vuetify
アプリを見てもらえれば分かりますが恥ずかしいくらいVuetify便りです。もう少しオリジナリティを入れるのが今後の課題かもしれません・・・でも本当にわかりやすくて便利なのでとりあえず動かしたい！って時には非常におススメです。
-
参考にした本、ドキュメント、サイト
- 公式ドキュメント
苦労した点
- とにかく時間がなかった
終業後の時間に会社に残るかマクドにこもって開発を行い、開発をできない通勤・退勤時の電車でひたすらバグがないか操作してチェック。次の日にそれらを修正して機能追加、・・・のループの日々。夜寝ないと集中力がなくなってしまう性分なので限られた時間でなんとか作業時間を確保しようと切り詰めた生活を送っていました。
- Firebaseの特殊性
NoSQLに触るのも初めてですし、サーバーレスだとかjsonファイルでのやり取りとか、なんかもうすべてが初めての仕様で初めは違和感しかなかったです。ひたすら写経して動かなければエラーメッセージで調べてを繰り返していました。一度コツをつかみ始めてからはfirebase神！超便利！となってたので、とにかくやってみたのが後から考えるとよかったのかなと思います。
- 開発ノウハウが絶対的に不足している
テストってどうやるんですか・・・
Vue.jsの綺麗な書き方とは・・・
ソースコードが自身が綺麗とは言えない出来ですし、テストに至っては洗い出した操作を手動でひたすら行うといった恥ずかしい開発形態をとっているのが現状です。とにかく動かすの精神でやってきたので今後学んでいかないといけないなと感じています。
今後
最後まで見てくださりありがとうございました。
アプリ事態を機能追加・精錬させていくのが第一ですが、アウトプットも大事だとよく耳にするので今後学習したノウハウも記事として投稿し、残していきたいと思います。今回はアプリの紹介兼開発概要の記事ですが、内側のコード的な部分も書いてみたいですね。
そしてやっぱり開発は楽しい・・・！もっと良いものにできるよう頑張ります(^^