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

RTC Frontend Development

RTC Frontend Development

2018年4~5月開催「ブートキャンプ特別講座」の資料になります。

Recruit Technologies

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

    Redux Middleware: redux-effects, redux-async-loader, etc Contract: Agreed SSR ready, Service Worker ready, AMP not yet Patches are welcome
  18. HTML / CSS > HTML HTML
 HyperText Markup LanguageʢϋΠύʔςΩετ ϚʔΫΞοϓ

    ϥϯήʔδɺHTMLʢΤΠνςΟʔΤϜΤϧʣʣ͸ɺϋΠύʔςΩετ Λهड़͢ΔͨΊͷϚʔΫΞοϓݴޠͷ1ͭͰ͋ΔɻWorld Wide Web (WWW)ʹ͓͍ͯɺ΢Σϒϖʔδʢ1990೥୅ޙ൒ࠒ͔Β͸ίϯς ϯπͱ͍͏ޠ΋ར༻͞Ε͍ͯΔɻʮத਎ʯͱ͍͏ҙຯͷޠͰ͋Γɺେ૚ͳҙຯ͸ແ͍ʣΛදݱ͢ΔͨΊʹ༻͍ΒΕΔɻϋΠύʔϦϯΫ΍ ը૾౳ͷϚϧνϝσΟΞΛຒΊࠐΉϋΠύʔςΩετͱͯ͠ͷػೳɺݟग़͠΍ஈམͱ͍ͬͨυΩϡϝϯτͷந৅ߏ଄ɺϑΥϯτ΍จࣈ৭ ͷࢦఆͳͲͷݟͨ໨ͷࢦఆɺͳͲͱ͍ͬͨػೳ͕͋Δɻ https://ja.wikipedia.org/wiki/HyperText_Markup_Language
  19. HTML / CSS > CSS CSS
 Cascading Style SheetsʢCSSɺΧεέʔσΟϯάɾελΠϧɾγʔτɺΧεέʔυɾελΠϧɾγʔτʣͱ͸ɺHTML ΍

    XMLͷཁૉ ΛͲͷΑ͏ʹम০ʢදࣔʣ͢Δ͔Λࢦࣔ͢ΔɺW3CʹΑΔ࢓༷ͷҰͭɻจॻͷߏ଄ͱମࡋΛ෼཭ͤ͞Δͱ͍͏ཧ೦Λ࣮ݱ͢Δҝʹఏএ ͞ΕͨελΠϧγʔτͷɺ۩ମతͳ࢓༷ͷҰͭɻ CSS͸HTMLͰදݱՄೳͱߟ͑ΒΕΔσβΠϯͷେ෦෼Λ࣮ݱͰ͖ΔཁૉΛऔΓೖΕͭͭɺ৽ͨͳσβΠϯػೳΛඋ͑Δɻ·ͨɺҎԼͷ Α͏ͳಛ௃Λ࣋ͭɻ ϖʔδΛදࣔ͢ΔϝσΟΞʹ߹ΘͤͯελΠϧγʔτΛ੾Γସ͑Δ͜ͱͰɺϝσΟΞ͝ͱʹදࣔΛมԽͤ͞Δ͜ͱ͕Ͱ͖Δɻ ϢʔβʔΤʔδΣϯτʢଟ͘ͷ৔߹΢Σϒϒϥ΢βʣɺ΢ΣϒαΠτ੍࡞ऀɺϢʔβ͕ͦΕͧΕఆٛͨ͠CSSͷ΋ͨΒ͢ޮՌΛॏͶ߹Θ ͤΔʢΧεέʔυ͢Δʣ͜ͱ͕Ͱ͖Δɻ https://ja.wikipedia.org/wiki/Cascading_Style_Sheets
  20. HTML / CSS > CSS • Eric Meyer’s “Reset CSS”

    2.0 • HTML5 Doctor CSS Reset • Normalize.css
  21. HTML / CSS > CSS CSSͷ໰୊: յΕ΍͍͢ ͢΂͕ͯάϩʔόϧʂ • ৄࡉ౓ͷߴ͍ελΠϧࢦఆ͕༏ઌ͞ΕΔ

    • ಉ͡ৄࡉ౓ͩͱޙ͔Βॻ͔Εͨ΋ͷ্͕ॻ͖ • ਌ཁૉͷελΠϧ͕ࢠཁૉʹܧঝ͞ΕΔ • ͍Ζ͍Ζͳ৔ॴʹॻ͚Δ • styleλάɺΠϯϥΠϯɺ֎෦ϑΝΠϧ
  22. HTML / CSS > CSS ৄࡉ౓ʢSpecificityʣͱ͸ɺ • શশηϨΫλ: * •

    λΠϓηϨΫλ: p, div • ΫϥεηϨΫλ: .name • ଐੑηϨΫλ: [class=name] • ٖࣅΫϥε: :hover • ID ηϨΫλ: #id • ΠϯϥΠϯελΠϧ: style=“”
  23. HTML / CSS > CSS CSS Frameworks • OOCSS •

    SMACSS • SUITCSS • BEM • FLOCSS →໾ׂ΍ཻ౓͝ͱʹϧʔϧΛઃ͚Δ͜ͱͰɺ ɹϧʔϧಉ࢜ͷিಥΛආ͚Δˍӡ༻͠΍͘͢
  24. HTML / CSS > CSS CSS Frameworks • OOCSS •

    SMACSS • SUITCSS • BEM • FLOCSS
  25. HTML / CSS > CSS BEM ͱ͸ • Block Element

    Modifier https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ Block: ҰҙͳΘ͔Γ΍໊͍͢લ Element → BlockΛߏ੒͢Δཁૉ Modifier → Block·ͨ͸Element ͷදࣔόϦΤʔγϣϯ
  26. HTML / CSS > CSS CSS ϨΠΞ΢τ • float •

    position • display: flex • display: grid
  27. HTML / CSS > CSS CSS ϨΠΞ΢τ • float •

    position • display: flex • display: grid https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Flexible_Box_Layout/ Using_CSS_flexible_boxes https://codepen.io/justd/pen/yydezN