書いた人
jQueryおじさん(Qiita祝初投稿)
簡単な自己紹介
JQuery全盛期にフロント界隈でゴリゴリ開発していた時代から
事情があって一度webフロントから引退
その間、趣味でangular js, reactなども軽く触ってはみたものの
あまりしっくりこないままjQuery最強じゃね？と思い込み
トレンドに取り残されてしまったかわいそうなjQueryおじさん、、
ちなみにサーバーサイドはちょっとPHPが書ける程度
この記事をターゲット
- フロントしかできないから一人でサービス作ってみたいけど躊躇している人
- フロントエンジニア歴が長くていろいろ歴史を振り返ってみたい人
- 個人開発者様全般
- 素人に毛が生えた程度の技術のウンチクを温かい目で見てくれるその道のプロ
作ったモノ
https://sugume.web.app
完全無料、登録なしで使える、SNSアカウント一時共有サービス
デザインが残念なままｗ
構成
今流行りのサーバーレス（サーバーはあるわけでこの言葉がしっくりこないが）
nuxt.js + firebase(firestore + hosting + cloud functions)
作った感想
nuxt.js も firebase もスゲー
(語彙力がやばいｗ)
え、DBってこんなに簡単に作れちゃっていいの？サーバーサイドエンジニア消されちゃうんじゃ？（言い過ぎ）
実を言うと最初はvue.js単体で別のアフィリ向けのサイト（DBなし）を作っていたのですが
だいぶ完成に近づいたところでSSRやんないと各ページのSEOが、、的なのこと気づいてしまい
いろいろ調べているときに nuxt.jsにたどり着いたんです。（もっと調べてから作り始めろよｗ）
開発スタート時点の構成
vuejs + webpack
サーバーは適当なレンタルサーバーにあげればいいかなーとか考えていた。
wbpackもすごく便利ですよね。
jQueryおじさんはgulpが流行りだした頃からフェイドアウトしていたので
いろんな処理が簡略化されていて驚き
vueJsはjQueryおじさんのくせになぜかリアクティブなサイト構築の経験が少しだけあったので
ここはすんなりクリア(angularjs, reactjs では飲み込めなかったがなんかスッキリ入ってきた)
ある程度できたところで先述の問題に直面！SEO的にどう考えてもSSRやんなきゃ！SPAじゃだめですやん
どーしよう、、
ん？何？Nuxtjsってのが便利？でもサーバー側nodeJsでしょ？レンタルサーバーで対応できないじゃん、、
jQueryおじさんはサーバーサイドの知識が少し乏しいため、
スマホの便利さを知った上で使わない50代のおっさんと同じで
AWS,netlifyやherokuの存在を知りつつも得体の知れないもの（特にサーバーサイド＆黒い画面は敬遠しがち）
サーバー恐怖症だけではなく正規表現アレルギーも持病で持っているため今回の入力バリデートは苦労した。
そんなこんなでたどり着いたのがそう、google様のアレ
firebase様
え？npmごにょごにょするだけで数分でサーバー完成？しかもある程度のアクセスまで無料？？
あちこちでお金出してるレンタルサーバーのお金どないしてくれんの？
ドメインも最初は別途取得予定だったけどそんなに違和感なかったのでfirebase様が提供してれたドメインでそのまま行くことに
というわけで、PHPも触われるんだからアフィサイトなんか王道のワードプレスを使えばいいのに
意地はって自前で
Nuxt.js + firebaseでアフィサイトを構築
だいたい出来てきてあとは 原稿をモリモリ描くだけだー ってところで
魔がさす。
もうこれ、あとはただの単純作業で
もしかしたらアフィで稼げるかも知れんが
エンジニア的好奇心が満ちてしまったため
少しモチベーションが下がる、、(エンジニアあるある？なのか)
そんなときある出来事がきっかけで突然別に作りたいものが空から降ってくる
それが今回のサイト
https://sugume.web.app
完全無料、登録なしで使える、SNSアカウント一時共有サービス
ログインなしのDBのちゃちゃっとした書き換えぐらいだし
firebaseでnpmごにょごにょしてたらできるんじゃないか？
ちょっとDBもデビューしつつこっちを作ってみるか
というわけで
nuxt.js + firebase(firestore + hosting)
の環境が完成！
そしてだいぶ完成したところで
これもしちょっとだけ流行ったら DBにゴミデータ残るな、、
バッチ処理で定期的に削除しなきゃ！！
と言うわけで最終的にcloud functionsも導入
DBのゴミを削除するスクリプトをhttpsトリガーで導入
それをGASで定期的に実行しておしまい。(Firebase単体できるという噂も、、)
と言うわけで冒頭の
nuxt.js + firebase(firestore + hosting + cloud functions)
が完成
工数
実質1日3時間ｘ15日くらいです
いろいろとテンプレート作ったり吟味しながらだったり
デザインデータなしでCSSで行き当たりばったりデザイン構築したので
もう一度同じようなものを作るならもっとスピードアップできるはず。
どこかにデザインを無料でやってくれる神様みたいな人落ちてないですかね？
今回避けたもの
CSSライブラリ(bootstrap的なもの)
テンプレートをキャンセルするのにすごい手間がかかることがあるから
今回はルールを決めずにちゃちゃっと適当デザインで行きたかった
lint系
(一人開発だったら自己責任でいいよね？規模がもし大きくなったらあとから導入)
デザイン
(デザイナーほんとは欲しいけどね、、)
pug(元jade)
流派的にあんまり好きじゃないのもあるけど結局コピペーでHTMLタグ組むとどうしても閉じタグが過不足するから導入したほうがいい
長々となってしまったが
伝えたいことをまとめる。
一度引退してしまっても時々新しいものをHelloWorldしておいたほうがいい
今回ちょうど一年くらい前に vueJSだけは別でHelloWorldしてたので実装自体はスムーズだった。
（できればこれがスタンダードになって10年くらい覇権を握ってくれるとまたこれで飯が食える気が）
フロントエンジニアの PaaSのデビューはfirebaseで決まり！
いやほか試してないけど、
独学エンジニアはHelloWorldの先３歩くらい踏み込んで
できることの領域をモノづくりをしながら広げていくべし
今までの持ってるスキルとかけ合わせるととてつもなくレベルアップします。
（最悪作るものを途中で変えたって良いし納得したらリリースしなくたっていい）
今回はjQueryおじさんは firebase と出会って かなりレベルアップした気持ちでいます。
全部完璧にしなくてもいいんじゃない？
個人開発なんだからやりたいところだけ
あとはテキトー、、もしサービスが流行ってしまったら？
googleにめっちゃ請求されたら？
複数人で開発必要になったら？
そんときまた考えましょ！
リクエストがもしあれば技術的な構成の話も別途書きます。
需要があれば、、、