Slide 1

Slide 1 text

ΤϯδχΞΩϟϦΞʹ͓͚Δ য૩ײͱͷ޲͖߹͍ํ 2019.07.06 #bcu30 Takuma HANATANI (@potato4d)

Slide 2

Slide 2 text

HANATANI Takuma (@potato4d) • Ֆ୩୓ຏ / @potato4d • 21 ࡀͳͷͰ 20 ୅૊Ͱଟ෼Ұ൪ए͍ͱࢥ͍·͢ • Web Application Developer • Work at... • LINE Corp: UIT dept. Frontend Engineer / Developer Relations • ElevenBack: President, Technical Advisor, Web Engineer • Battle Episode: Ոʹ෢ث͕ 5 ͭ͋Δ(݋, ݋, 佁, ୹݋, ૦) • Contributions: Vue.js & React.js Japanese document maintainer

Slide 3

Slide 3 text

Agenda 1. ͜Ε·ͰͷΩϟϦΞʹ͓͚ΔΩʔϫʔυʮয૩ײʯ 2. যΓ΍ةػײʹΑΔ։ൃऀͷΩϟϦΞͱͯ͠ͷඈͼڃ 3. ΤϯδχΞΩϟϦΞͱ͍͏αϯΫίετʹΑͬͯڱ·Δະདྷ 4. ਖ਼͍͠য૩ײͱͷ޲͖߹͍͔ͨͱ͸ 5. ࢲͷ͜Ε͔Βͷ࿩

Slide 4

Slide 4 text

Agenda 1. ͜Ε·ͰͷΩϟϦΞʹ͓͚ΔΩʔϫʔυʮয૩ײʯ 2. যΓ΍ةػײʹΑΔ։ൃऀͷΩϟϦΞͱͯ͠ͷඈͼڃ 3. ΤϯδχΞΩϟϦΞͱ͍͏αϯΫίετʹΑͬͯڱ·Δະདྷ 4. ਖ਼͍͠য૩ײͱͷ޲͖߹͍͔ͨͱ͸ 5. ࢲͷ͜Ε͔Βͷ࿩

Slide 5

Slide 5 text

͜Ε·ͰͷΩϟϦΞʹ͓͚ΔΩʔϫʔυʮয૩ײʯ • ΤϯδχΞΩϟϦΞΛߟ͑ΔࡍॏཁʹͳΔʮয૩ײʯ • যΓ΍ෆ҆ • ʮࠓͷٕज़ͷຏ͖ํͰྑ͍ΜͩΖ͏͔ʯ • ੜ͖͍͚ͯΔͩΖ͏͔ • ͱ͖ʹ͸ϓϥεʹɺͱ͖ʹ͸ϚΠφεʹ • ͜Εͷ͓͔͛ͰΤϯδχΞͱͯ͠ɺਓؒͱͯ͠Ұؾʹ੒௕͢Δ͜ͱ͕ Ͱ͖ͨ࣌୅΋͋ͬͨ • ҰํͰɺ͜Ε͔ΒΛߟ͑Δʹ͋ͨͬͯ͜Ε͕अຐͳ͜ͱ΋͋ͬͨ

Slide 6

Slide 6 text

ࠓճ঺հ͢Δʮয૩ײʯͷऔѻέʔε

Slide 7

Slide 7 text

ࠓճ঺հ͢Δʮয૩ײʯͷऔѻέʔε 1. લฤ: ϓϥεʹͳͬͨΩϟϦΞ • ߴߍ࣌୅͓ΑͼϑϦʔϥϯε࣌୅ (~20ࡀ)

Slide 8

Slide 8 text

ࠓճ঺հ͢Δʮয૩ײʯͷऔѻέʔε 1. લฤ: ϓϥεʹͳͬͨΩϟϦΞ • ߴߍ࣌୅͓ΑͼϑϦʔϥϯε࣌୅ (~20ࡀ) 2. ޙฤ: ᐫͱͳͬͨΩϟϦΞ • LINEגࣜձࣾೖࣾޙ (21ࡀݱࡏ)

Slide 9

Slide 9 text

Agenda 1. ͜Ε·ͰͷΩϟϦΞʹ͓͚ΔΩʔϫʔυʮয૩ײʯ 2. যΓ΍ةػײʹΑΔ։ൃऀͷΩϟϦΞͱͯ͠ͷඈͼڃ 3. ΤϯδχΞΩϟϦΞͱ͍͏αϯΫίετʹΑͬͯڱ·Δະདྷ 4. ਖ਼͍͠য૩ײͱͷ޲͖߹͍͔ͨͱ͸ 5. ࢲͷ͜Ε͔Βͷ࿩

Slide 10

Slide 10 text

যΓ΍ةػײʹΑΔ։ൃऀͷΩϟϦΞͱͯ͠ͷඈͼڃ • બ୒ͱूத • தֶ࣌୅͔ΒֶߍΛٳΜͰϓϩάϥϛϯά͕ͪͩͬͨ͠ • ߴߍ΋ϓϩάϥϛϯάʹूத͢ΔͨΊʹ௨৴੍ߴߍʹਐΈɺΤ ϯδχΞΩϟϦΞ͕ੵΊͳ͍ͱͲΜ٧·Γʹ • ৗʹٕज़ऀͱͯ͠ͷεΩϧͱɺੜ͖࢒ΔͨΊͷΤϯδχΞί ϛϡχςΟͱͯ͠ͷͭͳ͕Γ΍ίϛϡχέʔγϣϯΛॏࢹ ߴߍ࣌୅

Slide 11

Slide 11 text

যΓ΍ةػײʹΑΔ։ൃऀͷΩϟϦΞͱͯ͠ͷඈͼڃ • ࣮ࡍʹىͨ͜͠ΞΫγϣϯ • ελʔτΞοϓͰϑϩϯτɺαʔόʔɺiOSͱ޿͘։ൃʹܞΘΔ • ͱ͖ʹ͸σβΠφʔ΍ϓϩδΣΫτϚωʔδϟʔͳͲ΋ܦݧɻσεϚʔ νʹΑͬͯҰؾʹܦݧ஋ΛߴΊɺίϛϡχέʔγϣϯͷେ੾͞Λ஌Δ • ஍ํίϛϡχςΟͰΧϯϑΝϨϯεͷ࣮ߦҕһ௕ʹ • FRONTEND CONFERENCE 2017 Ͱଟ͘ͷਓʹॿ͚ͯ΋Β͍࣮ߦҕһ௕ • डୗ։ൃͰͱΓͬͺ͙ΕͨΓͰࣾձܦݧ΋ ߴߍ࣌୅

Slide 12

Slide 12 text

যΓ΍ةػײʹΑΔ։ൃऀͷΩϟϦΞͱͯ͠ͷඈͼڃ ߴߍ࣌୅ • ࣾձਓʹͳΔ࣌఺ͰಘΒΕͨܦݧ • Web ΤϯδχΞͱͯ͠ͷಛఆͷٕज़ʹґଘ͠ͳ͍஌ࣝͱܦݧ • ϑϩϯτΤϯυ(Vue / React), όοΫΤϯυ(PHP, Rails), AWS ͳͲ • ίϛϡχςΟͰͷΠϕϯτӡӦͷܦݧ • ΧϯϑΝϨϯεओ࠵ɺఆظΠϕϯτ։࠵ • ৗʹଟ͘ͷࢹ఺ΛݟΒΕΔΑ͏ʹෳۀମ੍ • ৽ଔೖࣾ͢Δͱݻ·Γ͕ͪͳՁ஋؍ΛϑΣΞʹอͯΔ

Slide 13

Slide 13 text

যΓ΍ةػײʹΑΔ։ൃऀͷΩϟϦΞͱͯ͠ͷඈͼڃ ߴߍଔۀޙɺ৽ଔΛগ͠ܦͯϑϦʔϥϯεʹͳͬͨͱ͖ • ʮҊ݅ʯ΍ʮܖ໿ߋ৽݄ʯʹറΒΕΔϑϦʔϥϯε • IT ଜࣾձͰ͸ཁٻҎ্ͷΞ΢τϓοτΛଓ͚Δඞཁ͕͋Δ • ੒ՌͱҊ݅ྔ͕ൺྫ͢Δ؀ڥͰͷີ౓ͷೱ͍࣌ؒͷܦݧ • ฒߦͰࢢ৔Ձ஋ΛߴΊಠࣗੑΛ࣋ͭඞཁ΋͋Δ • ߴߍ࣌୅ʹෛ͚ͣྼΒͣొஃ͢Δ • ٕज़৘ใΛ͏·͘όζΓ΍͍͢Α͏ʹॻ͘ͳͲ ϑϦʔϥϯε࣌୅

Slide 14

Slide 14 text

যΓ΍ةػײʹΑΔ։ൃऀͷΩϟϦΞͱͯ͠ͷඈͼڃ ϑϦʔϥϯεதʹಘΒΕͨ΋ͷ • ଟ໘తͳ࢓ࣄͷ΍Γ͔ͨ • ੥ෛ΋͋Ε͹νʔϜ։ൃ΋ɺࣗ෼͕ൃ஫ओʹͳΔ͜ͱ΋ • ք۾Ͱͷ҆ఆతͳೝ஌ͷ֫ಘ • Vue.js / React.js ೔ຊޠυΩϡϝϯτϝϯςφ(աڈʹ͸ Nuxt.js΋) • Qiita Vue.js / Nuxt.js λάͰ 1 ҐͳͷͰٕज़૬ஊ͕͖΍͍͢ • Nuxt.js ͷࠃ಺ୈҰਓऀͱͯ͠ͷॻ੶ग़൛ ϑϦʔϥϯε࣌୅

Slide 15

Slide 15 text

যΓ΍ةػײʹΑΔ։ൃऀͷΩϟϦΞͱͯ͠ͷඈͼڃ ૯߹ͨ͠ܦݧ 1. ߴߍ࣌୅ • ΦʔόʔϫʔΫʹΑΔ୹ظूதతͳٕज़εΩϧΞοϓ • ΧϯϑΝϨϯεӡӦ΍ϕϯνϟʔͰͷϓϩμΫτͮ͘ΓͳͲͷܦݧ 2. ϑϦʔϥϯε࣌୅ • ϑϦʔϥϯεͱͯ͠ͷϓϨογϟʔʹΑΔۀ຿ਫ४ͷٸܹͳਐԽ • ৘ใൃ৴΍ք۾ߩݙʹΑΔࢢ৔Ձ஋ͷ޲্

Slide 16

Slide 16 text

Agenda 1. ͜Ε·ͰͷΩϟϦΞʹ͓͚ΔΩʔϫʔυʮয૩ײʯ 2. যΓ΍ةػײʹΑΔ։ൃऀͷΩϟϦΞͱͯ͠ͷඈͼڃ 3. ΤϯδχΞΩϟϦΞͱ͍͏αϯΫίετʹΑͬͯڱ·Δະདྷ 4. ਖ਼͍͠য૩ײͱͷ޲͖߹͍͔ͨͱ͸ 5. ࢲͷ͜Ε͔Βͷ࿩

Slide 17

Slide 17 text

ΤϯδχΞΩϟϦΞͱ͍͏ αϯΫίετʹΑͬͯڱ·Δະདྷ • ࣗ෼͸ΤϯδχΞ͔Βൈ͚ग़ͯ͠ EM తΩϟϦΞΛங͍͍͖͍ͯͨ • ٕज़૊৫Λ΋ͪϓϩμΫτ؍఺Ͱվળ΍੒௕ʹίϛοτ͍ͨ͠ • EM ͳΒࣗ෼͕ઓ͏͜ͱΛϕʔεͱͨ͠য૩ײ͸͔͑ͬͯϊΠζʹͳΔ • ৗʹ༨༟ͷͳͦ͞͏ͳϦʔμʔʹԿ͔Λ೚ͤ΍͍͢Ͱ͔͢ʁ • ଟ๩ͳ࣌ʹϝϯόʔͷΤεΧϨʔγϣϯΛड͚ࢭΊΒΕ·͔͢ʁ • ΤϯδχΞͱͯ͠ͷΩϟϦΞҡ࣋ΛٻΊͯຊདྷඞཁͳεΩϧ͕ૄ͔ʹ ͳΓ·ͤΜ͔ʁ

Slide 18

Slide 18 text

ΤϯδχΞΩϟϦΞͱ͍͏ αϯΫίετʹΑͬͯڱ·Δະདྷ • potato4d ͷ৔߹…… • কདྷతͳ૊৫ߏஙͷͨΊͷϑϦʔϥϯε͔Βͷస৬Λܾҙ • ϑϦʔϥϯεͰ͸υϥΠͳؔ܎͕૿͑ΔͷͰΑΓਓʹ͍ۙੈքͰ • ΤϯδχΞͱͯ͠ͷয૩ײ͸ᐫʹͳΔͷͰ͸ • ΤϯδχΞΛҙࣝ͗͢͠ΔͱΤϯδχΞͱͯ͠ͷ੒௕͔͠๬Ίͳ͍ • ϐʔϓϧϚωδϝϯτ΍ΞϥΠΞϯεΛߟ͑ΔͱΤϯδχΞؾ࣭͸ ϓϥεͱ͸ݴ͑ͳ͍ • → ෳۀମ੍Ͱٕज़Λҡ࣋ͭͭ͠ผΛ৳͹͢ઓུʹ

Slide 19

Slide 19 text

Agenda 1. ͜Ε·ͰͷΩϟϦΞʹ͓͚ΔΩʔϫʔυʮয૩ײʯ 2. যΓ΍ةػײʹΑΔ։ൃऀͷΩϟϦΞͱͯ͠ͷඈͼڃ 3. ΤϯδχΞΩϟϦΞͱ͍͏αϯΫίετʹΑͬͯڱ·Δະདྷ 4. ਖ਼͍͠য૩ײͱͷ޲͖߹͍͔ͨͱ͸ 5. ࢲͷ͜Ε͔Βͷ࿩

Slide 20

Slide 20 text

ਖ਼͍͠য૩ײͱͷ޲͖߹͍͔ͨͱ͸ 1. ΩϟϦΞΞοϓΛ໨ࢦ͢৔߹ • য૩ײΛड͚ೖΕͯ೾ʹͷΔ͜ͱͰݪಈྗͱ͢Δ 2. ΩϟϦΞνΣϯδΛ໨ࢦ͢৔߹ • য૩ײʹ߅͏͜ͱͰϑΣΞͳࢹ఺ΛऔΓ໭͢

Slide 21

Slide 21 text

ΩϟϦΞΞοϓΛ໨ࢦ͢৔߹ য૩ײΛ෢ثʹ͢ΔͱϓϥεʹͳΔ • ໨લͷ՝୊ʹ௥ΘΕΔঢ়گ͸ࢥߟͷϊΠζΛআڈ͢Δʹ͸࠷ద • ͕Ή͠ΌΒʹͳΕΔ౔৕ • ΤϯδχΞͱͯ͠ߋʹಥ͖ਐΈ͍ͨ৔߹͸બ୒ͱूதʹ࠷ద • ͜ͷ࣌ظ͸য૩ײʹ਎ΛҕͶΔ͜ͱ͕ྑ͍

Slide 22

Slide 22 text

ΩϟϦΞνΣϯδΛ໨ࢦ͢৔߹ য૩ײΛࠀ෰͢Δ͜ͱ͕ϓϥεʹͳΔ • ίʔυΛॻཱ͘৔͔ΒϓϩδΣΫτΛݟΔཱ৔ʹͳΔͱϓϨΠϠʔ ͱͯ͠ͷ׆ಈྔ͸Լ͕Δ • ͨͩͦΕ͸ୀԽͰ͸ͳ͘ɺΑΓ޿͍ࢹ໺Λ࣋ͭ͜ͱͰ৽ͨͳεςο ϓ΁ͱ੒௕͍ͯͨ͘͠ΊͷҰาͱͳΔ • ͦΕͰ΋৺ʹҾ͔͔ͬΔ৔߹͸৺ཧతͳ҆શੑΛ୲อͰ͖Δ࢓૊Έ Λ༻ҙ͢Δ • ࢲͷ৔߹͸ݸਓࣄۀͰͷ։ൃ΍ٕज़ސ໰Ͱ୲อͰ͖͍ͯΔ

Slide 23

Slide 23 text

Agenda 1. ͜Ε·ͰͷΩϟϦΞʹ͓͚ΔΩʔϫʔυʮয૩ײʯ 2. যΓ΍ةػײʹΑΔ։ൃऀͷΩϟϦΞͱͯ͠ͷඈͼڃ 3. ΤϯδχΞΩϟϦΞͱ͍͏αϯΫίετʹΑͬͯڱ·Δະདྷ 4. ਖ਼͍͠য૩ײͱͷ޲͖߹͍͔ͨͱ͸ 5. ࢲͷ͜Ε͔Βͷ࿩

Slide 24

Slide 24 text

ࢲͷ͜Ε͔Βͷ࿩ • ͍ۙকདྷʹ༑ਓ͕ىۀ͢ΔՄೳੑ͕ߴ͍ • ͦͷધʹ৐ΕΔΑ͏ʹͳΔ͜ͱ͕͜͜਺೥ͷ໨ඪ • ͦͷͱ͖ʹɺ CTO ΍ Tech Lead ͱͯ͠૊৫࡞Γʹ௅ઓ͍ͨ͠ • ͦͷͨΊɺࠓ͸ײ৘Λ཈͑։ൃ૊৫ͱ DevRel ݉຿ମ੍ʹ • ΤϯδχΞଆͰϦʔυΩϟϦΞΛɺDevRelͷۀ຿Λ • ࠓ͸য૩ײΛࠀ෰͢ΔϑΣʔζ

Slide 25

Slide 25 text

ࠓɺͲͪΒʹ͍·͔͢ʁ