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

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

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

6afbe110d33ef7e859fb8649b86bae55?s=128

Masaya Nakamura

September 11, 2020
Tweet

Transcript

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

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

  3. ܦҢ w Ͷ͜΃Μ ࠺  ͕ɺ೥͝ΖʹझຯͰ୊ࣈΛ͋ͭΊͨ w Ҏલ͔ΒʮαΠτʹ·ͱΊ͍ͨʯͱ͍͏࿩͸ฉ͍͍ͯͨ w ݄͝Ζɺલճͷൃද΋ऴΘͬͯҰଉ͍ͭͨͷͰɺ;ͨΓͰ΍Δ͔ʔͱͳͬͨ

    w ίϩφͰࡏ୐ͷ͕࣌ؒ૿͑ͨ͜ͱ΋͋Γɺूதͯ͠࡞Δ͜ͱʹ 
  4. ୲౰  ઃܭ σʔλऩू ίϯςϯπࣥච ·͠Ό΅͏ɹͶ͜΃Μ ϩΰ࡞੒ ࣮૷ Πϥετ࡞੒ σβΠϯ

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

  6. ୊ࣈը૾Λ༻ҙ͢Δ

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

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

  9. ੾Γൈ͖ΞϓϦ w ຊ౰͸ w (PPHMFυϥΠϒ͔ΒεΩϟϯը૾Λ։͘ w ܏͖΍ྖҬΛࣗಈݕग़ w ϒϥ΢β্Ͱ੾Γൈ͍ͨը૾Λੜ੒ w

    ੜ੒ͨ͠ը૾ΛΞοϓϩʔυ w ʜ͕Ͱ͖Δͱ͔͍͍͕ͬ͜ɺࠓճ͸΍Βͳ͔ͬͨ w ͦ͜·ͰͷखؒΛ͔͚Δ΄ͲͷྔͰ͸ͳ͍ 
  10. ୊ࣈը૾͕ἧͬͨ w ΞϓϦͰ࡞ͬͨ੾Γൈ͖σʔλΛ΋ͱʹɺ*NBHF.BHJDLͰεΫϦϓτॲཧ w ͜͜·Ͱिؒఔ౓ w ͔ͳΓॱௐ w ϑϧϦϞʔτ͕࢝·ͬͨ͜Ζ 

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

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

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

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

  15. (BUTCZͰαΠτΛ࡞Δ

  16. (BUTCZ w $POUFOUGVM͸IFBEMFTT$.4ͳͷͰɺӾཡऀ޲͚ͷϏϡʔ͸ࣗ෼Ͱ༻ҙ͢Δ w ԿͰ΋͍͍͕ɺࠓճ͸(BUTCZΛ࢖ͬͨ w 3FBDU (SBQI2-ϕʔεͷ੩తαΠτδΣωϨʔλ w σϑΥϧτͷঢ়ଶͰ͍͍ײ͡ʹ଎͍αΠτ͕࡞ΕΔ

    w ϓϥάΠϯ͕๛෋ w ͔ͨ͠ΧϩϦʔϝΠτͷϓϩϞʔγϣϯαΠτͰ΋࢖ΘΕ͍ͯͨ w $BMPSJF.BUFUP1SPHSBNNFScେ௩੡ༀ 
  17. શମͷߏ੒ w Ͷ͜΃Μʹઆ໌ͨ͠ͱ͖ͷਤ w σʔλஔ͖৔͸$POUFOUGVM w ϖʔδੜ੒͸(BUTCZ w ϏϧυɾσϓϩΠ͸/FUMJGZ w

    Α͋͘Δߏ੒ w ͜ͷ൒೥Ͱ೔ຊޠهࣄ͕͔ͳΓ૿͑ͨؾ͕͢Δ 
  18. $POUFOUGVMͷσʔλΛදࣔ w (SBQI2-ͷΫΤϦͰऔಘͰ͖Δ w ։ൃॳظͷ୊ࣈৄࡉϖʔδͷྫɿ 

  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*Ͱ্ॻ͖Ͱ͖Δ͕ɺखؒ 
  20. 3JDI5FYU w 3JDI5FYU$POUFOUGVMͷϑΟʔϧυͷҰछ w ߏ଄੍͕ݶ͞Ε͍ͯͯ.BSLEPXOΑΓѻ͍΍͍͢ w ผͷ&OUSZ΁ͷϦϯΫΛຒΊࠐΊΔ 

  21. 3JDI5FYUͷ᠘ w ͕ɺ&OUSZ΁ͷϦϯΫ͕૿͑ͯ͘Δͱ(BUTCZͷϏϧυ͕མͪΔ w HBUTCZTPVSDFDPOUFOUGVMͷόάHBUTCZKTHBUTCZ w ࢀরઌͷ&OUSZΛ࠶ؼతʹ·Δ·Δऔಘͯ͠ຒΊࠐΉͱ͍͏߽շͳڍಈ w ॥؀ࢀর͕͋ΔͱམͪΔɻͳͯ͘΋མͪΔ w

    ݁ہී௨ͷϦϯΫʹஔ͖׵͑ͨ w εΫϦϓτͰҰׅॲཧ 
  22. /FUMJGZ'PSNT w ϑΥʔϜͷड͚ޱΛ؆୯ʹ࡞ΕΔɻ͓໰͍߹ͤϑΥʔϜΛ͜ΕͰ࣮૷ w GPSNཁૉʹEBUBOFUMJGZUSVFΛࢦఆ͢Δ͚ͩ w ಧ͍ͨ಺༰Λ4MBDL΍ϝʔϧʹసૹ͢Δ͜ͱ΋Ͱ͖Δ 

  23. σβΠϯ೉͍͠

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

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

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

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

    ɹMHʢQYʣҎ্ͷը໘Ͱ͸தԝἧ͑ʹ͢Δྫ 
  28. ίϯϙʔωϯτͷग़͠෼͚ w ϝχϡʔόʔͱ͔ɺߜΓࠐΈ෦෼ͱ͔ w 443ͩͱIZESBUF࣌ʹද͕ࣔΨλ͍ͭͯ͠·͏ˠ!BSUTZGSFTOFMͰղফ 

  29. ͦͷ΄͔ w ੈͷதͷσβΠφʔ͞Μ͍͢͝ w Πϥετͷྗ΋͍͢͝ w ϑΥϯτ·ΘΓͰ΋༧૝Ҏ্ʹۤઓ͕ͨ͠ɺ͖ΐ͏͸ׂѪ w ޙ೔ϒϩάʹͰ΋ॻ͘ w

    $44Ͱ৽ฉॻମΛ૊Ήͷ೉͍͠໰୊ w 8FCϑΥϯτͷ΋Ͳ͔͠͞ 
  30. ͓ΘΓʹ

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

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

  33. None