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

RTC Frontend Development 2020

RTC Frontend Development 2020

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

Recruit Technologies

August 21, 2020
Tweet

More Decks by Recruit Technologies

Other Decks in Technology

Transcript

  1. 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.
  2. 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Λੜ੒ͯ͠ɺϢʔβʔ͕௚઀ͦΕΒΛݟͨΓର࿩Ͱ͖ΔΑ͏ʹ͢Δ͜ ͱͰ͢ɻϑϩϯτΤϯυͷ։ൃʹؔ࿈͢Δ՝୊͸ɺ΢ΣϒαΠτͷϑϩϯτΤϯυΛ੍࡞͢ΔͨΊʹ࢖ ༻͞ΕΔπʔϧ΍ςΫχοΫ͕ઈ͑ͣมԽ͢ΔͨΊɺ։ൃऀ͸ͦͷ෼໺ͷൃలঢ়گΛৗʹೝࣝ͢Δඞཁ ͕͋Δͱ͍͏͜ͱͰ͢ɻ
  3. 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Λੜ੒ͯ͠ɺϢʔβʔ͕௚઀ͦΕΒΛݟͨΓର࿩Ͱ͖ΔΑ͏ʹ͢Δ͜ ͱͰ͢ɻϑϩϯτΤϯυͷ։ൃʹؔ࿈͢Δ՝୊͸ɺ΢ΣϒαΠτͷϑϩϯτΤϯυΛ੍࡞͢ΔͨΊʹ࢖ ༻͞ΕΔπʔϧ΍ςΫχοΫ͕ઈ͑ͣมԽ͢ΔͨΊɺ։ൃऀ͸ͦͷ෼໺ͷൃలঢ়گΛৗʹೝࣝ͢Δඞཁ ͕͋Δͱ͍͏͜ͱͰ͢ɻ αΠτΛઃܭ͢Δ໨త͸ɺϢʔβʔ͕αΠτΛ։͍ͨͱ͖ʹɺಡΈ΍ؔ͘͢࿈ੑͷߴ͍ܗࣜͰ৘ใ͕ද ࣔ͞ΕΔΑ͏ʹ͢Δ͜ͱͰ͢ɻ͜Ε͸ɺը໘αΠζ΍ղ૾౓͕͞·͟·ͳσόΠεΛϢʔβʔ͕࢖༻͠ ͍ͯΔͨΊɺઃܭऀ͕αΠτΛઃܭ͢Δࡍʹ͜ΕΒͷ໘Λߟྀ͢Δඞཁ͕͋ΔͨΊɺ͞ΒʹෳࡶʹͳΓ ·͢ɻ൴Β͸ɺҟͳΔϒϥ΢βʢΫϩεϒϥ΢βʣɺҟͳΔΦϖϨʔςΟϯάγεςϜʢΫϩεϓϥο τϑΥʔϜʣɺ͓ΑͼҟͳΔσόΠεʢσόΠεؒʣͰαΠτ͕ਖ਼͘͠ಈ࡞͢ΔΑ͏ʹ͢Δඞཁ͕͋Γ ·͢ɻ
  4. 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Λੜ੒ͯ͠ɺϢʔβʔ͕௚઀ͦΕΒΛݟͨΓର࿩Ͱ͖ΔΑ͏ʹ͢Δ͜ ͱͰ͢ɻϑϩϯτΤϯυͷ։ൃʹؔ࿈͢Δ՝୊͸ɺ΢ΣϒαΠτͷϑϩϯτΤϯυΛ੍࡞͢ΔͨΊʹ࢖ ༻͞ΕΔπʔϧ΍ςΫχοΫ͕ઈ͑ͣมԽ͢ΔͨΊɺ։ൃऀ͸ͦͷ෼໺ͷൃలঢ়گΛৗʹೝࣝ͢Δඞཁ ͕͋Δͱ͍͏͜ͱͰ͢ɻ αΠτΛઃܭ͢Δ໨త͸ɺϢʔβʔ͕αΠτΛ։͍ͨͱ͖ʹɺಡΈ΍ؔ͘͢࿈ੑͷߴ͍ܗࣜͰ৘ใ͕ද ࣔ͞ΕΔΑ͏ʹ͢Δ͜ͱͰ͢ɻ͜Ε͸ɺը໘αΠζ΍ղ૾౓͕͞·͟·ͳσόΠεΛϢʔβʔ͕࢖༻͠ ͍ͯΔͨΊɺઃܭऀ͕αΠτΛઃܭ͢Δࡍʹ͜ΕΒͷ໘Λߟྀ͢Δඞཁ͕͋ΔͨΊɺ͞ΒʹෳࡶʹͳΓ ·͢ɻ൴Β͸ɺҟͳΔϒϥ΢βʢΫϩεϒϥ΢βʣɺҟͳΔΦϖϨʔςΟϯάγεςϜʢΫϩεϓϥο τϑΥʔϜʣɺ͓ΑͼҟͳΔσόΠεʢσόΠεؒʣͰαΠτ͕ਖ਼͘͠ಈ࡞͢ΔΑ͏ʹ͢Δඞཁ͕͋Γ ·͢ɻ
  5. What Is a Front-End Developer? 1.HTTP Request 2. HTML CSS

    JS ΞϓϦέʔγϣϯ ϨΠϠ ΠϯϑϥετϥΫνϟ ϨΠϠ αʔϏε ϨΠϠ ϓϨθϯςʔγϣϯ ϨΠϠ Ϣʔβ ΠϯλʔϑΣΠε Client Server DB Service 200X೥୆
  6. 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೥
  7. 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೥
  8. What Is a Front-End Developer? ▸ ߋ৽Λ͔͚͍ͨը໘ͷҰ෦ͷΈΛભҠΛհͣ͞ʹߋ৽ग़དྷΔΑ͏ ʹͳͬͨ ▸ UXͷඈ༂త޲্ʢGmailɺGoogleMapsʣ

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

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

    ݕࡧ݁ՌͰWebαΠτ͕ΑΓଟ͘࿐ग़͞ΕΔͨΊʹߦ͏Ұ࿈ͷऔ Γ૊Έͷ͜ͱΛࢦ͢ɻ
  12. What Is a Front-End Developer? SPAͷ࣮૷ΛBackboneͰߦ͏ͷ͸ਏ͘ɺ AngularJSʢv1ʣͱ͍͏auto bindingػೳΛ࣋ͬͨMVCϑϨʔϜ ϫʔΫΛ࢖༻ͯ͠ߏங͞ΕΔΑ͏ʹͳͬͨɻ auto

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

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

    ΞΫηεղੳ͕೉͍͠ˠ·ͩ೉͍͠ ▸ ॳظϖʔδͷඳըͷ஗͞ˠSSR(αʔόʔαΠυϨϯμϦϯά)͕ղܾ ▸ ࣮૷ͷ೉ԽˠUX͕೔ʑ޲্͠ΞϓϦ΋௥ै͢ΔͨΊΤϯυϨε ▸ NativeΞϓϦͷΑ͏ͳϢʔβମݧΛಘΒΕΔΑ͏ʹͳͬͨɻ →Nativeʹ͸ఔԕ͔͕ͬͨReactʹΑ͚ͬͯۙͮͨ
  15. 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ʢαʔόʔαΠυϨϯμϦϯάʣͱ͸
  16. 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Λੜ੒ͯ͠ɺϢʔβʔ͕௚઀ͦΕΒΛݟͨΓର࿩Ͱ͖ΔΑ͏ʹ͢Δ͜ ͱͰ͢ɻϑϩϯτΤϯυͷ։ൃʹؔ࿈͢Δ՝୊͸ɺ΢ΣϒαΠτͷϑϩϯτΤϯυΛ੍࡞͢ΔͨΊʹ࢖ ༻͞ΕΔπʔϧ΍ςΫχοΫ͕ઈ͑ͣมԽ͢ΔͨΊɺ։ൃऀ͸ͦͷ෼໺ͷൃలঢ়گΛৗʹೝࣝ͢Δඞཁ ͕͋Δͱ͍͏͜ͱͰ͢ɻ αΠτΛઃܭ͢Δ໨త͸ɺϢʔβʔ͕αΠτΛ։͍ͨͱ͖ʹɺಡΈ΍ؔ͘͢࿈ੑͷߴ͍ܗࣜͰ৘ใ͕ද ࣔ͞ΕΔΑ͏ʹ͢Δ͜ͱͰ͢ɻ͜Ε͸ɺը໘αΠζ΍ղ૾౓͕͞·͟·ͳ͞·͟·ͳσόΠεΛϢʔ βʔ͕࢖༻͍ͯ͠ΔͨΊɺઃܭऀ͕αΠτΛઃܭ͢Δࡍʹ͜ΕΒͷ໘Λߟྀ͢Δඞཁ͕͋ΔͨΊɺ͞Β ʹෳࡶʹͳΓ·͢ɻ൴Β͸ɺҟͳΔϒϥ΢βʢΫϩεϒϥ΢βʣɺҟͳΔΦϖϨʔςΟϯάγεςϜ ʢΫϩεϓϥοτϑΥʔϜʣɺ͓ΑͼҟͳΔσόΠεʢσόΠεؒʣͰαΠτ͕ਖ਼͘͠ಈ࡞͢ΔΑ͏ʹ ͢Δඞཁ͕͋Γ·͢ɻ
  17. RTCʹ͓͚ΔϑϩϯτΤϯυ։ൃ RTCͰSPAͷ՝୊Λղܾ͍ͯ͠Δ1ྫͱͯ͠AirγϑτΛ঺հ͠·͢ɻ toB ͷ ΞϓϦέʔγϣϯ͸ෳࡶͳۀ຿ίϯςΩετ͕བྷΉͨΊɺཁ͕݅ෳࡶԽ͠΍͍͢܏޲ʹ͋Δɻ Airγϑτ΋ͦΕͧΕͷ͓ళͰ࢖ΘΕ͍ͯΔϑΥʔϚοτ΍ཁ͕݅όϥόϥͷExcel Ͱ࡞ΒΕ͍ͯͨγ ϑτදΛWebͰ࣮ݱ͢Δඞཁੑ͕͋ΓෳࡶԽ͍ͯͨ͠ɻ toB ͷΞϓϦέʔγϣϯ͸

    "ຖ೔ۀ຿" Ͱ࢖͏ͨΊ୯७ͳػೳཁ͚݅ͩͰͳ͘ɼ೔ʑ࢖͍ଓ͚Δ্Ͱε τϨεΛ࠷খݶʹ͢ΔͨΊͷඇػೳཁ͕݅ॏཁʂ AirγϑτͰ͸ɼෳࡶཁ͔݅ΒΞϓϦέʔγϣϯͷϩδοΫෳࡶʹͳΓύϑΥʔϚϯεͷ՝୊Λ๊͑ͯ ͓Γɺ͞ΒʹϩδοΫ͚ͩͷ໰୊Ͱͳ͘ɺళฮͰ࢖ΘΕΔPCͷεϖοΫ͕ྑ͍Θ͚Ͱ͸ͳ͍ͨΊɺɹ ಈ࡞؀ڥʹ΋՝୊͕͋ͬͨɻ ௿εϖοΫͳPC × ෳࡶͳϩδοΫ ͱ͍͏૊Έ߹ΘͤͰ ߴ଎ͳಈ࡞ʹ࣮ݱ͢ΔͨΊʹվળͨ͠ࣄྫͱ ͯ͠Googleͷ web.dev ʹ঺հ͞Εͨɻ
  18. 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/