RTC Frontend Development

RTC Frontend Development

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

Eea9a05e6e222a3d50c73f54a49fadf4?s=128

Recruit Technologies

July 19, 2018
Tweet

Transcript

  1. RTC Frontend Development

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

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

  4. ৽Ҫ͞Μ ASG ৽Ҫஐ࢜

  5. ASG ޻౻΢ΟϦΞϜெ

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

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

    JS ΞϓϦέʔγϣϯ ϨΠϠ ΠϯϑϥετϥΫνϟ ϨΠϠ αʔϏε ϨΠϠ ϓϨθϯςʔγϣϯ ϨΠϠ Ϣʔβ ΠϯλʔϑΣΠε Client Server DB Service 200X೥୆
  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? Ajaxʮ΍ͬ΄ʈʈʯ

  20. What Is a Front-End Developer?

  21. 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೥
  22. What Is a Front-End Developer? AjaxΛ࢖ͬͯ։ൃ͞ΕͨWebΞϓϦέʔγϣϯͷ୅දྫ

  23. 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

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

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

    ϝϦοτ σϝϦοτ ▸ ࣮૷ͷෳࡶԽ ▸ ex1. jQuery Ajaxͷϑϩʔ੍ޚ ▸ ex2. طଘͷϓϩάϥϛϯάύϥμΠϜ͕࢖͑ͳ͍ ▸ ex3. ෳࡶͳUI͕࡞Εͳ͍
  26. What Is a Front-End Developer? SPAʮ΍ͬ΄ʈʈʯ

  27. What Is a Front-End Developer? SinglePageApplication

  28. What Is a Front-End Developer? 2010೥લޙʹͳΔͱεϚʔτϑΥϯ͕ීٴ͖͓ͯͯ͠Γɺ NativeΞϓϦͷಈ͖ΛWebΞϓϦέʔγϣϯʹ΋ٻΊΒΕΔΑ ͏ʹͳ͖ͬͯ·ͨ͠ɻ ΑΓෳࡶͳUIΛٻΊΒΕΔΑ͏ʹͳΓɺjQueryͰͷ࣮૷͕ͩΜ ͩΜͱਏ͍΋ͷʹͳ͖ͬͯ·ͨ͠ɻ

  29. 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
  30. What Is a Front-End Developer?

  31. What Is a Front-End Developer? ▸ ෳࡶͳUIΛ࣮૷Մೳʹͳͬͨ ▸ طଘͷϓϩάϥϛϯάύϥμΠϜΛ͋Δఔ౓׆༻ग़དྷΔ ▸

    ex ΦϒδΣΫτࢦ޲ ϝϦοτ
  32. What Is a Front-End Developer? ▸ ෳࡶͳUIΛ࣮૷Մೳʹͳͬͨ ▸ طଘͷϓϩάϥϛϯάύϥμΠϜΛ͋Δఔ౓׆༻ग़དྷΔ ▸

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

    ݕࡧ݁ՌͰWebαΠτ͕ΑΓଟ͘࿐ग़͞ΕΔͨΊʹߦ͏Ұ࿈ͷऔ Γ૊Έͷ͜ͱΛࢦ͠·͢ɻ
  34. What Is a Front-End Developer? SEO͕ෆཁͳWebΞϓϦέʔγϣϯ͸SPAΛ࠾༻͢ΔΑ͏ʹͳͬ ͖ͯ·ͨ͠ɻ SPA͕ྲྀߦͬͨཧ༝ͱͯ͠͸ɺϢʔβͷ࣌ؒͷୣ͍߹͍͕׆ൃԽ ͠ɺNativeΞϓϦͷΑ͏ͳ൓Ԡ଎౓ͷ޲্͕ٻΊΒΕɺಈ͖Λඳ ը͢Δओಋ͕αʔόʔଆ͔ΒΫϥΠΞϯτଆʹ͋ͬͨ΄͏͕༗ར

    ͷͨΊͰ͢ɻ
  35. What Is a Front-End Developer? SPAͷ࣮૷ΛjQueryͷΈͰߦ͏ͷ͸ਏ͘ɺBackbone΍Angular Λ୅දͱ͢ΔϑϨʔϜϫʔΫΛ࢖༻ͯ͠ߏங͞Ε·ͨ͠ɻ

  36. What Is a Front-End Developer? Backbone: M㱻C㱻V`ߋ৽͕ΊΜͲ͍͘͞ ↓ BackboneΊΜͲ͍΍ΜʁԶΒ͸ࣗಈͰߋ৽͢ΔͰ Angular(v1):

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

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

    binderƊሱọ۷ྍźƉ㛀ƃŴƌaΠϕϯτϧʔϓ ͰDirtyCheckźƉƮƃŴƍƑƊ֒ಖᇗŧĆƋŧũŮƤƄƦᇗŧ
  39. What Is a Front-End Developer? ϓϩάϥϛϯάίετ ϨϯμϦϯάίετ

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

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

  42. What Is a Front-End Developer? ϓϩάϥϛϯάͷίετ ϨϯμϦϯάίετ ͕ࠢ਒͑ΔࣄҊ

  43. What Is a Front-End Developer? Backbone: M㱻C㱻V`ߋ৽͕ΊΜͲ͍͘͞ ↓ BackboneΊΜͲ͍΍ΜʁԶΒ͸ࣗಈͰߋ৽͢ΔͰ Angular(v1):

    binderƊሱọ۷ྍźƉ㛀ƃŴƌaΠϕϯτϧʔϓ ͰDirtyCheckźƉƮƃŴƍƑƊ֒ಖᇗŧƋŧũŮƤƄƦᇗŧ 2014೥FEۀք ੢໺Χφࣄ݅
  44. What Is a Front-End Developer? Ծ૝DOMͱ͸ͳʹ͔ʁ

  45. What Is a Front-End Developer? ࣮DOMͰ͸ͳ͍ɺϝϞϦ্ʹDOMΛ࡞੒ͨ͠΋ͷɻ ߋ৽ࠩ෼͚ͩΛ࠶ඳըͯ͘͠ΕΔɻ ͜ΕʹΑΓɺେྔͷσʔλߋ৽Λ͢Δࡍʹɺϓϩάϥϯάͷ͓࡞ ๏ΛकΓͭͭɺϨϯμϦϯάͷίετΛ৺഑͠ͳͯ͘ྑ͘ͳͬͨɻ

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

  48. What Is a Front-End Developer?

  49. What Is a Front-End Developer?

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

  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? Source: https://speakerdeck.com/twada/understanding-the-spiral-of-technologies

  56. What Is a Front-End Developer? “มΘΔ΋ͷɻٕज़ͷมԽ͸ཐટঢ়ɻཐટͷࠩ෼ͱɺͦΕΛՄೳ ʹٕͨ͠ज़Λཧղ͢Δɻ” Source: https://speakerdeck.com/twada/understanding-the-spiral-of-technologies

  57. What Is a Front-End Developer? ຊ࣭ͱ͓࡞๏Λཧղ͢Δඞཁ͕͋Δɻ ຊ࣭͸Ӭଓతɺ͓࡞๏͸࢖͍ࣺͯɻ

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

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

  60. RTCʹ͓͚ΔϑϩϯτΤϯυ։ൃ σϝϦοτ ▸ SEOͱͷܾผ ▸ ΞΫηεղੳ͕೉͍͠ ▸ ॳظϖʔδͷඳըͷ஗͞ ▸ ͞ΒͳΔ࣮૷ͷ೉Խ

    SPA๊͕͍͑ͯͨ໰୊͸Լه
  61. Source: https://twitter.com/JohnMu/status/804342564790923265 RTCʹ͓͚ΔϑϩϯτΤϯυ։ൃ

  62. Source: https://twitter.com/JohnMu/status/804342564790923265 JSͰඳըͨ͠΋ͷ΋ ಉ౳ʹධՁ͢ΔΑ RTCʹ͓͚ΔϑϩϯτΤϯυ։ൃ

  63. What Is a Front-End Developer? Source: https://twitter.com/JohnMu/status/804342564790923265 ͢͞Google

  64. What Is a Front-End Developer? Source: https://twitter.com/JohnMu/status/804342564790923265 ͱ͸͍͑100%Ͱ͸ͳ͍

  65. RTCʹ͓͚ΔϑϩϯτΤϯυ։ൃ ໰୊͸·ͩղܾͯ͠ͳ͍

  66. RTCʹ͓͚ΔϑϩϯτΤϯυ։ൃ ղܾ͢ΔͨΊͷΞϓϩʔν

  67. RTCʹ͓͚ΔϑϩϯτΤϯυ։ൃ Ωʔϫʔυ͸̏ͭ

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

  69. SSR ServerSideRendring

  70. SSR ServerSideRendring BFF Backends For Frontends

  71. SSR ServerSideRendring Isomorphic BFF Backends For Frontends

  72. Source: https://speakerdeck.com/yosuke_furukawa/ssrfalsehua

  73. Source: https://speakerdeck.com/koichik/isomorphic-survival-guide

  74. redux-pluto https://github.com/recruit-tech/redux-pluto

  75. 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
  76. To Be Continued…

  77. To Be Continued… Let’s Lunch

  78. Ice Break

  79. ಥવͰ͕͢ɺϚγϡϚϩ޷͖Ͱ͔͢ʁ

  80. •̐ਓ̍νʔϜɻ •ཱࣗՄೳͰग़དྷΔ͚ͩߴ͍λϫʔΛཱͯΔ͜ͱɻ •ςʔϓͰ଍৔Λݻఆͯ͠͸͍͚·ͤΜɻ •λϫʔͷ্ʹϚγϡϚϩΛஔ͘͜ͱɻʢύελʹࢗͯ͠΋OKʣ •ύελ΍ςʔϓɺͻ΋͸੾ͬͨΓɺషͬͨΓ͢Δͷ͸OKͰ͢ɻ •ϚγϡϚϩ͸੾ͬͯ͸͍͚·ͤΜɻ •ϓϨΠ࣌ؒ͸̍̌෼ؒʢ࡞ઓλΠϜ΋ؚΉʣɻ •ܭଌͷ࠷த΋λϫʔཱ͕͍ͬͯͳ͚Ε͹ͳΒͳ͍ɻ

  81. •10෼ؒͷͳ͔Ͱ͍͔ʹૣ͘ɺܭը͔ΒݕূΛճ͔͕͢ϙΠϯτ

  82. HTML CSS Lecture

  83. HTML / CSS > HTML HTML
 HyperText Markup LanguageʢϋΠύʔςΩετ ϚʔΫΞοϓ

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

  85. HTML / CSS > HTML Ҏ্

  86. HTML / CSS > HTML <p class=“name">...</p>

  87. HTML / CSS > HTML ηϚϯςΟΫε

  88. HTML / CSS > HTML ηϚϯςΟΫε ίϯςϯπͷҙຯΛద੾ʹߏ଄Խ͢Δ͜ͱɻݕ ࡧΤϯδϯ΍ϒϥ΢βͳͲ͕ίϯςϯπΛཧղ ͠΍͘͢ͳΔɻϚγϯϦʔμϒϧɻ 


    → ΞΫηγϒϧͰ࠶ར༻Մೳͳ৘ใʹͳΔ
  89. HTML / CSS > HTML ݟͨ໨͸ಉ͡Ͱ΋,,,,

  90. HTML / CSS > CSS CSS
 Cascading Style SheetsʢCSSɺΧεέʔσΟϯάɾελΠϧɾγʔτɺΧεέʔυɾελΠϧɾγʔτʣͱ͸ɺHTML ΍

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

  92. HTML / CSS > CSS

  93. HTML / CSS > CSS reset.css : ϒϥ΢βͷࠩҟΛͳͯ͘͠ελΠϦϯά͠΍͘͢͢Δ

  94. HTML / CSS > CSS • Eric Meyer’s “Reset CSS”

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

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

    λΠϓηϨΫλ: p, div • ΫϥεηϨΫλ: .name • ଐੑηϨΫλ: [class=name] • ٖࣅΫϥε: :hover • ID ηϨΫλ: #id • ΠϯϥΠϯελΠϧ: style=“”
  97. HTML / CSS > CSS ৄࡉ౓ʢSpecificityʣͱ͸ɺ ྫɿ https://developer.mozilla.org/ja/docs/Web/CSS/ Specificity

  98. HTML / CSS > CSS CSS Frameworks • OOCSS •

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

    SMACSS • SUITCSS • BEM • FLOCSS
  100. 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 ͷදࣔόϦΤʔγϣϯ
  101. HTML / CSS > CSS Component໰୊ FE͚ͩͰܾΊͯ΋SPAͱ͔͡Όͳ͍ͱSSଆͱdesign ଆͰComponentͷϒϩοΫ͕ҧ͏ σβΠφʔ →

    HTML࡞੒ → ΞϓϦ૊ΈࠐΈ
 
 ͷड͚౉͠ͷதͰೝ͕ࣝͣΕ͍ͯ͘ɻ
  102. HTML / CSS > CSS CSS ϨΠΞ΢τ • float •

    position • display: flex • display: grid
  103. 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
  104. HTML / CSS > ϋϯζΦϯ Facebook Messanger ΛHTMLͰ࡞Δ

  105. HTML / CSS > ϋϯζΦϯ

  106. HTML / CSS > ϋϯζΦϯ 1. େ·͔ʹઃܭ:ϖʔύʔίʔσΟϯά • શମͷߏ଄Λ၆ᛌ •

    ڞ௨ཁૉΛநग़ 2. HTML࡞Δ 3. CSS࡞Δ
  107. HTML / CSS > ϋϯζΦϯ ϖʔύʔίʔσΟϯά
 (άϧʔϓͰͬ͘͟Γߏ੒Λ͍ͭͬͯͩ͘͘͞) A4༻ࢴˍϖϯΛ഑෍͠·͢

  108. HTML / CSS > ϋϯζΦϯ ͬ͘͟Γߏ੒Λͭ͘Δ
 ʢiPad Ͱөͯ͠ΈΔʣ

  109. HTML / CSS > ϋϯζΦϯ ศརπʔϧ
 
 
 https://app.avocode.com/