【爆速】２日で就職のためにJAMstackなハイパフォブログを作った話！！

Transcript

1. ʲര଎ʳ
   ̎೔Ͱब৬ͷͨΊʹ
   +".TUBDLͳϋΠύϑΥϒϩάΛ
   ࡞ͬͨ࿩ʂʂ✌
   ௒
   

   View Slide

2. ΞδΣϯμ
   ࣗݾ঺հ
   ͜Μͳϒϩά
   ࢖ٕͬͨज़ελοΫʹ͍ͭͯ
   +".TUBDLͱ͸ͳΜͧ
   ೋ೔ؒͰ࡞Δͧʂ
   

   View Slide

3. ࣗݾ঺հ
   

   View Slide

4. ࣗݾ঺հ
   ࡔ্ྤҰ
   5XJUUFS!3ZVJDIJ4BLBHBNJ
   ౦ژཧՊେֶ޻ֶ෦৘ใ޻ֶՊ̏೥
   ೥݄೔ ࡀ
   
   ࡾॏग़਎
   ϑϩϯτΤϯυେ޷͖ΤϯδχΞ
   

   View Slide

5. ࣗݾ঺հ
   αΠόʔͷΠϯλʔϯͰ΍ͬͨ͜ͱ
   &OHJOFFS+PCʢ̍ϲ݄ͪΐ͍ʣ
   "CFNF57ϑϩϯτΤϯυνʔϜ
   ݹ͘ͳ͍ͬͯͨը໘ͷશ໘վम
   3FBDUKT
   SYKT
   

   View Slide

6. ͜Μͳϒϩά✍
   

   View Slide

7. ͜Μͳϒϩά
   IUUQTTIBHBNJJUFDI
   

   View Slide

8. ͜Μͳϒϩά
   ͳΜͰ࡞͔ͬͨʜ
   ब׆ʂ
   Կ͔ݟͤΕΔ΋ͷཉ͍͠
   ٕज़తؔ৺
   ύϑΥʔϚϯε΁ͷؔ৺
   

   View Slide

9. ͜Μͳϒϩά
   ࢖ٕͬͨज़
   +".TUBDL HBUTCZ DPOUFOUGVM OFUMJGZ
   
   

   View Slide

10. +".TUBDLͱ͸ͳΜͧ
    

    View Slide

11. +".TUBDLͱ͸ͳΜͧ
    Modern web development architecture based on client-side
    JavaScript, reusable APIs, and prebuilt Markup.
    IUUQTKBNTUBDLPSH
    

    View Slide

12. +".TUBDLͱ͸ͳΜͧ
    Ҿ༻ݩɿIUUQTKBNTUBDLPSH
    

    View Slide

13. +".TUBDLͱ͸ͳΜͧ
    Any dynamic programming during the request/response cycle is
    handled by JavaScript, running entirely on the client. This could be any
    frontend framework, library, or even vanilla JavaScript.
    +BWB4DSJQU
    ಈతʹϦονͳಈ͖Λ͢ΔͨΊͷKBWBTDSJQU
    

    View Slide

14. +".TUBDLͱ͸ͳΜͧ
    All server-side processes or database actions are abstracted into
    reusable APIs, accessed over HTTPS with JavaScript. These can be
    custom-built or leverage third-party services.
    "QJT
    αʔόʔαΠυ͸࠶ར༻Մೳͳ"1*ͷΈ
    

    View Slide

15. +".TUBDLͱ͸ͳΜͧ
    Templated markup should be prebuilt at deploy time, usually using a
    site generator for content sites, or a build tool for web apps.
    .BSLVQ
    ੩తαΠτͳͲʹࣄલʹίϯςϯπ͸Ϗϧυ
    

    View Slide

16. +".TUBDLͱ͸ͳΜͧ
    αʔόʔʹϦΫΤετΛඈ͹ͯ͠ɺIUNMΛੜ੒͢Δ࢓૊Έ
    Ͱ͸ͳ͘ɺ
    ίϯςϯπɾݟͨ໨͸ࣄલʹϏϧυ͓͖ͯ͠ɺ
    αʔόʔαΠυ͸ඞཁͳ৘ใΛऔͬͯ͘Δ"QJ܈Λ༻ҙ͠ɺ
    ͦΕΒΛಈతʹಈ͔ͨ͢ΊʹKBWBTDSJQUΛ༻͍Δɻ
    ͭ·Δͱ͜Ζʜʢ๻ͷղऍʣ
    

    View Slide

17. +".TUBDLͱ͸ͳΜͧ
    Կ͕͍͍ͷ͔
    Ϗϧυͨ͠΋ͷΛDEO্ʹIPTUJOH͓͚ͯ͠ΔͷͰ଎͍
    ϦΫΤετΛड͚ΔͨͼʹαʔόʔαΠυͰෳࡶͳॲཧΛ͢Δ͜ͱ͕
    ͳ͍ͨΊɺ҆ՁͰεέʔϥϒϧɻ
    جຊతʹ͸ɺαʔόʔαΠυΛҙࣝ͢Δඞཁ͕ͳ͍ͷͰɺϑϩϯτΤϯυ
    ͷ։ൃʹूதͰ͖Δ
    

    View Slide

18. ࢖ٕͬͨज़ελοΫʹ͍ͭͯ⚒
    

    View Slide

19. ࢖ٕͬͨज़ελοΫʹ͍ͭͯ
    HBUTCZKT
    3FBDU੡ͷ੩తαΠτδΣωϨʔλʔ
    $POUFOUGVMͳͲͷ$.4౳ͷ࿈ܞͳͲ༷ʑͳϓϥάΠϯ
    18"ରԠ
    SFBDUIFMNFU
    5ZQFTDSJQU
    (SBQIRMʹΑΔσʔλऔಘ
    ࣍ͷϖʔδͷσʔλΛ1SFGFUDI
    &UDʜ
    

    View Slide

20. ࢖ٕͬͨज़ελοΫʹ͍ͭͯ
    ੩తͳ3FBDUͬͯͳΜ΍ͶΜ
    Ϗϧυ࣌
    ੩తͳIUNM
    ੩తͳKTPO
    FUDʜ
    ΞΫηε࣌
    ࠷ॳ͸੩తͳIUNM
    ͦΕҎ߱͸KTPOΛGFUDI͢Δ41"
    

    View Slide

21. ࢖ٕͬͨज़ελοΫʹ͍ͭͯ
    18"
    1SPHSFTTJWF8FC"QQTͷུ
    (PPHMF͕ओʹࡦఆ͢ΔɺXFCϖʔδʹ͓͍ͯωΠςΟϒͷΑ͏ͳ69ମݧ
    Λ࣮ݱ͢Δٕज़
    )PNFը໘΁ΞΠίϯͷ௥Ճ
    ΩϟογϡʹΑΔΦϑϥΠϯͰͷಈ࡞
    1VTI௨஌ ࠓճ͸ͳ͠
    
    &UDʜ
    IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWFXFC
    BQQTDIFDLMJTU
    
    

    View Slide

22. ࢖ٕͬͨज़ελοΫʹ͍ͭͯ
    18"
    

    View Slide

23. ࢖ٕͬͨज़ελοΫʹ͍ͭͯ
    $POUFOUGVM
    )FBEMFTT$.4
    ౤ߘͷϞσϧΛఆٛ͢Δ͚ͩͰهࣄ͕ॻ͚Δ
    هࣄಉ࢜ͷ࿈ܞ΋༻ҙ
    HBUTCZʹDPOUFOUGVM͔ΒσʔλΛऔͬͯ͘ΔϓϥάΠϯ
    /FUMJGZ΁ͷฤू࣌ͷϑοΫ
    

    View Slide

24. ࢖ٕͬͨज़ελοΫʹ͍ͭͯ
    /FUMJGZ
    ੩తαΠτΛϗεςΟϯά
    ಠࣗυϝΠϯͷઃఆ
    HJUIVCͱ࿈ܞͯ͠Ϗϧυ
    IUUQରԠ
    &UDʜ
    

    View Slide

25. ࢖ٕͬͨज़ελοΫʹ͍ͭͯ
    ࠓճͷ৔߹
    KBWBTDSJQU
    "QJT
    NBSLVQ
    3FBDUKT (BUTCZ
    
    $POUFOUGVM /FUMJGZ
    $POUFOUGVM /FUMJGZ (BUTCZ
    

    View Slide

26. ࢖ٕͬͨज़ελοΫʹ͍ͭͯ
    ύϑΥʔϚϯεܭଌʢ-JHIUIPVTFʣ
    (PPHMF͕ఏڙ͢Δ΢ΣϒαΠτΛղੳͯ͠ɺ඼࣭ʹؔ͢Δ
    ࢦඪ΍޲্ͷͨΊͷରࡦΛࣔͯ͘͠ΕΔ044
    ௒଎
    

    View Slide

27. ೋ೔ؒͰ࡞Δͧʂ
    

    View Slide

28. ೋ೔ؒͰ࡞Δͧʂ
    $POUFOUGVMͰ"1*Λ࡞Δʢ෼ʣ
    ΞΧ΢ϯτొ࿥ʢ̑෼ʣ
    .PEFMΛ࡞Δʢ෼ʣ
    

    View Slide

29. ೋ೔ؒͰ࡞Δͧʂ
    (BUTCZͰ3FBDUΛΰϦΰϦॻ͘ʢ̍೔൒ʣ
    CPJMFSQMBUFΛੜ੒ʢ̑෼ʣ
    DPOUFOUGVMपΓͷϓϥάΠϯΛೖΕΔʢ෼ʣ
    σʔλशಘͷHSBQIRMΛॻ͘ʢ෼ʣ
    

    View Slide

30. ೋ೔ؒͰ࡞Δͧʂ
    هࣄϖʔδͳͲಈతʹੜ੒͍ͨ͠ϖʔδͷઃఆΛHBUTCZOPEFKT
    ʹॻ͘ʢ෼ʣ
    ͋ͱ͸ඞཁʹԠͯ͡ϓϥάΠϯΛೖΕͭͭɺ3FBDUΛΰϦΰϦॻ͘ɻ
    

    View Slide

31. ೋ೔ؒͰ࡞Δͧʂ
    /FUMJGZʹσϓϩΠ͢Δʢ෼ʣ
    ΞΧ΢ϯτొ࿥ʢ̑෼ʣ
    Ϗϧυ͢ΔϨϙδτϦͷొ࿥ɺ؀ڥม਺ɺϏϧυίϚϯυͷઃఆ౳ʢ෼ʣ
    ΧελϜυϝΠϯͷઃఆʢ෼ʣ
    

    View Slide

32. ·ͱΊ☀
    

    View Slide

33. ·ͱΊ
    ΈΜͳ΋͓Ո΁ؼͬͯ࡞ͬͯͶʂ
    ਫ༵೔ʹ͸σϓϩΠ׬ྃͯ͠Δ͸ͣ
    

    View Slide

34. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ
    

    View Slide