Nuxtでの実装について

フロントエンドの実装がなんもわからん状態になっていました

ぼくはReactを触ったことがないので、あくまでVueしか語れないですが（正直Vueもそんな語れる気がしない）、もともとjQueryでSPA開発をしたことがある僕が、Component志向なフレームワークを触ってから便利ー！！感動！！！的なことを思ったのですが、ここ最近はComponentむずい〜ってなっておりました。

主に理由は下記

• ビジネスロジックどこに書いていいのかわからん問題 → Plugin？？？
• Storeに絡む処理は全部Vuexに！！→Vuexが太る
• 用意したPluginをComponentから呼ぼう！あ、あのUIも必要だ。このUIにはAという処理が必要だから〜
  • Aという処理はBというComponentからも呼びたい。UIと密結合なこいつをどうやって分離すれば・・・？
• Component内でやること大杉内。fat Componentだ！！どうすれば。。。
  • APIを叩くVuex Actionを叩く。mountedでレンダリングが完了後にJavaScript APIを呼んでほげほげ。ComponentのUIと密結合な処理をmethodsやcomputedに追加していく、、、etc

大体個人的に思っていることなので、まとまってもなく且つ本当に問題なのかがわからないですが、僕はこのあたりが難しいなーと感じているところでした。

これらを解消するために練習したリポジトリが下記です。

github.com

やったこと

• Options API → Composition APIに移行 → まじで良かった。これ書かないと良さがわからんかった
  • まだVue2でNuxtも2なので、 nuxtjs/composition-api を導入して進めました
• 別途ディレクトリを作成して（例えばServicesとか）、PluginでInjectしてどっかでも呼べる仕組みを用意
  • 参考: Service Classes With Plugins in Nuxt | by Jake Engel | Medium | The Startup
• その他処理は import/export 使って、自由にディレクトリを作成して呼び出すようにしてみた

この3つだけでもだいぶスッキリかけるようになりました。

あとこのリポジトリが勉強になる。

github.com

また、スッキリ書くための学びだったけど、ここから

• Composition APIをよりスッキリ書けるようにしたい
  • 外部に委譲？できるようになったが、変数や関数の量が多いとreturnと使う側の変数定義がめんどい
• リアクティブをちゃんと学びたい
  • どの変数に ref をつけるべきなの？ ref いらんやつで、何度か更新したい変数は let じゃないと駄目なの？
    • この辺のちからが必要 JavaScriptからletを絶滅させ、constのみにするためのレシピ集 - Qiita
• ユニットテスト、画面のテスト
• デザインパターン
• DDD、クリーンアーキテクチャ

あたりを勉強したいと思っている。