Vueファイルが肥大化していくのをなんとか食い止めたい話
2020/07/13の日報
Hanasot開発の日報、第17日目です。
やったことは
- このまま対話セクションを同じvueファイルで作成するとやたらでっかくなっちゃうので、なんとか食い止めるべく色々調べた
です。
時間は、
- Hanasot開発 16min
- 日報ブログ 20min
です。
運動は
- エアロバイク 15min
です。
アイスブレイクが大体完成してちょっと中だるみしてきましたね。
あと当たり前だけど全然反応ないのが悲しいですね。
あと明日か明後日くらいまでかなり時間がないので開発もブログも短めになります。
このままだとvueファイルが肥大化していく
とりあえず現状アイスブレイクは完成しました。この次は対話セクションを開発していきます。ただその前に、対話セクションはどのように開発するのかを考えないといけません。というのもアイスブレイクセクションのvueファイルでコンポーネントとかapiを全然使ってないんです。template, methods, style使うもの全てまるごと書いています。
1つのファイルに必要な要素を全て書けるのがvueの利点でもありますが、すでに800行近くあって非常に保守性が悪いです。見通しが悪いために開発しづらいしなんとかしたい。
なんとかする方法はいくつかあります。
とりあえずセクションごとにvueファイルを分ける
vue-routerを導入しているのでアイスブレイクセクションと対話セクションを分けるのは簡単ですね。ただskywayの接続が切れちゃうきがするんですよねー。再接続するロジックを作ることで対策できそうな気もしますが...
コンポーネントに切り出して共通化する
本命。ヘッダー部分は既に切り出して使ってるけど、メイン機能のところもなんとかできないかな。どうにかなりませんかこれ。
メソッドをapiにする
前回の案件ではこれだった。特に共用するものは全て切り出してた。これもいいけどなあ。
まとめ
短いですね。ごめんなさい。本当に検討したのかお前と言われそうですね。すみません。
メソッドをapiに切り出してセクションごとにvue-routerで画面遷移、skywayの接続が切れるようなら再接続のロジックを作る。という方向でいきます。
今日はそんな感じです。
