2019年7月24日 vkansai
Nuxt / Vue 開発でやりがちな「読みづらい」「わかりづらい」コード株式会社chatbox エンジニアショウノシオリ
View Slide
v-if がめちゃくちゃ多い
props 渡しまくる
動くけど「読みづらい」「分かりづらい」コードになってしまっていることがある
「読みやすくする」「分かりやすくする」にはどうすればいいか?
事例① v-if が多すぎる問題点▷ DOM の見通しが悪くなる▷ 書くのも面倒▷ ディレクティブに渡す値の変更に弱い
事例① の改善案ロジック層を分離する▷ 可読性アップ▷ 「見た目」と「ロジック」に分けて考えられる
事例② props を渡しすぎる問題点▷ 子 → 親 に返す時が面倒になったりする(form データとか)▷ 子 の方にも props を書かないといけなのが面倒▷ 共通コンポーネントの props を増やしてしまうと、そのコンポーネントを使っているページでの対応が必要になったりする
事例② の改善案意味のあるデータはまとめて渡す▷ 子側で必要なプロパティが増えた時のことも考慮▷ プロパティは詳細に定義するほうがよい(渡し忘れたときにエラーとなって気付けるので)▷ 場合によってはコンポーネント側でAPI発行もあり
事例③親子間での受け渡しフローがバラバライベントの発火、データを持つコンポーネントが親コンポーネントだったり、子コンポーネントだったりする問題点▷ 親でも子でも大抵動くようにコードを書くことはできるが、毎回探すのが大変▷ 共通コンポーネントにしたときに困ることも
▷ 基本「子コンポーネントは親コンポーネントに使われる部品で、描画に集中させる」と考える▷ vuex も適切に利用すると良い○ ただし、vuex の管理コストとの兼ね合いを考慮事例③ の改善案基本は親にもたせる、実行させる
事例は色々あるけどそもそも...
Nuxt.js / Vue で「読みづらい」「わかりづらい」コードになってしまう原因は?
「役割」をよく考えずになんとなく書いてしまっているからでは
Nuxt / Vue は自由度が高い「なんとなく」でもそれっぽく書けてしまう...
▷ 親コンポーネント と 子コンポーネント▷ template / script / style▷ ディレクトリ構成▷ ファイル名 ...それぞれに役割がある
構造的に責務が分割されていてもコードを書く人が守れてないと勿体無い
「読みづらさ」「わかりづらさ」を生み出すかどうかは開発者次第
その自由度に振り回されないよう「どこに何をかくか」「どうやって実装するか」を考えることが大事
学習コストが低く、手軽に導入しやすい Nuxt / Vue
コードの設計をよく考えて最大限に活かそう
Thanks!Any questions?You can find me at:@username[email protected]