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
220
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.3k
array_merge と array_push の違いについて
sshono1210
0
530
全くデザインを勉強したことのないエンジニアが「なるほどデザイン」を読んで少しだけ勉強した話
sshono1210
0
230
Vue.js の methods と computed
sshono1210
0
110
すぐに使える ES2015 の基本構文3つ
sshono1210
0
78
肌で感じたディレクションとマネジメント
sshono1210
0
70
Vue.jsで遊んでみよう
sshono1210
0
86
Other Decks in Programming
See All in Programming
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
110
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
540
Ruby Parser progress report 2025
yui_knk
1
460
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
400
ファインディ株式会社におけるMCP活用とサービス開発
starfish719
0
2.1k
今だからこそ入門する Server-Sent Events (SSE)
nearme_tech
PRO
3
260
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
API Platform 4.2: Redefining API Development
soyuka
0
160
Kiroで始めるAI-DLC
kaonash
2
630
Swift Updates - Learn Languages 2025
koher
2
510
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
250
Featured
See All Featured
How to Ace a Technical Interview
jacobian
279
23k
Typedesign – Prime Four
hannesfritz
42
2.8k
Code Reviewing Like a Champion
maltzj
525
40k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Six Lessons from altMBA
skipperchong
28
4k
Code Review Best Practice
trishagee
71
19k
Agile that works and the tools we love
rasmusluckow
330
21k
Context Engineering - Making Every Token Count
addyosmani
3
62
Large-scale JavaScript Application Architecture
addyosmani
513
110k
How GitHub (no longer) Works
holman
315
140k
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]