GatsbyJSで爆速PWAサイト/ Gatsby Super Fast

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"ͱͯ͠ग़ྗͰ͖Δ
•σʔλʔιʔε͸.BSLEPXO΍8PSEQSFTT +40/ͳͲ৭ʑͳํ๏͕બ୒Մೳ

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 ” (BUTCZ͸XFCαΠτίϯύΠϥʔͷॳظϞσϧͰ͢ (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ςϯϓϨʔτ

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!!!

GatsbyJSで爆速PWAサイト/ Gatsby Super Fast

GatsbyJSで爆速PWAサイト/ Gatsby Super Fast

Transcript

Other Decks in Programming

Featured