コリと申します。
保活広場というサービスをひとりで作ってます。

保活広場のサービス概要

全国の保育園を市町村から検索できるサービスです。ユーザー登録するとブックマーク機能が使えるようになってクリップできます。
https://www.hokatsupark.com/

保活広場の開発期間

・2ヶ月
プログラミングスクールのメンターに相談しながら作りました。

保活広場で使われている技術

保活広場で使われている技術は以下の様な技術を使って作成しました。

バックエンド

Laravel 5.6

ホスティング

Heroku

フロントエンド

HTML

という構成でした。

そのことを記事で書くとかなり反響がありました。
https://qiita.com/aocory/items/666c22c2c3d75be9ab9a
当時のあたたかいコメントといいねのおかげで今日この記事を書くとこまで開発を続けれたと思います。
本当にありがとうございます。

今日は、この続きの話をしていきたいと思います。

AMP教に入信

8月くらいにGoogleのスピードアップデートというアップデートがあってAMP、AMPしていた時期がありました。
保活広場は、主に「女性のママさんでスマホ利用を想定していた。」のでAMPにしました。
AMP早いよ、凄いよ。クソ仕様の0simでもちゃんと表示されるよ。
AMPにするとGoogleにいっただけでGoogleのクローラーいっぱいきてくれたよ。
これで、SEOも良くなってアクセス爆上げだよ。
そう思っていましたが、ビジターもユーザーはきませんでした。
Google順位爆下げ
理由は、おそらくAMPアコーディオンというライブラリだと思います。
1市町村で100とか保育所入れてたらユーザーが探しにくいと考えて実装した機能です。
でもクローラーが評価できない。

そういうとこやぞ、Google

Vueとの出会い

Laravelは理解した。というよりここからどうやってプログラミングを学習すれば良いのかがわからりませんでした。
完全に迷子
D3.jsとか色々な技術に手を出しました。
だけど、いまいちしっくりきませんでした。
そんなときに「Vue.jsとFirebaseで作るミニWebサービス」という技術同人誌を見つけ読みました。
ちなみに、JSについては、ブラウザの下の方で「ようこそ！○○のホームページへ」という文字を流すための技術くらいの20年前の認識だった。
JSとは、何だ？と聞くと動きのあるホームページを作る言語。そうスクールのメンターは言っていたが、この本にあるJSはデータを動かすものだった。
これを見て、思った。
「SQLいらなくね？」
乱暴で戦争が起きそうな思考ですが、初心者なりにこのFirebaseで保活広場作ったらHerokuのコマンド使わなくて良いし維持費安い。
そう考えました。

そこで次はJSを学習しようと「基礎から学ぶVue.js」という本を手に取って学習していた。
しかし、Qiitaに出てくるVueはSPAやSSRやCLIなど意味不明な単語が並んでいた。
保活広場のSEO集客ワードは保活だけではなく、保育園名や地域名＋保活などを想定していたのでSPAは向いていない。
AMPと同じ間違いをするわけにはいかない。
なら、NUXTとSSRはどうだ？脳内でアラートが出る

「レベルが足りないので実装できません。」

憧れの巨乳美女がいるのに何もアイデアが浮かばない

それくらいの無力感だった。

Vueの知識を得るために色々作ったし色々読んだ、そこにある救いの言葉が出てきた。
「CDNでも大規模開発が出来る」
これは、「やわらかVue.js」に書いてあった一文なんだけど本当に心がすくわれた。

CLIやSSRしなくて良いんだ、呪いが解けた。

そして、方向性は決まった。

CDN＋HTMLこれでいこう。

ユーザーは？

ユーザーは恥ずかしい話だが、保活広場に****登録してくれたのは2名だった。
しかも、名前はa、アドレスは[email protected]。
つまり、実質ユーザーは、ゼロ。
躊躇する理由はなかった。

ユーザーを切り捨てる

そう決めた。

データとSQLは？

SQLは、「基礎から学ぶVue.js」に書いてあった生JSONにしよう。

それなら、FirebaseよりNetlifyの方が簡単じゃないか？

ということでHTML＋生Json＋Vueという構成で

3万件以上のSQLデータをJsonファイルにする戦いが始まった。

けど、このカレンダーにまにあいませんでしたぁぁぁぁぁｌ

コリ先生の次回作にご期待ください。

皆様、これからもよろしくお願いします。

一応動くものはこちらにあります。