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

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

2019年7月24日 vkansai

C385e96e5ddd25faba59e3e14fc3e019?s=128

ショウノシオリ

July 24, 2019
Tweet

Transcript

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

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

  3. props 渡しまくる

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

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

  6. 事例① v-if が多すぎる 問題点 ▷ DOM の見通しが悪くなる ▷ 書くのも面倒 ▷

    ディレクティブに渡す値の変更に弱い
  7. 事例① の改善案 ロジック層を分離する ▷ 可読性アップ ▷ 「見た目」と「ロジック」に分けて考 えられる

  8. 事例② props を渡しすぎる 問題点 ▷ 子 → 親 に返す時が面倒になったりする (form

    データとか) ▷ 子 の方にも props を書かないといけなのが面倒 ▷ 共通コンポーネントの props を増やしてしまうと、そ のコンポーネントを使っているページでの対応が必 要になったりする
  9. 事例② の改善案 意味のあるデータはまとめて渡す ▷ 子側で必要なプロパティが増えた時のことも考慮 ▷ プロパティは詳細に定義するほうがよい (渡し忘れたときにエラーとなって気付けるので) ▷ 場合によってはコンポーネント側でAPI発行もあり

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

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

    の改善案 基本は親にもたせる、実行させる
  12. 事例は色々あるけど そもそも...

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

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

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

  16. ▷ 親コンポーネント と 子コンポーネント ▷ template / script / style

    ▷ ディレクトリ構成 ▷ ファイル名 ... それぞれに役割がある
  17. 構造的に責務が分割されていても コードを書く人が守れてないと勿体無い

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

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

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

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

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