Front-end for LINE Official Account

LINE フロントエンドエンジニア 採用説明会
「LINE公式アカウントのフロントエンド開発」
https://line.connpass.com/event/216511/

金 昌熙
フロントエンド開発センターUIT1室 副室長

Transcript

1. ,JN$IBOHIFF
   -*/&ެࣜΞΧ΢ϯτͷ
   ϑϩϯτΤϯυ։ൃ
   'SPOUFOEGPS-*/&0⒏DJBM"DDPVOU
   

   View Slide

2. ,JN$IBOHIFF
   ϑϩϯτΤϯυ։ൃηϯλʔ
   6*5ࣨ෭ࣨ௕
   'SPOUFOE%FWνʔϜ
   େखϙʔλϧձࣾ
   ˣ
   ೥-*/&ೖࣾ
   -*/&ެࣜΞΧ΢ϯτͷϑϩϯτΤϯυ։ൃΛϦʔυ
   ࠷ۙͷझຯ͸Ո଒ͱͷυϥΠϒ🚘
   ΩϜ νϟϯϑΟ
   

   View Slide

3. View Slide

4. -*/&ެࣜΞΧ΢ϯτ
   ೔ৗʹ༹͚ࠐΈͳ͕ΒϢʔβʔͱاۀɾళฮͱͷ઀఺Λ૑Γग़͢
   

   View Slide

5. -*/&ެࣜΞΧ΢ϯτ
   -*/&!ͱͷؔ܎
   w લ਎ʹ͋ͨΔ-*/&!͸೥݄ʹ
   -*/&ެࣜΞΧ΢ϯτ΁αʔϏεҠߦ
   w ݱࡏ͸-*/&ެࣜΞΧ΢ϯτʹ໊শΛ౷Ұ
   w αʔϏεҠߦʹ൐͍ɺ؅ཧπʔϧͳͲͷϑϩϯτ
   ΤϯυΛؚΉશͯΛҰ৽
   

   View Slide

6. -*/&ެࣜΞΧ΢ϯτ
   αʔϏε֓ཁ
   w -*/&ͷओཁར༻ΧࠃΛத৺ʹల։͢Δ(MPCBM1MBUGPSN
   ʢࠃ಺֎߹ܭ։ઃ਺ສΞΧ΢ϯτҎ্ʣ
   w ֗தͷ͓ళΛத৺ʹ෯޿͍ۀछͰར༻͞Ε͍ͯΔ
   ˞೔ຊʹ͓͚Δۀछผ෼෍
   ඒ༰ɾαϩϯ
   ݸਓ
   ҿ৯ళɾϨετϥϯ
   γϣοϐϯάɾখചళ
   ڭҭɾश͍ࣄ
   ʜ
   ʜ
   

   View Slide

7. Ϣʔβʔ͕͓ళͱݴ͏ͳΒ
   ͜Ε͸UP#αʔϏεͰ͔͢ʁ
   

   View Slide

8. -*/&ެࣜΞΧ΢ϯτ
   ݟํʹΑͬͯUP#ͱ΋UP$ͱ΋ݴ͑·͢
   

   View Slide

9. -*/&ެࣜΞΧ΢ϯτ
   ݟํʹΑͬͯUP#ͱ΋UP$ͱ΋ݴ͑·͢
   ΦϯϥΠϯαʔϏε
   

   View Slide

10. -*/&ެࣜΞΧ΢ϯτ
    ݟํʹΑͬͯUP#ͱ΋UP$ͱ΋ݴ͑·͢
    اۀ
    

    View Slide

11. -*/&ެࣜΞΧ΢ϯτ
    ݟํʹΑͬͯUP#ͱ΋UP$ͱ΋ݴ͑·͢
    ֗தͷ͓ళ
    

    View Slide

12. -*/&ެࣜΞΧ΢ϯτ
    ݟํʹΑͬͯUP#ͱ΋UP$ͱ΋ݴ͑·͢
    ݸਓ
    

    View Slide

13. -*/&ެࣜΞΧ΢ϯτ
    ݟํʹΑͬͯUP#ͱ΋UP$ͱ΋ݴ͑·͢
    -*/&ެࣜΞΧ΢ϯτ͸
    ୭Ͱ΋࡞Ε·͢
    

    View Slide

14. -*/&ެࣜΞΧ΢ϯτ
    ҰൠϢʔβʔʹ৮ΕΔ΋ͷ
    

    View Slide

15. -*/&ެࣜΞΧ΢ϯτ
    ҰൠϢʔβʔʹ৮ΕΔ΋ͷ
    ެࣜΞΧ΢ϯτϦετ
    

    View Slide

16. -*/&ެࣜΞΧ΢ϯτ
    ҰൠϢʔβʔʹ৮ΕΔ΋ͷ
    Ϋʔϙϯ
    

    View Slide

17. -*/&ެࣜΞΧ΢ϯτ
    ҰൠϢʔβʔʹ৮ΕΔ΋ͷ
    γϣοϓΧʔυ
    

    View Slide

18. -*/&ެࣜΞΧ΢ϯτ
    UP#͔ΒUP$΁
    ͓ళ ؅ཧπʔϧ ফඅऀ
    

    View Slide

19. ԿΛ։ൃ͢Δͷ͔
    

    View Slide

20. ԿΛ։ൃ͢Δͷ͔
    ։ൃͷൣғ
    w -*/&ެࣜΞΧ΢ϯτΦʔφʔ޲͚ͷ؅ཧπʔϧ
    -*/&0⒏DJBM"DDPVOU.BOBHFS8FC൛ɾΞϓϦ
    w ফඅऀ޲͚ൢଅഔମ
    -*/&ެࣜΞΧ΢ϯτϦετɾΫʔϙϯɾγϣοϓΧʔυ
    w ۀ຿ޮ཰ԽͷͨΊͷ಺෦πʔϧ
    

    View Slide

21. ԿΛ։ൃ͢Δͷ͔
    ։ൃମ੎
    w ࠃ಺֎։ൃڌ఺ͷdਓͷϑϩϯτΤϯυΤϯδχΞʹΑΔڠۀମ੎
    ؅ཧπʔϧ ΞϓϦ ൢଅഔମ
    🇯🇵'SPOUFOE%FW
    🇰🇷8FC4FSWJDF%FWɾ
    🇻🇳6*55FBN
    🇯🇵'SPOUFOE%FW
    🇯🇵"QQ%FW
    🇻🇳/BUJWF5FBN
    🇯🇵'SPOUFOE%FW
    

    View Slide

22. ԿΛ։ൃ͢Δͷ͔
    ٕज़ελοΫ
    w +BWB4DSJQU5ZQF4DSJQU
    w 7VFKTYY
    w LPSPNP #PPUTUSBQCBTFE
    
    w 8FC$PNQPOFOUT
    w (JU+*3"$JSDMF$*
    

    View Slide

23. ԿΛ։ൃ͢Δͷ͔
    w -*/&ެࣜΞΧ΢ϯτΦʔφʔ޲͚ͷ؅ཧπʔϧ
    -*/&0⒏DJBM"DDPVOU.BOBHFS8FC൛ɾΞϓϦ
    w ফඅऀ޲͚ൢଅഔମ
    -*/&ެࣜΞΧ΢ϯτϦετɾΫʔϙϯɾγϣοϓΧʔυ
    w ۀ຿ޮ཰ԽͷͨΊͷ಺෦πʔϧ
    ։ൃͷൣғ
    

    View Slide

24. -*/&ެࣜΞΧ΢ϯτ؅ཧπʔϧ
    w ͍ΘΏΔ$.4ͱݺ͹ΕΔ΋ͷ
    w 1$޲͚ͷ8FC൛ͱϞόΠϧΞϓϦΛఏڙ
    w ෳ਺ͷػೳΛඋ͑ͨେن໛ΞϓϦέʔγϣϯ
    w ೥ͷॳϦϦʔεҎདྷɺ
    िճҎ্ͷඇৗʹૣ͍αΠΫϧͰϦϦʔε
    

    View Slide

25. -*/&ެࣜΞΧ΢ϯτ؅ཧπʔϧ
    

    View Slide

26. -*/&ެࣜΞΧ΢ϯτ؅ཧπʔϧ
    

    View Slide

27. -*/&ެࣜΞΧ΢ϯτ؅ཧπʔϧ
    

    View Slide

28. -*/&ެࣜΞΧ΢ϯτ؅ཧπʔϧ
    wΫʔϙϯ
    wγϣοϓΧʔυ
    w͍͋ͭ͞ϝοηʔδ
    wϦονϝχϡʔ
    wϦαʔν
    w෼ੳ
    wλΠϜϥΠϯ
    wΦʔσΟΤϯε
    w-*/&5BH
    w௨஌
    w͓ࢧ෷͍
    w.FTTBHJOH"1*
    wάϧʔϓ
    w-*/&#FBDPO
    UPCFDPOUJOVFE
    wϝοηʔδ഑৴
    wεςοϓ഑৴
    wࣗಈԠ౴ϝοηʔδ
    wϦονϝοηʔδ
    wϦονϏσΦϝοηʔδ
    wΧʔυλΠϓϝοηʔδ
    w-*/&޿ࠂʢ༑ͩͪ௥Ճʣ
    

    View Slide

29. -*/&ެࣜΞΧ΢ϯτ؅ཧπʔϧ
    ϞόΠϧ޲͚ΞϓϦ൛
    w 1VTI௨஌ͳͲͷԸܙΛड͚ΔͨΊʹ
    /BUJWFͷΨϫΛ࣋ͬͨ8FCWJFXΞϓϦ
    w 8FC൛ʹൺ΂Δͱػೳ͸΍΍গͳΊ
    w 8FC൛ͱϕʔεΛڞ༗ͯ͠։ൃ
    w /BUJWFͱͷ࿈ܞͰ#FZPOE8FCͳػೳΛ࣋ͭ
    7P*1ి࿩ண৴*NBHF1JDLFS%FFQMJOLͳͲ
    

    View Slide

30. -*/&ެࣜΞΧ΢ϯτ؅ཧπʔϧ
    ։ൃͷΠϝʔδ
    CBTF
    FOUJUJFT
    ʜ ʜ
    VUJMJUZ
    TIPQDBSE
    UJNFMJOF
    OPUJpDBUJPO
    SFTFBSDI
    CSPBEDBTU
    DPVQPO
    SJDINFOV
    SJDINFTTBHF
    ʜ ػೳ͝ͱʹݸผϨϙδτϦ
    

    View Slide

31. -*/&ެࣜΞΧ΢ϯτ؅ཧπʔϧ
    ։ൃͷΠϝʔδ
    CBTF
    FOUJUJFT
    ʜ ʜ
    VUJMJUZ
    TIPQDBSE
    UJNFMJOF
    OPUJpDBUJPO
    SFTFBSDI
    CSPBEDBTU
    DPVQPO
    SJDINFOV
    SJDINFTTBHF
    ʜ
    W
    W
    W
    W
    W
    W
    W
    W
    ػೳ͝ͱʹόʔδϣχϯά
    OQNύοέʔδԽ
    

    View Slide

32. -*/&ެࣜΞΧ΢ϯτ؅ཧπʔϧ
    ։ൃͷΠϝʔδ
    CBTF
    ʜ ʜ
    FOUJUJFT
    VUJMJUZ
    ʜ
    TIPQDBSE
    UJNFMJOF
    OPUJpDBUJPO
    SFTFBSDI
    CSPBEDBTU
    DPVQPO
    SJDINFOV
    SJDINFTTBHF
    W
    W
    W
    W
    W
    W
    W
    W
    ϕʔεϨϙδτϦͰ#VJMEɾ*OUFHSBUJPO
    

    View Slide

33. -*/&ެࣜΞΧ΢ϯτ؅ཧπʔϧ
    ։ൃͷΠϝʔδ
    CBTF
    ʜ ʜ
    FOUJUJFT
    VUJMJUZ
    ʜ
    TIPQDBSE
    UJNFMJOF
    OPUJpDBUJPO
    SFTFBSDI
    CSPBEDBTU
    DPVQPO
    SJDINFOV
    SJDINFTTBHF
    W
    W
    W
    W
    W
    W
    W
    W
    ϦϦʔε
    ఆظɾෆఆظͰϦϦʔε
    

    View Slide

34. -*/&ެࣜΞΧ΢ϯτ؅ཧπʔϧ
    ։ൃͷΠϝʔδ
    CBTF
    ʜ ʜ
    FOUJUJFT
    VUJMJUZ
    ʜ
    TIPQDBSE
    UJNFMJOF
    OPUJpDBUJPO
    SFTFBSDI
    CSPBEDBTU
    DPVQPO
    SJDINFOV
    SJDINFTTBHF
    W
    W
    W
    W
    W
    W
    W
    W
    ϦϦʔε
    ఆظɾෆఆظͰϦϦʔε
    ೔ʑػೳ͕௥Ճ͞Ε͍ͯͨ͘Ίؔ܎ऀͱͷ
    ໖ີͳ࿈ܞɾίϛϡχέʔγϣϯ͕ॏཁ
    

    View Slide

35. ԿΛ։ൃ͢Δͷ͔
    w -*/&ެࣜΞΧ΢ϯτΦʔφʔ޲͚ͷ؅ཧπʔϧ
    -*/&0⒏DJBM"DDPVOU.BOBHFS8FC൛ɾΞϓϦ
    w ফඅऀ޲͚ൢଅഔମ
    -*/&ެࣜΞΧ΢ϯτϦετɾΫʔϙϯɾγϣοϓΧʔυ
    w ۀ຿ޮ཰ԽͷͨΊͷ಺෦πʔϧ
    ։ൃͷൣғ
    

    View Slide

36. ফඅऀ޲͚ൢଅഔମ
    ެࣜΞΧ΢ϯτϦετ
    w ެࣜΞΧ΢ϯτ͕ݟ͔ͭΔɾग़⁊͑Δϖʔδ
    w ҰൠϢʔβʔ޲͚ʹల։
    

    View Slide

37. ফඅऀ޲͚ൢଅഔମ
    γϣοϓΧʔυ
    w ֗தͷ͓ళͷελϯϓΧʔυ
    w ৗ࿈͞ΜʹಛయΛఏڙͰ͖Δແྉػೳ
    w ࢴͷϙελʔ͕࣮ళฮʹஔ͔ΕΔ
    

    View Slide

38. ফඅऀ޲͚ൢଅഔମ
    Ϋʔϙϯ
    w ϝοηʔδͰ഑৴Ͱ͖Δ͓ళͷΫʔϙϯ
    w ༑ͩͪݶఆΫʔϙϯ΍நબΫʔϙϯ΋ఏڙ
    

    View Slide

39. ԿΛ։ൃ͢Δͷ͔
    w -*/&ެࣜΞΧ΢ϯτΦʔφʔ޲͚ͷ؅ཧπʔϧ
    -*/&0⒏DJBM"DDPVOU.BOBHFS8FC൛ɾΞϓϦ
    w ফඅऀ޲͚ൢଅഔମ
    -*/&ެࣜΞΧ΢ϯτϦετɾΫʔϙϯɾγϣοϓΧʔυ
    w ۀ຿ޮ཰ԽͷͨΊͷ಺෦πʔϧ
    ։ൃͷൣғ
    

    View Slide

40. ௅Μͩ՝୊
    

    View Slide

41. ௅Μͩ՝୊
    ೉қ౓ͷ͋Δػೳ࣮૷
    

    View Slide

42. ௅Μͩ՝୊
    ೉қ౓ͷ͋Δػೳ࣮૷
    

    View Slide

43. ௅Μͩ՝୊
    ։ൃऀମݧΛߟྀͨ͠"1*ઃܭ
    w -*/&ΞϓϦͷ*NBHF1JDLFSΛҠ২
    w /BUJWFͱͷ΍ΓͱΓΛϑϩϯτΤϯυ։ൃऀ
    ໨ઢͰߦ͏ͨΊͷ"1*Λ։ൃɾఏڙ
    

    View Slide

44. ௅ΜͰ͍Δ՝୊
    

    View Slide

45. ௅ΜͰ͍Δ՝୊
    ࣋ଓՄೳͳେن໛ΞϓϦέʔγϣϯ
    w ׂͷίʔυ͕7VFKTY+BWB4DSJQUʹͳ͓ͬͯΓૣ଎ݹͼ͸͡Ίͨ
    w ৽ن։ൃ͸7VFY5ZQF4DSJQUʹ͍ͯ͠Δ͕ɺن໛্طଘίʔυͷશ໘
    ϦϓϨΠε͸ϋʔυϧ͕ߴ͍
    w ංେԽʹ൐͍։ൃʹ͓͚ΔϏϧυੑೳ͕௿Լ
    w 8FC"1*ͱͷ΍ΓͱΓ͕૿͑ɺΞϓϦέʔγϣϯͷੑೳ͕௿Լ
    w ػೳ։ൃΛࢭΊΔ͜ͱͳ͘࠷దͳܗʹ͍ͯ͘͠
    

    View Slide

46. ௅ΜͰ͍Δ՝୊
    ࣋ଓՄೳͳେن໛ΞϓϦέʔγϣϯ
    w ׂͷίʔυ͕7VFKTY+BWB4DSJQUʹͳ͓ͬͯΓૣ଎ݹͼ͸͡Ίͨ
    w ৽ن։ൃ͸7VFY5ZQF4DSJQUʹ͍ͯ͠Δ͕ɺن໛্طଘίʔυͷશ໘
    ϦϓϨΠε͸ϋʔυϧ͕ߴ͍
    w ංେԽʹ൐͍։ൃʹ͓͚ΔϏϧυੑೳ͕௿Լ
    w 8FC"1*ͱͷ΍ΓͱΓ͕૿͑ɺΞϓϦέʔγϣϯͷੑೳ͕௿Լ
    w ػೳ։ൃΛࢭΊΔ͜ͱͳ͘࠷దͳܗʹ͍ͯ͘͠
    ೔ʑมԽ͢ΔϏδωεχʔζʹԠ͑
    ೉қ౓ͷߴ͍՝୊ʹ΋࣍ʑͱ௅ΜͰ͍͖·͢
    

    View Slide

47. ָ͍͠ͱ͜Ζ
    

    View Slide

48. ָ͍͠ͱ͜Ζ
    -*/&ެࣜΞΧ΢ϯτ։ൃͷັྗ
    w ೔ຊ͚ͩͰͳ͘ւ֎Ͱ΋੝ΜͳάϩʔόϧαʔϏεʹؔΘΕΔ
    w ւ֎ͷ։ൃڌ఺ͱަྲྀ͕Ͱ͖Δ
    w Ϣʔβʔ໨ઢΛ࣋ͪͳ͕ΒUP#αʔϏεͷ։ൃ͕Ͱ͖Δ
    w اըऀͱͷڑ཭͕ඇৗʹ͍ۙͷͰاըஈ֊͔ΒҰॹʹٞ࿦͠ɺ
    ࡞Γ্͍࣮͛ͯ͘ײ͕ຯΘ͑Δ
    

    View Slide

49. ͜͏͍͏ํʹདྷͯ΄͍͠
    

    View Slide

50. ͜͏͍͏ํʹདྷͯ΄͍͠
    ٻΊΔਓࡒ૾
    w 7VFKTΛ༻͍ͨେن໛ΞϓϦέʔγϣϯ։ൃʹڵຯ͕͋Δ
    w पΓͱίϛϡχέʔγϣϯ͢Δ͜ͱΛ޷ΈɺͦͷதͰ΋ͷͮ͘Γ͍ͨ͠
    w ؆୯ͳ໰୊ΑΓ͸೉͍͠໰୊ͷ΄͏͕޷͖
    w Ϣʔβʔ໨ઢͰͳ͘Ϗδωε໨ઢͰ΋෺ࣄΛݟΔ
    w ͱʹ͔͘਎ۙʹ࣮ײͰ͖ΔαʔϏεʹؔΘΓ͍ͨ
    

    View Slide

51. ͜͏͍͏ํʹདྷͯ΄͍͠
    ٻΊΔਓࡒ૾
    w 7VFKTΛ༻͍ͨେن໛ΞϓϦέʔγϣϯ։ൃʹڵຯ͕͋Δ
    w पΓͱίϛϡχέʔγϣϯ͢Δ͜ͱΛ޷ΈɺͦͷதͰ΋ͷͮ͘Γ͍ͨ͠
    w ؆୯ͳ໰୊ΑΓ͸೉͍͠໰୊ͷ΄͏͕޷͖
    w Ϣʔβʔ໨ઢͰͳ͘Ϗδωε໨ઢͰ΋෺ࣄΛݟΔ
    w ͱʹ͔͘਎ۙʹ࣮ײͰ͖ΔαʔϏεʹؔΘΓ͍ͨ
    ͥͻҰ౓࿩͠·͠ΐ͏
    

    View Slide