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
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
340
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
1
150
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.5k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
480
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
900
Is Xcode slowly dying out in 2025?
uetyo
1
270
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
14
4.8k
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
87
29k
技術同人誌をMCP Serverにしてみた
74th
1
650
Featured
See All Featured
Side Projects
sachag
455
42k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Invisible Side of Design
smashingmag
301
51k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Become a Pro
speakerdeck
PRO
29
5.4k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Music & Morning Musume
bryan
46
6.6k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
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]