Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
題字ペタペタ:Contentful + Gatsby で作るコレクションサイト / FFTT ...
Search
Masaya Nakamura
September 11, 2020
Programming
0
14k
題字ペタペタ:Contentful + Gatsby で作るコレクションサイト / FFTT #409
題字ペタペタ
https://daipeta.com
ができるまでの話を、社内勉強会で発表しました。
題字ペタペタができるまで - しろもじメモランダム
Masaya Nakamura
September 11, 2020
Tweet
Share
More Decks by Masaya Nakamura
See All by Masaya Nakamura
で、モノレポにして結局どうだったの? / FFTT #522
mashabow
0
42
LINE絵文字概観 / FFTT #465
mashabow
0
3.9k
uchino-sensors: 温湿度センサーで値をとってグラフにするよくあるアレ / FFTT #437
mashabow
0
3.4k
日本の新聞の題字あつめました
mashabow
0
2.4k
古典プログラマが量子プログラミングをさわろうとした話 / FFTT #383
mashabow
2
130
ベジエ曲線のなめらかさの話 / Bézier Smoothness
mashabow
21
40k
書体見本帳をながめる / FFLT #12
mashabow
0
350
Other Decks in Programming
See All in Programming
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
780
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
13
4.7k
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.6k
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
490
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
920
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
260
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
効率的な開発手段として VRTを活用する
ishkawa
0
140
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
Featured
See All Featured
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
310
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Producing Creativity
orderedlist
PRO
346
40k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Become a Pro
speakerdeck
PRO
29
5.4k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Thoughts on Productivity
jonyablonski
69
4.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Transcript
ࣈϖλϖλ $POUFOUGVM (BUTCZͰ࡞Δ ίϨΫγϣϯαΠτ ݄ !NBTIBCPX
ࠓճͷςʔϚ w ৽ฉͷࣈΛ͋ͭΊͨαΠτΛ࡞ͬͨΑ w ࣈϖλϖλIUUQTEBJQFUBDPN
ܦҢ w Ͷ͜Μ ࠺ ͕ɺ͝ΖʹझຯͰࣈΛ͋ͭΊͨ w Ҏલ͔ΒʮαΠτʹ·ͱΊ͍ͨʯͱ͍͏ฉ͍͍ͯͨ w ݄͝ΖɺલճͷൃදऴΘͬͯҰଉ͍ͭͨͷͰɺ;ͨΓͰΔ͔ʔͱͳͬͨ
w ίϩφͰࡏͷ͕࣌ؒ૿͑ͨ͜ͱ͋Γɺूதͯ͠࡞Δ͜ͱʹ
୲ ઃܭ σʔλऩू ίϯςϯπࣥච ·͠Ό΅͏ɹͶ͜Μ ϩΰ࡞ ࣮ Πϥετ࡞ σβΠϯ
ํ w ·ͣͰ͖Δͱ͜Ζ͔Β࡞ͬͯͬ͞͞ͱಈ͔͢ w ᘳΛٻΊͳ͍ w ָ͘͠Δ w ͕ࣗͨͪཉ͍͠ͷΛ࡞Δ
ࣈը૾Λ༻ҙ͢Δ
εΩϟϯ w ΓऔͬͨࣈΛͳΒͯɺ ී௨ͷεΩϟφͰεΩϟϯ w ͑ͯΈͨΒຕҎ্ͷࣈ͕͋ͬͨ
ը૾ΛΓൈ͘ w ຕຕΓൈ͍ͯอଘ͢Δͷ໘ w Γൈ͖ઐ༻ͷ؆୯ͳΞϓϦΛ࡞ͬͨ w IUUQTHJUIVCDPNNBTIBCPXLJSJOVLJ w IUUQTNBTIBCPXHJUIVCJPLJSJOVLJ
Γൈ͖ΞϓϦ w ຊ w (PPHMFυϥΠϒ͔ΒεΩϟϯը૾Λ։͘ w ͖ྖҬΛࣗಈݕग़ w ϒϥβ্ͰΓൈ͍ͨը૾Λੜ w
ੜͨ͠ը૾ΛΞοϓϩʔυ w ʜ͕Ͱ͖Δͱ͔͍͍͕ͬ͜ɺࠓճΒͳ͔ͬͨ w ͦ͜·ͰͷखؒΛ͔͚Δ΄ͲͷྔͰͳ͍
ࣈը૾͕ἧͬͨ w ΞϓϦͰ࡞ͬͨΓൈ͖σʔλΛͱʹɺ*NBHF.BHJDLͰεΫϦϓτॲཧ w ͜͜·Ͱिؒఔ w ͔ͳΓॱௐ w ϑϧϦϞʔτ͕࢝·ͬͨ͜Ζ
ࣈσʔλΛ$POUFOUGVMʹೖΕΔ
σʔλஔ͖ w σʔλɿࣈͷઆ໌ͱ͔ɺ৽ฉ໊ͱ͔ɺͷछྨͱ͔ʜ w Ͷ͜Μ͕(PPHMFεϓϨουγʔτʹ͋Δఔ·ͱΊ͍ͯͨ w ͕ɺεϓϨουγʔτʹจষΛॻ͍ͨΓɺը૾ΛషͬͨΓ͢ΔͷͭΒ͍
$POUFOUGVM w IFBEMFTT$.4Ͱ͋Δ$POUFOUGVMʹσʔλΛೖΕΔ͜ͱʹͨ͠ w IFBEMFTT$.4Ӿཡऀ͚ͷϏϡʔ͕ͳ͍$.4 w ฤूऀ͚ͷϏϡʔ͋Δ w ݸਓαΠτఔͩͬͨΒ $POUFOUGVMͷແྉʹऩ·Δ
σʔλΛೖΕΔ w $POUFOU5ZQFΛఆٛͯ͠ɺ &OUSZεϓϨουγʔτͷσʔλ͔ΒεΫϦϓτͰྲྀ͠ࠐΈ खͰՃ
(BUTCZͰαΠτΛ࡞Δ
(BUTCZ w $POUFOUGVMIFBEMFTT$.4ͳͷͰɺӾཡऀ͚ͷϏϡʔࣗͰ༻ҙ͢Δ w ԿͰ͍͍͕ɺࠓճ(BUTCZΛͬͨ w 3FBDU (SBQI2-ϕʔεͷ੩తαΠτδΣωϨʔλ w σϑΥϧτͷঢ়ଶͰ͍͍ײ͡ʹ͍αΠτ͕࡞ΕΔ
w ϓϥάΠϯ͕๛ w ͔ͨ͠ΧϩϦʔϝΠτͷϓϩϞʔγϣϯαΠτͰΘΕ͍ͯͨ w $BMPSJF.BUFUP1SPHSBNNFScେ௩ༀ
શମͷߏ w Ͷ͜Μʹઆ໌ͨ͠ͱ͖ͷਤ w σʔλஔ͖$POUFOUGVM w ϖʔδੜ(BUTCZ w ϏϧυɾσϓϩΠ/FUMJGZ w
Α͋͘Δߏ w ͜ͷͰຊޠهࣄ͕͔ͳΓ૿͑ͨؾ͕͢Δ
$POUFOUGVMͷσʔλΛදࣔ w (SBQI2-ͷΫΤϦͰऔಘͰ͖Δ w ։ൃॳظͷࣈৄࡉϖʔδͷྫɿ
ܕ͕΄͍͠ 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*Ͱ্ॻ͖Ͱ͖Δ͕ɺखؒ
3JDI5FYU w 3JDI5FYU$POUFOUGVMͷϑΟʔϧυͷҰछ w ߏ੍͕ݶ͞Ε͍ͯͯ.BSLEPXOΑΓѻ͍͍͢ w ผͷ&OUSZͷϦϯΫΛຒΊࠐΊΔ
3JDI5FYUͷ᠘ w ͕ɺ&OUSZͷϦϯΫ͕૿͑ͯ͘Δͱ(BUTCZͷϏϧυ͕མͪΔ w HBUTCZTPVSDFDPOUFOUGVMͷόάHBUTCZKTHBUTCZ w ࢀরઌͷ&OUSZΛ࠶ؼతʹ·Δ·Δऔಘͯ͠ຒΊࠐΉͱ͍͏߽շͳڍಈ w ॥ࢀর͕͋ΔͱམͪΔɻͳͯ͘མͪΔ w
݁ہී௨ͷϦϯΫʹஔ͖͑ͨ w εΫϦϓτͰҰׅॲཧ
/FUMJGZ'PSNT w ϑΥʔϜͷड͚ޱΛ؆୯ʹ࡞ΕΔɻ͓͍߹ͤϑΥʔϜΛ͜ΕͰ࣮ w GPSNཁૉʹEBUBOFUMJGZUSVFΛࢦఆ͢Δ͚ͩ w ಧ͍ͨ༰Λ4MBDLϝʔϧʹసૹ͢Δ͜ͱͰ͖Δ
σβΠϯ͍͠
σβΠϯ͍͠ w Ͷ͜Μ͕ͻͨ͢Βࢼߦࡨޡ͍ͯͨ͠
৽ฉࢴ෩ͷσβΠϯ w ॳਐΊΑ͏ͱ͍ͨ͠σβΠϯ w ৽ฉࢴ໘ͷີ͕࠶ݱͰ͖ͣɺͲ͏ͯ͠ύνϞϊײ͕ʜ w ݄͝ΖʹͳͬͯɺݱࡏͷσβΠϯͱํస
ߜΓࠐΈϘοΫε w ϑΝʔετϏϡʔͰ·ͣࣈͷྔΛײͯ͡΄͔ͬͨ͠ w ߜΓࠐΈϘοΫείϯύΫτʹ·ͱΊͨ w ͜Μͳͷࢼ͕ͨ͠ɺʮຊࣾॴࡏʯͷத͕ೖΓΒͣஅ೦
εϚϗ͚σβΠϯ w ͣͬͱ1$͚ͷσβΠϯͰ࡞͍ͬͯͨ w िؒલ͙Β͍ʹΨοͱεϚϗʹରԠͤͨ͞ w $IBLSB6*ʢͷϕʔεͷ4UZMFE4ZTUFNʣͷ͓͔͛Ͱ ࢥͬͨΑΓָͩͬͨ w ˢجຊࠨἧ͑ɺ
ɹMHʢQYʣҎ্ͷը໘Ͱதԝἧ͑ʹ͢Δྫ
ίϯϙʔωϯτͷग़͚͠ w ϝχϡʔόʔͱ͔ɺߜΓࠐΈ෦ͱ͔ w 443ͩͱIZESBUF࣌ʹද͕ࣔΨλ͍ͭͯ͠·͏ˠ!BSUTZGSFTOFMͰղফ
ͦͷ΄͔ w ੈͷதͷσβΠφʔ͞Μ͍͢͝ w Πϥετͷྗ͍͢͝ w ϑΥϯτ·ΘΓͰ༧Ҏ্ʹۤઓ͕ͨ͠ɺ͖ΐ͏ׂѪ w ޙϒϩάʹͰॻ͘ w
$44Ͱ৽ฉॻମΛΉͷ͍͠ w 8FCϑΥϯτͷͲ͔͠͞
͓ΘΓʹ
ͬͯΈͯ w Ұ࿈ͷ੍࡞աఔͱɺ֤αʔϏεɾ֤ϥΠϒϥϦΛҰ௨Γ৮Δ͜ͱ͕Ͱ͖ͨ w த͗ͯ͢͠ɺͦΕҎ֎ͷΠϯϓοτɾΞτϓοτ͕͔ͳΓݮͬͨ w Ոఉͷ͕ίϩφͱϖλʹྖ͞Εͯ͠·ͬͨ w Ͷ͜Μ͔ΒΊͬͪΌ๙ΊΒΕͨ w
࡞ָ͍͍ͬͯͯ͠
͜Ε͔Β w ύϑΥʔϚϯε͕શવνϡʔχϯάͰ͖͍ͯͳ͍ͷͰվળ͢Δ w ΞΫηγϏϦςΟϢʔβϏϦςΟ w ܧଓతͳӡ༻ɾίϯςϯπ֦ॆ w աڈͷࣈͷௐࠪ
None