Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

0e9f351dd1bafda75da78e326e93141b?s=128

Atsusuke Murata

May 28, 2020
Tweet

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. σβΠϯௐ੔ ʙϨΠΞ΢τදࣔʙ ̍ը໘ͷதͰͰ͖Δ͚ͩଟ͘ͷϨΠΞ΢τΛදࣔ͢Δͧ

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

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

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

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

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

  28. σϓϩΠ࡞ۀ 1. gh-pages ίϚϯυΛ࢖ͬͯ dist/ ͷϑΝΠϧΛ gh-pages ϒϥϯνʹ ϓογϡ͢Δɻ 2.

    GitHubͷઃఆ Ͱ GitHub Pages site Λߏங͢ΔϒϥϯνΛࢦఆ͢Δɻ HIQBHFTEEJTU
  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