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

Transcript

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

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

3. ࣗݾ঺հ

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

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

6. ͜Μͳϒϩά✍

7. ͜Μͳϒϩά IUUQTTIBHBNJJUFDI

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

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

10. +".TUBDLͱ͸ͳΜͧ

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

    APIs, and prebuilt Markup. IUUQTKBNTUBDLPSH

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

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

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*ͷΈ

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 ੩తαΠτͳͲʹࣄલʹίϯςϯπ͸Ϗϧυ

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

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

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

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

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

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

    IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWFXFC BQQTDIFDLMJTU

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

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

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

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

    
    /FUMJGZ
    (BUTCZ

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

27. ೋ೔ؒͰ࡞Δͧʂ

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

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

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

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

32. ·ͱΊ☀

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

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