Slide 1

Slide 1 text

$BOWBTͰϐΞϊϩʔϧΛ࡞Δ ϐΞϊϩʔϧΛࣗ࡞ͯ͠ΈͯΘ͔ͬͨ
 Իָͱ࠲ඪͷؔ܎ +BO 8FC"VEJPUPLZP !PLVOPLFOUBSP

Slide 2

Slide 2 text

୭ w Ԟ໺ݡଠ࿠!PLVOPLFOUBSP w ΫϨε΢ΣΞ୅ද w ΞϓϦέʔγϣϯ ɾ ΤϯδχΞ

Slide 3

Slide 3 text

࠷ۙ΍ͬͨ͜ͱ w 8FC.VTJDͰ͸Կ͕Ͱ͖Δͷ͔
 '30/5&/%$0/'&3&/$& w ೔ͷ τϥΠΤϥʔ͔Βੜ·Εͨେن໛ઃܭϊ΢ϋ΢
 'SPOUFOE$POGFSFODF'VLVPLB w ࣍ੈ୅8FCΧϯϑΝϨϯε8FC.VTJDηογϣϯ
 ࣍ੈ୅8FCΧϯϑΝϨϯε

Slide 4

Slide 4 text

ࠓ೔࿩͢͜ͱ w $BOWBTͰϐΞϊϩʔϧΛ࣮૷ͨ͠ w Իָ࣌ؒ࣠Λඳը͢Δ্Ͱؾʹ͠ͳ͍ͱ͍͚ͳ͍͜ͱ

Slide 5

Slide 5 text

ϐΞϊϩʔϧͱ͸

Slide 6

Slide 6 text

ϐΞϊϩʔϧ ͍͍ͩͨͲͷԻ੍ָ࡞༻ͷιϑ τ΢ΣΞʹ΋࣮૷͞Ε͍ͯΔ
 ϝϩσΟ Λೖྗ͢ΔͨΊͷΤσΟ λը໘

Slide 7

Slide 7 text

Ͱ͖Δ͜ͱ Ϋ Ϧ οΫͰͷԻූͷೖྗ
 υϥ οάͰͷԻූ௕ͷมߋ
 ϐΞϊϩʔϧදࣔͷ9ํ޲ɺ :ํ޲ͷ֦େॖখɺ εΫϩʔϧ
 ʢσϞͯ͠ͳ͍͚Ͳɺ Իූͷίϐϖ΍࡟আ΋౰ͨΓલʹͰ͖Δʣ

Slide 8

Slide 8 text

ͳʹ͛ʹߴػೳ w Ի੍ָ࡞༻ιϑ τ %"8 ͸ઐ໳ੑ͕ߴ͍ͨΊಛԽͨ͠ػೳ͕ଟ͍ w ςΩε τΤσΟ λʹൺ΂Δͱང͔ʹಛघͳ࣮૷ w طଘͷ΋͋Δ͚Ͳʜ w (6*࣮૷Λੜۀͱ͢Δϑϩϯ τΤϯ υ ɾ ΤϯδχΞͱͯ͠
 ͜ΕΛͪΌΜͱ࣮૷Ͱ͖ΔͱεΩϧΞοϓ͢ΔͷͰ͸

Slide 9

Slide 9 text

΍ͬͯΈͨ

Slide 10

Slide 10 text

3FBDU$BOWBT w $BOWBTΛ࢖͏͚ͩͳͷͰ7BOJMMB+4Ͱ΋͍͍͕3FBDUΛ࢖ͬͨ w )PPLTͷ࿅श΋͔ͨͬͨ͠ͷͰ3FBDUΛ࢖ͬͨ

Slide 11

Slide 11 text

%FNP

Slide 12

Slide 12 text

ίʔ υͷߏ଄ export default function App() { // ͻͨ͢Β useState() const canvasRef = useRef < HTMLCanvasElement > null; useEffect(() => { // ॳظඳը࣌ॲཧ }, []); useEffect(() => { // Իූ௥Ճ࣌ͷॲཧ }, [notes]); useEffect(() => { // εΫϩʔϧҐஔมߋ࣌ͷॲཧ }, [scrollLeft, scrollTop]); const onDragHorizontalScrollBarKnob = useCallback((ev: React.MouseEvent) => { // ਫฏεΫϩʔϧόʔυϥοά࣌ͷϋϯυϦϯά }, [originXY, mediator]); const onDragVerticalScrollBarKnob = useCallback((ev: React.MouseEvent) => { // ਨ௚εΫϩʔϧόʔυϥοά࣌ͷϋϯυϦϯά }, [originXY, mediator]); const onDragScreen = useCallback((ev: React.MouseEvent) => { // Canvas಺υϥοά࣌ͷૢ࡞ʢԻූ௕ͷมߋʣ }, [scrollBarCoord, currentUuid, originXY, notes]); const onMouseDown = useCallback((ev: React.MouseEvent) => { // Canvas಺ͰͷmousedownϋϯυϦϯά }, [ currentUuid, originXY, notes, scrollBarCoord, isDraggingHorizontalScrollBarKnob, isDraggingVerticalScrollBarKnob ]); const onMouseMove = useCallback((ev: React.MouseEvent) => { // canvas಺ͰͷmousemoveϋϯυϦϯά }, [ currentUuid, originXY, notes, isDraggingHorizontalScrollBarKnob, isDraggingVerticalScrollBarKnob ]); return (
onMouseDown(ev)} onMouseMove={ev => onMouseMove(ev)} ref={canvasRef} width="600" height="400" />
); }

Slide 13

Slide 13 text

3FBDU·ΘΓʹ͍ͭͯ͸લճͷεϥΠ υΛ https://speakerdeck.com/okunokentaro/ng-kyoto-angular-meetup-number-9

Slide 14

Slide 14 text

Իָ࣌ؒ࣠Λඳը࠲ඪʹม׵

Slide 15

Slide 15 text

ઈର࣌ؒ૬ର࣌ؒ w ઈର࣌ؒ w ඵ w ඵͱ͍͏௕͞͸ࠃࡍ୯ҐܥͰఆٛ͞Ε͓ͯΓ
 ਓʹΑͬͯҧ͏ɺ ࠃʹΑͬͯҧ͏ɺ ۂʹΑͬͯҧ͏ɺ ͳΜͯ͜ͱ͸ͳ͍ w ૬ର࣌ؒ w ഥ w ഥͷ௕͞͸ۂʹΑͬͯҟͳΔ
 ͳͥͳΒۂʹ͸ςϯϙͱ͍͏֓೦͕͋Γɺ ςϯϙͷ਺஋͕େ͖͍΄Ͳഥͷ௕͞͸୹͘ ͳΔ

Slide 16

Slide 16 text

૬ର࣌ؒʹج४Λ w ૬ର࣌ؒ͸ۂʹΑͬͯ࠷খ୯Ґ͕ҟͳΔ w ͦ΋ͦ΋࠷খ୯ҐΛԿͱ͢Δ͔΋ਓʹΑΔ
 ʢ෼Իූ ʁ ෼Իූ ʣ w ػցͰॲཧ͢Δ্ͰԿΒ͔ͷج४ ʢ࢓༷ʣ ͕ඞཁ

Slide 17

Slide 17 text

෼ղೳͱ͍͏ج४͕͋Δ w .*%* ʢݫີʹ͸4.'ʣ Ͱ͸جຊతʹ૬ର࣌ؒͰه࿥͞ΕΔ w ૬ର࣌ؒΛઈର࣌ؒʹม׵͢ΔͨΊͷج४Λه࿥͍ͯ͠Δ w ෼ղೳ w .5IE ʢ.*%*ϔομνϟϯΫʣ ͷ όΠ τ໨ʹه࿥͞ΕΔ஋ w ૬ର࣌ؒΛઈର࣌ؒʹม׵͢ΔͨΊͷج४

Slide 18

Slide 18 text

෼ղೳͱ͸ w ෼ԻූΛ͞ΒʹͲΕ͚ͩ෼ׂ͢Δ͔ͷ஋ w ෼ղೳͳΒ͹ɺ ෼ԻූΛ෼ׂ͢Δ w ෼ׂ͞Εͨ࠷খͷ΋ͷΛςΟ οΫͱݺͿ w ςΟ οΫ෼Իූ w ςΟ οΫ෼Իූͷͷ௕͞

Slide 19

Slide 19 text

ςϯϙͱςΟ οΫͰઈର࣌ؒʹม׵ w ςϯϙ͕Θ͔Δͱ෼Իූͻͱͭ ʢ૬ର࣌ؒʣ ͕Կඵ ʢઈର࣌ؒʣ Ͱ͋Δ͔
 ม׵Ͱ͖Δ w ෼Իූͷ௕͕͞Θ͔Ε͹෼ղೳͷ஋Ͱ෼ׂ͢Δͱ
 ςΟ οΫ͕Կඵͳͷ͔Θ͔Δ

Slide 20

Slide 20 text

$BOWBTͷඳըʹ൓ө w ಛఆͷԻූ͕Կখઅ໨ͷԿഥ໨ ɾ ԿςΟ οΫ໨ͳͷ͔Λܭࢉ w ͦͷԻූ͸খઅ໨ഥ໨ςΟ οΫ໨͔Βܭࢉͯ͠Ԇ΂ԿςΟ οΫ໨ͳͷ͔ܭࢉ
 ʢ૬ର͚࣌ؒͩͰ͍͍৔߹͜͜·Ͱʣ w ςϯϙνΣϯδ͕ೖΔͱɺ ςϯϙνΣϯδૠೖςΟ οΫҎ߱͸
 ςΟ οΫͷ௕͕͞มΘΔͷͰͦΕ΋ߟྀ w Ԇ΂ςΟ οΫ਺ͱςϯϙνΣϯδ৘ใ͔ΒͦͷԻූ͸Կඵ໨ͳͷ͔ܭࢉ w $BOWBTͷݱࡏͷදࣔഒ཰Ͱ͸ࠨ୺͔Βӈ୺·Ͱ͕Կඵ͔ΒԿඵ·Ͱ͔ܭࢉ w ಛఆͷԻූ͕ݱࡏͷ$BOWBTͰYԿϐΫηϧ໨ɺ ZԿϐΫηϧ໨ͳͷ͔ܭࢉ w ͦͷԻූͷ௕͕͞ͲΕ͚ͩͳͷ͔ಉ༷ʹܭࢉ͠XJEUIԿϐΫηϧɺ IFJHIUԿϐΫηϧͳͷ͔ܭࢉ w Α ͏΍͘ඳըͰ͖Δ ʂ ʂ

Slide 21

Slide 21 text

ࠓޙඞཁͦ͏ͳ΋ͷ w ഥ਺ͱςΟ οΫ਺͔Βɺ Ԇ΂ԿςΟ οΫ໨ͳͷ͔Λܭࢉ͢Δؔ਺ w ೚ҙͷԆ΂ςΟ οΫ໨ʹૠೖ͞Ε͍ͯΔςϯϙνΣϯδΛߟྀ͠
 ಛఆͷςΟ οΫ͕ઈର࣌ؒʹͯ͠Կඵͳͷ͔Λܭࢉ͢Δؔ਺ w $BOWBTͷYZXIϐΫηϧܥΛ·ͱΊͯ؅ཧ͢ΔϞσϧ w ࠜؾ

Slide 22

Slide 22 text

5IBOLZPV ଓใΛ͓଴ͪԼ͍͞