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

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

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 ﬁnd me at: @username user@mail.me

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

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

ショウノシオリ

More Decks by ショウノシオリ

Other Decks in Programming

Featured

Transcript