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

Transcript

1. 1.

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

2. 2.

   ΋΍ؙ͠ @mys_x101 • 19೥౓αΠϘ΢ζ ৽ଔೖࣾ → kintone։ൃνʔϜॴଐ • cybozu.comڞ௨؅ཧϖʔδͷReactԽΛ΍͍ͬͯΔ

3. 3.

   ࡞ͬͨ΋ͷ

4. 4.

   CSS Flexbox ͷϨΠΞ΢τΛҰཡͰ͖Δ೔ຊޠαΠτ • Flexbox ͷαϯϓϧදࣔ • ίʔυεχϖοτ • MDN΁ͷϦϯΫ

   ػೳ https://kuroppe1819.github.io/flexbox-cheat-site/
5. 5.

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

6. 6.

   ։ൃʹࢸͬͨܦҢ

7. 7.

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

8. 8.

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

9. 9.

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


   ϓϩύςΟΛௐ΂Δ͚ͩͰ͔ͳΓͷ࣌ؒΛফ໣͍ͯ͠Δͱࢥ͏ (ਪଌ)ɻ
10. 10.

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

11. 11.

    Ͳ͏͍͏ྲྀΕͰ։ൃ͔ͨ͠

12. 12.

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

13. 13.

    ࣮૷͢ΔػೳͷΞΠσΞΛग़͢ • Flexbox ϨΠΞ΢τͷҰཡදࣔ • ద༻͞Ε͍ͯΔελΠϧͷ֬ೝ • ελΠϧΛΫϦοϓϘʔυʹίϐʔ • ελΠϧͷฤू

    • ֤ϨΠΞ΢τͷ෯ௐ੔ • Flexbox ϓϩύςΟͷղઆ • Grid ϨΠΞ΢τͷରԠ
14. 14.

    ⭕ Flexbox ϨΠΞ΢τͷҰཡදࣔ ⭕ ద༻͞Ε͍ͯΔελΠϧͷ֬ೝ ⭕ ελΠϧΛΫϦοϓϘʔυʹίϐʔ ࣮૷͢ΔػೳΛݫબ͢Δᶃ $ ελΠϧͷฤू

    $ ֤ϨΠΞ΢τͷ෯ௐ੔ $ Flexbox ϓϩύςΟͷઆ໌ $ Grid ϨΠΞ΢τͷରԠ
15. 15.

    ࣮૷͢ΔػೳΛݫબ͢Δᶄ $ ελΠϧͷฤू $ ֤ϨΠΞ΢τͷ෯ௐ੔ $ Flexbox ϓϩύςΟͷઆ໌ $ Grid

    ϨΠΞ΢τͷରԠ • ಈతͳมߋ͸CodePenͷΑ͏ͳαΠτʹ೚ͤΔɻ • ΫϦοϓϘʔυػೳ͕͋Ε͹ίϐϖ΋ָɻ • טΈࡅ͍ͨઆ໌͸ଞͷαΠτʹ೚ͤΔɻ • ৄࡉ͸MDNͷϦϯΫ͕͋Δ͔Β͍Βͳ͍ɻ • Grid αΠτδΣωϨʔλΛ࢖͍ͦ͏ɻ • χʔζ͕෼͔Βͳ͍ͷͰϦϦʔε͔ͯ͠Βߟ͑Δɻ
16. 16.

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

17. 17.

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

18. 18.

    ࣮૷ • ୯७ͳΞϓϦέʔγϣϯͳͷͰ Custom Hooks Ͱঢ়ଶ؅ཧ͢Δ • Container ʹϩδοΫΛॻ͍ͯ Context

    Ͱ஋Λ౉͢ 5PQ$POUBJOFS #FIBWJPS'MFYCPY$POUBJOFS BehaviorBoxContainer Context
19. 19.

    TypeScript + styled-components + Tailwind CSS ϝϦοτ • ίϯϙʔωϯτͱCSSͷΫϥε໊Λ෼཭͠ͳ͕Β
 Tailwind

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

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

21. 21.

    None
22. 22.

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

23. 23.

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

24. 24.

    None
25. 25.

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

26. 26.

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

27. 27.

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

28. 28.

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

    GitHubͷઃఆ Ͱ GitHub Pages site Λߏங͢ΔϒϥϯνΛࢦఆ͢Δɻ HIQBHFT
    E
    EJTU
29. 29.

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

30. 30.

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

    ͚ͭͯػೳ࣮૷ or վળ͍ͯ͜͠͏ͱࢥ͍·͢ɻ
31. 31.

    ͜Ε͔Βͷ༧ఆ • PWAରԠ͢Δ • AMPରԠ͢Δ • ςετΛॻ͘ • storybook Λ࢖͏

    • धཁ͕͋Ε͹ Grid ͷϖʔδ΋࡞Δ
32. 32.

    ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ϦϙδτϦʹελʔ෇͚ͯ͘ΕΔͱ։ൃऀ͕ٽ͍ͯتͼ·͢ https://github.com/kuroppe1819/flexbox-cheat-site