はじめに
ついにNPBが開幕しましたね！1
野球が開幕する喜びのため、Vue.js + FirebaseでWebサービスを開発しました。
こういうの作りました。https://t.co/BnfX6n75XB
— しまっち@育児時短中 (@ShimayuSti) June 16, 2020
どういうモチベーションで作ったとかっていう話はnoteで書きました2ので、この記事ではどうやってVue.js+FirebaseでWebサービスを公開にこぎ着けたかの泥臭いお話をしようと思います。
ちなみに「爆速」は釣りタイトルです。言ってみたかっただけなんやすまんな。3
お前誰よ4
- 大学（情報系学科)→メー子（コード書かない方）→空白の期間→iOSアプリ開発→非エンジニア兼業主夫三十路おじさん
- サーバとかフロントエンドとかは2000年初期くらいの知識
- 直近だとPython/Djangoでアプリを作った
「このDjangoアプリ、せっかくデータ貯めてるんだからデータ切り替えたりチャート表示したりしたいな・・・」
「せや！Vue使ったろ！」
「でもよく考えたら最近のHTML/CSS/JavaScriptってよく分からんな・・・」
「地道にキャッチアップするかぁ」
ということで、だいぶ長い道のりを歩むことになったのであった。
リリースにいたる道のり
MDNのチュートリアルをやる
まずはここで現代のHTML/CSS/JavaScriptについてキャッチアップ（実質学びなおし）をしました。
ちなみにMDNとは、
MDN Web Docsは、ウェブ標準及びMozillaプロジェクトの開発文書のためのMozillaの公式ウェブサイトである。
です（Wikipediaより）
ただ読むだけだと眠くなるし頭に入らないので、実際にコードを写経したりちょっと変えてみたりして動作を確認していました。章末の課題もちゃんとやったり。
無料だけど網羅的に学べるのでお勧めです。はぇーCSSだけでこんなにできるんか・・・ってなりました。
並行してDjangoアプリをやってたのもあるのですが、完走まで約3か月かかっていました。みっちりこれだけやるならもっと早く終われると思います。
Vue.jsのチュートリアルをやる
HTML/CSS/JavaScriptのキャッチアップができたので、Vue.jsの公式サイトを写経していました。
実は当初、いきなりVue.jsから入ったのですがよくわからず撤退しました。基礎大事。
こちらは1週間くらいで完走しました。
フロントエンドに疎いおじさんなので、入力したら即反応してくれるのが楽しかった（小並感）
入門書をやる
以下の2冊を読みました。
この本でもう一度お勉強しました。だいたい4日くらい。
あとは辞書的にたびたび読み返しています。
この本でVueで作ったものをFirebaseへデプロイする一連の流れを学べました。ちょいちょいFirebaseの仕様が変わっててそのままでは動かないところがありましたが、落ち着いて調べれば大丈夫です。
N予備校のプログラミング入門 Webアプリコースをやる（番外編）
ちょうど時期的にN予備校が無料開放されていたので、「プログラミング入門 Webアプリコース」を完走しました。
入門だと思ってちょっと侮っていましたが、MDNでやったことの復習以外にも仮想環境構築、Slack Bot作成、Node.jsでアプリ作成など、学びが多かったです。
想定180時間と書かれていていつ終わるか心配でしたが、知ってるところはサクサク飛ばしたりしてなんとか3週間くらいで完走できました。
ようやく開発に着手
ここまでの学習は今回リリースしたサービス用のためにやった訳ではなく、どちらかというと副産物ですね。卒業課題的な何か。
習熟のために何か自分で考えたモノを作ろうと思い、生まれました。
なにこれ？
野球ファンなら1年で334回5は考えるであろう「ワイならこうやって打線組むわ！」をオーダー表のような画像にするサービスです。
選手名は入力しなくてもプルダウンから選択することができます。
使った技術
- Vue.js(Vue CLI)
- Firebase
- Bootstrap4
割り切った点
- バックエンドを用意せずデータはJSONを読み込むようにした
FirebaseのRealtime Databaseがよく分からなかったので、どうせ読み込みだけだからいっか！
ということでJSONでデータを用意して読み込むようにしました。
今後困りそうな気がするので、移行に取り組みたいと思います。
- App.vueに処理は全部書いた
規模が小さいのでひとまず全部App.vueに書きました。
こちらは現在進行形でコンポーネント化するなどリファクタリングを進めています。
- 最低限見やすければいいやの精神
あまり見た目にはこだわらず、シンプルに並べました。
ただシンプル過ぎるので、見やすさを維持しつつスタイリッシュにしたいです。
案外難航した点
- ファビコン作成
- サイト自体のOGP画像作成
最後の最後まで残しました。というか2日くらいリリースが伸びた理由がこれです。デザインセンスの欠片もないので難航しましたが、やっぱ無いよりはそれっぽさが格段にあがりますね。
- 利用規約とか説明文とか
これも最後の方まで残しておいてどこまでちゃんと書くべきかわからず結局お茶を濁した結果に。これからもサービスを世に出すなら避けては通れないと思うので熟成させていきたいです。
- 使ってくれそうな層にリーチできていない（重要）
さらっとTwitterに流したりnote書いたりしたくらいでは全然使われません。多少閲覧してくれたっぽいですが、画像をツイートまでは導けていませんでした。
完走した感想ですが6
個人開発は十種競技みたいだな、なんて感じました。7
こんだけ小さいプロダクトでも途中で心折れそうになりましたが、私の場合ではありますがその原因の多くは実装部分ではなく、デザインとか、画像作成とか、説明文書いたりとか、宣伝の部分でした。や、実装できなくて機能削ったりもしたけどもさ。8
まぁでも全部自分でやらなきゃいけないという環境で拙いながらも全部やったので、いい経験でした。
自分はここ強い/弱いんだな、とかあーこういうのあるんだ興味出たなーとかわかるので、次学びたい事とか具体的になりますね。
また、この経験をもとに色々作っていくということを続けていきたいとおもいます。
さいごに
個人開発はいいぞ！
参考
「中年の危機」ど真ん中のオッサンがWEBサービス作ってみた。
「ツイッターでつぶやけるボタン」を簡単に作成できるサービスをリリースしました【個人開発】
ぼくのかんがえたさいきょうの配色Webサービスを公開した話
Nuxt.js使って個人開発やってみた 〜時間割を円グラフで表示するサービスをリリースした話〜
Vue.jsとFirebaseでOGP画像生成系のサービスを爆速で作ろう