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
630
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
700
defineModelを使って気軽にコンポーネントのv-modelをやろう
nishiharatsubasa
3
1.4k
2023 CSS
nishiharatsubasa
7
4.7k
エルデンリングに学ぶ道に迷わないUIと世界観
nishiharatsubasa
0
1.3k
HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS
nishiharatsubasa
2
7k
Other Decks in Programming
See All in Programming
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.4k
それ CLI フレームワークがなくてもできるよ / Building CLI Tools Without Frameworks
orgachem
PRO
17
3.8k
Go製CLIツールをnpmで配布するには
syumai
2
1.1k
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
1
740
kiroでゲームを作ってみた
iriikeita
0
150
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
21
10k
バイブコーディング超えてバイブデプロイ〜CloudflareMCPで実現する、未来のアプリケーションデリバリー〜
azukiazusa1
3
800
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
2
460
実践 Dev Containers × Claude Code
touyu
1
170
Infer入門
riru
4
1.4k
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
1
130
Understanding Kotlin Multiplatform
l2hyunwoo
0
250
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Documentation Writing (for coders)
carmenintech
73
5k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
A Tale of Four Properties
chriscoyier
160
23k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Optimizing for Happiness
mojombo
379
70k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
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/