RTC Frontend Development 2020

RTC Frontend Development 2020

2020年度リクルート新人ブートキャンプ エンジニアコースの講義資料です

Eea9a05e6e222a3d50c73f54a49fadf4?s=128

Recruit Technologies

August 21, 2020
Tweet

Transcript

  1. RTC Frontend Development ৽Ҫஐ࢜ / ޻౻΢ΟϦΞϜெ 2020

  2. RTCϑϩϯτΤϯυ։ൃ֓ཁ 1. ࣗݾ঺հ 2. डߨੜࣗݾ঺հ 3. ϑϩϯτΤϯυͷશମ૾ʹ͍ͭͯ 4. RTCʹ͓͚ΔϑϩϯτΤϯυ։ൃʹ͍ͭͯ 5.

    ΞΠεϒϨΠΫ 6. HTML/CSS ϨΫνϟʔ 7. ϋϯζΦϯ
  3. Let's start by introducing ourselves.

  4. ৽Ҫ͞ΜASG ৽Ҫஐ࢜

  5. ASG ޻౻΢ΟϦΞϜெ @toru_kudo

  6.  Could you introduce a little bit of yourself?

  7. ϑϩϯτΤϯυͷશମ૾ʹ͍ͭͯ

  8. What Is a Front-End Developer?

  9. What Is a Front-End Developer? Source: https://en.wikipedia.org/wiki/Front-end_web_development Front-end web development,

    also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly. The challenge associated with front end development is that the tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing. The objective of designing a site is to ensure that when the users open up the site they see the information in a format that is easy to read and relevant. This is further complicated by the fact that users now use a large variety of devices with varying screen sizes and resolutions thus forcing the designer to take into consideration these aspects when designing the site. They need to ensure that their site comes up correctly in different browsers (cross-browser), different operating systems (cross-platform) and different devices (cross-device), which requires careful planning on the side of the developer.
  10. What Is a Front-End Developer? Source: https://en.wikipedia.org/wiki/Front-end_web_development Front-end web development,

    also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly. The challenge associated with front end development is that the tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing. The objective of designing a site is to ensure that when the users open up the site they see the information in a format that is easy to read and relevant. This is further complicated by the fact that users now use a large variety of devices with varying screen sizes and resolutions thus forcing the designer to take into consideration these aspects when designing the site. They need to ensure that their site comes up correctly in different browsers (cross-browser), different operating systems (cross-platform) and different devices (cross-device), which requires careful planning on the side of the developer. ΫϥΠΞϯταΠυ։ൃͱ΋ݺ͹ΕΔϑϩϯτΤϯυWeb։ൃ͸ɺWebαΠτ΍WebΞϓϦέʔγϣ ϯ༻ͷHTMLɺCSSɺJavaScriptΛੜ੒ͯ͠ɺϢʔβʔ͕௚઀ͦΕΒΛݟͨΓର࿩Ͱ͖ΔΑ͏ʹ͢Δ͜ ͱͰ͢ɻϑϩϯτΤϯυͷ։ൃʹؔ࿈͢Δ՝୊͸ɺ΢ΣϒαΠτͷϑϩϯτΤϯυΛ੍࡞͢ΔͨΊʹ࢖ ༻͞ΕΔπʔϧ΍ςΫχοΫ͕ઈ͑ͣมԽ͢ΔͨΊɺ։ൃऀ͸ͦͷ෼໺ͷൃలঢ়گΛৗʹೝࣝ͢Δඞཁ ͕͋Δͱ͍͏͜ͱͰ͢ɻ
  11. What Is a Front-End Developer? Source: https://en.wikipedia.org/wiki/Front-end_web_development Front-end web development,

    also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly. The challenge associated with front end development is that the tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing. The objective of designing a site is to ensure that when the users open up the site they see the information in a format that is easy to read and relevant. This is further complicated by the fact that users now use a large variety of devices with varying screen sizes and resolutions thus forcing the designer to take into consideration these aspects when designing the site. They need to ensure that their site comes up correctly in different browsers (cross-browser), different operating systems (cross-platform) and different devices (cross-device), which requires careful planning on the side of the developer. ΫϥΠΞϯταΠυ։ൃͱ΋ݺ͹ΕΔϑϩϯτΤϯυWeb։ൃ͸ɺWebαΠτ΍WebΞϓϦέʔγϣ ϯ༻ͷHTMLɺCSSɺJavaScriptΛੜ੒ͯ͠ɺϢʔβʔ͕௚઀ͦΕΒΛݟͨΓର࿩Ͱ͖ΔΑ͏ʹ͢Δ͜ ͱͰ͢ɻϑϩϯτΤϯυͷ։ൃʹؔ࿈͢Δ՝୊͸ɺ΢ΣϒαΠτͷϑϩϯτΤϯυΛ੍࡞͢ΔͨΊʹ࢖ ༻͞ΕΔπʔϧ΍ςΫχοΫ͕ઈ͑ͣมԽ͢ΔͨΊɺ։ൃऀ͸ͦͷ෼໺ͷൃలঢ়گΛৗʹೝࣝ͢Δඞཁ ͕͋Δͱ͍͏͜ͱͰ͢ɻ αΠτΛઃܭ͢Δ໨త͸ɺϢʔβʔ͕αΠτΛ։͍ͨͱ͖ʹɺಡΈ΍ؔ͘͢࿈ੑͷߴ͍ܗࣜͰ৘ใ͕ද ࣔ͞ΕΔΑ͏ʹ͢Δ͜ͱͰ͢ɻ͜Ε͸ɺը໘αΠζ΍ղ૾౓͕͞·͟·ͳσόΠεΛϢʔβʔ͕࢖༻͠ ͍ͯΔͨΊɺઃܭऀ͕αΠτΛઃܭ͢Δࡍʹ͜ΕΒͷ໘Λߟྀ͢Δඞཁ͕͋ΔͨΊɺ͞ΒʹෳࡶʹͳΓ ·͢ɻ൴Β͸ɺҟͳΔϒϥ΢βʢΫϩεϒϥ΢βʣɺҟͳΔΦϖϨʔςΟϯάγεςϜʢΫϩεϓϥο τϑΥʔϜʣɺ͓ΑͼҟͳΔσόΠεʢσόΠεؒʣͰαΠτ͕ਖ਼͘͠ಈ࡞͢ΔΑ͏ʹ͢Δඞཁ͕͋Γ ·͢ɻ
  12. What Is a Front-End Developer? Source: https://en.wikipedia.org/wiki/Front-end_web_development Front-end web development,

    also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly. The challenge associated with front end development is that the tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing. The objective of designing a site is to ensure that when the users open up the site they see the information in a format that is easy to read and relevant. This is further complicated by the fact that users now use a large variety of devices with varying screen sizes and resolutions thus forcing the designer to take into consideration these aspects when designing the site. They need to ensure that their site comes up correctly in different browsers (cross-browser), different operating systems (cross-platform) and different devices (cross-device), which requires careful planning on the side of the developer. ΫϥΠΞϯταΠυ։ൃͱ΋ݺ͹ΕΔϑϩϯτΤϯυWeb։ൃ͸ɺWebαΠτ΍WebΞϓϦέʔγϣ ϯ༻ͷHTMLɺCSSɺJavaScriptΛੜ੒ͯ͠ɺϢʔβʔ͕௚઀ͦΕΒΛݟͨΓର࿩Ͱ͖ΔΑ͏ʹ͢Δ͜ ͱͰ͢ɻϑϩϯτΤϯυͷ։ൃʹؔ࿈͢Δ՝୊͸ɺ΢ΣϒαΠτͷϑϩϯτΤϯυΛ੍࡞͢ΔͨΊʹ࢖ ༻͞ΕΔπʔϧ΍ςΫχοΫ͕ઈ͑ͣมԽ͢ΔͨΊɺ։ൃऀ͸ͦͷ෼໺ͷൃలঢ়گΛৗʹೝࣝ͢Δඞཁ ͕͋Δͱ͍͏͜ͱͰ͢ɻ αΠτΛઃܭ͢Δ໨త͸ɺϢʔβʔ͕αΠτΛ։͍ͨͱ͖ʹɺಡΈ΍ؔ͘͢࿈ੑͷߴ͍ܗࣜͰ৘ใ͕ද ࣔ͞ΕΔΑ͏ʹ͢Δ͜ͱͰ͢ɻ͜Ε͸ɺը໘αΠζ΍ղ૾౓͕͞·͟·ͳσόΠεΛϢʔβʔ͕࢖༻͠ ͍ͯΔͨΊɺઃܭऀ͕αΠτΛઃܭ͢Δࡍʹ͜ΕΒͷ໘Λߟྀ͢Δඞཁ͕͋ΔͨΊɺ͞ΒʹෳࡶʹͳΓ ·͢ɻ൴Β͸ɺҟͳΔϒϥ΢βʢΫϩεϒϥ΢βʣɺҟͳΔΦϖϨʔςΟϯάγεςϜʢΫϩεϓϥο τϑΥʔϜʣɺ͓ΑͼҟͳΔσόΠεʢσόΠεؒʣͰαΠτ͕ਖ਼͘͠ಈ࡞͢ΔΑ͏ʹ͢Δඞཁ͕͋Γ ·͢ɻ
  13. What Is a Front-End Developer? গ࣌͠୅ΛḪͬͯΈΑ͏

  14. What Is a Front-End Developer? 1.HTTP Request 2. HTML CSS

    JS ΞϓϦέʔγϣϯ ϨΠϠ ΠϯϑϥετϥΫνϟ ϨΠϠ αʔϏε ϨΠϠ ϓϨθϯςʔγϣϯ ϨΠϠ Ϣʔβ ΠϯλʔϑΣΠε Client Server DB Service 200X೥୆
  15. What Is a Front-End Developer? ▸ ϓϨθϯςʔγϣϯ૚͸ը໘શମΛҰؾʹඳը Ͱ͖ΔͷͰָͩͬͨ ϝϦοτ

  16. What Is a Front-End Developer? ໰୊఺

  17. What Is a Front-End Developer? ໰୊఺ ▸ ϖʔδભҠͷ౓ʹϖʔδશମΛಡΈࠐΉ

  18. What Is a Front-End Developer? ໰୊఺ ▸ ϖʔδભҠͷ౓ʹϖʔδશମΛಡΈࠐΉ ը໘ͷ1෦͚ͩߋ৽ͨͯ͘͠΋ શͯϩʔυ͠௚͞ͳ͚Ε͹ͳΒͳ͍

  19. What Is a Front-End Developer? ໰୊఺ ▸ ϖʔδભҠͷ౓ʹϖʔδશମΛಡΈࠐΉ

  20. What Is a Front-End Developer?

  21. What Is a Front-End Developer? Click

  22. What Is a Front-End Developer? Click

  23. What Is a Front-End Developer? Click ͜ͷϦετ͚ͩΛߋ৽ͯ͠ཉ͍͕͠

  24. What Is a Front-End Developer? ໰୊఺ ▸ ϖʔδભҠͷ౓ʹϖʔδશମΛಡΈࠐΉ ϖʔδશମ͕࠶ϨϯμϦϯά͞Εͯ͠·͏ʂʂ

  25. What Is a Front-End Developer? GoogleMapsʮ΍ͬ΄ʈʈʯ Gmailʮ΍ͬ΄ʈʈʯ

  26. What Is a Front-End Developer? GoogleMaps΍Gmail͕ಥ೗ͱݱΕ࿩୊ͱͳͬͨɻ ৽͍͠ମݧΛWebͷੈքʹ࣋ͪࠐΜͩɻ

  27. What Is a Front-End Developer? Gmail

  28. What Is a Front-End Developer? Source: http://hosho.ees.hokudai.ac.jp/~kubo/log/2005/kubolog20050901.html Source: http://twobcherry.seesaa.net/article/5086722.html

  29. What Is a Front-End Developer? GoogleMaps΍Gmail͕ඇಉظͷRequestΛ༻͍Δ͜ͱʹΑΓɺ ϘτϧωοΫͰ͋ͬͨɺը໘ͷҰ෦มߋΛ෦෼มߋ͕Ͱ͖ΔΑ͏ ʹ͠ɺUXͷඈ༂తͳ޲্Λਤͬͨɻ UXͷඈ༂తͳ޲্͸ɺWebք۾Ͱ͸஫໨͞Ε͜ͷͱ͖ʹ࢖ΘΕ ͨΞϓϩʔν͕Ajaxͱ͍͏໊લ͕͍ͭͯීٴ͍ͯͬͨ͠ɻ

  30. 1.HTTP(S) Request 2. HTML CSS JS ΞϓϦέʔγϣϯ ϨΠϠ ΠϯϑϥετϥΫνϟ ϨΠϠ

    αʔϏε ϨΠϠ ϓϨθϯςʔγϣϯ ϨΠϠ 3.ඇಉظRequest 4. JSON XML HTML Ϣʔβ ΠϯλʔϑΣΠε Client Server DB Service What Is a Front-End Developer? 2005೥
  31. 1.HTTP(S) Request 2. HTML CSS JS ΞϓϦέʔγϣϯ ϨΠϠ ΠϯϑϥετϥΫνϟ ϨΠϠ

    αʔϏε ϨΠϠ ϓϨθϯςʔγϣϯ ϨΠϠ ϓϨθϯςʔγϣϯ ϨΠϠ 3.ඇಉظRequest 4. JSON XML HTML Ϣʔβ ΠϯλʔϑΣΠε Client Server DB Service What Is a Front-End Developer? 2005೥
  32. What Is a Front-End Developer? ▸ ߋ৽Λ͔͚͍ͨը໘ͷҰ෦ͷΈΛભҠΛհͣ͞ʹߋ৽ग़དྷΔΑ͏ ʹͳͬͨ ▸ UXͷඈ༂త޲্ʢGmailɺGoogleMapsʣ

    ϝϦοτ
  33. What Is a Front-End Developer? ▸ ߋ৽Λ͔͚͍ͨը໘ͷҰ෦ͷΈΛભҠΛհͣ͞ʹߋ৽ग़དྷΔΑ͏ ʹͳͬͨ ▸ UXͷඈ༂త޲্ʢGmailɺGoogleMapsʣ

    ϝϦοτ ৽ͨͳ໰୊ ▸ ϓϨθϯςʔγϣϯϨΠϠΛ͖࣋ͬͯͨࣄʹΑͬͯɺᴈ໌ظ͕དྷͨɻιϑτ ΢ΣΞ։ൃͷϓϥΫςΟε͕ϑϩϯτʹ͸ͳ͔ͬͨͨΊɻ ▸ ඇಉظॲཧࣗମ͕ɺѻ͑Δਓ͕গͳ͔ͬͨΓɺݴޠͱͯ͠ඇಉظͷαϙʔτ͕ ෆ଍͍ͯͨ͠ʢe.g. callback͔͠ͳ͍ͳͲʣ ▸ ϑϩϯτͱαʔόʔͷ྆ํʹϓϨθϯςʔγϣϯϨΠϠ͕͋ΔͭΒΈ
  34. What Is a Front-End Developer? iPhoneʮ΍ͬ΄ʈʈʯ

  35. What Is a Front-End Developer? 2010೥લޙʹͳΔͱεϚʔτϑΥϯ͕ීٴ͖͓ͯͯ͠Γɺ Ϣʔβͷ࣌ؒͷୣ͍߹͍͕׆ൃԽ͠ɺ NativeΞϓϦͷΑ͏ͳ൓Ԡ଎౓ͷ޲্͕ ٻΊΒΕΔΑ͏ʹͳ͖ͬͯͨɻ

  36. What Is a Front-End Developer? SPAʮ΍ͬ΄ʈʈʯ ※SinglePageApplication

  37. What Is a Front-End Developer? SPAͱ͸ɺ୯ҰͷWebϖʔδͰߏ੒͞ΕͨWebΞϓϦέʔγϣ ϯͷ໊শͰ͢ɻ NativeΞϓϦͷΑ͏ͳ൓Ԡ଎౓ͷ޲্͕ٻΊΒΕΔΑ͏ʹͳΓɺ ಈ͖Λඳը͢Δओಋ͕αʔόʔଆ͔ΒΫϥΠΞϯτଆʹ͋ͬͨ΄ ͏͕༗རͷͨΊɺJavaScriptͰϖʔδભҠ෩ͳ΋ͷΛ͓͜ͳ͏Ξ

    ϓϦέʔγϣϯɻ
  38. 1.HTTP(S) Request 2. HTML CSS JS ΞϓϦέʔγϣϯ ϨΠϠ σʔλΞΫηε ϨΠϠ

    αʔϏε ϨΠϠ ϓϨθϯςʔγϣϯ ϨΠϠ 3.ඇಉظRequest 4. JSON XML HTML Ϣʔβ ΠϯλʔϑΣΠε Client Server DB Service What Is a Front-End Developer? ΞϓϦέʔγϣϯ ϨΠϠ 2010೥
  39. What Is a Front-End Developer? ΑΓෳࡶͳUIΛٻΊΒΕΔΑ͏ʹͳΓɺ౰࣌࢖ΘΕ͍ͯͨϓϨθ ϯςʔγϣϯϨΠϠʢjQueryʣͷ࣮૷͕ͩΜͩΜͱਏ͍΋ͷʹ ͳ͖ͬͯ·ͨ͠ɻ

  40. What Is a Front-End Developer? ▸ NativeΞϓϦͷΑ͏ͳϢʔβମݧΛಘΒΕΔΑ͏ʹͳͬͨɻ ▸ ΞϓϦέʔγϣϯϨΠϠ͕ϑϩϯτʹ߱Γ͖ͯͨ͜ͱʹΑͬͯɺطଘ ͷ஌ΒΕ͍ͯΔMVCͳͲͷύλʔϯ͕ద༻Մೳʹͳͬͨɻ

    ϝϦοτ
  41. What Is a Front-End Developer? ϝϦοτ σϝϦοτ ▸ SEOͱͷܾผ ▸

    ΞΫηεղੳ͕೉͍͠ ▸ ॳظϖʔδͷඳըͷ஗͞ ▸ ࣮૷ͷ೉Խ ▸ NativeΞϓϦͷΑ͏ͳϢʔβମݧΛಘΒΕΔΑ͏ʹͳͬͨɻ ▸ ΞϓϦέʔγϣϯϨΠϠ͕ϑϩϯτʹ߱Γ͖ͯͨ͜ͱʹΑͬͯɺطଘ ͷ஌ΒΕ͍ͯΔMVCͳͲͷύλʔϯ͕ద༻Մೳʹͳͬͨɻ
  42. What Is a Front-End Developer? SEOͱ͸ɺ”Search Engine Optimization” ͷུͰ͋Γɺ ݕࡧΤϯδϯ࠷దԽΛҙຯ͢Δݴ༿ɻ

    ݕࡧ݁ՌͰWebαΠτ͕ΑΓଟ͘࿐ग़͞ΕΔͨΊʹߦ͏Ұ࿈ͷऔ Γ૊Έͷ͜ͱΛࢦ͢ɻ
  43. What Is a Front-End Developer? ౰࣌ͷΫϩʔϥʔ͸JavaScriptͷϨϯμϦϯά͕Ͱ͖ͣɺ SPAͰ࡞ΒΕ͍ͯΔϖʔδ͸ɺਖ਼͘͠Ϋϩʔϧ͢Δ͜ͱ͕Ͱ͖ͳ ͔ͬͨɻͦͷͨΊɺSEO͕Ͱ͖ͳ͘ͳͬͨɻ SEO͕ෆཁͳWebΞϓϦέʔγϣϯͰ͸SPAΛ࠾༻͢ΔΑ͏ʹ ͳͬͯͨɻ

  44. What Is a Front-End Developer? SPAͷ࣮૷ΛjQueryͷΈͰߦ͏ͷ͸ਏ͘ɺ Backboneͱ͍͏MVCϑϨʔϜϫʔΫΛ࢖༻ͨ͠ɻ Backbone͸Viewͷαϙʔτ͸ऑ͘ɺBackboneͱjQueryΛซ༻ ͍ͯͨ͠ɻ MVCϑϨʔϜϫʔΫΛ༻͍Δ͜ͱͰɺσβΠϯύλʔϯΛखʹೖ

    Ε͕ͨϓϩάϥϛϯάίετ͸े෼ʹԼ͕Βͳ͔ͬͨɻ
  45. What Is a Front-End Developer? SPAͷ࣮૷ΛBackboneͰߦ͏ͷ͸ਏ͘ɺ AngularJSʢv1ʣͱ͍͏auto bindingػೳΛ࣋ͬͨMVCϑϨʔϜ ϫʔΫΛ࢖༻ͯ͠ߏங͞ΕΔΑ͏ʹͳͬͨɻ auto

    bindingػೳ͸ɺϞσϧͱϏϡʔͦΕͧΕͷมԽΛ૒ํ޲Ͱ ࣗಈతʹ൓өͯ͘͠ΕΔͨΊɺ ϓϩάϥϛϯάίετ͸Լ͕͕ͬͨɺAngularJSʢv1ʣ͕࠾༻͠ ͨauto bindingػೳͷํ๏͸ɺΠϕϯτϧʔϓͰdirty checkΛ͠ ͍ͯΔͨΊॏ͔ͬͨɻ
  46. What Is a Front-End Developer? ϓϩάϥϛϯάίετ ϨϯμϦϯάίετ

  47. What Is a Front-End Developer? ϓϩάϥϛϯάίετ ϨϯμϦϯάίετ

  48. What Is a Front-End Developer? ϓϩάϥϛϯάͷίετ ϨϯμϦϯάίετ Ծ૝DOMΛҾͬ͛ͨ͞React͕ొ৔

  49. What Is a Front-End Developer? Ծ૝DOMͱ͸ͳʹ͔ʁ

  50. What Is a Front-End Developer? ࣮DOMͰ͸ͳ͍ɺϝϞϦ্ʹDOMΛ࠶ݱͨ͠΋ͷɻ ΞϓϦ͕Ծ૝DOMΛશ෦࡞Γ௚ͯ͠΋ɺ ݡࠩ͘෼͚͕࣮ͩDOMʹ൓ө͞ΕΔɻ

  51. What Is a Front-End Developer?

  52. What Is a Front-End Developer?

  53. What Is a Front-End Developer?

  54. What Is a Front-End Developer?

  55. What Is a Front-End Developer? Ծ૝DOMΛҾͬ͛ͨ͞React͕ొ৔ jQueryҎ߱͸ঢ়گʹԠͯ͡ը໘ͷஅยతͳߋ৽ΛνϚνϚ͍ͯͨ͠ ͷͰɺঢ়گ͕ෳࡶʹͳΔͱԿΛ͍ͯ͠Δ͔೺Ѳ͠ʹ͘͘ͳ͍ͬͯ ͨɻ Ծ૝DOMʹΑͬͯຖճը໘Λθϩ͔Βશ෦࡞Γ௚ͤΔΑ͏ʹͳͬ

    ͨ͜ͱͰɺঢ়گʹґଘ͠ͳͯ͘Α͘ͳͬͨɻ
  56. What Is a Front-End Developer? ϝϦοτ σϝϦοτ ▸ SEOͱͷܾผˠGoogleͷΫϩʔϥʔ͕ਐԽ͠ݱࡏ͸ղܾ ▸

    ΞΫηεղੳ͕೉͍͠ˠ·ͩ೉͍͠ ▸ ॳظϖʔδͷඳըͷ஗͞ˠSSR(αʔόʔαΠυϨϯμϦϯά)͕ղܾ ▸ ࣮૷ͷ೉ԽˠUX͕೔ʑ޲্͠ΞϓϦ΋௥ै͢ΔͨΊΤϯυϨε ▸ NativeΞϓϦͷΑ͏ͳϢʔβମݧΛಘΒΕΔΑ͏ʹͳͬͨɻ →Nativeʹ͸ఔԕ͔͕ͬͨReactʹΑ͚ͬͯۙͮͨ
  57. What Is a Front-End Developer? ϝϦοτ σϝϦοτ ▸ SEOͱͷܾผˠGoogleͷΫϩʔϥʔ͕ਐԽ͠ݱࡏ͸ղܾ ▸

    ΞΫηεղੳ͕೉͍͠ˠ·ͩ೉͍͠ ▸ ॳظϖʔδͷඳըͷ஗͞ˠSSR(αʔόʔαΠυϨϯμϦϯά)͕ղܾ ▸ ࣮૷ͷ೉ԽˠUX͕೔ʑ޲্͠ΞϓϦ΋௥ै͢ΔͨΊΤϯυϨε ▸ NativeΞϓϦͷΑ͏ͳϢʔβମݧΛಘΒΕΔΑ͏ʹͳͬͨɻ →Nativeʹ͸ఔԕ͔͕ͬͨReactʹΑ͚ͬͯۙͮͨ
  58. What Is a Front-End Developer? ClientSideͰHTMLΛϨϯμϦϯά͢Δ͜ͱΛ Client Side Rendering(CSR)ͱݺͿɻ ͦΕʹରͯ͠ɺಉ͜͡ͱΛServeSideͰ΋࣮ࢪ͢Δ͜ͱΛ

    ServerSideRendring(SSR)ͱݺͿɻ SSRͯ͠HTMLΛαʔόʔ͔Β഑৴͢Δ͜ͱͰɺSPAͷϘτϧωοΫͷ1ͭͰ͋ͬͨ ॳظϖʔδͷඳըͷ஗͞Λղܾͨ͠ɻ աڈʹ΋SSRࣗମ͸͕͋ͬͨɺSPAͰݴ͏SSR͸ɺCSRͱSSRͰಉ͡ίʔυ͕࢖͑Δ͜ͱ͕ ϙΠϯτͰɺίʔυͷڞ༗ԽʹΑΓɺೋॏ։ൃΛආ͚ͳ͕ΒύϑΥʔϚϯεͷ޲্͕ߦ͑Δɻ SSRʢαʔόʔαΠυϨϯμϦϯάʣͱ͸
  59. What Is a Front-End Developer? SSR͢Δ͜ͱͰύϑΥʔϚϯεΛखʹೖΕ͕ͨɺ ҰํͰαʔόʔαΠυͷίʔυΛϑϩϯτΤϯυ͕୲͏͜ͱͰѻ͏ྖҬ͕૿͑ͨɻ ϑϩϯτΤϯυʹ΋ܕͷधཁ͕ग़͖ͯͯɺ TypeScriptͱݺ͹ΕΔϑϩϯτΤϯυͰܕΛѻ͑Δ੩తܕ෇͚ͷAltJS͕ྲྀߦΔΑ͏ʹͳͬ ͨɻ

    TypeScriptʹ͍ͭͯ͸ɺޙ೔Quramy͞Μͷߨ͕ٛ͋ΔͨΊৄ͘͠͸ͦ͜Ͱʂ SSRʢαʔόʔαΠυϨϯμϦϯάʣͱ͸ x
  60. What Is a Front-End Developer? Source: https://en.wikipedia.org/wiki/Front-end_web_development Front-end web development,

    also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly. The challenge associated with front end development is that the tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing. The objective of designing a site is to ensure that when the users open up the site they see the information in a format that is easy to read and relevant. This is further complicated by the fact that users now use a large variety of devices with varying screen sizes and resolutions thus forcing the designer to take into consideration these aspects when designing the site. They need to ensure that their site comes up correctly in different browsers (cross-browser), different operating systems (cross-platform) and different devices (cross-device), which requires careful planning on the side of the developer. ΫϥΠΞϯταΠυ։ൃͱ΋ݺ͹ΕΔϑϩϯτΤϯυWeb։ൃ͸ɺWebαΠτ΍WebΞϓϦέʔγϣ ϯ༻ͷHTMLɺCSSɺJavaScriptΛੜ੒ͯ͠ɺϢʔβʔ͕௚઀ͦΕΒΛݟͨΓର࿩Ͱ͖ΔΑ͏ʹ͢Δ͜ ͱͰ͢ɻϑϩϯτΤϯυͷ։ൃʹؔ࿈͢Δ՝୊͸ɺ΢ΣϒαΠτͷϑϩϯτΤϯυΛ੍࡞͢ΔͨΊʹ࢖ ༻͞ΕΔπʔϧ΍ςΫχοΫ͕ઈ͑ͣมԽ͢ΔͨΊɺ։ൃऀ͸ͦͷ෼໺ͷൃలঢ়گΛৗʹೝࣝ͢Δඞཁ ͕͋Δͱ͍͏͜ͱͰ͢ɻ αΠτΛઃܭ͢Δ໨త͸ɺϢʔβʔ͕αΠτΛ։͍ͨͱ͖ʹɺಡΈ΍ؔ͘͢࿈ੑͷߴ͍ܗࣜͰ৘ใ͕ද ࣔ͞ΕΔΑ͏ʹ͢Δ͜ͱͰ͢ɻ͜Ε͸ɺը໘αΠζ΍ղ૾౓͕͞·͟·ͳ͞·͟·ͳσόΠεΛϢʔ βʔ͕࢖༻͍ͯ͠ΔͨΊɺઃܭऀ͕αΠτΛઃܭ͢Δࡍʹ͜ΕΒͷ໘Λߟྀ͢Δඞཁ͕͋ΔͨΊɺ͞Β ʹෳࡶʹͳΓ·͢ɻ൴Β͸ɺҟͳΔϒϥ΢βʢΫϩεϒϥ΢βʣɺҟͳΔΦϖϨʔςΟϯάγεςϜ ʢΫϩεϓϥοτϑΥʔϜʣɺ͓ΑͼҟͳΔσόΠεʢσόΠεؒʣͰαΠτ͕ਖ਼͘͠ಈ࡞͢ΔΑ͏ʹ ͢Δඞཁ͕͋Γ·͢ɻ
  61. What Is a Front-End Developer?

  62. What Is a Front-End Developer?

  63. What Is a Front-End Developer?

  64. What Is a Front-End Developer? શ෦ͷٕज़Λ௥͔͚ͬΔͷ͸͔ͳΓίετ͕͔͔Δ

  65. What Is a Front-End Developer? Source: https://speakerdeck.com/twada/worse-is-better-understanding-the-spiral-of-technologies-2019-edition

  66. What Is a Front-End Developer? “มΘΔ΋ͷɻٕज़ͷมԽ͸ཐટঢ়ɻཐટͷࠩ෼ͱɺͦΕΛՄೳ ʹٕͨ͠ज़Λཧղ͢Δ มΘΒͳ͍΋ͷɻੜ͖࢒Δٕज़ʹ͸ಛ௃͕͋Δɻͦͷഎޙʹ͋Δ ந৅ͷ͔ͪΒΛཧղ͢Δ” Source:

    https://speakerdeck.com/twada/worse-is-better-understanding-the-spiral-of-technologies-2019-edition
  67. What Is a Front-End Developer? ຊ࣭ͱ͓࡞๏Λཧղ͢Δඞཁ͕͋Δɻ ຊ࣭͸Ӭଓతɺ͓࡞๏͸࢖͍ࣺͯɻ

  68. RTCʹ͓͚ΔϑϩϯτΤϯυ։ൃ

  69. RTCʹ͓͚ΔϑϩϯτΤϯυ։ൃ ϓϩάϥϛϯάίετͱϨϯμϦϯάίετΛཱ྆͢Δ͢΂͸ख ʹೖΕͨɻ ͨͩͦΕ͸SPA๊͕͍͑ͯΔ໰୊Λ͢΂ͯղܾͰ͖ͨΘ͚Ͱ͸ͳ ͍ɻ

  70. RTCʹ͓͚ΔϑϩϯτΤϯυ։ൃ RTCͰSPAͷ՝୊Λղܾ͍ͯ͠Δ1ྫͱͯ͠AirγϑτΛ঺հ͠·͢ɻ

  71. RTCʹ͓͚ΔϑϩϯτΤϯυ։ൃ RTCͰSPAͷ՝୊Λղܾ͍ͯ͠Δ1ྫͱͯ͠AirγϑτΛ঺հ͠·͢ɻ

  72. RTCʹ͓͚ΔϑϩϯτΤϯυ։ൃ RTCͰSPAͷ՝୊Λղܾ͍ͯ͠Δ1ྫͱͯ͠AirγϑτΛ঺հ͠·͢ɻ

  73. RTCʹ͓͚ΔϑϩϯτΤϯυ։ൃ RTCͰSPAͷ՝୊Λղܾ͍ͯ͠Δ1ྫͱͯ͠AirγϑτΛ঺հ͠·͢ɻ toB ͷ ΞϓϦέʔγϣϯ͸ෳࡶͳۀ຿ίϯςΩετ͕བྷΉͨΊɺཁ͕݅ෳࡶԽ͠΍͍͢܏޲ʹ͋Δɻ Airγϑτ΋ͦΕͧΕͷ͓ళͰ࢖ΘΕ͍ͯΔϑΥʔϚοτ΍ཁ͕݅όϥόϥͷExcel Ͱ࡞ΒΕ͍ͯͨγ ϑτදΛWebͰ࣮ݱ͢Δඞཁੑ͕͋ΓෳࡶԽ͍ͯͨ͠ɻ toB ͷΞϓϦέʔγϣϯ͸

    "ຖ೔ۀ຿" Ͱ࢖͏ͨΊ୯७ͳػೳཁ͚݅ͩͰͳ͘ɼ೔ʑ࢖͍ଓ͚Δ্Ͱε τϨεΛ࠷খݶʹ͢ΔͨΊͷඇػೳཁ͕݅ॏཁʂ AirγϑτͰ͸ɼෳࡶཁ͔݅ΒΞϓϦέʔγϣϯͷϩδοΫෳࡶʹͳΓύϑΥʔϚϯεͷ՝୊Λ๊͑ͯ ͓Γɺ͞ΒʹϩδοΫ͚ͩͷ໰୊Ͱͳ͘ɺళฮͰ࢖ΘΕΔPCͷεϖοΫ͕ྑ͍Θ͚Ͱ͸ͳ͍ͨΊɺɹ ಈ࡞؀ڥʹ΋՝୊͕͋ͬͨɻ ௿εϖοΫͳPC × ෳࡶͳϩδοΫ ͱ͍͏૊Έ߹ΘͤͰ ߴ଎ͳಈ࡞ʹ࣮ݱ͢ΔͨΊʹվળͨ͠ࣄྫͱ ͯ͠Googleͷ web.dev ʹ঺հ͞Εͨɻ
  74. RTCʹ͓͚ΔϑϩϯτΤϯυ։ൃ RTCͰSPAͷ՝୊Λղܾ͍ͯ͠Δ1ྫͱͯ͠AirγϑτΛ঺հ͠·͢ɻ toB ͷ ΞϓϦέʔγϣϯ͸ෳࡶͳۀ຿ίϯςΩετ͕བྷΉͨΊɺཁ͕݅ෳࡶԽ͠΍͍͢܏޲ʹ͋Δɻ Airγϑτ΋ͦΕͧΕͷ͓ళͰ࢖ΘΕ͍ͯΔϑΥʔϚοτ΍ཁ͕݅όϥόϥͷExcel Ͱ࡞ΒΕ͍ͯͨγ ϑτදΛWebͰ࣮ݱ͢Δඞཁੑ͕͋ΓෳࡶԽ͍ͯͨ͠ɻ toB ͷΞϓϦέʔγϣϯ͸

    "ຖ೔ۀ຿" Ͱ࢖͏ͨΊ୯७ͳػೳཁ͚݅ͩͰͳ͘ɼ೔ʑ࢖͍ଓ͚Δ্Ͱε τϨεΛ࠷খݶʹ͢ΔͨΊͷඇػೳཁ͕݅ॏཁʂ AirγϑτͰ͸ɼෳࡶཁ͔݅ΒΞϓϦέʔγϣϯͷϩδοΫෳࡶʹͳΓύϑΥʔϚϯεͷ՝୊Λ๊͑ͯ ͓Γɺ͞ΒʹϩδοΫ͚ͩͷ໰୊Ͱͳ͘ɺళฮͰ࢖ΘΕΔPCͷεϖοΫ͕ྑ͍Θ͚Ͱ͸ͳ͍ͨΊɺɹ ಈ࡞؀ڥʹ΋՝୊͕͋ͬͨɻ ௿εϖοΫͳPC × ෳࡶͳϩδοΫ ͱ͍͏૊Έ߹ΘͤͰ ߴ଎ͳಈ࡞ʹ࣮ݱ͢ΔͨΊʹվળͨ͠ࣄྫͱ ͯ͠Googleͷ web.dev ʹ঺հ͞Εͨɻ Source: https://web.dev/five-ways-airshift-improved-their-react-app/
  75. RTCʹ͓͚ΔϑϩϯτΤϯυ։ൃ RTCͰSPAͷ՝୊Λղܾ͍ͯ͠Δ1ྫͱͯ͠AirγϑτΛ঺հ͠·͢ɻ ଞʹ΋ϦΫϧʔτςΫϊϩδʔζͷϒϩάʹৄࡉͳهࣄ͕͋Γ https://recruit-tech.co.jp/blog/2020/02/14/performance-and-refactoring/ ՝୊ղܾͷத৺ͱͳ͍ͬͯΔ͚ͭ͡ΜઌഐͷJavaScriptߨ࠲͕ ໌೔͋ΔͷͰɺؾʹͳΔ఺͸ͥͻ໌೔ͷJavaScirptߨ࠲Ͱ ฉ͍ͯΈΑ͏ʂ x

  76. To Be Continued…