はじめての Vue.js + Vuex でSPAを作った話。

技術的な話はしてませんので、あしからず。

以前からVue.jsには興味を持っていたのですが、なかなかさわる機会を作れず、最近になってようやくふれることができました。
勉強ついでにサービスを開発したいと思っていたので、サービスアイディアのストックから相性の良さそうなサービスを作りました。

フレンドコードの一括管理「FRIECO フレコ」
https://frieco.digi-popeye.jp/

開発の経緯

スプラトゥーン2が発売されたときに、Twitterでフレンドコードの交換をしてたのですが、Switchのフレンドコードが複雑で家に帰らないとコードが分からなかったりして割と面倒だったんです。
そして今年MHWが発売されて、スプラトゥーン2でつながった人とPS4でもフレンドコード交換して、これ本当に面倒くさいな、と。
コードを集約しておけるサービスがあれば少しは楽になるかな、という思いから作っています。

現在登録できるコードの種類は、ゲームアカウント以外も含めると25種類になります。
色々と要望を受けているうちに大分増えました。
よかったら使ってみてください。

はじめてのVue.js + Vuex開発で失敗したこと

vue-cli（webpack）でテンプレートを作成してから始めるのがベターなようですが、これまでgulpを使ってきた経緯から、今回もgulpではじめました。結論から言うと失敗です。
はまりポイントが至る所にあるので、vue-cli（webpack）で始めることを推奨します。

はじめてのVue.js + Vuex開発で感じたこと

小規模なサービスなので、当初はVue.jsだけでもいけると踏んでいたのですが、流石に見通しが甘すぎでした。
速攻でVuex（Store）を導入します。
なんでもかんでもVuex（Store）で管理する必要はないのですが、この辺りの匙加減というか感覚はもう少し経験が必要かもしれません。

あとVue.jsはアニメーションの実装が非常に楽でした。
要素の表示/非表示の際にclassが割り当てられるので、それに合わせてCSSを書くだけです。
Good Bye TransisionEnd.

今後の予定

7月6日のテストリリースから数件のフィードバックを受け、現在はそれらも対応を終えており、正式にサービスインとなっております。
おかげさまで、サービスも以前より大分良くなりました。
今後もフィードバックがあれば出来る限り対応する予定です。

このサービスをきっかけに今までよりも気軽にフレンド追加できる文化ができればいいなー、と思っているのですが、まずはユーザーを増やすためにやれることをやっていかないとですね。
がんばります。

最後までご覧いただき、誠にありがとうございました。
ご興味をもたれた方は、ぜひ一度お試しください。