Vue.js + Firebase 初心者が3日でwebアプリを作って公開してみた

#はじめに
こんにちは。スノーボードが大好きなエンジニア3年目です。
今回は完全に趣味で実施した内容なのでフランクに書いていきます。
最初に、「se_fy」というユーザー名で投稿してますが、seは「システムエンジニア」でも「ソフトウェアエンジニア」でもありません。「スノーボード好きエンジニア」です。
Qiitaの記事にスノーボードのタグを付けたのは私が初めてだと思います（笑）
仕事ではバックエンドの開発がメインで、フロントエンドは経験がありません。フロントエンドも少しやってみたいなと思い、簡単なWebアプリを作ってみました。
ほとんどQiitaの記事を参考にアプリ作成しました。載せている記事を読めば同じようなアプリは簡単に作成できると思います。なので、この記事では技術的な内容はあまり触れず、作ったアプリの紹介や作った動機についてをメインに書いていきます。この記事を読むとスノーボードの知識が少し身につきます。

#作ったもの
スノーボード診断

スノーボーダーによるスノーボーダーのためのwebアプリです。質問に答えると、自分に合ったボードの形状が診断され、その形状のボードがレコメンドされます。レコメンドされるボードは2019-2020モデルのボードを多くピックアップしていますので、次の冬のスノーボード選びに大活躍すること間違いなしです。
自分に合ったボードを選ぶことで上達スピードは確実に上がります。誰かのボード選びの役に立てたら嬉しいです。
スマホで使われることを前提に作ったので、Bootstrap4でレスポンシブ対応済みです。
Firebaseの無料枠でhostingしています。無料で簡単でSSL化もしてくれて最高です。

######アプリとこの記事で登場するスノーボード用語
グラトリ：グラウンドトリックの略称です。普通の雪面を滑走しながら板の反発で跳ねたり、クルクル回ったりすることです。普通に滑ることに飽きてきたらみんなこれをやります。
パーク：キッカー（ジャンプ台）でとんだり、ジブ（鉄パイプやボックスの上を滑ること）をしたりできるスペースのことです。スロープスタイルという競技は、このパークでいかに高難度な技を綺麗にできるかを競います。
カービングターン：スノーボードの特性を最大限に活かしてターンすることです。雪面を彫って滑るターンです。そのため、英語で「彫る」という意味の「Carving」が付けられています。「曲がる」という意味の「Curve」だと勘違いしている人が多いです。

#作った動機
私は関東の社会人スノーボードサークルに参加しており、年間35日くらい滑っています。パークをメインに滑っていますが、2年前まではグラトリがメインでした。カービングターンについてはJSBA2級という資格を持っています。来シーズン１級取得予定です。また、サークルの中には年間70日滑る強者(変態)もいます。
以上のような状況で、実体験と見聞きした情報から、スノーボードについての知識はそこそこあります。せっかくならこの知識を活かしたものを作りたいと思い、作成に至りました。

#開発期間
今年のGW、滑りに行く予定だった日に体調を崩してしまい、暇になったので作り始めました。アプリの作成は約2日間、レコメンドするボード選びとドメインを取得してFirebaseで公開するのに約1日です。自分の好きな分野のwebアプリ開発ということで、モチベーションが高いまま3日間で完成させて公開することができました。(公開した後に少し改良しました)
Firebaseのhosting機能は何か問題が発生した場合でもワンクリックでロールバックできて便利です。

#使ったフレームワークやサービス
・JavaScriptフレームワーク
　vue.js
・webフレームワーク
　Bootstrap4
・Googleが提供しているモバイルおよびWebアプリケーションのバックエンドサービス
　Firebase
・ドメイン取得
　お名前.com
・アクセス解析
　Google Analytics
　Google Search Console
#vue.jsの勉強
Udemyでvue.jsとFirebaseについてかるく勉強しました。
まだ受講途中ですが、Vue.jsとFirebaseの組み合わせで何か作りたい人におすすめです。
Vue.js + Firebaseで作るシングルページアプリケーション | Udemy

#webアプリ作成と公開
以下の流れで開発・改良しました。

1. アプリを作成してローカルで試す
2. お名前.comで独自ドメイン取得(1円)
3. GoogleAnalytics導入
4. Firebaseでとりあえずデプロイ
5. スノーボード仲間に試してもらう
   　→レスポンシブ対応ができてない、レコメンドされるボードが微妙
6. レスポンシブ対応、レコメンドされるボードのリンクを変更
7. 新しいバージョンをデプロイ
8. Google Search Consoleで分析　
   　Google Search Consoleでできること

それぞれ以下の記事を参考にさせていただきました。
###webアプリ作成
https://qiita.com/Sinhalite/items/b294629f8f6edab4e657
大部分を参考にさせていただきました。

###Firebaseでhosting
https://qiita.com/gupuru/items/25a6722f6f802d3a5250

###独自ドメインをFirebaseに関連づける
https://qiita.com/kei0425/items/a7da8d263e8833f7e837

###Google Analyticsの利用
https://qiita.com/Qiita/items/c7f704e3786df3aa7a11
この記事はQiitaでの利用方法です。

#気づいたこと
・モチベーションが続くものを作る
・簡単なものでもとりあえず公開する
・とりあえず知り合いに試してもらって改良する
・アクセス解析すると改良する意欲が湧く

#最後に
この記事の投稿日でアプリの初回デプロイからちょうど１ヶ月でした。
GoogleAnalyticsで確認してみると、ユーザー数255人でした。

かなり季節外れのアプリですが、予想以上に使っていただけました。使ってもらえるとモチベーション上がりますね。次の冬までにまたスノーボード関連でなにか作ってみたいです。