---

やっと日記の書き溜めができました。（）


というわけでカクテルDB(RC)を本格始動してもいいかなって感じになったので、もうそういうことにしておきます。
しばらくはこいつの更新をがんばりつつ、なんとかやっていきたいなぁと思う所存です。



ただ、twitterでつぶやいている通り、このプロダクトぶっちゃけ課題だらけです。



そもそもこのプロダクトは、僕がVueを習得してみようと思って開発したものなので、その目的はおおよそ達成できましたし、とりあえずVueを使って新しいシステムを作れ、って言われたらとりあえず動くものは作れると思います。
どういうことをやると失敗するのかっていうのは身を以て知りましたしね。（）



まずSPAといえば初期ロードが遅いというのがよく欠点として挙げられますが当DBに関しても信じられないほど遅い。

遅い、って言ってもここまで遅くなるとは思いませんでした。さすがに想定外です。
一応、2回目の訪問以降はjsファイルがキャッシュされるはずなので体感そこまでではないような気がしますが、さすがにこれは養護できないレベルで遅いです。読み込むjsファイルが6MBぐらいある上に、それをレンダリングするわけですからね･･････。

こちらができる対応策としては、dynamic importとかがありますが、僕ができるざっくりとした対策はそれぐらいなんですよね･･････。ビルドされたjsファイルの中に手を加えることもできないし、あと大きな問題としてjsファイルの負担を可視化するためのライブラリが入らないので、ちょっと僕にはお手上げです。


特効薬ではないんですが、であれば次に試すこととしてはSSRにしてしまおうというのが挙げられます。とりあえずサーバー側でレンダリングするので、初期表示に関してはなんとかなる･･････らしいので、なんとかなると信じています。（）
まぁ最悪、旧版みたいなPHPベースの、ほんとうに静的なサイトとしてやるのが一番速度は出るっちゃ出るんですけどね･･････


ただ、作ってて思ったんですが、各種コンポーネントは圧倒的に作りやすかったですね。特に、検索結果のソートだったり、あとデータを再取得して再描画･･････みたいなのは今までよりも圧倒的に作りやすかったです。
なので、個人的にはこのカクテルDBに関してはLaravel単体で作るより、Vueで作った方が正義っぽいなって感じはしました。



あと、検索結果表示画面とかも、遅延レンダリングというか、スクロールしてはじめて描写する、みたいなのを取り入れることができれば、例えば候補となる検索結果が大量に表示されるような場面でもフリーズすることはないのかな、って思いました。




あともういっこ致命的な欠点がありましたね。スマホでの画面崩れです。



一応デベロッパーツールで確認して作ったんですが、やっぱり実機と挙動が違うみたいで実機で動かすとあかん感じになります。
原因はわかってるぶぶんとわからない部分があるんですが、どちらにせよ手直しするのはめんどくさいので、しばらくは対応を切らざるを得ません。
ただ、こうなった原因についてはよくわかっていて、そもそも「仕様がない」状態で作り始めたせいです。わけわからんUIフレームワークとその関連CSSをぽいぽいグローバルに投入していった結果、衝突が発生したり、使い回しできるはずだったコンポーネントを使いまわしできないように作っちゃったり、それはもう悲惨な状態です。

ただ、そもそも知らない言語を使ってた以上設計なんかできるはずもなく、これもしょうがないことではありました。仕様がない、だけになァ！？！？！？



ってなわけで、相変わらずメンテのしづらいコードを量産することになりました。コンポーネント間の結びつきを設計段階で考慮できてなかったので、後になって、あっここ再利用できたら･･････！！！みたいなのが多発しましたね。厳しい。



ただまあ、SSRの効力も知りたいし、それをやるならNuxtも学習せざるを得ないのでそのうちまた作り直すと思います。ただもう、ある程度高速化に関しては頑張ってみて、それでもうまくいかない分に関してはサポート切ろうかな･･････って感じです。




とりあえずdynamic importを試してみようかと思ったんですが、Laravel mixがコケるのでお手上げです。おとなしくNuxtで再開発します。（）
備忘録としてリンク貼りますが、こういうことができるみたいですね。ってか、Nuxtって標準でアナライザ入ってるんだ･･････。すばらしい。これがLaravel Mixだと入らねえんだよナア



僕がVueのビルドを理解していない可能性も充分あるんですけど、どちらにせよこのdynamic importを意識するのって後付け的にはやりにくそうですね。あと、使うものだけアラカルトでimportしましょう、ってのも大事みたい。