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
640
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
720
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
7.1k
Other Decks in Programming
See All in Programming
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
130
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
730
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
Testing Trophyは叫ばない
toms74209200
0
890
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
OSS開発者という働き方
andpad
5
1.7k
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
1.3k
Rancher と Terraform
fufuhu
2
550
チームのテスト力を鍛える
goyoki
3
880
AI時代のUIはどこへ行く?
yusukebe
18
9k
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
The Language of Interfaces
destraynor
161
25k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Practical Orchestrator
shlominoach
190
11k
Building Adaptive Systems
keathley
43
2.7k
A Tale of Four Properties
chriscoyier
160
23k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
KATA
mclloyd
32
14k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Agile that works and the tools we love
rasmusluckow
330
21k
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/