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
600
vue_component_from_composable
Vue.jsのコンポーザブル関数からコンポーネントを返して、見た目とロジックを分離するお話です。
にしはら
July 27, 2023
Tweet
Share
More Decks by にしはら
See All by にしはら
速くて安いWebサイトを作る
nishiharatsubasa
17
16k
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
630
defineModelを使って気軽にコンポーネントのv-modelをやろう
nishiharatsubasa
3
1.3k
2023 CSS
nishiharatsubasa
7
4.6k
エルデンリングに学ぶ道に迷わないUIと世界観
nishiharatsubasa
0
1.2k
HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS
nishiharatsubasa
2
6.9k
Other Decks in Programming
See All in Programming
DataStoreをテストする
mkeeda
0
280
Coding Experience Cpp vs Csharp - meetup app osaka@9
harukasao
0
720
リストビュー画面UX改善の振り返り
splcywolf
0
120
List とは何か? / PHPerKaigi 2025
meihei3
0
620
Django for Data Science (Boston Python Meetup, March 2025)
wsvincent
0
320
AIコードエディタの基盤となるLLMのFlutter性能評価
alquist4121
0
200
PHPバージョンアップから始めるOSSコントリビュート / how2oss-contribute
dmnlk
1
950
AHC 044 混合整数計画ソルバー解法
kiri8128
0
320
Going Structural with Named Tuples
bishabosha
0
200
パスキーのすべて / 20250324 iddance Lesson.5
kuralab
0
150
AWS で実現する安全な AI エージェントの作り方 〜 Bedrock Engineer の実装例を添えて 〜 / how-to-build-secure-ai-agents
gawa
8
680
Kamal 2 – Get Out of the Cloud
aleksandrov
1
170
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Producing Creativity
orderedlist
PRO
344
40k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
19
1.1k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Side Projects
sachag
452
42k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.4k
Embracing the Ebb and Flow
colly
85
4.6k
Practical Orchestrator
shlominoach
186
10k
Git: the NoSQL Database
bkeepers
PRO
430
65k
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/