【爆速】２日で就職のために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. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ