成果を出しながら成長する、アウトプット駆動のキャッチアップ術 / Output-driven catch-up techniques to grow while producing results

Transcript

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

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

   / TypeScriptमߦ @aiandrox

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

4. ௅ઓલͷࣗ෼ • લ৬Ͱ Rails View / CoffeeScript / FlowType /

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

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

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

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

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

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

10. ੒௕ͱ੒Ռͷؔ܎ 10 ੒Ռ ੒ ௕ ߴ ߴ ఀ଺κʔϯ ݚमκʔϯ ർฐκʔϯ

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

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

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

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

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

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

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

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

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

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

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

    ɹࢥߟ΍εΫγϣ

21. 3ϲ݄ͷ੒௕ͱ੒Ռ 21

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

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

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

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

    ཧ૝κʔϯ

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

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