Front-end development for LINE Securities using React & TypeScript

LINE フロントエンドエンジニア 採用説明会
「React & TypeScript で作るLINE証券のフロントエンド開発」
https://line.connpass.com/event/216511/

水牧 稜太
フィナンシャル開発センター Frontendチーム フロントエンドエンジニア

Transcript

1. 3FBDU5ZQF4DSJQUͰ࡞Δ
   -*/&ূ݊ͷ 'SPOU&OE ։ൃ
   ϑΟφϯγϟϧ։ൃηϯλʔ
   ϑϩϯτΤϯυΤϯδχΞ
   ਫ຀ ྏଠ
   2021.07
   

   View Slide

2. ਫ຀ ྏଠ
   -*/&גࣜձࣾ
   ϑϩϯτΤϯυΤϯδχΞ
   ೥౓ͷ৽ଔೖࣾ
   ΞϧόΠτظؒʢ೥ ݄͔ΒʣΛؚΊΔͱ
   -*/&ূ݊ 'SPOU&OEνʔϜ಺ͰҰ൪ͷݹࢀɻ
   όΠτ࣌୅ʹऔҾը໘Λ࡞ͬͨ
   ࠷ۙ͸νʔϜ಺ͷλεΫ؅ཧͳͲ΋୲౰ɻ
   

   View Slide

3. -*/&ূ݊ʹ͍ͭͯ
   εϚϗʹಛԽͨ͠
   ূ݊αʔϏε
   ݱ෺औҾɺ৴༻औҾɺ̍גऔҾͳͲͷ
   ূ݊αʔϏεΛ࢖͍΍͍͢ 6*69Ͱ
   طଘͷূ݊ձࣾʹ͸ͳ͍ɺֵ৽తͳ
   Ωϟϯϖʔϯ΋
   FYגͷλΠϜηʔϧ
   

   View Slide

4. -*/&ূ݊ʹ͍ͭͯ
   -*/&ͷΞϓϦ಺ϒϥ΢βͰͷ
   Ӿཡ͕ϝΠϯ
   ී௨ͷ 8ΞϓϦͳͷͰɺ$ISPNF
   ͳͲͷϒϥ΢βͰ΋ݟΒΕΔ͕ɺϝΠ
   ϯͷಈઢ͸ -*/&಺͔Βͦͷ·· *"#
   Ͱ։͘৔߹ʹͳΔɻ
   ը໘ʹΑͬͯ͸ 1$7JFX΋ଘࡏ
   

   View Slide

5. -*/&ূ݊ʹ͍ͭͯ
   ɾαʔϏε։࢝
   ɾ૯ޱ࠲਺ɿສޱ࠲ಥഁʢ˞ʣ
   ɾࠃ಺ג݄ؒചങ୅ۚɿԯԁ௒ʢ˞ʣ
   ɾ17TFDͷΞΫηεʢ˞ʣ
   ˞ʣ೥݄࣌఺
   ˞ʣ೥݄࣌఺
   ˞ʣ೥݄࣌఺
   

   View Slide

6. -*/&ূ݊Ͱͷ 'SPOU&OE ։ൃ
   3FBDU 5ZQF4DSJQU
   /FYUKT
   TUZMFEDPNQPOFOUT
   $44.PEVMFT 3FDPJM
   MJOBSJB
   

   View Slide

7. -*/&ূ݊Ͱͷ 'SPOU&OE ։ൃ
   3FBDUͱ 5ZQF4DSJQUͰͷը໘ߏங͕ϝΠϯ͕ͩ
   ɾαʔόʔ΋όϦόϦॻ͘ʢ/PEFKT
   ɾ$44΋զʑͰָ͠Ή
   ɾٕज़બఆ͸ࣗ༝ɻνʔϜͰٞ࿦ܾͯ͠ΊΔ
   

   View Slide

8. -*/&ূ݊ 'SPOU&OE νʔϜͷັྗ
   ɾ৽͍ٕ͠ज़ͷ࠾༻ʹ͸ҙཉత
   3FDPJM΋͍ͩͿૣ͍ஈ֊Ͱ࠾༻
   ɾͱʹ͔͘Ϟμϯͳ࠷దղΛ௥͍ٻΊΔ
   ϕετͳղ͸ݶΒΕΔͷͰɺͱʹ͔͘νʔϜ಺Ͱٞ࿦ͯ͠࠷దͳ΋ͷΛ୳͢ɻ
   ৽͍ٕ͠ज़΋ԕྀͳ͘࠾༻Ͱ͖Δ؀ڥ͕͋Δɻ
   

   View Slide

9. -*/&ূ݊ 'SPOU&OE νʔϜͷັྗ
   ɾܕ҆શ΁ͷͩ͜ΘΓ
   ʮܕ͸ະདྷ΁ͷ౤ࢿʯ
   l0QUJPOBMʹ͢Δͷ͔ɺVOEFGJOFEͱͷ 6OJPO ܕʹ͢Δͷ͔z
   l3FBDU$PNQPOFOU1SPQTͰলུͯ͠ྑ͍ͷ͔ɺ۪௚ʹॻ͘΂͖ͳͷ͔z
   ͦ͏͍ͬͨࡉ͔͍ͱ͜Ζ͕ɺอकੑΛߴΊΔɻ
   

   View Slide

10. -*/&ূ݊ 'SPOU&OE νʔϜ͕
    ॏཁࢹ͍ͯ͠ΔεΩϧ
    3FBDU
    
    5ZQF4DSJQU
    Ͱͷ։ൃྗ
    طଘίʔυ
    ಡΈղ͘ྗ
    νϟϨϯδਫ਼ਆ
    ͱ
    ࣗओੑ
    

    View Slide

11. -*/&ূ݊ 'SPOU&OE νʔϜ͕ॏཁࢹ͢ΔεΩϧ
    ɾ3FBDUY5ZQF4DSJQUͷྗ
    جຊతͳ 3FBDU΍ 5ZQF4DSJQUͰͷ࣮૷ೳྗ͔Βɺ༏Εͨίϯϙʔωϯτͷ
    ઃܭɺಡΈ΍͍͢ίʔυ͕ॻ͚Δ͔
    ܦݧҎ্ʹ޲্৺
    ܦݧ΍εΩϧ͚ͩͰ͸ͳͯ͘ɺ͜Ε͔ΒҰॹʹ࢓ࣄΛ্͍ͯ͘͠ͰҰॹʹ੒௕
    ͍͚ͯ͠Δ͔
    

    View Slide

12. -*/&ূ݊ 'SPOU&OE νʔϜ͕ॏཁࢹ͢ΔεΩϧ
    ɾطଘίʔυΛಡΈղ͘ྗ
    ͢Ͱʹେن໛αʔϏεͳͷͰɺطଘͷίʔυΛಡΜͰ࣮૷Λ೺Ѳ͢Δͱ͍͏࡞ۀ
    ͸සൟʹൃੜ
    ද໘ʹ͋Δ࣮૷Λཧղ͢Δ͚ͩͰ͸ͳ͘ɺഎޙʹ͋ΔઃܭͷҙਤͳͲந৅తͳ͜
    ͱ΋ؚΊͯײ͡औͬͯ΋Β͏ྗ
    

    View Slide

13. -*/&ূ݊ 'SPOU&OE νʔϜ͕ॏཁࢹ͢ΔεΩϧ
    ɾ৽͍͠΋ͷ΁ͷνϟϨϯδਫ਼ਆ
    ɾࣗओతʹಈ͚Δ͜ͱ
    -*/&ূ݊ࣗମ΋νϟϨϯδϯάͰ͋Γɺٕज़తʹ΋νϟϨϯδ͍͖͍ͯͨ͠
    ݸʑͷҊ݅ͰͦΕͧΕ͕اը΍ଞͷνʔϜͱٞ࿦ͯ͠࢓༷ͳΓํ޲ੑΛܾΊ͍ͯ
    ͘ͳͲͷγνϡΤʔγϣϯ΋ଟ͘ൃੜ͢ΔͷͰɺͱʹ͔ࣗ͘ओతʹಈ͍ͯ΋Β͏
    ৔໘͸ଟ͍
    

    View Slide

14. -*/&ূ݊ͷ৬৔؀ڥ
    ɾେ࡚ 'SPOU&OEνʔϜ͸ ࣾһ ໊ ۀ຿ҕୗ ໊
    -',ʹ΋ ໊
    ɾ͜ͷ̍೥͸ͣͬͱϦϞʔτʢࠓޙ͸ձࣾͷํ਑ʹΑΔ
    ɾΦϑΟε͸ศརʢݱࡏ͸େ࡚ʹ͋Δ
    ɾۈ຿͸݁ߏϑϨΩγϒϧ
    

    View Slide

15. -*/&ূ݊Ͱͷ։ൃͷྲྀΕ
    ɾ৽نҊ͔݅ͳΓଟ͍
    ɾվળ͸ͦ͏ͨ͠தʹຒΊࠐΉɻ
    େ͖͍΋ͷ͸ɺվળ͚ͩͰҊ݅Խ
    ɾ2"௒͔ͬ͠Γ΍Γ·͢
    ɾ1.͸͔ͳΓΤϯδχΞʹدΓͦͬͯ͘Ε·͢ʢٕज़ാͷਓ΋ଟ͍
    ɾاը %FTJHOFSͱີʹ࿈ܞΛऔΓ·͢
    

    View Slide

16. ۚ༥͸ָ͍͠
    -*/&΋ָ͍͠
    ͥͻ -*/&'JOBODJBMͷϑϩϯτΤϯυΤϯδχΞʹ
    Ԡื͍ͯͩ͘͠͞ʂ
    https://linecorp.com/ja/career/position/1102
    

    View Slide

17. -*/&ূ݊ 'SPOU&OE νʔϜͷࢀߟهࣄ
    αʔϏεΛࢭΊͣʹίʔυͷΫΦϦςΟΛ্͛Δ
    5ZQF4DSJQUʴ3FBDUͰ҆શʹ։ൃΛଓ͚Δํ๏
    https://logmi.jp/tech/articles/323587
    ʲ-*/&ূ݊ 'SPOU&OEʳ3FDPJMΛ࢖ͬͯ
    ҆શշదͳঢ়ଶ؅ཧΛखʹೖΕͨ࿩
    https://engineering.linecorp.com/ja/blog/line-sec-frontend-using-recoil-to-get-a-safe-and-
    comfortable-state-management/
    -*/&ূ݊ͷϑϩϯτΤϯυ։ൃνʔϜ͕ͩ͜ΘΔ
    lܕ҆શz ʕOP*NQMJDJU"OZ͕΋ͨΒ͢ޮՌ
    https://gihyo.jp/dev/serial/01/line2021/0001
    

    View Slide

18. THANK YOU
    

    View Slide