$30 off During Our Annual Pro Sale. View Details »

題字ペタペタ:Contentful + Gatsby で作るコレクションサイト / FFTT #409

題字ペタペタ:Contentful + Gatsby で作るコレクションサイト / FFTT #409

題字ペタペタ https://daipeta.com ができるまでの話を、社内勉強会で発表しました。

題字ペタペタができるまで - しろもじメモランダム

Masaya Nakamura

September 11, 2020
Tweet

More Decks by Masaya Nakamura

Other Decks in Programming

Transcript

  1. ୊ࣈϖλϖλ
    $POUFOUGVM(BUTCZͰ࡞Δ
    ίϨΫγϣϯαΠτ
    ೥݄೔
    !NBTIBCPX

    View Slide

  2. ࠓճͷςʔϚ
    w ৽ฉͷ୊ࣈΛ͋ͭΊͨαΠτΛ࡞ͬͨΑ
    w ୊ࣈϖλϖλIUUQTEBJQFUBDPN

    View Slide

  3. ܦҢ
    w Ͷ͜΃Μ ࠺

    ͕ɺ೥͝ΖʹझຯͰ୊ࣈΛ͋ͭΊͨ
    w Ҏલ͔ΒʮαΠτʹ·ͱΊ͍ͨʯͱ͍͏࿩͸ฉ͍͍ͯͨ
    w ݄͝Ζɺલճͷൃද΋ऴΘͬͯҰଉ͍ͭͨͷͰɺ;ͨΓͰ΍Δ͔ʔͱͳͬͨ
    w ίϩφͰࡏ୐ͷ͕࣌ؒ૿͑ͨ͜ͱ΋͋Γɺूதͯ͠࡞Δ͜ͱʹ

    View Slide

  4. ୲౰

    ઃܭ σʔλऩू
    ίϯςϯπࣥච
    ·͠Ό΅͏ɹͶ͜΃Μ
    ϩΰ࡞੒
    ࣮૷
    Πϥετ࡞੒
    σβΠϯ

    View Slide

  5. ํ਑
    w ·ͣͰ͖Δͱ͜Ζ͔Β࡞ͬͯͬ͞͞ͱಈ͔͢
    w ׬ᘳΛٻΊͳ͍
    w ָ͘͠΍Δ
    w ࣗ෼͕ͨͪཉ͍͠΋ͷΛ࡞Δ

    View Slide

  6. ୊ࣈը૾Λ༻ҙ͢Δ

    View Slide

  7. εΩϟϯ
    w ੾Γऔͬͨ୊ࣈΛͳΒ΂ͯɺ
    ී௨ͷεΩϟφͰεΩϟϯ
    w ਺͑ͯΈͨΒຕҎ্ͷ୊ࣈ͕͋ͬͨ

    View Slide

  8. ը૾Λ੾Γൈ͘
    w ຕຕ੾Γൈ͍ͯอଘ͢Δͷ͸໘౗
    w ੾Γൈ͖ઐ༻ͷ؆୯ͳΞϓϦΛ࡞ͬͨ
    w IUUQTHJUIVCDPNNBTIBCPXLJSJOVLJ
    w IUUQTNBTIBCPXHJUIVCJPLJSJOVLJ

    View Slide

  9. ੾Γൈ͖ΞϓϦ
    w ຊ౰͸
    w (PPHMFυϥΠϒ͔ΒεΩϟϯը૾Λ։͘
    w ܏͖΍ྖҬΛࣗಈݕग़
    w ϒϥ΢β্Ͱ੾Γൈ͍ͨը૾Λੜ੒
    w ੜ੒ͨ͠ը૾ΛΞοϓϩʔυ
    w ʜ͕Ͱ͖Δͱ͔͍͍͕ͬ͜ɺࠓճ͸΍Βͳ͔ͬͨ
    w ͦ͜·ͰͷखؒΛ͔͚Δ΄ͲͷྔͰ͸ͳ͍

    View Slide

  10. ୊ࣈը૾͕ἧͬͨ
    w ΞϓϦͰ࡞ͬͨ੾Γൈ͖σʔλΛ΋ͱʹɺ*NBHF.BHJDLͰεΫϦϓτॲཧ
    w ͜͜·Ͱिؒఔ౓
    w ͔ͳΓॱௐ
    w ϑϧϦϞʔτ͕࢝·ͬͨ͜Ζ

    View Slide

  11. ୊ࣈσʔλΛ$POUFOUGVMʹೖΕΔ

    View Slide

  12. σʔλஔ͖৔
    w σʔλɿ୊ࣈͷઆ໌ͱ͔ɺ৽ฉ໊ͱ͔ɺ஍໲ͷछྨͱ͔ʜ
    w Ͷ͜΃Μ͕(PPHMFεϓϨουγʔτʹ͋Δఔ౓·ͱΊ͍ͯͨ
    w ͕ɺεϓϨουγʔτʹจষΛॻ͍ͨΓɺը૾ΛషͬͨΓ͢Δͷ͸ͭΒ͍

    View Slide

  13. $POUFOUGVM
    w IFBEMFTT$.4Ͱ͋Δ$POUFOUGVMʹσʔλΛೖΕΔ͜ͱʹͨ͠
    w IFBEMFTT$.4Ӿཡऀ޲͚ͷϏϡʔ͕ͳ͍$.4
    w ฤूऀ޲͚ͷϏϡʔ͸͋Δ
    w ݸਓαΠτఔ౓ͩͬͨΒ
    $POUFOUGVMͷແྉ࿮ʹऩ·Δ

    View Slide

  14. σʔλΛೖΕΔ
    w $POUFOU5ZQFΛఆٛͯ͠ɺ
    &OUSZ͸εϓϨουγʔτͷσʔλ͔ΒεΫϦϓτͰྲྀ͠ࠐΈखͰ௥Ճ

    View Slide

  15. (BUTCZͰαΠτΛ࡞Δ

    View Slide

  16. (BUTCZ
    w $POUFOUGVM͸IFBEMFTT$.4ͳͷͰɺӾཡऀ޲͚ͷϏϡʔ͸ࣗ෼Ͱ༻ҙ͢Δ
    w ԿͰ΋͍͍͕ɺࠓճ͸(BUTCZΛ࢖ͬͨ
    w 3FBDU(SBQI2-ϕʔεͷ੩తαΠτδΣωϨʔλ
    w σϑΥϧτͷঢ়ଶͰ͍͍ײ͡ʹ଎͍αΠτ͕࡞ΕΔ
    w ϓϥάΠϯ͕๛෋
    w ͔ͨ͠ΧϩϦʔϝΠτͷϓϩϞʔγϣϯαΠτͰ΋࢖ΘΕ͍ͯͨ
    w $BMPSJF.BUFUP1SPHSBNNFScେ௩੡ༀ

    View Slide

  17. શମͷߏ੒
    w Ͷ͜΃Μʹઆ໌ͨ͠ͱ͖ͷਤ
    w σʔλஔ͖৔͸$POUFOUGVM
    w ϖʔδੜ੒͸(BUTCZ
    w ϏϧυɾσϓϩΠ͸/FUMJGZ
    w Α͋͘Δߏ੒
    w ͜ͷ൒೥Ͱ೔ຊޠهࣄ͕͔ͳΓ૿͑ͨؾ͕͢Δ

    View Slide

  18. $POUFOUGVMͷσʔλΛදࣔ
    w (SBQI2-ͷΫΤϦͰऔಘͰ͖Δ
    w ։ൃॳظͷ୊ࣈৄࡉϖʔδͷྫɿ

    View Slide

  19. ܕ͕΄͍͠
    w (BUTCZຊମͷ5ZQF4DSJQUҠߦ͕ਐΈͭͭ͋Δ΋ͷͷɺ·ͩಓ൒͹
    w HBUTCZQMVHJOUZQFTDSJQUͱHBUTCZQMVHJOUZQFHFOͰܕΛ͚ͭΔ
    w HBUTCZOPEFKTͳͲͷ5ZQF4DSJQUԽʹ͸ɺUTOPEFΛ࢖͏
    w (BUTCZKTΛ׬શ5ZQF4DSJQUԽ͢Δ2JJUB
    w 5ZQF4DSJQU(BUTCZDPOpHBOEOPEF"1*
    w (SBQI2-෦෼ͷܕ͸ɺ(BUTCZ͕σʔλ͔Βਪଌͯ͠෇͚͍ͯΔ
    w $POUFOUGVM্ͷ$POUFOU5ZQFͷఆٛ͸ແࢹ͞ΕΔ
    w (BUTCZͷ4DIFNB$VTUPNJ[BUJPO"1*Ͱ্ॻ͖Ͱ͖Δ͕ɺखؒ

    View Slide

  20. 3JDI5FYU
    w 3JDI5FYU$POUFOUGVMͷϑΟʔϧυͷҰछ
    w ߏ଄੍͕ݶ͞Ε͍ͯͯ.BSLEPXOΑΓѻ͍΍͍͢
    w ผͷ&OUSZ΁ͷϦϯΫΛຒΊࠐΊΔ

    View Slide

  21. 3JDI5FYUͷ᠘
    w ͕ɺ&OUSZ΁ͷϦϯΫ͕૿͑ͯ͘Δͱ(BUTCZͷϏϧυ͕མͪΔ
    w HBUTCZTPVSDFDPOUFOUGVMͷόάHBUTCZKTHBUTCZ
    w ࢀরઌͷ&OUSZΛ࠶ؼతʹ·Δ·Δऔಘͯ͠ຒΊࠐΉͱ͍͏߽շͳڍಈ
    w ॥؀ࢀর͕͋ΔͱམͪΔɻͳͯ͘΋མͪΔ
    w ݁ہී௨ͷϦϯΫʹஔ͖׵͑ͨ
    w εΫϦϓτͰҰׅॲཧ

    View Slide

  22. /FUMJGZ'PSNT
    w ϑΥʔϜͷड͚ޱΛ؆୯ʹ࡞ΕΔɻ͓໰͍߹ͤϑΥʔϜΛ͜ΕͰ࣮૷
    w GPSNཁૉʹEBUBOFUMJGZUSVFΛࢦఆ͢Δ͚ͩ
    w ಧ͍ͨ಺༰Λ4MBDL΍ϝʔϧʹసૹ͢Δ͜ͱ΋Ͱ͖Δ

    View Slide

  23. σβΠϯ೉͍͠

    View Slide

  24. σβΠϯ೉͍͠
    w Ͷ͜΃Μ͕ͻͨ͢Βࢼߦࡨޡ͍ͯͨ͠

    View Slide

  25. ৽ฉࢴ෩ͷσβΠϯ
    w ౰ॳਐΊΑ͏ͱ͍ͨ͠σβΠϯ
    w ৽ฉࢴ໘ͷີ౓͕࠶ݱͰ͖ͣɺͲ͏ͯ͠΋ύνϞϊײ͕ʜ
    w ݄͝ΖʹͳͬͯɺݱࡏͷσβΠϯ΁ͱํ޲స׵

    View Slide

  26. ߜΓࠐΈϘοΫε
    w ϑΝʔετϏϡʔͰ·ͣ͸୊ࣈͷ෺ྔΛײͯ͡΄͔ͬͨ͠
    w ߜΓࠐΈϘοΫε͸ίϯύΫτʹ·ͱΊͨ
    w ͜Μͳͷ΋ࢼ͕ͨ͠ɺʮຊࣾॴࡏ஍ʯͷத਎͕ೖΓ੾Βͣஅ೦

    View Slide

  27. εϚϗ޲͚σβΠϯ
    w ͣͬͱ1$޲͚ͷσβΠϯͰ࡞͍ͬͯͨ
    w िؒલ͙Β͍ʹΨοͱεϚϗʹରԠͤͨ͞
    w $IBLSB6*ʢͷϕʔεͷ4UZMFE4ZTUFNʣͷ͓͔͛Ͱ
    ࢥͬͨΑΓָͩͬͨ
    w ˢجຊ͸ࠨἧ͑ɺ
    ɹMHʢQYʣҎ্ͷը໘Ͱ͸தԝἧ͑ʹ͢Δྫ

    View Slide

  28. ίϯϙʔωϯτͷग़͠෼͚
    w ϝχϡʔόʔͱ͔ɺߜΓࠐΈ෦෼ͱ͔
    w 443ͩͱIZESBUF࣌ʹද͕ࣔΨλ͍ͭͯ͠·͏ˠ!BSUTZGSFTOFMͰղফ

    View Slide

  29. ͦͷ΄͔
    w ੈͷதͷσβΠφʔ͞Μ͍͢͝
    w Πϥετͷྗ΋͍͢͝
    w ϑΥϯτ·ΘΓͰ΋༧૝Ҏ্ʹۤઓ͕ͨ͠ɺ͖ΐ͏͸ׂѪ
    w ޙ೔ϒϩάʹͰ΋ॻ͘
    w $44Ͱ৽ฉॻମΛ૊Ήͷ೉͍͠໰୊
    w 8FCϑΥϯτͷ΋Ͳ͔͠͞

    View Slide

  30. ͓ΘΓʹ

    View Slide

  31. ΍ͬͯΈͯ
    w Ұ࿈ͷ੍࡞աఔͱɺ֤αʔϏεɾ֤ϥΠϒϥϦΛҰ௨Γ৮Δ͜ͱ͕Ͱ͖ͨ
    w ೤த͗ͯ͢͠ɺͦΕҎ֎ͷΠϯϓοτɾΞ΢τϓοτ͕͔ͳΓݮͬͨ
    w Ոఉ಺ͷ࿩୊͕ίϩφͱ୊ϖλʹ઎ྖ͞Εͯ͠·ͬͨ
    w Ͷ͜΃Μ͔ΒΊͬͪΌ๙ΊΒΕͨ
    w ࡞ָ͍͍ͬͯͯ͠

    View Slide

  32. ͜Ε͔Β
    w ύϑΥʔϚϯε͕શવνϡʔχϯάͰ͖͍ͯͳ͍ͷͰվળ͢Δ
    w ΞΫηγϏϦςΟ΍ϢʔβϏϦςΟ΋
    w ܧଓతͳӡ༻ɾίϯςϯπ֦ॆ
    w աڈͷ୊ࣈͷௐࠪ

    View Slide

  33. View Slide