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

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 Λߏங͢ΔϒϥϯνΛࢦఆ͢Δɻ 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