Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

RTCϑϩϯτΤϯυ։ൃ֓ཁ 1. ࣗݾ঺հ 2. डߨੜࣗݾ঺հ 3. ϑϩϯτΤϯυͷશମ૾ʹ͍ͭͯ 4. RTCʹ͓͚ΔϑϩϯτΤϯυ։ൃʹ͍ͭͯ 5. ΞΠεϒϨΠΫ 6. HTML/CSS ϨΫνϟʔ 7. ϋϯζΦϯ

Slide 3

Slide 3 text

Let's start by introducing ourselves.

Slide 4

Slide 4 text

৽Ҫ͞ΜASG ৽Ҫஐ࢜

Slide 5

Slide 5 text

ASG ޻౻΢ΟϦΞϜெ @toru_kudo

Slide 6

Slide 6 text

Could you introduce a little bit of yourself?

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

What Is a Front-End Developer?

Slide 9

Slide 9 text

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.

Slide 10

Slide 10 text

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Λੜ੒ͯ͠ɺϢʔβʔ͕௚઀ͦΕΒΛݟͨΓର࿩Ͱ͖ΔΑ͏ʹ͢Δ͜ ͱͰ͢ɻϑϩϯτΤϯυͷ։ൃʹؔ࿈͢Δ՝୊͸ɺ΢ΣϒαΠτͷϑϩϯτΤϯυΛ੍࡞͢ΔͨΊʹ࢖ ༻͞ΕΔπʔϧ΍ςΫχοΫ͕ઈ͑ͣมԽ͢ΔͨΊɺ։ൃऀ͸ͦͷ෼໺ͷൃలঢ়گΛৗʹೝࣝ͢Δඞཁ ͕͋Δͱ͍͏͜ͱͰ͢ɻ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

What Is a Front-End Developer? গ࣌͠୅ΛḪͬͯΈΑ͏

Slide 14

Slide 14 text

What Is a Front-End Developer? 1.HTTP Request 2. HTML CSS JS ΞϓϦέʔγϣϯ ϨΠϠ ΠϯϑϥετϥΫνϟ ϨΠϠ αʔϏε ϨΠϠ ϓϨθϯςʔγϣϯ ϨΠϠ Ϣʔβ ΠϯλʔϑΣΠε Client Server DB Service 200X೥୆

Slide 15

Slide 15 text

What Is a Front-End Developer? ▸ ϓϨθϯςʔγϣϯ૚͸ը໘શମΛҰؾʹඳը Ͱ͖ΔͷͰָͩͬͨ ϝϦοτ

Slide 16

Slide 16 text

What Is a Front-End Developer? ໰୊఺

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

What Is a Front-End Developer?

Slide 21

Slide 21 text

What Is a Front-End Developer? Click

Slide 22

Slide 22 text

What Is a Front-End Developer? Click

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

What Is a Front-End Developer? Gmail

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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೥

Slide 31

Slide 31 text

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೥

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

What Is a Front-End Developer? ▸ ߋ৽Λ͔͚͍ͨը໘ͷҰ෦ͷΈΛભҠΛհͣ͞ʹߋ৽ग़དྷΔΑ͏ ʹͳͬͨ ▸ UXͷඈ༂త޲্ʢGmailɺGoogleMapsʣ ϝϦοτ ৽ͨͳ໰୊ ▸ ϓϨθϯςʔγϣϯϨΠϠΛ͖࣋ͬͯͨࣄʹΑͬͯɺᴈ໌ظ͕དྷͨɻιϑτ ΢ΣΞ։ൃͷϓϥΫςΟε͕ϑϩϯτʹ͸ͳ͔ͬͨͨΊɻ ▸ ඇಉظॲཧࣗମ͕ɺѻ͑Δਓ͕গͳ͔ͬͨΓɺݴޠͱͯ͠ඇಉظͷαϙʔτ͕ ෆ଍͍ͯͨ͠ʢe.g. callback͔͠ͳ͍ͳͲʣ ▸ ϑϩϯτͱαʔόʔͷ྆ํʹϓϨθϯςʔγϣϯϨΠϠ͕͋ΔͭΒΈ

Slide 34

Slide 34 text

What Is a Front-End Developer? iPhoneʮ΍ͬ΄ʈʈʯ

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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೥

Slide 39

Slide 39 text

What Is a Front-End Developer? ΑΓෳࡶͳUIΛٻΊΒΕΔΑ͏ʹͳΓɺ౰࣌࢖ΘΕ͍ͯͨϓϨθ ϯςʔγϣϯϨΠϠʢjQueryʣͷ࣮૷͕ͩΜͩΜͱਏ͍΋ͷʹ ͳ͖ͬͯ·ͨ͠ɻ

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

What Is a Front-End Developer? ϝϦοτ σϝϦοτ ▸ SEOͱͷܾผ ▸ ΞΫηεղੳ͕೉͍͠ ▸ ॳظϖʔδͷඳըͷ஗͞ ▸ ࣮૷ͷ೉Խ ▸ NativeΞϓϦͷΑ͏ͳϢʔβମݧΛಘΒΕΔΑ͏ʹͳͬͨɻ ▸ ΞϓϦέʔγϣϯϨΠϠ͕ϑϩϯτʹ߱Γ͖ͯͨ͜ͱʹΑͬͯɺطଘ ͷ஌ΒΕ͍ͯΔMVCͳͲͷύλʔϯ͕ద༻Մೳʹͳͬͨɻ

Slide 42

Slide 42 text

What Is a Front-End Developer? SEOͱ͸ɺ”Search Engine Optimization” ͷུͰ͋Γɺ ݕࡧΤϯδϯ࠷దԽΛҙຯ͢Δݴ༿ɻ ݕࡧ݁ՌͰWebαΠτ͕ΑΓଟ͘࿐ग़͞ΕΔͨΊʹߦ͏Ұ࿈ͷऔ Γ૊Έͷ͜ͱΛࢦ͢ɻ

Slide 43

Slide 43 text

What Is a Front-End Developer? ౰࣌ͷΫϩʔϥʔ͸JavaScriptͷϨϯμϦϯά͕Ͱ͖ͣɺ SPAͰ࡞ΒΕ͍ͯΔϖʔδ͸ɺਖ਼͘͠Ϋϩʔϧ͢Δ͜ͱ͕Ͱ͖ͳ ͔ͬͨɻͦͷͨΊɺSEO͕Ͱ͖ͳ͘ͳͬͨɻ SEO͕ෆཁͳWebΞϓϦέʔγϣϯͰ͸SPAΛ࠾༻͢ΔΑ͏ʹ ͳͬͯͨɻ

Slide 44

Slide 44 text

What Is a Front-End Developer? SPAͷ࣮૷ΛjQueryͷΈͰߦ͏ͷ͸ਏ͘ɺ Backboneͱ͍͏MVCϑϨʔϜϫʔΫΛ࢖༻ͨ͠ɻ Backbone͸Viewͷαϙʔτ͸ऑ͘ɺBackboneͱjQueryΛซ༻ ͍ͯͨ͠ɻ MVCϑϨʔϜϫʔΫΛ༻͍Δ͜ͱͰɺσβΠϯύλʔϯΛखʹೖ Ε͕ͨϓϩάϥϛϯάίετ͸े෼ʹԼ͕Βͳ͔ͬͨɻ

Slide 45

Slide 45 text

What Is a Front-End Developer? SPAͷ࣮૷ΛBackboneͰߦ͏ͷ͸ਏ͘ɺ AngularJSʢv1ʣͱ͍͏auto bindingػೳΛ࣋ͬͨMVCϑϨʔϜ ϫʔΫΛ࢖༻ͯ͠ߏங͞ΕΔΑ͏ʹͳͬͨɻ auto bindingػೳ͸ɺϞσϧͱϏϡʔͦΕͧΕͷมԽΛ૒ํ޲Ͱ ࣗಈతʹ൓өͯ͘͠ΕΔͨΊɺ ϓϩάϥϛϯάίετ͸Լ͕͕ͬͨɺAngularJSʢv1ʣ͕࠾༻͠ ͨauto bindingػೳͷํ๏͸ɺΠϕϯτϧʔϓͰdirty checkΛ͠ ͍ͯΔͨΊॏ͔ͬͨɻ

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

What Is a Front-End Developer?

Slide 52

Slide 52 text

What Is a Front-End Developer?

Slide 53

Slide 53 text

What Is a Front-End Developer?

Slide 54

Slide 54 text

What Is a Front-End Developer?

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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ʢαʔόʔαΠυϨϯμϦϯάʣͱ͸

Slide 59

Slide 59 text

What Is a Front-End Developer? SSR͢Δ͜ͱͰύϑΥʔϚϯεΛखʹೖΕ͕ͨɺ ҰํͰαʔόʔαΠυͷίʔυΛϑϩϯτΤϯυ͕୲͏͜ͱͰѻ͏ྖҬ͕૿͑ͨɻ ϑϩϯτΤϯυʹ΋ܕͷधཁ͕ग़͖ͯͯɺ TypeScriptͱݺ͹ΕΔϑϩϯτΤϯυͰܕΛѻ͑Δ੩తܕ෇͚ͷAltJS͕ྲྀߦΔΑ͏ʹͳͬ ͨɻ TypeScriptʹ͍ͭͯ͸ɺޙ೔Quramy͞Μͷߨ͕ٛ͋ΔͨΊৄ͘͠͸ͦ͜Ͱʂ SSRʢαʔόʔαΠυϨϯμϦϯάʣͱ͸ x

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

What Is a Front-End Developer?

Slide 62

Slide 62 text

What Is a Front-End Developer?

Slide 63

Slide 63 text

What Is a Front-End Developer?

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

What Is a Front-End Developer? “มΘΔ΋ͷɻٕज़ͷมԽ͸ཐટঢ়ɻཐટͷࠩ෼ͱɺͦΕΛՄೳ ʹٕͨ͠ज़Λཧղ͢Δ มΘΒͳ͍΋ͷɻੜ͖࢒Δٕज़ʹ͸ಛ௃͕͋Δɻͦͷഎޙʹ͋Δ ந৅ͷ͔ͪΒΛཧղ͢Δ” Source: https://speakerdeck.com/twada/worse-is-better-understanding-the-spiral-of-technologies-2019-edition

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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/

Slide 75

Slide 75 text

RTCʹ͓͚ΔϑϩϯτΤϯυ։ൃ RTCͰSPAͷ՝୊Λղܾ͍ͯ͠Δ1ྫͱͯ͠AirγϑτΛ঺հ͠·͢ɻ ଞʹ΋ϦΫϧʔτςΫϊϩδʔζͷϒϩάʹৄࡉͳهࣄ͕͋Γ https://recruit-tech.co.jp/blog/2020/02/14/performance-and-refactoring/ ՝୊ղܾͷத৺ͱͳ͍ͬͯΔ͚ͭ͡ΜઌഐͷJavaScriptߨ࠲͕ ໌೔͋ΔͷͰɺؾʹͳΔ఺͸ͥͻ໌೔ͷJavaScirptߨ࠲Ͱ ฉ͍ͯΈΑ͏ʂ x

Slide 76

Slide 76 text

To Be Continued…