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

RTC Frontend Development

RTC Frontend Development

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

Recruit Technologies

June 24, 2019
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? αʔϏε ϨΠϠ ϓϨθϯςʔγϣϯ ϨΠϠ ΞϓϦέʔγϣϯ

    ϨΠϠ ΠϯϑϥετϥΫνϟ ϨΠϠ View Ϣʔεέʔε ϏδωεϩδοΫ σʔλΞΫηεϨΠϠ ͜ͷߨٛʹ͓͍ͯͷݴ༿ͷఆٛ͸ԼهͰ͢
  6. What Is a Front-End Developer? 1.HTTP Request 2. HTML CSS

    JS ΞϓϦέʔγϣϯ ϨΠϠ ΠϯϑϥετϥΫνϟ ϨΠϠ αʔϏε ϨΠϠ ϓϨθϯςʔγϣϯ ϨΠϠ Ϣʔβ ΠϯλʔϑΣΠε Client Server DB Service 200X೥୆
  7. 1.HTTP(S) Request 2. HTML CSS JS ΞϓϦέʔγϣϯ ϨΠϠ ΠϯϑϥετϥΫνϟ ϨΠϠ

    αʔϏε ϨΠϠ ϓϨθϯςʔγϣϯ ϨΠϠ ϓϨθϯςʔγϣϯ ϨΠϠ Ajax 3.Ajax 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ʣ

    ϝϦοτ σϝϦοτ ▸ ࣮૷ͷෳࡶԽ ▸ ex1. jQuery Ajaxͷϑϩʔ੍ޚ ▸ ex2. طଘͷϓϩάϥϛϯάύϥμΠϜ͕࢖͑ͳ͍ ▸ ex3. ෳࡶͳUI͕࡞Εͳ͍
  9. 1.HTTP(S) Request 2. HTML CSS JS ΞϓϦέʔγϣϯ ϨΠϠ σʔλΞΫηε ϨΠϠ

    αʔϏε ϨΠϠ ϓϨθϯςʔγϣϯ ϨΠϠ 3.Ajax 4. JSON XML HTML Ϣʔβ ΠϯλʔϑΣΠε Client Server DB Service What Is a Front-End Developer? ΞϓϦέʔγϣϯ ϨΠϠ 2010೥ Ajax
  10. What Is a Front-End Developer? ▸ ෳࡶͳUIΛ࣮૷Մೳʹͳͬͨ ▸ طଘͷϓϩάϥϛϯάύϥμΠϜΛ͋Δఔ౓׆༻ग़དྷΔ ▸

    ex ΦϒδΣΫτࢦ޲ ϝϦοτ σϝϦοτ ▸ SEOͱͷܾผ ▸ ΞΫηεղੳ͕೉͍͠ ▸ ॳظϖʔδͷඳըͷ஗͞ ▸ ͞ΒͳΔ࣮૷ͷ೉Խ
  11. What Is a Front-End Developer? SEOͱ͸ɺ”Search Engine Optimization” ͷུͰ͋Γɺ ݕࡧΤϯδϯ࠷దԽΛҙຯ͢Δݴ༿Ͱ͢ɻ

    ݕࡧ݁ՌͰWebαΠτ͕ΑΓଟ͘࿐ग़͞ΕΔͨΊʹߦ͏Ұ࿈ͷऔ Γ૊Έͷ͜ͱΛࢦ͠·͢ɻ
  12. What Is a Front-End Developer? Backbone: M㱻C㱻V`ߋ৽͕ΊΜͲ͍͘͞ ↓ BackboneΊΜͲ͍΍ΜʁԶΒ͸ࣗಈͰߋ৽͢ΔͰ Angular(v1):

    binderƊሱọ۷ྍźƉ㛀ƃŴƌaΠϕϯτϧʔϓ ͰDirtyCheckźƉƮƃŴƍƑƊ֒ಖᇗŧƋŧũŮƤƄƦᇗŧ
  13. What Is a Front-End Developer? Backbone: M㱻C㱻V`ߋ৽͕ΊΜͲ͍͘͞ ↓ Angular(v1)ʮԶΒ͸ࣗಈͰߋ৽͢ΔͰʯ Angular(v1):

    binderƊሱọ۷ྍźƉ㛀ƃŴƌaΠϕϯτϧʔϓ ͰDirtyCheckźƉƮƃŴƍƑƊ֒ಖᇗŧƋŧũŮƤƄƦᇗŧ
  14. What Is a Front-End Developer? Backbone: M㱻C㱻V`ߋ৽͕ΊΜͲ͍͘͞ ↓ Angular(v1)ʮԶΒ͸ࣗಈͰߋ৽͢ΔͰʯ Angular(v1):

    binderƊሱọ۷ྍźƉ㛀ƃŴƌaΠϕϯτϧʔϓ ͰDirtyCheckźƉƮƃŴƍƑƊ֒ಖᇗŧĆƋŧũŮƤƄƦᇗŧ
  15. What Is a Front-End Developer? Backbone: M㱻C㱻V`ߋ৽͕ΊΜͲ͍͘͞ ↓ BackboneΊΜͲ͍΍ΜʁԶΒ͸ࣗಈͰߋ৽͢ΔͰ Angular(v1):

    binderƊሱọ۷ྍźƉ㛀ƃŴƌaΠϕϯτϧʔϓ ͰDirtyCheckźƉƮƃŴƍƑƊ֒ಖᇗŧƋŧũŮƤƄƦᇗŧ 2014೥FEۀք ੢໺Χφࣄ݅
  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Λੜ੒ͯ͠ɺϢʔβʔ͕௚઀ͦΕΒΛݟͨΓର࿩Ͱ͖ΔΑ͏ʹ͢Δ͜ ͱͰ͢ɻϑϩϯτΤϯυͷ։ൃʹؔ࿈͢Δ՝୊͸ɺ΢ΣϒαΠτͷϑϩϯτΤϯυΛ੍࡞͢ΔͨΊʹ࢖ ༻͞ΕΔπʔϧ΍ςΫχοΫ͕ઈ͑ͣมԽ͢ΔͨΊɺ։ൃऀ͸ͦͷ෼໺ͷൃలঢ়گΛৗʹೝࣝ͢Δඞཁ ͕͋Δͱ͍͏͜ͱͰ͢ɻ αΠτΛઃܭ͢Δ໨త͸ɺϢʔβʔ͕αΠτΛ։͍ͨͱ͖ʹɺಡΈ΍ؔ͘͢࿈ੑͷߴ͍ܗࣜͰ৘ใ͕ද ࣔ͞ΕΔΑ͏ʹ͢Δ͜ͱͰ͢ɻ͜Ε͸ɺը໘αΠζ΍ղ૾౓͕͞·͟·ͳ͞·͟·ͳσόΠεΛϢʔ βʔ͕࢖༻͍ͯ͠ΔͨΊɺઃܭऀ͕αΠτΛઃܭ͢Δࡍʹ͜ΕΒͷ໘Λߟྀ͢Δඞཁ͕͋ΔͨΊɺ͞Β ʹෳࡶʹͳΓ·͢ɻ൴Β͸ɺҟͳΔϒϥ΢βʢΫϩεϒϥ΢βʣɺҟͳΔΦϖϨʔςΟϯάγεςϜ ʢΫϩεϓϥοτϑΥʔϜʣɺ͓ΑͼҟͳΔσόΠεʢσόΠεؒʣͰαΠτ͕ਖ਼͘͠ಈ࡞͢ΔΑ͏ʹ ͢Δඞཁ͕͋Γ·͢ɻ