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
vue_component_from_composable
Search
にしはら
July 27, 2023
Programming
2
660
vue_component_from_composable
Vue.jsのコンポーザブル関数からコンポーネントを返して、見た目とロジックを分離するお話です。
にしはら
July 27, 2023
Tweet
Share
More Decks by にしはら
See All by にしはら
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
nishiharatsubasa
3
5.1k
速くて安いWebサイトを作る
nishiharatsubasa
17
17k
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
750
defineModelを使って気軽にコンポーネントのv-modelをやろう
nishiharatsubasa
3
1.4k
2023 CSS
nishiharatsubasa
7
4.7k
エルデンリングに学ぶ道に迷わないUIと世界観
nishiharatsubasa
0
1.4k
HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS
nishiharatsubasa
2
7.1k
Other Decks in Programming
See All in Programming
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
340
Claude Agent SDK を使ってみよう
hyshu
0
1.4k
あなたとKaigi on Rails / Kaigi on Rails + You
shimoju
0
190
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
Pythonに漸進的に型をつける
nealle
1
120
NIKKEI Tech Talk#38
cipepser
0
230
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
What's new in Spring Modulith?
olivergierke
1
170
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
270
Devvox Belgium - Agentic AI Patterns
kdubois
1
150
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
140
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
Optimizing for Happiness
mojombo
379
70k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
333
24k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
9
930
Done Done
chrislema
185
16k
Become a Pro
speakerdeck
PRO
29
5.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Transcript
ίϯϙʔβϒϧ͔ؔΒ ίϯϙʔωϯτΛฦͯ͠ɺ ݟͨͱϩδοΫΛ͠Α͏ͥ
ݪ ཌྷ גࣜձࣾ ICS ϑϩϯτΤϯυΤϯδχΞ @crayfisher_zari @t.nishihara710 @crayfisher-zari.bsky.social
ීஈ͜ΜͳهࣄΛॻ͍͍ͯ·͢ HTMLʹͪΐ͍͠ͰͰ͖Δʂ Vue.jsͰαΫοͱಈ͖Λ͚ͭΔํ๏ ؤுΒͳ͍3Dදݱʂ WebGLΛΘͣʹ ΣϒαΠτͰ3DΛ࣮ݱ͢ΔCSSςΫχοΫ https://ics.media/entry/230519/ https://ics.media/entry/210908/ NEW!
࠷ۙிͷσβΠϯγεςϜΛݸਓతʹVueͰ࣮͍ͯ͠·͢ ʢඇެೝʣ
ຊͪ͜ΒͷهࣄΛϕʔεʹ͓͠͠·͢ rgba(b rgba(b https://zenn.dev/crayfisher_zari/articles/7946414921fe42
lue, 0.019) 88%, lue, 0) 100% ͞Βʹ͜ͷهࣄͪ͜ΒͷهࣄΛΠϯεύΠΞ͍ͯ͠·͢ https://engineering.linecorp.com/ja/blog/line-securities-frontend-3
ίϯϙʔωϯτΛ ίϯϙʔβϒϧ͔ؔΒఏڙ͢Δ ͱͳʹ͔ ʁ
͍ͭͷίϯϙʔωϯτݺͼग़͠
ίϯϙʔβϒϧ͔ؔΒͷίϯϙʔωϯτݺͼग़͠
useHogeͲΜͳ͔ؔͱ͍͏ͱʜ ʁ
None
defineComponet()ʹ ϨϯμʔؔΛͯ͋͛͠Εɺ ؔͷΈͰίϯϙʔωϯτ͕࡞ΕΔ ʂ
ͲΜͳϝϦοτ͕ʁ
Ϩϯμʔؔͷୈ2ҾʹpropsΛͤΔ
ίϯϙʔωϯτͷίϯϙʔβϒϧ͔ؔΒฦͤΔ
ίϯϙʔωϯτɺ ͷؔ৺ʹͳ͍ࢠίϯϙʔωϯτͷঢ়ଶཧΛ ίϯϙʔβϒϧؔʹͤΒΕΔ
ίϯϙʔωϯτ Γ͍ͨͱஔ ˠ ίϯϙʔωϯτ ίϯϙʔωϯτͷݟͨ ˠ ίϯϙʔβϒϧؔ ίϯϙʔωϯτͷཧ ˠ ͦΕͧΕͷׂ
ݟͨͱϩδοΫͷ͕Ͱ͖Δ
ྫ͑ɺ͜ΜͳσβΠϯ ໊͓લ ඞਢ߲Ͱ͢ ి൪߸ ֯ࣈͰೖྗ͍ͯͩ͘͠͞
ྫ͑ɺ͜ΜͳσβΠϯ ໊͓લ ඞਢ߲Ͱ͢ ి൪߸ ֯ࣈͰೖྗ͍ͯͩ͘͠͞ งғؾಉ͡ ৼΔ͍͕ҧ͏
Γ͔ͨ̍ɿผίϯϙʔωϯτͱ࣮ͯ͢͠Δ
Γ͔ͨ̍ɿผίϯϙʔωϯτͱ࣮ͯ͢͠Δ ίϯϙʔωϯτͷݟ͕ͨมߋʹͳͬͨͱ͖ɺ શ෦͞ͳͪ͘Ό͍͚ͳ͍ ˣ
Γ͔ͨ 2ɿಉίϯϙʔωϯτͱ࣮ͯ͠͠ɺ ৼΔ͍Λίϯϙʔωϯτʹॻ͘
Γ͔ͨ 2ɿಉίϯϙʔωϯτͱ࣮ͯ͠͠ɺ ৼΔ͍Λίϯϙʔωϯτʹॻ͘ ίϯϙʔωϯτͷίʔυ͕ංେԽ ˣ
ͦ͜Ͱɺίϯϙʔβϒϧؔͷग़൪
ڞ௨ͷίϯϙʔωϯτͰৼΔ͍Λίϯϙʔβϒϧؔʹهड़
ࢠίϯϙʔωϯτݟ͚ͨͩΛ୲ ༰ props ͔ΒΧελϚΠζՄೳͰɺ ΄΅΄΅ͱελΠϧ͔͠ఏڙ͠ͳ͍
ίϯϙʔωϯτ֤ίϯϙʔωϯτͱ͚ͩʹूதͰ͖Δ
࣮ྫ
ͯ͢ 1 ͭͷΠϯϓοτίϯϙʔωϯτ͔Β࡞ΒΕ͍ͯΔ
ίϯϙʔβϒϧؔҾΛड͚औΔ͜ͱͰόϦΤʔγϣϯΛ૿ͤΔ
·ͱΊ
Vueίϯϙʔωϯτී௨ͷ jsϑΝΠϧ͔ΒฦͤΔ ίϯϙʔωϯτ͔ΒίϯϙʔβϒϧϩδοΫΛΓग़͢͜ͱͰ ίϯϙʔωϯτݟ͚ͨͩΛ୲͢Δˠ࠶ར༻ੑ͕ߴ·Δ ίϯϙʔβϒϧؔ৺ͷ͋Δ͚ͩΛฦ͠ɺ ؔ৺ࣄʹूதͰ͖Δ
͏·͘ݟͨͱϩδοΫΛͯ͠ ָ͍͠ Vue.js ϥΠϑΛ ʂ
ࢀߟจݙ ʲLINE ূ݊ FrontEndʳίϯϙʔωϯτΛΧελϜϑοΫͰఏڙͯ͠Έͨ https://engineering.linecorp.com/ja/blog/line-securities-frontend-3 ίϯϙʔωϯτΛখ͘͞ɾ͖Ε͍ʹઃܭ͠Α͏ Vue Composition API Λ׆༻ͨ͠ίϯϙʔωϯτׂज़
https://ics.media/entry/210929/