Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
GatsbyJSで爆速PWAサイト/ Gatsby Super Fast
nnjyami
March 24, 2018
Programming
9
19k
GatsbyJSで爆速PWAサイト/ Gatsby Super Fast
nnjyami
March 24, 2018
Tweet
Share
Other Decks in Programming
See All in Programming
和暦を正しく扱うための暦の話
nagise
10
6.6k
The State of Kotlin | FOSDEM 2023
prof18
1
100
Micro Frontends with Module Federation @MicroFrontend Summit 2023
manfredsteyer
PRO
0
620
TokyoR#103_DataProcessing
kilometer
0
540
Writing Greener Java Applications
hollycummins
0
360
PHP でガチの電卓を作る
memory1994
PRO
2
150
Hasura の Relationship と権限管理
karszawa
0
180
量子コンピュータ時代のプログラミングセミナー / 20221222_Amplify_seminar _route_optimization
fixstars
0
250
レガシーフレームワークからの移行
ug
0
120
子育てとEMと転職と
_atsushisakai
1
420
存在しないアセットへの参照と 未公開アセットでのネタバレに どう立ち向かうか / How to prevent missing assets and spoilers by assets
orgachem
0
170
花き業界のサプライチェーンを繋げるプロダクト開発の進め方
userlike1
0
180
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
6
4.5k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
Optimizing for Happiness
mojombo
365
64k
Agile that works and the tools we love
rasmusluckow
320
20k
A designer walks into a library…
pauljervisheath
199
16k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
346
17k
Adopting Sorbet at Scale
ufuk
65
7.8k
We Have a Design System, Now What?
morganepeng
37
5.9k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
13
1.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
24
4.6k
Code Review Best Practice
trishagee
50
11k
Transcript
Gatsby Super Fast
Gatsby Super Fast ࠓ͍͑ͨ͜ͱ •(BUTCZΛ͏ͱ രαΠτϒϩά͕؆୯ʹͰ͖·͢ʂ •ࠓৄࡉͳΈΛઆ໌͢Δ͚Ͳ ͋Ε؆୯ʹͰ͖ͪΌ͍·͢ʂʂ •(BUTCZ०ͷٕज़ςϯίΓͳͷͰ ϑϩϯτΤϯυษڧͷࡐͱͯ͠࠷ߴ
ࣗݾհ ࢁԼߒҰ !OOKZBNJʢΜ͡ΌΈʣ DNɹˠɹKQ ژͰಇ͘ϨΨγʔͳϑϩϯτΤϯυΤϯδχΞ ʢ+4 1)1 4BTT )5.- ʜʣ
ࠓͷςʔϚʮ0VUQVUʯ
OFX։ൃϒϩάrEWHKQʢ(BUTCZʣ
(BUTCZʹΑΔදࣔը໘ભҠͷ͞Λମײ͍ͯͩ͘͠͞ʂʂʂ https://dvg.179.jp
dvg.179.jp (2018.2ʙ) 4BLVSB714 %/4$MPVEqBSF $FOU04 /HJOY /PEF (BUTCZ+4 rษڧɾ࣮ݧ༻ rηϧϑϗεςΟϯάʢ714ʣ
r/HJOY r͋͑ͯαʔόʔଆʹ/PEF
dvg.179.jp (2018.2ʙ) 4BLVSB714 %/4$MPVEqBSF $FOU04 /HJOY /PEF (BUTCZ+4 rษڧɾ࣮ݧ༻ rηϧϑϗεςΟϯάʢ714ʣ
r/HJOY r͋͑ͯαʔόʔଆʹ/PEF ϒϩάϝϯλʔ͍͍ͯͨͩͯ͠·͢ʂ ଚܟ͢Δ Mr. ҙࣝߴ͍ΤϯδχΞ 1PEDBTU omoiyari.fm #22 Trello ͕͋ΔͷͰΕͳ͍ (BUTCZͰϒϩάΛߏங͢Δͱ EFWUPΈ͍ͨʹരʹͳΔ ʢϑϩϯτΤϯυٕज़͍͢͝ʣl(BUTCZcEWHz ΧΧΧΧοΫ ٢ాܚষ @kakakakakkuɾ2݄24
Gatsbyͱ • /PEFڥͰಈ͘੩తδΣωϨʔλʔ • ςϯϓϨʔτ3FBDUʹΑΔ࣮ • දࣔϖʔδ41"ͱͯ͠ ߴͳදࣔϖʔδભҠ • ΄΅ඪ४Ͱ18"ͱͯ͠ͷॻ͖ग़͠ʹରԠ
• σʔλιʔε.BSLEPXOΛ͡Ίɺ 8PSEQSFTT+40/ͳͲʹରԠ
Gatsbyͱ • "VUIPS,ZMF.BUIFXT!LZMFNBUIFXT • (JUIVC4UBS • OQN%PXOMPBET,NPOUI • W
• r'JSTU$PNNJU • r!LZMFNBUIFXTXPSLJOHGVMMUJNFOPXPO!HBUTCZKT • rWϦϦʔε
੩తδΣωϨʔλʔͷൺֱ • ϑϩϯτΤϯυͷٕज़Ͱ݁͢Δͷ গͳ͍ +FLZMM3VCZ )VHP(P • ςϯϓϨʔτͷΧελϚΠζੑ • هࣄखܰʹ.BSLEPXOͰॻ͖͍ͨ
• ৽͍ٕ͠ज़ʹ৮Ε͍ͨ
Front-End Developer Handbook 2018 $PEZ-JOEMFZࢯ • ʮ։؟+BWB4DSJQUʕݴޠ༷͔ΒֶͿ+BWB4DSJQU ͷຊ࣭ʯʢ03FJMMZʣ • ʮK2VFSZ$PPLCPPLʯʢ03FJMMZʣ
• ʮ+BWB4DSJQU&OMJHIUFONFOUʯʢ03FJMMZʣ
Front-End Developer Handbook 2018 *OFYQFDUT /PUIJOHXJMMDIBOHFPSTMPXUIFVTBHFPSQPQVMBSJUZ PG 3FBDU GPSNBOZZFBSTUPDPNF
(SBQI2- XJMMSFQMBDFBMPUPG3&45"1*TUIJTZFBS 5IFXFCXJMMDPOUJOVFUPCFDPNFNPSFOBUJWFMJLF XJUIP⒐JOFDBQBCJMJUJFTBOETFBNMFTTNPCJMF FYQFSJFODFT )5.-JTDPNJOH ,FFQBOFZFPOUVSCP BCMB[JOHGBTU/1.DMJFOU &YQFDUUPMFBSOBOEVTF$44USBOTGPSNTE $44 USBOTJUJPOT $44qFYCPY $44pMUFST $44HSJE +BWB4DSJQUVTBHFXJMMDPOUJOVFUPHSPXXJUIOP TMPXEPXOJOTJHIU 4UJMMXBJUJOHPO8FC"TTFNCMZUPQFBL5IJTXJMMMJLFMZSFRVJSFUPPMJOH 6OJWFSTBMJTPNPSQIJD+BWB4DSJQUTPMVUJPOTDPOUJOVFUPFWPMWFFH OFYUKTBOE4BQQFS 8FCDPNQPOFOUTTUJMMMVSLBOEXBJUGPSTJHOJpDBOUUSBDUJPOGSPN EFWFMPQFST *CFMJFWFUIFFOEJTJOTJHIUGPS$44QSFQSPDFTTPSTBT1PTU$44 $44OFYU BOE$44JO+4UBLFPWFS 0MEFSTFSWFSDFOUSJDBQQMJDBUJPOQBUUFSOTTIPXVQBHBJOCVUXJUIB OFXTQJO5IFQFOEVMVNDPVMETUBSUUPTXJOHJOHBXBZGSPNTUSJDL41" BQQMJDBUJPOT1FPQMFXJMMCFHJOUPQVMMCBDLPOUIFDPNQMFYJUZPGTJOHMF QBHFBQQMJDBUJPOTBOESFUVSOUPUIJOHTMJLFQKBY "NJYPG41"BOE 4FSWFSTJEF3FOEFSJOH4FFIUUQTTUJNVMVTKTPSH 1SPHSFTTJWF8FC"QQMJDBUJPOTIPQFGVMMZXJMMDBUDIpSF*GUIFZEPOU *GFBSUIFZOFWFSXJMM"UMFBTUOPUJOUIFSFDVSSFOUGPSN $IBUCPUTDSFBUFEPOUIFCBTJTPGBSUJpDJBMJOUFMMJHFODFBOEOFVSBM OFUXPSLTXJMMDPOUJOVFUPFWPMWFIFMQJOHUPJODSFBTFDPNNVOJDBUJPO POMJOF*XPOEFSXIBUJUXJMMMFBEUP CVUUIJTJTVODPOEJUJPOBMXFC EFWFMPQNFOUUSFOET/PET 7VFKTVTBHFXJMMMJLFMZPWFSUBLFBMM"OHVMBSVTBHF "3"7 "* BOEDIBUCPUTXJMMDPOUJOVFUPFWPMWFBOEpOE UIFSFTXFFUTQPU +BWB4DSJQU4ZNCPMBOE(FOFSBUPSTXJMMMJLFMZHPVOOPUJDFE CZNPTUGSPOUFOEEFWFMPQFST .PSFEFWFMPQFSTXJMMEJWPSDFUIFNTFMWFTGSPNQMBJO +BWB4DSJQUBOEUSZUPNBSSZBOPUIFS#VU KVTUMJLFJONBSJUBM EJWPSDFPOFBMXBZTUBLFTNPTUPGUIFTBNFQSPCMFNTXJUIUIFN UPUIFHSFFOFSHSBTTBOEMJUUMFBDUVBMMZDIBOHFT1SFGFSFODFTBOE WBMVFTKVTUHFUSFQSJPSJUJ[FEBOEIJTUPSZXJMMSFQFBUJUTFMG 8FCQBDLXJMMIBQQFO BOECFCFUUFS EVFUPDPNQFUJUJPO $POUJOVFEFYQMPSBUJPOGPSUIFJEFBM$44TPMVUJPOGPSBUSFF PG6*DPNQPOFOUTXJMMOPUDFBTF 4UBUFNBOBHFNFOUHFUTBSFTFUBOEQFPQMFTUBSUUPTJNQMJGZ )PQFGVMMZ UIJTXJMMCFUIFZFBSGPSTPMVUJPOTMJLFNPCYUPTIJOF
Front-End Developer Handbook 2018 3FBDU (SBQI2- 18" )5.- OFX/1.$MJFOU $44
+4 8FC"TTFNCMZ 6OJWFSTBMJTPNPSQIJD+BWB4DSJQU 8FCDPNQPOFOUT $44 41" 443 18" $IBUCPUT7PJDF6* 7VFKT "3"7 "* BOEDIBUCPUT +BWB4DSJQU4ZNCPMBOE(FOFSBUPST +41PFUJDT 8FCQBDL $44 4UBUFNBOBHFNFOU ʜཁ͢Δͱ *OFYQFDUT
Front-End Developer Handbook 2018 3FBDU (SBQI2- 18" )5.- OFX/1.$MJFOU $44
+4 8FC"TTFNCMZ 6OJWFSTBMJTPNPSQIJD+BWB4DSJQU 8FCDPNQPOFOUT $44 41" 443 18" $IBUCPUT7PJDF6* 7VFKT "3"7 "* BOEDIBUCPUT +BWB4DSJQU4ZNCPMBOE(FOFSBUPST +41PFUJDT 8FCQBDL $44 4UBUFNBOBHFNFOU ʜཁ͢Δͱ ※ v.2 *OFYQFDUT
GatsbyΛ͏ϝϦοτ •०ͳٕज़ʹ·ͱΊͯखܰʹ৮ΕΒΕΔ • 18"41" (SBQI2- )551 4FSWJDF8PSLFS FUD •ΧελϚΠζ͍͢͠ςϯϓϨʔτߏʢ3FBDUʣ •දࣔϖʔδ͕രͳ18"41"ͱͯ͠ग़ྗͰ͖Δ
•σʔλʔιʔε.BSLEPXO8PSEQSFTT +40/ͳͲ৭ʑͳํ๏͕બՄೳ
None
Gatsby͕͘༻్ •#MPH •υΩϡϝϯτ •ϙʔτϑΥϦΦ •੩తϖʔδ͚ͩͷαΠτʢΩϟϯϖʔϯαΠτ-1ͳͲʣ ˞੩తδΣωϨʔλʔͳͷͰɺେنͳαΠτಈతͳϖʔδʹ͔ͳ͍ 18"ʹͯ͠ΦϑϥΠϯରԠͰ͖Ε! രͳϙʔτϑΥϦΦͳΒΠϝʔδΞοϓʁʁ
Gatsbyपล •4UBSUFSςϯϓϨʔτ Ћ • 0⒏DJBMछྨɹ$PNNVOJUZछྨҎ্ •๛ͳϓϥάΠϯ 3FBDUࢿ࢈ •Θ͔Γ͍͢υΩϡϝϯτʢӳޠʣ νϡʔτϦΞϧʢষʣ •ຊޠͷใগͳ͍
• 2JJUBຊɹ(BUTCZϒϩάຊ
(BUTCZ%PDVNFOU
(BUTCZ1MVHJOT
1.OQNͰ(BUTCZΛΠϯετʔϧɹnpm install --global gatsby-cli 2.(BUTCZͷϓϩδΣΫτΛ৽ن࡞͢Δgatsby new [DIR] [URL_OF_STARTER] ˞4UBSUFSͷςϯϓϨʔτ෦ޙ͔ΒมߋՄೳ͕ͩɺ؆୯ʹม͑ΒΕͳ͍ 3.ඞཁͳઃఆΛߦ͏ʢHBUTCZDPOpHKTPOͳͲͰαΠτ໊ͷมߋͳͲʣ
4.ςετgatsby develop 5.Ϗϧυgatsby build 6.ॻ͖ग़͞ΕͨQVCMJDσΟϨΫτϦҎԼΛEFQMPZʂ GatsbyΫΠοΫελʔτ
r,ZMF.BUIFXT(BUTCZ#MPH “ Gatsby is an early example of a web
site compiler ” “ I designed Gatsby with the goal that when using it, it'd really really hard to be a slow site ” (BUTCZXFCαΠτίϯύΠϥʔͷॳظϞσϧͰ͢ (BUTCZΛ༻͢Δͱɺ͍αΠτΛ࡞Δ͜ͱ͕͢Μ͛ʔ͘͠ͳΔΑ͏ʹ(BUTCZΛઃܭ͠·ͨ͠ɻ
Gatsbyͷৄࡉ
Gatsbyͷओཁͳ"1* gatsby new [SITE_DIRECTORY] [URL_OF_STARTER_GITHUB_REPO] r(BUTCZͷ৽نαΠτΛࢦఆͷ4UBSUFSͰ࡞͢Δ gatsby build
rݱࡏͷαΠτͰ੩తϑΝΠϧΛੜ͢Δ gatsby develop rݱࡏͷαΠτͰ։ൃαʔόʔΛ্ཱͪ͛Δ r)PU3FMPBEʢ+4ϑΝΠϧ͚ͩͰͳ͘.BSLEPXOϑΝΠϧʣ r(SBQIJ2-ʢ(SBQI2-*%&ʣ
(BUTCZ#VJME%FWFMPQ gatsby build – 28sec gatsby develop – 8.5sec
(SBQIJ2-rHBUTCZEFWFMPQ࣌ʹىಈ͢ΔʢIUUQMPDBMIPTU@@@HSBQIRMʣ
Gatsbyͷߏཁૉ 4UBSUFSςϯϓϨʔτ δΣωϨʔλʔ • (SBQI2-ΛΠϯλʔϑΣʔεʹσʔλΛऔಘ • 3FBDUͷςϯϓϨʔτ͔Β੩తϑΝΠϧΛॻ͖ग़͢ •
ύϑΥʔϚϯεʹ࠷దԽͨ͠ॻ͖ग़͠ දࣔ
4UBSUFSςϯϓϨʔτ
4UBSUFSςϯϓϨʔτ
src/templates/blog-post.js (SBQI2-ʹΑΔ औಘσʔλͷࢦఆ (SBQI2-Ͱࢦఆͨ͠σʔλ͕ 1SPQTͱͯ͠͞ΕΔ
ςϯϓϨʔτͷ(SBQI2-Λऔಘ ςϯϓϨʔτʹهड़ͨ͠(SBQI2-Λ औಘͯ͠%BUB4PVSDF͔ΒσʔλΛऔಘ δΣωϨʔλʔ
%BUB4PVSDF͔Βऔಘͨ͠σʔλΛ"45 ʢ+40/ʣ ʹม͠ 3FBDUͷίϯϙʔωϯτʹQSPQTͱͯ͢͠ δΣωϨʔλʔ
)5.-ϑΝΠϧ+4ͱͯ͠ ύϑΥʔϚϯεʹߟྀͨ͠ܗͰॻ͖ग़͢ ·ͨඞཁͳը૾$44߹Θͤͯॻ͖ग़͠ δΣωϨʔλʔ
•#MB[JOHGBTUͳ͞ύϑΥʔϚϯεͷٻ • $44ΠϯϥΠϯల։ • ػతͳઌಡΈɹMJOLSFMlQSFMPBEz • 4FSWJDF8PSLFS ΩϟογϡίϯτϩʔϧɾΦϑϥΠϯରԠ •
+4ͷϑΝΠϧׂʢ8FCQBDLʣ • 131-1BUUFSO • )551QVTI •41"ʹΑΔεϜʔζͳϖʔδભҠ •΄΅ඪ४Ͱ18"Խ͕Մೳ දࣔ
ػతͳઌಡΈ ԼίϯςϯπͳͲ 8FCQBDL+40/1 ΠϯϥΠϯʹ$44ల։ +4ͷϑΝΠϧׂ ࠷ॳʹඞཁͳ+4ͱ ޙ͔ΒͰ͍͍+4Λྨ 131-1BUUFSO 1VTI 3FOEFS
1SFDBDIF -B[ZMPBE දࣔ r(BUTCZͷ)5.-ΛݟΔ
දࣔ r/FUXPSLʢ4FSWJDF8PSLFSΠϯετʔϧલʣ %0.$POUFOU-PBEFE NT -PBE NT
%0.$POUFOU-PBEFE NT -PBE NT දࣔ r/FUXPSLʢ4FSWJDF8PSLFSΠϯετʔϧޙʣ
%0.$POUFOU-PBEFE NT -PBE NT දࣔ r/FUXPSLWTIUUQBCFIJSPTIJMBDPPDBOKQ %0.$POUFOU-PBEFE NT -PBE NT
vs
දࣔ r"VEJUTʹΑΔධՁ ඪ४ঢ়ଶͰߴείΞ ˞18"ͷΈϓϥάΠϯՃ গ͠ͷվળͰຬ͕ࢦͤͦ͏ r(PPHMF8FC'POUTͷઃఆ r'JSTUNFBOJOHGVMQBJOU
Gatsby Super Fast •(BUTCZΛ͏ͱ രαΠτϒϩά͕؆୯ʹͰ͖·͢ʂ •ࠓৄࡉͳΈΛઆ໌͚ͨ͠Ͳ ͋Ε؆୯ʹͰ͖ͪΌ͍·͢ʂʂ •(BUTCZ०ͷٕज़ςϯίΓͳͷͰ ϑϩϯτΤϯυษڧͷࡐͱͯ͠࠷ߴ ·ͱΊ
Gatsby Super Fast!!!