Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Nuxt / Vue 開発でやりがちな 「読みづらい」「わかりづらい」コード
Search
ショウノシオリ
July 24, 2019
Programming
0
210
Nuxt / Vue 開発でやりがちな 「読みづらい」「わかりづらい」コード
2019年7月24日 vkansai
ショウノシオリ
July 24, 2019
Tweet
Share
More Decks by ショウノシオリ
See All by ショウノシオリ
開発チームのリーダーとしてどうあるべきか?
sshono1210
3
1.2k
Nuxt.js のディレクトリ
sshono1210
0
2.9k
Nuxt.js で SSR 対応する
sshono1210
1
2.2k
array_merge と array_push の違いについて
sshono1210
0
510
全くデザインを勉強したことのないエンジニアが「なるほどデザイン」を読んで少しだけ勉強した話
sshono1210
0
220
Vue.js の methods と computed
sshono1210
0
100
すぐに使える ES2015 の基本構文3つ
sshono1210
0
72
肌で感じたディレクションとマネジメント
sshono1210
0
64
Vue.jsで遊んでみよう
sshono1210
0
81
Other Decks in Programming
See All in Programming
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
13k
テスト駆動Kaggle
isax1015
1
630
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
9.6k
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
2
12k
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
200
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
マッチングアプリにおけるフリックUIで苦労したこと
yuheiito
0
190
What's new in AppKit on macOS 26
1024jp
0
150
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
250
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
470
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
GitHub's CSS Performance
jonrohan
1031
460k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Fireside Chat
paigeccino
37
3.5k
The Cult of Friendly URLs
andyhume
79
6.5k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Visualization
eitanlees
146
16k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Music & Morning Musume
bryan
46
6.7k
We Have a Design System, Now What?
morganepeng
53
7.7k
Transcript
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 find me at: @username
[email protected]