Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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

nnjyami
March 24, 2018

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

nnjyami

March 24, 2018
Tweet

Other Decks in Programming

Transcript

  1. 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೔
  2. Gatsbyͱ͸ • "VUIPS,ZMF.BUIFXT!LZMFNBUIFXT • (JUIVC4UBS  • OQN%PXOMPBET,NPOUI • W

      • r'JSTU$PNNJU • r!LZMFNBUIFXTXPSLJOHGVMMUJNFOPXPO!HBUTCZKT • rWϦϦʔε
  3. 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
  4. 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
  5. 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
  6. 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Λઃܭ͠·ͨ͠ɻ
  7. 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-*%&ʣ
  8. •#MB[JOHGBTU໠྽ͳ଎͞ύϑΥʔϚϯεͷ௥ٻ • $44ΠϯϥΠϯల։ • ౤ػతͳઌಡΈɹMJOLSFMlQSFMPBEz • 4FSWJDF8PSLFS ΩϟογϡίϯτϩʔϧɾΦϑϥΠϯରԠ  •

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