$30 off During Our Annual Pro Sale. View Details »

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

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

2019年7月24日 vkansai

ショウノシオリ

July 24, 2019
Tweet

More Decks by ショウノシオリ

Other Decks in Programming

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
    [email protected]

    View Slide