Nuxt / Vue 開発でやりがちな 「読みづらい」「わかりづらい」コード

2019年7月24日 vkansai

Transcript

1. Nuxt / Vue 開発でやりがちな
   「読みづらい」「わかりづらい」コード
   株式会社chatbox エンジニア
   ショウノシオリ
   

   View Slide

2. v-if がめちゃくちゃ多い
   

   View Slide

3. props 渡しまくる
   

   View Slide

4. 動くけど
   「読みづらい」「分かりづらい」
   コードになってしまっていることがある
   

   View Slide

5. 「読みやすくする」「分かりやすくする」
   にはどうすればいいか？
   

   View Slide

6. 事例① v-if が多すぎる
   問題点
   ▷ DOM の見通しが悪くなる
   ▷ 書くのも面倒
   ▷ ディレクティブに渡す値の変更に弱い
   

   View Slide

7. 事例① の改善案
   ロジック層を分離する
   ▷ 可読性アップ
   ▷ 「見た目」と「ロジック」に分けて考
   えられる
   

   View Slide

8. 事例② props を渡しすぎる
   問題点
   ▷ 子 → 親 に返す時が面倒になったりする
   （form データとか）
   ▷ 子 の方にも props を書かないといけなのが面倒
   ▷ 共通コンポーネントの props を増やしてしまうと、そ
   のコンポーネントを使っているページでの対応が必
   要になったりする
   

   View Slide

9. 事例② の改善案
   意味のあるデータはまとめて渡す
   ▷ 子側で必要なプロパティが増えた時のことも考慮
   ▷ プロパティは詳細に定義するほうがよい
   （渡し忘れたときにエラーとなって気付けるので）
   ▷ 場合によってはコンポーネント側でAPI発行もあり
   

   View Slide

10. 事例③
    親子間での受け渡しフローがバラバラ
    イベントの発火、データを持つコンポーネントが親コンポーネントだったり、
    子コンポーネントだったりする
    問題点
    ▷ 親でも子でも大抵動くようにコードを書くことはできるが、毎回探すのが
    大変
    ▷ 共通コンポーネントにしたときに困ることも
    

    View Slide

11. ▷ 基本「子コンポーネントは親コンポーネントに使われる部品で、
    描画に集中させる」と考える
    ▷ vuex も適切に利用すると良い
    ○ ただし、vuex の管理コストとの兼ね合いを考慮
    事例③ の改善案
    基本は親にもたせる、実行させる
    

    View Slide

12. 事例は色々あるけど
    そもそも...
    

    View Slide

13. Nuxt.js / Vue で
    「読みづらい」「わかりづらい」
    コードになってしまう原因は？
    

    View Slide

14. 「役割」をよく考えずに
    なんとなく書いてしまっている
    からでは
    

    View Slide

15. Nuxt / Vue は自由度が高い
    「なんとなく」でも
    それっぽく書けてしまう...
    

    View Slide

16. ▷ 親コンポーネント と 子コンポーネント
    ▷ template / script / style
    ▷ ディレクトリ構成
    ▷ ファイル名 ...
    それぞれに役割がある
    

    View Slide

17. 構造的に責務が分割されていても
    コードを書く人が守れてないと勿体無い
    

    View Slide

18. 「読みづらさ」「わかりづらさ」
    を生み出すかどうかは開発者次第
    

    View Slide

19. その自由度に振り回されないよう
    「どこに何をかくか」
    「どうやって実装するか」
    を考えることが大事
    

    View Slide

20. 学習コストが低く、
    手軽に導入しやすい Nuxt / Vue
    

    View Slide

21. コードの設計をよく考えて
    最大限に活かそう
    

    View Slide

22. Thanks!
    Any questions?
    You can find me at:
    @username
    user@mail.me
    

    View Slide