Slide 1

Slide 1 text

੒ՌΛग़͠ͳ͕Β੒௕͢Δɺ Ξ΢τϓοτۦಈͷΩϟονΞοϓज़ 2024/12/19 ௅ઓ͢ΔΤϯδχΞΛҭͯΔʂҭ੒ϓϩδΣΫτ͔ΒৼΓฦΔɺڭ͑ΔଆɾڭΘΔଆͷ৺ಘ ϑΝΠϯσΟגࣜձࣾɹԕ౻ ܆

Slide 2

Slide 2 text

ࣗݾ঺հ 2 ENDʢԕ౻ ܆ʣ খֶߍڭࢣ͔ΒϓϩάϥϛϯάεΫʔϧΛܦͯɺ 3VCZΛϝΠϯݴޠͱͯ͠ݱࡏΤϯδχΞྺ೥ 2023೥2݄: ϑΝΠϯσΟೖࣾ 2024೥4݄ʙ7݄: React / TypeScriptमߦ @aiandrox

Slide 3

Slide 3 text

ϑϩϯτΤϯυ௅ઓલͷࣗ෼ʹ͍ͭͯ 3

Slide 4

Slide 4 text

௅ઓલͷࣗ෼ ● લ৬Ͱ Rails View / CoffeeScript / FlowType / jQuery / Reactͷ ࠞࡏͨ͠ϑϩϯτΤϯυ ● ϑΝΠϯσΟͰ͸ɺ؆୯ͳϩδοΫͷॻ͖׵͑ͳͲͷ࡞ۀϨϕϧ 4 ۀ຿ܦݧ ● React / TypeScript / NextͳͲͰϖϥΠνΞϓϦ࡞੒ܦݧ ݸਓ։ൃ

Slide 5

Slide 5 text

௅ઓલͷࣗ෼ ● ࣗ෼͕Ͱ͖ΔൣғͰ͸ੵۃతʹ΍Γ͍ͨ ● ͱ͸͍͑ɺ·ͣ͸όοΫΤϯυΛ͋Δఔ౓Ͱ͖ΔΑ͏ʹͳ͔ͬͯΒ ͔ͳ… 5 ϑϩϯτΤϯυʹର͢Δߟ͑ํ ʮ͍͔ͭ΍Ζ͏……͍͔ͭʯ

Slide 6

Slide 6 text

௅ઓͷ͖͔͚ͬ ● ϑϩϯτΤϯυͷख͕଍Γͳ͍ 6 νʔϜͷঢ়گ ● όοΫΤϯυʹ΋׳Εɺଞͷ͜ͱʹ΋νϟϨϯδ͍ͨ͠ ࣗ෼ͷߟ͑ ʮ΍ͬͯΈΔ͔ʂʯͱ͍͏͍ܰϊϦ

Slide 7

Slide 7 text

ʮ੒ՌΛग़͠ͳ͕Β੒௕͢Δʯͱ͸ʁ 7

Slide 8

Slide 8 text

੒௕ͱ͸ 8 ● Ͱ͖Δ͜ͱ͕૿͑Δ ● ΩϟϦΞͷՄೳੑ͕޿͕Δ ● ࢢ৔Ձ஋ͷ޲্ ஌ࣝ΍εΩϧͷ෯͕޿͕Δɺઐ໳ੑ͕ߴ·Δ͜ͱ

Slide 9

Slide 9 text

੒Ռͱ͸ 9 ● ച্΍ධՁ ● ૊৫΍νʔϜʹߩݙ͍ͯ͠Δ࣮ײ ࢓ࣄΛ௨ͯ͡໨ʹݟ͑ΔΞ΢τϓοτɺ࣮੷

Slide 10

Slide 10 text

੒௕ͱ੒Ռͷؔ܎ 10 ੒Ռ ੒ ௕ ߴ ߴ ఀ଺κʔϯ ݚमκʔϯ ർฐκʔϯ ཧ૝κʔϯ εΩϧͷशಘ͕ͳ͘੒Ռ΋ग़ͤͳ͍ εΩϧΞοϓʹूத͓ͯ͠Γ࣮ફ͕൐Θͳ͍ ϧʔςΟϯԽ͠৽ֶ͍͠ͼ͕ͳ͍ ੒௕ͱ੒Ռ͕૬৐ޮՌΛੜΉ

Slide 11

Slide 11 text

੒௕ͱ੒Ռͷؔ܎ 11 ● ੒௕͢Δ͜ͱͰ੒ՌΛग़ͤΔΑ͏ʹͳΔ ● ੒ՌΛٻΊΔதͰ੒௕͢Δ ੒௕ ੒Ռ ੒௕ ੒Ռ

Slide 12

Slide 12 text

੒௕ͱ੒Ռͷؔ܎ 12 ● ੒௕͢Δ͜ͱͰ੒ՌΛग़ͤΔΑ͏ʹͳΔ ● ੒ՌΛٻΊΔதͰ੒௕͢Δ ੒௕ ੒Ռ ੒௕ ੒Ռ

Slide 13

Slide 13 text

Ξ΢τϓοτۦಈͰΩϟονΞοϓ͢Δ 13

Slide 14

Slide 14 text

͜͜ͰͷΞ΢τϓοτͷఆٛ ● ॻ͍ͨίʔυʢϓϧϦΫʣ ● timesͷϝϞ 14 ੒௕ͷݟ͑ΔԽ

Slide 15

Slide 15 text

Ξ΢τϓοτ 15 Output ϓϧϦΫ times ɹࢥߟ΍εΫγϣ

Slide 16

Slide 16 text

Ξ΢τϓοτ 16 Output ϓϧϦΫ times ɹࢥߟ΍εΫγϣ

Slide 17

Slide 17 text

Πϯϓοτ 17 Input ϊ΢ϋ΢هࣄ react.devͷྠಡձ

Slide 18

Slide 18 text

Πϯϓοτ 18 Input ϊ΢ϋ΢هࣄ react.devͷྠಡձ ʮࢣʯ͔Βͷڭ͑

Slide 19

Slide 19 text

Ξ΢τϓοτΛࢧ͑Δج൫ 19 ։ൃπʔϧɺCI

Slide 20

Slide 20 text

Ξ΢τϓοτͱΠϯϓοτͷαΠΫϧ 20 Input Output ϊ΢ϋ΢هࣄ react.devͷྠಡձ ʮࢣʯ͔Βͷڭ͑ ։ൃπʔϧɺCI ϓϧϦΫ times ɹࢥߟ΍εΫγϣ

Slide 21

Slide 21 text

3ϲ݄ͷ੒௕ͱ੒Ռ 21

Slide 22

Slide 22 text

3ϲ݄ͷ੒௕ ● جຊతͳUI͸ࣗ෼Ͱθϩ͔Β࣮૷Ͱ͖Δ ● جຊతͳઃܭࢥ૝Λཧղ͠ɺ৽نͷઃܭͳͲΛࣗ෼ͷ಄ Ͱߟ͑ΒΕΔ ● όοΫΤϯυ΋ϑϩϯτΤϯυ؍఺Λߟྀͯ͠։ൃͰ͖ ΔΑ͏ʹͳͬͨ 22

Slide 23

Slide 23 text

3ϲ݄ͷ੒௕ ● ϓϧϦΫΛ6݅/೔ఔ౓࡞ΕΔΑ͏ʹͳͬͨ 23

Slide 24

Slide 24 text

3ϲ݄ͷ੒Ռ ● αʔϕΠػೳϦϦʔε🎉 24

Slide 25

Slide 25 text

ҭ੒ϓϩδΣΫτʹ͓͚ΔҐஔ 25 ੒Ռ ੒ ௕ ߴ ߴ ఀ଺κʔϯ ݚमκʔϯ ർฐκʔϯ ཧ૝κʔϯ

Slide 26

Slide 26 text

੒௕ͱ੒Ռͷؔ܎ 26 ● ੒௕͢Δ͜ͱͰ੒ՌΛग़ͤΔΑ͏ʹͳΔ ● ੒ՌΛٻΊΔதͰ੒௕͢Δ ੒௕ ੒Ռ ੒௕ ੒Ռ

Slide 27

Slide 27 text

·ͱΊ 27 ຊ౰ͷ੒Ռ͸͜Ε͔Βͩʂʂ