Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front-end development for LINE Securities using React & TypeScript

LINE
July 15, 2021

Front-end development for LINE Securities using React & TypeScript

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

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

LINE

July 15, 2021
Tweet

More Decks by LINE

Other Decks in Technology

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