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

挑戦するエンジニアを育てる！育成プロジェクトから振り返る、教える側・教わる側の心得 登壇資料

参考：【フルスタックエンジニアへの道！】ReactとTypeScriptの修行をした話 \- Findy Tech Blog

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 ຊ౰ͷ੒Ռ͸͜Ε͔Βͩʂʂ