Tweet
Tweet

Slide 1

Slide 1 text

ίϯϙʔβϒϧؔ਺͔Β ίϯϙʔωϯτΛฦͯ͠ɺ ݟͨ໨ͱϩδοΫΛ෼཭͠Α͏ͥ

Slide 2

Slide 2 text

੢ݪ ཌྷ גࣜձࣾ ICS ϑϩϯτΤϯυΤϯδχΞ @crayfisher_zari @t.nishihara710 @crayfisher-zari.bsky.social

Slide 3

Slide 3 text

ීஈ͸͜ΜͳهࣄΛॻ͍͍ͯ·͢ HTMLʹͪΐ͍଍͠ͰͰ͖Δʂ Vue.jsͰαΫοͱಈ͖Λ͚ͭΔํ๏ ؤுΒͳ͍3Dදݱʂ WebGLΛ࢖Θͣʹ ΢ΣϒαΠτͰ3DΛ࣮ݱ͢ΔCSSςΫχοΫ https://ics.media/entry/230519/ https://ics.media/entry/210908/ NEW!

Slide 4

Slide 4 text

࠷ۙ͸๭ிͷσβΠϯγεςϜΛݸਓతʹVueͰ࣮૷͍ͯ͠·͢ ʢඇެೝʣ

Slide 5

Slide 5 text

ຊ೔͸ͪ͜ΒͷهࣄΛϕʔεʹ͓࿩͠͠·͢ rgba(b rgba(b https://zenn.dev/crayfisher_zari/articles/7946414921fe42

Slide 6

Slide 6 text

lue, 0.019) 88%, lue, 0) 100% ͞Βʹ͜ͷهࣄ͸ͪ͜ΒͷهࣄΛΠϯεύΠΞ͍ͯ͠·͢ https://engineering.linecorp.com/ja/blog/line-securities-frontend-3

Slide 7

Slide 7 text

ίϯϙʔωϯτΛ ίϯϙʔβϒϧؔ਺͔Βఏڙ͢Δ ͱ͸ͳʹ͔ ʁ

Slide 8

Slide 8 text

͍ͭ΋ͷίϯϙʔωϯτݺͼग़͠

Slide 9

Slide 9 text

ίϯϙʔβϒϧؔ਺͔Βͷίϯϙʔωϯτݺͼग़͠

Slide 10

Slide 10 text

useHoge͸ͲΜͳؔ਺͔ͱ͍͏ͱʜ ʁ

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

defineComponet()ʹ Ϩϯμʔؔ਺Λ౉ͯ͋͛͠Ε͹ɺ ؔ਺ͷΈͰίϯϙʔωϯτ͕࡞ΕΔ ʂ

Slide 13

Slide 13 text

ͲΜͳϝϦοτ͕ʁ

Slide 14

Slide 14 text

Ϩϯμʔؔ਺ͷୈ2Ҿ਺ʹpropsΛ౉ͤΔ

Slide 15

Slide 15 text

ίϯϙʔωϯτͷ஋΋ίϯϙʔβϒϧؔ਺͔ΒฦͤΔ

Slide 16

Slide 16 text

਌ίϯϙʔωϯτ͸ɺ ਌ͷؔ৺ʹͳ͍ࢠίϯϙʔωϯτͷঢ়ଶ؅ཧΛ ίϯϙʔβϒϧؔ਺ʹ೚ͤΒΕΔ

Slide 17

Slide 17 text

਌ίϯϙʔωϯτ ஌Γ͍ͨ஋ͱ഑ஔ ˠ ίϯϙʔωϯτ ίϯϙʔωϯτͷݟͨ໨ ˠ ίϯϙʔβϒϧؔ਺ ίϯϙʔωϯτͷ؅ཧ ˠ ͦΕͧΕͷ໾ׂ

Slide 18

Slide 18 text

ݟͨ໨ͱϩδοΫͷ෼཭͕Ͱ͖Δ

Slide 19

Slide 19 text

ྫ͑͹ɺ͜ΜͳσβΠϯ ໊͓લ ඞਢ߲໨Ͱ͢ ి࿩൪߸ ൒֯਺ࣈͰೖྗ͍ͯͩ͘͠͞

Slide 20

Slide 20 text

ྫ͑͹ɺ͜ΜͳσβΠϯ ໊͓લ ඞਢ߲໨Ͱ͢ ి࿩൪߸ ൒֯਺ࣈͰೖྗ͍ͯͩ͘͠͞ งғؾ͸ಉ͡ ৼΔ෣͍͕ҧ͏

Slide 21

Slide 21 text

΍Γ͔ͨ̍ɿผίϯϙʔωϯτͱ࣮ͯ͠૷͢Δ

Slide 22

Slide 22 text

΍Γ͔ͨ̍ɿผίϯϙʔωϯτͱ࣮ͯ͠૷͢Δ ίϯϙʔωϯτͷݟͨ໨͕มߋʹͳͬͨͱ͖ɺ શ෦௚͞ͳͪ͘Ό͍͚ͳ͍ ˣ

Slide 23

Slide 23 text

΍Γ͔ͨ 2ɿಉίϯϙʔωϯτͱ࣮ͯ͠૷͠ɺ ৼΔ෣͍Λ਌ίϯϙʔωϯτʹॻ͘

Slide 24

Slide 24 text

΍Γ͔ͨ 2ɿಉίϯϙʔωϯτͱ࣮ͯ͠૷͠ɺ ৼΔ෣͍Λ਌ίϯϙʔωϯτʹॻ͘ ਌ίϯϙʔωϯτͷίʔυ͕ංେԽ ˣ

Slide 25

Slide 25 text

ͦ͜Ͱɺίϯϙʔβϒϧؔ਺ͷग़൪

Slide 26

Slide 26 text

ڞ௨ͷίϯϙʔωϯτͰৼΔ෣͍Λίϯϙʔβϒϧؔ਺ʹهड़

Slide 27

Slide 27 text

ࢠίϯϙʔωϯτ͸ݟͨ໨͚ͩΛ୲౰ ಺༰΋ props ͔ΒΧελϚΠζՄೳͰɺ ΄΅΄΅࿮ͱελΠϧ͔͠ఏڙ͠ͳ͍

Slide 28

Slide 28 text

਌ίϯϙʔωϯτ͸֤ίϯϙʔωϯτͱ஋͚ͩʹूதͰ͖Δ

Slide 29

Slide 29 text

࣮ྫ

Slide 30

Slide 30 text

͢΂ͯ 1 ͭͷΠϯϓοτίϯϙʔωϯτ͔Β࡞ΒΕ͍ͯΔ

Slide 31

Slide 31 text

ίϯϙʔβϒϧؔ਺΋Ҿ਺Λड͚औΔ͜ͱͰόϦΤʔγϣϯΛ૿΍ͤΔ

Slide 32

Slide 32 text

·ͱΊ

Slide 33

Slide 33 text

Vueίϯϙʔωϯτ͸ී௨ͷ jsϑΝΠϧ͔Β΋ฦͤΔ ίϯϙʔωϯτ͔Βίϯϙʔβϒϧ΁ϩδοΫΛ੾Γग़͢͜ͱͰ ίϯϙʔωϯτ͸ݟͨ໨͚ͩΛ୲౰͢Δˠ࠶ར༻ੑ͕ߴ·Δ ίϯϙʔβϒϧ͸ؔ৺ͷ͋Δ஋͚ͩΛฦ͠ɺ ਌͸ؔ৺ࣄʹूதͰ͖Δ

Slide 34

Slide 34 text

͏·͘ݟͨ໨ͱϩδοΫΛ෼཭ͯ͠ ָ͍͠ Vue.js ϥΠϑΛ ʂ

Slide 35

Slide 35 text

ࢀߟจݙ ʲLINE ূ݊ FrontEndʳίϯϙʔωϯτΛΧελϜϑοΫͰఏڙͯ͠Έͨ https://engineering.linecorp.com/ja/blog/line-securities-frontend-3 ίϯϙʔωϯτΛখ͘͞ɾ͖Ε͍ʹઃܭ͠Α͏ Vue Composition API Λ׆༻ͨ͠ίϯϙʔωϯτ෼ׂज़ https://ics.media/entry/210929/