katonobo’s blog

プログラミング中心の雑記ブログ

【Vue.js】【Cloud Firestore】Webアプリのリリースまでの学習過程まとめ

先日、初のWebアプリをリリースしました。

contents-chat

このサービスは、最近もの凄く人気がある、定額動画見放題サービスの映画や番組の感想などを書き込んで感想を共有するサイトです。アマゾンプライムとか、ネットフリックスとかですね。

 

[実際のモバイルサイト画面]

f:id:katonobo:20180625183909p:plain

 

このサイトを作った理由は、自分が単純に欲しかったからです。ネットの配信番組って、もの凄く面白いのが多いんですけど、地上波のテレビみたいにみんなが見ている訳ではないので、感想とかが共有できないことが多かったんです。僕はバチェラージャパンとドキュメンタルが大好きなんですが、周りにそこまで見ている人がいませんでした。そのため、見たことある人で集まって話したら面白いだろうなと思ったのです。匿名掲示板だとちょっと怖いので、もう少し柔らかくカジュアルな感じをイメージしました。

本サービスの機能と使ってる技術

このサービスでは、ログイン認証機能と、リアルタイムチャット機能が主な機能です。

ログイン認証機能はメールでの登録とログイン。リアルタイムチャット機能とは、LINEをイメージして貰えばわかると思います。人が集まった時に、会話している感じを出したかったのでリアルタイムチャットにしました。

 

技術は、「Vue.js」と、Firebaseの「Cloud Firestore」、CSSに「 Materialize-css」を使っています。

自分で言うのもあれですが、結構最新の技術を使っている感じです。

 

学習過程

実は、今年の2月末までは全くITとは関係ない業界にいました。プログラミング自体は去年の1月に出会い、スマホゲームを作ってみたいと思って、週末に勉強してスマホのアプリ開発をやるような感じでした。実際に去年4作品リリースしました。

「Swift」でのIPhoneアプリ開発や、「Unity」でのアプリ開発は経験があったものの、いわゆるWebサービスで何かを作ることに関しては、今年の3月から学習をはじめたと言っていいと思います。

 

3月〜4月 ドットインストールでとにかくWeb系言語に触れる

Web系言語のイメージをするために、ドットインストールの動画を見まくりました。

https://dotinstall.com/

僕は常々、プログラミングを始める入り口は動画学習が最も適していると思っています。まずは深く学ぶのではなく、どんな言語があって、どんな繋がりがあるのかイメージを掴みたかったので、数分ごとにレッスンがまとめられており、簡潔である本サイトは大変助かりました。

今思うと恐ろしいことに、これまでJavaScriptすらちゃんと勉強していなかったので、ここで基礎固めと思ってとにかく量をこなす感じにやりました。

「HTML」→「CSS」→「JavaScript」→「PHP」→「Ruby」→「MySQL」って感じでやって、その後にフレームワーク「CakePHP」と「Ruby on Rails」、そして「Laravel」と言ったような感じで勉強しました。

これで、およそ2ヶ月間くらいです。

その時に思ったのは「覚えなきゃいけない言語多すぎるな」とかでしたw

 

5月 Vue.jsとFirebaseの組み合わせを知り衝撃を受ける

一つのWebサービスを作るに、かなり多くのweb言語を組み合わせる必要があります。

普通のログイン機能がついたホームページでも、HTML/CSS/Javascript/PHP/MySQLくらいは最低必要ですよね。なるべく早く何か作ってみたかったので、ドットインストールで学習しながら少しでも手間が省けるものないかなぁとなんとなく探している感じでした。

そんな時、ツイッター上で、「初めてのシングルページアプリケーション Vue.js と Firebase で作るミニ Web サービス」の存在を知りました。

この本は、nabettuさんが書かれた本で、Vue.jsとFirebaseを使ってWebサービスができちゃうと言う内容の本でした。

 

🍲ナベ🐱 (@nabettu) | Twitter

booth.pm

 

まず安かったです。500円ですから、普通の技術書と比べると格安なので、即購入しました。この本を読むまでVue.jsもFirebaseも知りませんでしたが、どうやらすごい便利そうだぞと言う予感がしました。

まず、Vue.jsというフレームワークがJavascriptをベースにしていることと、FirebaseがMySQLのような言語が必要なく使えると言うのがかなり惹かれました。覚えること減るじゃん!と。

5月中は、この本に書いてあったサンプルを完成させた後、内容をとにかく理解して、自分なりにいろんな機能をくっつけたりして勉強しました。

苦戦したのは、firebaseのデータの保存形式です。Firebaseは、NoSQLと言うもので、ちょっとMySQLとかとは違うんですね。それがちょっとわかりづらくて、「ココナラ」を使って、詳しい人にアドバイスをもらったりもしました。

 

6月 とうとう開発スタート

色々Vue.jsとFirebaseをいじって勉強して、やっとなんか作れそうな感じがしたので、6月から作り始めました。

Firebaseの強みは、大量のデータを捌くことや、LINEのようなリアルチャット機能が簡単に使えると言うことだったので、この機能をつけたいなと思いました。

その時、ちょうど自分がアマゾンプライムとかで動画を見るのが楽しみになっていたんですが、周りの友人に話せる人がいなかったので、これを話せる場所を作ろうと思いました。

6月1日に開発をスタートして、20日にテスト版が完成したので、開発期間はほぼ3週間でした。5月に色々実験したこともあり、それらの経験を組み合わせて作ったのでかなりサクサクと開発は進みました。

ちょっと考えて工夫したのは、firebaseの「Cloud Firestore」を使ったところです。Realtime Databaseよりデータの扱いがわかりやすかったのでそちらを使いました。

この開発の中で、Vue.jsのパラメータの受け渡しがよくわからなくて困ったんですが、

なんと5月末にVue.jsに関する素晴らしい本が出たので、それを読んで助かりました。

 

 

基礎から学ぶ Vue.js

 

 

[書評です] 

www.katonobo.com

 

リリース後からが本番 

とにかく最低限の機能でリリースしました。ここからどんどん改良して行きたいと思います。前の記事でも書きましたが、とりあえず発表することが大変大事であると実感しています。

とりあえず、こんな感じで自分はリリースまでこぎつけたので、何か作って見たい人は参考にしてみていただけたらと思います。

 

 

 

【PR】