ゴールデンウィーク+αでWebサイト作ってリリースした話

Slide 1

Slide 1 text

ΰʔϧσϯ΢ΟʔΫ + α Ͱ  WebαΠτ࡞ͬͯϦϦʔεͨ͠࿩ 5݄ͷΧδϡΞϧTechεγ!

Slide 2

Slide 2 text

࡞ͬͨ΋ͷ

Slide 3

Slide 3 text

CSS Flexbox ͷϨΠΞ΢τΛҰཡͰ͖Δ೔ຊޠαΠτ • Flexbox ͷαϯϓϧදࣔ • ίʔυεχϖοτ • MDN΁ͷϦϯΫ ػೳ https://kuroppe1819.github.io/ﬂexbox-cheat-site/

Slide 4

Slide 4 text

ࠓ೔͸ΞΠσΞग़͔͠ΒϦϦʔε·Ͱͷؒʹ ΍͖ͬͯͨ͜ͱͷ࿩Λ͠Α͏ͱࢥ͍·͢ɻ

Slide 5

Slide 5 text

։ൃʹࢸͬͨܦҢ

Slide 6

Slide 6 text

։ൃʹࢸͬͨܦҢᶃ • ࣗ෼͕Ͳ๨Εͨ͠ Flexbox ͷϓϩύςΟ໊ΛGoogleݕࡧͰௐ΂Δ͜ ͱ͕೉͍͠ͱ೔ࠒ͔Βײ͍ͯͨ͡ɻ • Flexbox ϓϩύςΟͱϨΠΞ΢τΛҰཡͰදࣔͯ͘͠ΕΔαΠτ͕ ཉ͍͠ʂͱࢥͬͨɻ

Slide 7

Slide 7 text

։ൃʹࢸͬͨܦҢᶄ Flexbox ϨΠΞ΢τΛҰཡදࣔͯ͘͠ΕΔαΠτʁ͋ΔΑɻ ΊͬͪΌศར΍Μʂ ͜ΕͰॆ෼ʂ http://ﬂexbox.malven.co/ …ͷ͸ͣͩͬͨɻ

Slide 8

Slide 8 text

։ൃʹࢸͬͨܦҢᶅ طଘͷαΠτΛར༻͍ͯͯ͠ײͨ͜͡ͱ • ϓϩύςΟ໊Λௐ΂ͨޙɺৄࡉΛݟΔͨΊʹ࠶౓ݕࡧ͢Δ͜ͱ͕ଟ͔ͬͨ ͷͰMDN΁ͷϦϯΫ͕·ͱ·͍ͬͯΔͱخ͍͠ɻ • Webʹೖ໳ͨ͠͹͔ΓͷΤϯδχΞ/σβΠφʔ͕͜ͷαΠτ࢖͏͔ͳʁ  ΞΫηεͰ͖Δ͔ͳʁӳޠಡΉ͔ͳʁ • ೔ຊޠͰݕࡧ͔͚ΔͱղઆهࣄͷαΠτ͹͔Γ্͕Ґʹදࣔ͞ΕΔɻ  ϓϩύςΟΛௐ΂Δ͚ͩͰ͔ͳΓͷ࣌ؒΛফ໣͍ͯ͠Δͱࢥ͏ (ਪଌ)ɻ

Slide 9

Slide 9 text

։ൃʹࢸͬͨܦҢᶆ ೔ຊޠදࣔͰ Flexbox ϨΠΞ΢τΛҰཡͰݟΒΕΔαΠτɺ  ҙ֎ͱधཁ͕͋ΔͷͰ͸ʁ" Α͠ɺ࡞Ζ͏ɻ

Slide 10

Slide 10 text

Ͳ͏͍͏ྲྀΕͰ։ൃ͔ͨ͠

Slide 11

Slide 11 text

UX(Ϣʔβʔମݧ)Λߟ͑Δ ഑ஔͷΠϝʔδ૾Λ͍࣋ͬͯΔϢʔβʔ ͕ Πϝʔδ૾ʹ͍ۙ Flexbox ϨΠΞ΢τΛݟ͚ͭͯɺ ϓϩύςΟͷৄࡉ৘ใʹര଎ͰΞΫηεͰ͖Δ αΠτΛ࡞Δʂ

Slide 12

Slide 12 text

࣮૷͢ΔػೳͷΞΠσΞΛग़͢ • Flexbox ϨΠΞ΢τͷҰཡදࣔ • ద༻͞Ε͍ͯΔελΠϧͷ֬ೝ • ελΠϧΛΫϦοϓϘʔυʹίϐʔ • ελΠϧͷฤू • ֤ϨΠΞ΢τͷ෯ௐ੔ • Flexbox ϓϩύςΟͷղઆ • Grid ϨΠΞ΢τͷରԠ

Slide 13

Slide 13 text

⭕ Flexbox ϨΠΞ΢τͷҰཡදࣔ ⭕ ద༻͞Ε͍ͯΔελΠϧͷ֬ೝ ⭕ ελΠϧΛΫϦοϓϘʔυʹίϐʔ ࣮૷͢ΔػೳΛݫબ͢Δᶃ $ ελΠϧͷฤू $ ֤ϨΠΞ΢τͷ෯ௐ੔ $ Flexbox ϓϩύςΟͷઆ໌ $ Grid ϨΠΞ΢τͷରԠ

Slide 14

Slide 14 text

࣮૷͢ΔػೳΛݫબ͢Δᶄ $ ελΠϧͷฤू $ ֤ϨΠΞ΢τͷ෯ௐ੔ $ Flexbox ϓϩύςΟͷઆ໌ $ Grid ϨΠΞ΢τͷରԠ • ಈతͳมߋ͸CodePenͷΑ͏ͳαΠτʹ೚ͤΔɻ • ΫϦοϓϘʔυػೳ͕͋Ε͹ίϐϖ΋ָɻ • טΈࡅ͍ͨઆ໌͸ଞͷαΠτʹ೚ͤΔɻ • ৄࡉ͸MDNͷϦϯΫ͕͋Δ͔Β͍Βͳ͍ɻ • Grid αΠτδΣωϨʔλΛ࢖͍ͦ͏ɻ • χʔζ͕෼͔Βͳ͍ͷͰϦϦʔε͔ͯ͠Βߟ͑Δɻ

Slide 15

Slide 15 text

σβΠϯϓϩτΛ࡞Δ ʮUXPinʯͰϓϩτλΠϓΛ࡞੒͢Δ Mobile Preview ※ࠓճ͸ϞόΠϧ൛͚ͩ࡞੒

Slide 16

Slide 16 text

ٕज़બఆ ձࣾͰ࢖͍ͬͯΔ or ࠓޙձࣾͰ࢖͍ͦ͏ͳٕज़ΛબͿɻ

Slide 17

Slide 17 text

࣮૷ • ୯७ͳΞϓϦέʔγϣϯͳͷͰ Custom Hooks Ͱঢ়ଶ؅ཧ͢Δ • Container ʹϩδοΫΛॻ͍ͯ Context Ͱ஋Λ౉͢ 5PQ$POUBJOFS #FIBWJPS'MFYCPY$POUBJOFS BehaviorBoxContainer Context

Slide 18

Slide 18 text

TypeScript + styled-components + Tailwind CSS ϝϦοτ • ίϯϙʔωϯτͱCSSͷΫϥε໊Λ෼཭͠ͳ͕Β  Tailwind CSS ͷϢʔςΟϦςΟΫϥεΛ࢖͑Δɻ • ߦ਺͕ݮͬͯݟ௨͕͠ྑ͘ͳΔɻ σϝϦοτ • ts-loader ͰτϥϯεύΠϧʹࣦഊ͢Δɻ  babel-loader Ͱ TS ͷτϥϯεύΠϧΛͯ͠ɺ  ܕνΣοΫ͸ tsc Ͱ΍Δ͜ͱʹͨ͠ɻ • Default ͷϢʔςΟϦςΟΫϥεΛ͍͍ͪͪݕࡧ͢Δͷ͕  ΊΜͲ͍͘͞ɻTailwind CSS ͷ஋ΛΦϒδΣΫτͱͯ͠  ఆٛͯ͠ࢀর͢Δӡ༻Ͱྑ͍ͱࢥͬͨɻ

Slide 19

Slide 19 text

σβΠϯௐ੔ ʙϨΠΞ΢τදࣔʙ ̍ը໘ͷதͰͰ͖Δ͚ͩଟ͘ͷϨΠΞ΢τΛදࣔ͢Δͧ %

Slide 20

Slide 20 text

Slide 21

Slide 21 text

σβΠϯௐ੔ ʙϨΠΞ΢τදࣔʙ • 1ຕͷը໘ʹͰ͖Δ͚ͩදࣔ͠Α͏ͱͨ͠Βɺ໨తͷϨΠΞ΢τΛ ୳͢ͷ͕ࠔ೉ʹͳͬͨ' • ͪΒ͔ͬͨ෦԰ͷத͔ΒಛఆͷϞϊΛ୳͢ײ֮ʹࣅ͍ͯΔɻ

Slide 22

Slide 22 text

σβΠϯௐ੔ ʙϨΠΞ΢τදࣔʙ • ݕࡧੑΛߴΊΔͨΊʹ  ֤ϓϩύςΟʹ؆୯ͳઆ໌Λఴ͑Δɻ • ԣฒͼͷ਺ΛMAX4ྻʹͯ͠ɺ  Ұ౓ʹೝࣝͰ͖Δ਺ΛݮΒ͢ɻ MAX 4ྻ

Slide 23

Slide 23 text

(

Slide 24

Slide 24 text

σβΠϯௐ੔ ʙCSS/HTMLίʔυͷදࣔʙ • ׳Ε͍ͯΔਓ͸CSSͷϓϩύςΟΛ ݟ͚ͨͩͰHTMLͷߏ଄ΛΠϝʔδ Ͱ͖ΔͷͰɺඞཁͳਓ͚ͩλϒΛ੾ Γସ͑ͯදࣔ͢ΔσβΠϯʹ͢Δɻ

Slide 25

Slide 25 text

σβΠϯௐ੔ ʙϞόΠϧදࣔʙ Կ΋ͳ͍ͱ͜Ζ͔ΒView͕ग़ͯ͘Δͱ ڻ͍ͯ͠·͏ͷͰɺView͕ӅΕ͍ͯΔ ͜ͱΛ͞Γ͛ͳ͘Ξϐʔϧ͢Δɻ

Slide 26

Slide 26 text

σβΠϯௐ੔ ʙϞόΠϧදࣔʙ εΫϩʔϧݻఆʹͯ͠ɺ  ϨΠΞ΢τͱҰॹʹઆ໌ͱ  ίʔυΛݟΒΕΔΑ͏ʹ͢Δɻ

Slide 27

Slide 27 text

σϓϩΠ࡞ۀ 1. gh-pages ίϚϯυΛ࢖ͬͯ dist/ ͷϑΝΠϧΛ gh-pages ϒϥϯνʹ ϓογϡ͢Δɻ 2. GitHubͷઃఆ Ͱ GitHub Pages site Λߏங͢ΔϒϥϯνΛࢦఆ͢Δɻ HIQBHFTEEJTU

Slide 28

Slide 28 text

ϦϦʔε ))) ͸ͯͳϒοΫϚʔΫͷ ϗοτΤϯτϦʹࡌͬͨʂʂʂ https://b.hatena.ne.jp/hotentry/it/20200525

Slide 29

Slide 29 text

׬૸ͨ͠ײ૝ • SEOʹڵຯ͕ग़͖ͯͨɻ • σβΠϯௐ੔Ͱ೰Μͩ࣌ʹ૬ஊͰ͖ΔϑΥϩϫʔ͞Μ͕ෳ਺ਓ͍͓ͨ ͔͛ͰࠓͷσβΠϯΛ࣮ݱ͢Δ͜ͱ͕Ͱ͖ͨɻఆظతʹϑΟʔυόο ΫΛ΋Β͏͜ͱͷॏཁੑΛվΊ࣮ͯײͨ͠ɻ • Ұ೔ͰҰੜ෼ͷ”ศར”ͱ”͋Γ͕ͱ͏”ͱ͍͏ݴ༿Λ௖͚ͨͷͰຊ౰ʹ خ͍͠ؾ࣋ͪʹͳͬͨɻ·ͩ·ͩվྑͰ͖Δ෦෼͸͋ΔͷͰ࣌ؒΛݟ ͚ͭͯػೳ࣮૷ or վળ͍ͯ͜͠͏ͱࢥ͍·͢ɻ

Slide 30

Slide 30 text

͜Ε͔Βͷ༧ఆ • PWAରԠ͢Δ • AMPରԠ͢Δ • ςετΛॻ͘ • storybook Λ࢖͏ • धཁ͕͋Ε͹ Grid ͷϖʔδ΋࡞Δ

Slide 31

Slide 31 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ϦϙδτϦʹελʔ෇͚ͯ͘ΕΔͱ։ൃऀ͕ٽ͍ͯتͼ·͢' https://github.com/kuroppe1819/ﬂexbox-cheat-site