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

Transcript

1. Gatsby
   Super Fast
   

   View Slide

2. Gatsby
   Super Fast
   ࠓ೔఻͍͑ͨ͜ͱ
   •(BUTCZΛ࢖͏ͱ

   ര଎αΠτϒϩά͕؆୯ʹͰ͖·͢ʂ
   •ࠓ೔͸ৄࡉͳ࢓૊ΈΛઆ໌͢Δ͚Ͳ

   ෼͋Ε͹؆୯ʹͰ͖ͪΌ͍·͢ʂʂ
   •(BUTCZ͸०ͷٕज़ςϯί੝ΓͳͷͰ

   ϑϩϯτΤϯυษڧͷ୊ࡐͱͯ͠΋࠷ߴ
   

   View Slide

3. ࣗݾ঺հ
   ࢁԼߒҰ࿠

   !OOKZBNJʢΜ͡ΌΈʣ
   ਎௕DNɹˠɹKQ
   ژ౎Ͱಇ͘ϨΨγʔͳϑϩϯτΤϯυΤϯδχΞ

   ʢ+4 1)1 4BTT )5.- ʜʣ
   ࠓ೥ͷςʔϚ͸ʮ0VUQVUʯ
   

   View Slide

4. OFX։ൃϒϩάrEWHKQʢ(BUTCZʣ
   

   View Slide

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

   View Slide

6. dvg.179.jp (2018.2ʙ)
   4BLVSB714
   %/4$MPVEqBSF

   $FOU04

   /HJOY
   /PEF
   (BUTCZ+4
   rษڧɾ࣮ݧ༻
   rηϧϑϗεςΟϯάʢ714ʣ
   r/HJOY
   r͋͑ͯαʔόʔଆʹ/PEF
   

   View Slide

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೔
   

   View Slide

8. Gatsbyͱ͸
   • /PEF؀ڥͰಈ͘੩తδΣωϨʔλʔ
   • ςϯϓϨʔτ͸3FBDUʹΑΔ࣮૷
   • දࣔϖʔδ͸41"ͱͯ͠

   ௒ߴ଎ͳදࣔϖʔδભҠ
   • ΄΅ඪ४Ͱ18"ͱͯ͠ͷॻ͖ग़͠ʹରԠ
   • σʔλιʔε͸.BSLEPXOΛ͸͡Ίɺ
   8PSEQSFTT΍+40/ͳͲʹ΋ରԠ
   

   View Slide

9. Gatsbyͱ͸
   • "VUIPS,ZMF.BUIFXT!LZMFNBUIFXT
   • (JUIVC4UBS
   • OQN%PXOMPBET,NPOUI
   • W
   
   • r'JSTU$PNNJU
   • r!LZMFNBUIFXTXPSLJOHGVMMUJNFOPXPO!HBUTCZKT
   • rWϦϦʔε
   

   View Slide

10. ੩తδΣωϨʔλʔͷൺֱ
    • ϑϩϯτΤϯυͷٕज़Ͱ׬݁͢Δ΋ͷ͸
    গͳ͍

    +FLZMM3VCZ

    )VHP(P
    • ςϯϓϨʔτͷΧελϚΠζੑ
    • هࣄ͸खܰʹ.BSLEPXOͰॻ͖͍ͨ
    • ৽͍ٕ͠ज़ʹ৮Ε͍ͨ
    

    View Slide

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

    View Slide

12. Front-End Developer Handbook 2018
    *OFYQFDUT
    /PUIJOHXJMMDIBOHFPSTMPXUIFVTBHFPSQPQVMBSJUZ
    PG3FBDUGPSNBOZZFBSTUPDPNF
    (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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

15. GatsbyΛ࢖͏ϝϦοτ
    •०ͳٕज़ʹ·ͱΊͯखܰʹ৮ΕΒΕΔ
    • 18"41" (SBQI2- )551 4FSWJDF8PSLFS FUD
    •ΧελϚΠζ͠΍͍͢ςϯϓϨʔτߏ଄ʢ3FBDUʣ
    •දࣔϖʔδ͕ര଎ͳ18"41"ͱͯ͠ग़ྗͰ͖Δ
    •σʔλʔιʔε͸.BSLEPXO΍8PSEQSFTT +40/ͳͲ৭ʑͳํ๏͕બ୒Մೳ
    

    View Slide

16. View Slide

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

    View Slide

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

    View Slide

19. (BUTCZ%PDVNFOU
    

    View Slide

20. (BUTCZ1MVHJOT
    

    View Slide

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ΫΠοΫελʔτ
    

    View Slide

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Λઃܭ͠·ͨ͠ɻ
    

    View Slide

23. Gatsbyͷৄࡉ
    

    View Slide

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-*%&ʣ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

28. 4UBSUFSςϯϓϨʔτ
    

    View Slide

29. 4UBSUFSςϯϓϨʔτ
    

    View Slide

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

    View Slide

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

    View Slide

32. %BUB4PVSDF͔Βऔಘͨ͠σʔλΛ"45
    ʢ+40/ʣ
    ʹม׵͠

    3FBDUͷίϯϙʔωϯτʹQSPQTͱͯ͠౉͢
    δΣωϨʔλʔ
    

    View Slide

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

    δΣωϨʔλʔ
    

    View Slide

34. •#MB[JOHGBTU໠྽ͳ଎͞ύϑΥʔϚϯεͷ௥ٻ
    • $44ΠϯϥΠϯల։
    • ౤ػతͳઌಡΈɹMJOLSFMlQSFMPBEz
    • 4FSWJDF8PSLFS ΩϟογϡίϯτϩʔϧɾΦϑϥΠϯରԠ
    
    • +4ͷϑΝΠϧ෼ׂʢ8FCQBDLʣ
    • 131-1BUUFSO
    • )551QVTI
    •41"ʹΑΔεϜʔζͳϖʔδભҠ
    •΄΅ඪ४Ͱ18"Խ͕Մೳ
    දࣔ
    

    View Slide

35. ౤ػతͳઌಡΈ
    Լ૚ίϯςϯπͳͲ
    8FCQBDL+40/1
    ΠϯϥΠϯʹ$44ల։
    +4ͷϑΝΠϧ෼ׂ
    ࠷ॳʹඞཁͳ+4ͱ

    ޙ͔ΒͰ͍͍+4Λ෼ྨ
    131-1BUUFSO
    1VTI
    3FOEFS
    1SFDBDIF
    -B[ZMPBE
    දࣔ
    r(BUTCZͷ)5.-ΛݟΔ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    r'JSTUNFBOJOHGVMQBJOU
    

    View Slide

40. Gatsby
    Super Fast
    •(BUTCZΛ࢖͏ͱ

    ര଎αΠτϒϩά͕؆୯ʹͰ͖·͢ʂ
    •ࠓ೔͸ৄࡉͳ࢓૊ΈΛઆ໌͚ͨ͠Ͳ

    ෼͋Ε͹؆୯ʹͰ͖ͪΌ͍·͢ʂʂ
    •(BUTCZ͸०ͷٕज़ςϯί੝ΓͳͷͰ

    ϑϩϯτΤϯυษڧͷ୊ࡐͱͯ͠΋࠷ߴ
    ·ͱΊ
    

    View Slide

41. Gatsby Super Fast!!!
    

    View Slide