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

先日リリースした「Flexbox Cheat Site」という CSS Flexbox チートシートを表示するWebサイトの制作過程について社内LTで登壇してきました。

Transcript

1. ΰʔϧσϯ΢ΟʔΫ + α Ͱ
 WebαΠτ࡞ͬͯϦϦʔεͨ͠࿩ 5݄ͷΧδϡΞϧTechεγ
2. ΋΍ؙ͠ @mys_x101 • 19೥౓αΠϘ΢ζ ৽ଔೖࣾ → kintone։ൃνʔϜॴଐ • cybozu.comڞ௨؅ཧϖʔδͷReactԽΛ΍͍ͬͯΔ
3. ࡞ͬͨ΋ͷ
4. CSS Flexbox ͷϨΠΞ΢τΛҰཡͰ͖Δ೔ຊޠαΠτ • Flexbox ͷαϯϓϧදࣔ • ίʔυεχϖοτ • MDN΁ͷϦϯΫ ػೳ https://kuroppe1819.github.io/flexbox-cheat-site/
5. ࠓ೔͸ΞΠσΞग़͔͠ΒϦϦʔε·Ͱͷؒʹ ΍͖ͬͯͨ͜ͱͷ࿩Λ͠Α͏ͱࢥ͍·͢ɻ
6. ։ൃʹࢸͬͨܦҢ
7. ։ൃʹࢸͬͨܦҢᶃ • ࣗ෼͕Ͳ๨Εͨ͠ Flexbox ͷϓϩύςΟ໊ΛGoogleݕࡧͰௐ΂Δ͜ ͱ͕೉͍͠ͱ೔ࠒ͔Βײ͍ͯͨ͡ɻ • Flexbox ϓϩύςΟͱϨΠΞ΢τΛҰཡͰදࣔͯ͘͠ΕΔαΠτ͕ ཉ͍͠ʂͱࢥͬͨɻ
8. ։ൃʹࢸͬͨܦҢᶄ Flexbox ϨΠΞ΢τΛҰཡදࣔͯ͘͠ΕΔαΠτʁ͋ΔΑɻ ΊͬͪΌศར΍Μʂ ͜ΕͰॆ෼ʂ http://flexbox.malven.co/ …ͷ͸ͣͩͬͨɻ
9. ։ൃʹࢸͬͨܦҢᶅ طଘͷαΠτΛར༻͍ͯͯ͠ײͨ͜͡ͱ • ϓϩύςΟ໊Λௐ΂ͨޙɺৄࡉΛݟΔͨΊʹ࠶౓ݕࡧ͢Δ͜ͱ͕ଟ͔ͬͨ ͷͰMDN΁ͷϦϯΫ͕·ͱ·͍ͬͯΔͱخ͍͠ɻ • Webʹೖ໳ͨ͠͹͔ΓͷΤϯδχΞ/σβΠφʔ͕͜ͷαΠτ࢖͏͔ͳʁ
 ΞΫηεͰ͖Δ͔ͳʁӳޠಡΉ͔ͳʁ • ೔ຊޠͰݕࡧ͔͚ΔͱղઆهࣄͷαΠτ͹͔Γ্͕Ґʹදࣔ͞ΕΔɻ
 ϓϩύςΟΛௐ΂Δ͚ͩͰ͔ͳΓͷ࣌ؒΛফ໣͍ͯ͠Δͱࢥ͏ (ਪଌ)ɻ
10. ։ൃʹࢸͬͨܦҢᶆ ೔ຊޠදࣔͰ Flexbox ϨΠΞ΢τΛҰཡͰݟΒΕΔαΠτɺ
 ҙ֎ͱधཁ͕͋ΔͷͰ͸ʁ Α͠ɺ࡞Ζ͏ɻ
11. Ͳ͏͍͏ྲྀΕͰ։ൃ͔ͨ͠
12. UX(Ϣʔβʔମݧ)Λߟ͑Δ ഑ஔͷΠϝʔδ૾Λ͍࣋ͬͯΔϢʔβʔ ͕ Πϝʔδ૾ʹ͍ۙ Flexbox ϨΠΞ΢τΛݟ͚ͭͯɺ ϓϩύςΟͷৄࡉ৘ใʹര଎ͰΞΫηεͰ͖Δ αΠτΛ࡞Δʂ
13. ࣮૷͢ΔػೳͷΞΠσΞΛग़͢ • Flexbox ϨΠΞ΢τͷҰཡදࣔ • ద༻͞Ε͍ͯΔελΠϧͷ֬ೝ • ελΠϧΛΫϦοϓϘʔυʹίϐʔ • ελΠϧͷฤू • ֤ϨΠΞ΢τͷ෯ௐ੔ • Flexbox ϓϩύςΟͷղઆ • Grid ϨΠΞ΢τͷରԠ
14. ⭕ Flexbox ϨΠΞ΢τͷҰཡදࣔ ⭕ ద༻͞Ε͍ͯΔελΠϧͷ֬ೝ ⭕ ελΠϧΛΫϦοϓϘʔυʹίϐʔ ࣮૷͢ΔػೳΛݫબ͢Δᶃ $ ελΠϧͷฤू $ ֤ϨΠΞ΢τͷ෯ௐ੔ $ Flexbox ϓϩύςΟͷઆ໌ $ Grid ϨΠΞ΢τͷରԠ
15. ࣮૷͢ΔػೳΛݫબ͢Δᶄ $ ελΠϧͷฤू $ ֤ϨΠΞ΢τͷ෯ௐ੔ $ Flexbox ϓϩύςΟͷઆ໌ $ Grid ϨΠΞ΢τͷରԠ • ಈతͳมߋ͸CodePenͷΑ͏ͳαΠτʹ೚ͤΔɻ • ΫϦοϓϘʔυػೳ͕͋Ε͹ίϐϖ΋ָɻ • טΈࡅ͍ͨઆ໌͸ଞͷαΠτʹ೚ͤΔɻ • ৄࡉ͸MDNͷϦϯΫ͕͋Δ͔Β͍Βͳ͍ɻ • Grid αΠτδΣωϨʔλΛ࢖͍ͦ͏ɻ • χʔζ͕෼͔Βͳ͍ͷͰϦϦʔε͔ͯ͠Βߟ͑Δɻ
16. σβΠϯϓϩτΛ࡞Δ ʮUXPinʯͰϓϩτλΠϓΛ࡞੒͢Δ Mobile Preview ※ࠓճ͸ϞόΠϧ൛͚ͩ࡞੒
17. ٕज़બఆ ձࣾͰ࢖͍ͬͯΔ or ࠓޙձࣾͰ࢖͍ͦ͏ͳٕज़ΛબͿɻ
18. ࣮૷ • ୯७ͳΞϓϦέʔγϣϯͳͷͰ Custom Hooks Ͱঢ়ଶ؅ཧ͢Δ • Container ʹϩδοΫΛॻ͍ͯ Context Ͱ஋Λ౉͢ 5PQ$POUBJOFS #FIBWJPS'MFYCPY$POUBJOFS BehaviorBoxContainer Context
19. TypeScript + styled-components + Tailwind CSS ϝϦοτ • ίϯϙʔωϯτͱCSSͷΫϥε໊Λ෼཭͠ͳ͕Β
 Tailwind CSS ͷϢʔςΟϦςΟΫϥεΛ࢖͑Δɻ • ߦ਺͕ݮͬͯݟ௨͕͠ྑ͘ͳΔɻ σϝϦοτ • ts-loader ͰτϥϯεύΠϧʹࣦഊ͢Δɻ
 babel-loader Ͱ TS ͷτϥϯεύΠϧΛͯ͠ɺ
 ܕνΣοΫ͸ tsc Ͱ΍Δ͜ͱʹͨ͠ɻ • Default ͷϢʔςΟϦςΟΫϥεΛ͍͍ͪͪݕࡧ͢Δͷ͕
 ΊΜͲ͍͘͞ɻTailwind CSS ͷ஋ΛΦϒδΣΫτͱͯ͠
 ఆٛͯ͠ࢀর͢Δӡ༻Ͱྑ͍ͱࢥͬͨɻ
20. σβΠϯௐ੔ ʙϨΠΞ΢τදࣔʙ ̍ը໘ͷதͰͰ͖Δ͚ͩଟ͘ͷϨΠΞ΢τΛදࣔ͢Δͧ
22. σβΠϯௐ੔ ʙϨΠΞ΢τදࣔʙ • 1ຕͷը໘ʹͰ͖Δ͚ͩදࣔ͠Α͏ͱͨ͠Βɺ໨తͷϨΠΞ΢τΛ ୳͢ͷ͕ࠔ೉ʹͳͬͨ • ͪΒ͔ͬͨ෦԰ͷத͔ΒಛఆͷϞϊΛ୳͢ײ֮ʹࣅ͍ͯΔɻ
23. σβΠϯௐ੔ ʙϨΠΞ΢τදࣔʙ • ݕࡧੑΛߴΊΔͨΊʹ
 ֤ϓϩύςΟʹ؆୯ͳઆ໌Λఴ͑Δɻ • ԣฒͼͷ਺ΛMAX4ྻʹͯ͠ɺ
 Ұ౓ʹೝࣝͰ͖Δ਺ΛݮΒ͢ɻ MAX 4ྻ
25. σβΠϯௐ੔ ʙCSS/HTMLίʔυͷදࣔʙ • ׳Ε͍ͯΔਓ͸CSSͷϓϩύςΟΛ ݟ͚ͨͩͰHTMLͷߏ଄ΛΠϝʔδ Ͱ͖ΔͷͰɺඞཁͳਓ͚ͩλϒΛ੾ Γସ͑ͯදࣔ͢ΔσβΠϯʹ͢Δɻ
26. σβΠϯௐ੔ ʙϞόΠϧදࣔʙ Կ΋ͳ͍ͱ͜Ζ͔ΒView͕ग़ͯ͘Δͱ ڻ͍ͯ͠·͏ͷͰɺView͕ӅΕ͍ͯΔ ͜ͱΛ͞Γ͛ͳ͘Ξϐʔϧ͢Δɻ
27. σβΠϯௐ੔ ʙϞόΠϧදࣔʙ εΫϩʔϧݻఆʹͯ͠ɺ
 ϨΠΞ΢τͱҰॹʹઆ໌ͱ
 ίʔυΛݟΒΕΔΑ͏ʹ͢Δɻ
28. σϓϩΠ࡞ۀ 1. gh-pages ίϚϯυΛ࢖ͬͯ dist/ ͷϑΝΠϧΛ gh-pages ϒϥϯνʹ ϓογϡ͢Δɻ 2. GitHubͷઃఆ Ͱ GitHub Pages site Λߏங͢ΔϒϥϯνΛࢦఆ͢Δɻ HIQBHFT
    E
    EJTU
29. ϦϦʔε ͸ͯͳϒοΫϚʔΫͷ ϗοτΤϯτϦʹࡌͬͨʂʂʂ https://b.hatena.ne.jp/hotentry/it/20200525
30. ׬૸ͨ͠ײ૝ • SEOʹڵຯ͕ग़͖ͯͨɻ • σβΠϯௐ੔Ͱ೰Μͩ࣌ʹ૬ஊͰ͖ΔϑΥϩϫʔ͞Μ͕ෳ਺ਓ͍͓ͨ ͔͛ͰࠓͷσβΠϯΛ࣮ݱ͢Δ͜ͱ͕Ͱ͖ͨɻఆظతʹϑΟʔυόο ΫΛ΋Β͏͜ͱͷॏཁੑΛվΊ࣮ͯײͨ͠ɻ • Ұ೔ͰҰੜ෼ͷ”ศར”ͱ”͋Γ͕ͱ͏”ͱ͍͏ݴ༿Λ௖͚ͨͷͰຊ౰ʹ خ͍͠ؾ࣋ͪʹͳͬͨɻ·ͩ·ͩվྑͰ͖Δ෦෼͸͋ΔͷͰ࣌ؒΛݟ ͚ͭͯػೳ࣮૷ or վળ͍ͯ͜͠͏ͱࢥ͍·͢ɻ
31. ͜Ε͔Βͷ༧ఆ • PWAରԠ͢Δ • AMPରԠ͢Δ • ςετΛॻ͘ • storybook Λ࢖͏ • धཁ͕͋Ε͹ Grid ͷϖʔδ΋࡞Δ
32. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ϦϙδτϦʹελʔ෇͚ͯ͘ΕΔͱ։ൃऀ͕ٽ͍ͯتͼ·͢ https://github.com/kuroppe1819/flexbox-cheat-site