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

B5b921ebc0f782b0cdf6e00ce99ddace?s=47 nnjyami
March 24, 2018

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

B5b921ebc0f782b0cdf6e00ce99ddace?s=128

nnjyami

March 24, 2018
Tweet

Transcript

  1. Gatsby Super Fast

  2. Gatsby Super Fast ࠓ೔఻͍͑ͨ͜ͱ •(BUTCZΛ࢖͏ͱ
 ര଎αΠτϒϩά͕؆୯ʹͰ͖·͢ʂ •ࠓ೔͸ৄࡉͳ࢓૊ΈΛઆ໌͢Δ͚Ͳ
 ෼͋Ε͹؆୯ʹͰ͖ͪΌ͍·͢ʂʂ •(BUTCZ͸०ͷٕज़ςϯί੝ΓͳͷͰ
 ϑϩϯτΤϯυษڧͷ୊ࡐͱͯ͠΋࠷ߴ

  3. ࣗݾ঺հ ࢁԼߒҰ࿠
 !OOKZBNJʢΜ͡ΌΈʣ ਎௕DNɹˠɹKQ ژ౎Ͱಇ͘ϨΨγʔͳϑϩϯτΤϯυΤϯδχΞ
 ʢ+4 1)1 4BTT )5.- ʜʣ

    ࠓ೥ͷςʔϚ͸ʮ0VUQVUʯ
  4. OFX։ൃϒϩάrEWHKQʢ(BUTCZʣ

  5. (BUTCZʹΑΔදࣔ଎౓ը໘ભҠͷ଎͞Λମײ͍ͯͩ͘͠͞ʂʂʂ https://dvg.179.jp

  6. dvg.179.jp (2018.2ʙ) 4BLVSB714 %/4$MPVEqBSF
 $FOU04
 /HJOY /PEF (BUTCZ+4 rษڧɾ࣮ݧ༻ rηϧϑϗεςΟϯάʢ714ʣ

    r/HJOY r͋͑ͯαʔόʔଆʹ/PEF
  7. 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೔
  8. Gatsbyͱ͸ • /PEF؀ڥͰಈ͘੩తδΣωϨʔλʔ • ςϯϓϨʔτ͸3FBDUʹΑΔ࣮૷ • දࣔϖʔδ͸41"ͱͯ͠
 ௒ߴ଎ͳදࣔϖʔδભҠ • ΄΅ඪ४Ͱ18"ͱͯ͠ͷॻ͖ग़͠ʹରԠ

    • σʔλιʔε͸.BSLEPXOΛ͸͡Ίɺ 8PSEQSFTT΍+40/ͳͲʹ΋ରԠ
  9. Gatsbyͱ͸ • "VUIPS,ZMF.BUIFXT!LZMFNBUIFXT • (JUIVC4UBS  • OQN%PXOMPBET,NPOUI • W

      • r'JSTU$PNNJU • r!LZMFNBUIFXTXPSLJOHGVMMUJNFOPXPO!HBUTCZKT • rWϦϦʔε
  10. ੩తδΣωϨʔλʔͷൺֱ • ϑϩϯτΤϯυͷٕज़Ͱ׬݁͢Δ΋ͷ͸ গͳ͍
 +FLZMM3VCZ
 )VHP(P • ςϯϓϨʔτͷΧελϚΠζੑ • هࣄ͸खܰʹ.BSLEPXOͰॻ͖͍ͨ

    • ৽͍ٕ͠ज़ʹ৮Ε͍ͨ
  11. Front-End Developer Handbook 2018 $PEZ-JOEMFZࢯ • ʮ։؟+BWB4DSJQUʕݴޠ࢓༷͔ΒֶͿ+BWB4DSJQU ͷຊ࣭ʯʢ03FJMMZʣ • ʮK2VFSZ$PPLCPPLʯʢ03FJMMZʣ

    • ʮ+BWB4DSJQU&OMJHIUFONFOUʯʢ03FJMMZʣ
  12. 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
  13. 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
  14. 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
  15. GatsbyΛ࢖͏ϝϦοτ •०ͳٕज़ʹ·ͱΊͯखܰʹ৮ΕΒΕΔ • 18"41" (SBQI2- )551 4FSWJDF8PSLFS FUD •ΧελϚΠζ͠΍͍͢ςϯϓϨʔτߏ଄ʢ3FBDUʣ •දࣔϖʔδ͕ര଎ͳ18"41"ͱͯ͠ग़ྗͰ͖Δ

    •σʔλʔιʔε͸.BSLEPXO΍8PSEQSFTT +40/ͳͲ৭ʑͳํ๏͕બ୒Մೳ
  16. None
  17. Gatsby͕޲͘༻్ •#MPH •υΩϡϝϯτ •ϙʔτϑΥϦΦ •੩తϖʔδ͚ͩͷαΠτʢΩϟϯϖʔϯαΠτ-1ͳͲʣ ˞੩తδΣωϨʔλʔͳͷͰɺେن໛ͳαΠτ΍ಈతͳϖʔδʹ͸޲͔ͳ͍ 18"ʹͯ͠ΦϑϥΠϯରԠͰ͖Ε͹! ര଎ͳϙʔτϑΥϦΦͳΒΠϝʔδΞοϓʁʁ

  18. Gatsbyपล •4UBSUFSςϯϓϨʔτ Ћ • 0⒏DJBMछྨɹ$PNNVOJUZछྨҎ্ •๛෋ͳϓϥάΠϯ 3FBDUࢿ࢈ •Θ͔Γ΍͍͢υΩϡϝϯτʢӳޠʣ νϡʔτϦΞϧʢষʣ •೔ຊޠͷ৘ใ͸গͳ͍

    • 2JJUBຊɹ(BUTCZ੡ϒϩά਺ຊ
  19. (BUTCZ%PDVNFOU

  20. (BUTCZ1MVHJOT

  21. 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ΫΠοΫελʔτ
  22. 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Λઃܭ͠·ͨ͠ɻ
  23. Gatsbyͷৄࡉ

  24. 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-*%&ʣ
  25. (BUTCZ#VJME%FWFMPQ gatsby build – 28sec gatsby develop – 8.5sec

  26. (SBQIJ2-rHBUTCZEFWFMPQ࣌ʹىಈ͢ΔʢIUUQMPDBMIPTU@@@HSBQIRMʣ

  27. Gatsbyͷߏ੒ཁૉ  4UBSUFSςϯϓϨʔτ  δΣωϨʔλʔ • (SBQI2-ΛΠϯλʔϑΣʔεʹσʔλΛऔಘ • 3FBDUͷςϯϓϨʔτ͔Β੩తϑΝΠϧΛॻ͖ग़͢ •

    ύϑΥʔϚϯεʹ࠷దԽͨ͠ॻ͖ग़͠  දࣔ
  28. 4UBSUFSςϯϓϨʔτ

  29. 4UBSUFSςϯϓϨʔτ

  30. src/templates/blog-post.js (SBQI2-ʹΑΔ औಘσʔλͷࢦఆ (SBQI2-Ͱࢦఆͨ͠σʔλ͕ 1SPQTͱͯ͠౉͞ΕΔ

  31. ςϯϓϨʔτ಺ͷ(SBQI2-Λऔಘ ςϯϓϨʔτʹهड़ͨ͠(SBQI2-Λ औಘͯ͠%BUB4PVSDF͔ΒσʔλΛऔಘ δΣωϨʔλʔ

  32. %BUB4PVSDF͔Βऔಘͨ͠σʔλΛ"45 ʢ+40/ʣ ʹม׵͠
 3FBDUͷίϯϙʔωϯτʹQSPQTͱͯ͠౉͢ δΣωϨʔλʔ

  33. )5.-ϑΝΠϧ΍+4ͱͯ͠ ύϑΥʔϚϯεʹߟྀͨ͠ܗͰॻ͖ग़͢ ·ͨඞཁͳը૾΍$44΋߹Θͤͯॻ͖ग़͠
 δΣωϨʔλʔ

  34. •#MB[JOHGBTU໠྽ͳ଎͞ύϑΥʔϚϯεͷ௥ٻ • $44ΠϯϥΠϯల։ • ౤ػతͳઌಡΈɹMJOLSFMlQSFMPBEz • 4FSWJDF8PSLFS ΩϟογϡίϯτϩʔϧɾΦϑϥΠϯରԠ  •

    +4ͷϑΝΠϧ෼ׂʢ8FCQBDLʣ • 131-1BUUFSO • )551QVTI •41"ʹΑΔεϜʔζͳϖʔδભҠ •΄΅ඪ४Ͱ18"Խ͕Մೳ දࣔ
  35. ౤ػతͳઌಡΈ Լ૚ίϯςϯπͳͲ 8FCQBDL+40/1 ΠϯϥΠϯʹ$44ల։ +4ͷϑΝΠϧ෼ׂ ࠷ॳʹඞཁͳ+4ͱ
 ޙ͔ΒͰ͍͍+4Λ෼ྨ 131-1BUUFSO 1VTI 3FOEFS

    1SFDBDIF -B[ZMPBE දࣔ r(BUTCZͷ)5.-ΛݟΔ
  36. දࣔ r/FUXPSLʢ4FSWJDF8PSLFSΠϯετʔϧલʣ %0.$POUFOU-PBEFE NT -PBE NT

  37. %0.$POUFOU-PBEFE NT -PBE NT දࣔ r/FUXPSLʢ4FSWJDF8PSLFSΠϯετʔϧޙʣ

  38. %0.$POUFOU-PBEFE NT -PBE NT දࣔ r/FUXPSLWTIUUQBCFIJSPTIJMBDPPDBOKQ %0.$POUFOU-PBEFE NT -PBE NT

    vs
  39. දࣔ r"VEJUTʹΑΔධՁ ඪ४ঢ়ଶͰߴείΞ ˞18"ͷΈϓϥάΠϯ௥Ճ গ͠ͷվળͰຬ఺͕໨ࢦͤͦ͏ r(PPHMF8FC'POUTͷઃఆ
 r'JSTUNFBOJOHGVMQBJOU

  40. Gatsby Super Fast •(BUTCZΛ࢖͏ͱ
 ര଎αΠτϒϩά͕؆୯ʹͰ͖·͢ʂ •ࠓ೔͸ৄࡉͳ࢓૊ΈΛઆ໌͚ͨ͠Ͳ
 ෼͋Ε͹؆୯ʹͰ͖ͪΌ͍·͢ʂʂ •(BUTCZ͸०ͷٕज़ςϯί੝ΓͳͷͰ
 ϑϩϯτΤϯυษڧͷ୊ࡐͱͯ͠΋࠷ߴ ·ͱΊ

  41. Gatsby Super Fast!!!