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
580
vue_component_from_composable
Vue.jsのコンポーザブル関数からコンポーネントを返して、見た目とロジックを分離するお話です。
にしはら
July 27, 2023
Tweet
Share
More Decks by にしはら
See All by にしはら
速くて安いWebサイトを作る
nishiharatsubasa
14
15k
スーパーマリオRPGのリメイク版の変更点からみるUX
nishiharatsubasa
1
590
defineModelを使って気軽にコンポーネントのv-modelをやろう
nishiharatsubasa
3
1.2k
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
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
190
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
150
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
280
昭和の職場からアジャイルの世界へ
kumagoro95
1
400
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
7
4.1k
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
210
CI改善もDatadogとともに
taumu
0
170
Go 1.24でジェネリックになった型エイリアスの紹介
syumai
1
140
Introduction to kotlinx.rpc
arawn
0
740
ML.NETで始める機械学習
ymd65536
0
210
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
200
sappoRo.R #12 初心者セッション
kosugitti
0
260
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
67
4.6k
Designing for humans not robots
tammielis
250
25k
Become a Pro
speakerdeck
PRO
26
5.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Automating Front-end Workflow
addyosmani
1368
200k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
4 Signs Your Business is Dying
shpigford
182
22k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
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/