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

B5b921ebc0f782b0cdf6e00ce99ddace?s=47 nnjyami
March 24, 2018
Programming
8
14k

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

B5b921ebc0f782b0cdf6e00ce99ddace?s=128

nnjyami

March 24, 2018
Tweet

Want more?

766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
35
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
2
87
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
3
140
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
1
200
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
2
360
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
100
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
190
Ef32e0b1ac5082450dc8c1fca3a26b5c?s=48 cherdarchuk
60
250k
1177e050db6bafe62885362edf6e3537?s=48 lauravandoore
5
780
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
1
170
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
107
23k
B47b288784fda77a94aeb234ca743c24?s=48 keavy
99
10k

Transcript

  1. 1.

    Gatsby Super Fast

  2. 2.

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

  3. 3.

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

    ࠓ೥ͷςʔϚ͸ʮ0VUQVUʯ
  4. 4.

    OFX։ൃϒϩάrEWHKQʢ(BUTCZʣ

  5. 5.

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

  6. 6.

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

    r/HJOY r͋͑ͯαʔόʔଆʹ/PEF
  7. 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. 8.

    Gatsbyͱ͸ • /PEF؀ڥͰಈ͘੩తδΣωϨʔλʔ • ςϯϓϨʔτ͸3FBDUʹΑΔ࣮૷ • දࣔϖʔδ͸41"ͱͯ͠
 ௒ߴ଎ͳදࣔϖʔδભҠ • ΄΅ඪ४Ͱ18"ͱͯ͠ͷॻ͖ग़͠ʹରԠ

    • σʔλιʔε͸.BSLEPXOΛ͸͡Ίɺ 8PSEQSFTT΍+40/ͳͲʹ΋ରԠ
  9. 9.

    Gatsbyͱ͸ • "VUIPS,ZMF.BUIFXT!LZMFNBUIFXT • (JUIVC4UBS  • OQN%PXOMPBET,NPOUI • W

      • r'JSTU$PNNJU • r!LZMFNBUIFXTXPSLJOHGVMMUJNFOPXPO!HBUTCZKT • rWϦϦʔε
  10. 10.

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

    • ৽͍ٕ͠ज़ʹ৮Ε͍ͨ
  11. 11.

    Front-End Developer Handbook 2018 $PEZ-JOEMFZࢯ • ʮ։؟+BWB4DSJQUʕݴޠ࢓༷͔ΒֶͿ+BWB4DSJQU ͷຊ࣭ʯʢ03FJMMZʣ • ʮK2VFSZ$PPLCPPLʯʢ03FJMMZʣ

    • ʮ+BWB4DSJQU&OMJHIUFONFOUʯʢ03FJMMZʣ
  12. 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. 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. 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. 15.

    GatsbyΛ࢖͏ϝϦοτ •०ͳٕज़ʹ·ͱΊͯखܰʹ৮ΕΒΕΔ • 18"41" (SBQI2- )551 4FSWJDF8PSLFS FUD •ΧελϚΠζ͠΍͍͢ςϯϓϨʔτߏ଄ʢ3FBDUʣ •දࣔϖʔδ͕ര଎ͳ18"41"ͱͯ͠ग़ྗͰ͖Δ

    •σʔλʔιʔε͸.BSLEPXO΍8PSEQSFTT +40/ͳͲ৭ʑͳํ๏͕બ୒Մೳ
  16. 16.
    None
  17. 17.

    Gatsby͕޲͘༻్ •#MPH •υΩϡϝϯτ •ϙʔτϑΥϦΦ •੩తϖʔδ͚ͩͷαΠτʢΩϟϯϖʔϯαΠτ-1ͳͲʣ ˞੩తδΣωϨʔλʔͳͷͰɺେن໛ͳαΠτ΍ಈతͳϖʔδʹ͸޲͔ͳ͍ 18"ʹͯ͠ΦϑϥΠϯରԠͰ͖Ε͹! ര଎ͳϙʔτϑΥϦΦͳΒΠϝʔδΞοϓʁʁ

  18. 18.

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

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

    (BUTCZ%PDVNFOU

  20. 20.

    (BUTCZ1MVHJOT

  21. 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. 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. 23.

    Gatsbyͷৄࡉ

  24. 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. 25.

    (BUTCZ#VJME%FWFMPQ gatsby build – 28sec gatsby develop – 8.5sec

  26. 26.

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

  27. 27.

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

    ύϑΥʔϚϯεʹ࠷దԽͨ͠ॻ͖ग़͠  දࣔ
  28. 28.

    4UBSUFSςϯϓϨʔτ

  29. 29.

    4UBSUFSςϯϓϨʔτ

  30. 30.

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

  31. 31.

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

  32. 32.

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

  33. 33.

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

  34. 34.

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

    +4ͷϑΝΠϧ෼ׂʢ8FCQBDLʣ • 131-1BUUFSO • )551QVTI •41"ʹΑΔεϜʔζͳϖʔδભҠ •΄΅ඪ४Ͱ18"Խ͕Մೳ දࣔ
  35. 35.

    ౤ػతͳઌಡΈ Լ૚ίϯςϯπͳͲ 8FCQBDL+40/1 ΠϯϥΠϯʹ$44ల։ +4ͷϑΝΠϧ෼ׂ ࠷ॳʹඞཁͳ+4ͱ
 ޙ͔ΒͰ͍͍+4Λ෼ྨ 131-1BUUFSO 1VTI 3FOEFS

    1SFDBDIF -B[ZMPBE දࣔ r(BUTCZͷ)5.-ΛݟΔ
  36. 36.

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

  37. 37.

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

  38. 38.

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

    vs
  39. 39.

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

  40. 40.

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

  41. 41.

    Gatsby Super Fast!!!