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

Transcript

1. 1.

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

2. 2.

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

3. 3.

   ࣗݾ঺հ

4. 4.

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

5. 5.

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

6. 6.

   ͜Μͳϒϩά✍

7. 7.

   ͜Μͳϒϩά IUUQTTIBHBNJJUFDI

8. 8.

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

9. 9.

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

10. 10.

    +".TUBDLͱ͸ͳΜͧ

11. 11.

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

    APIs, and prebuilt Markup. IUUQTKBNTUBDLPSH
12. 12.

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

13. 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. 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. 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. 16.

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

17. 17.

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

18. 18.

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

19. 19.

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

20. 20.

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

21. 21.

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

    IUUQTEFWFMPQFSTHPPHMFDPNXFCQSPHSFTTJWFXFC BQQTDIFDLMJTU
22. 22.

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

23. 23.

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

24. 24.

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

25. 25.

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

    
    /FUMJGZ
    (BUTCZ
26. 26.

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

27. 27.

    ೋ೔ؒͰ࡞Δͧʂ

28. 28.

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

29. 29.

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

30. 30.

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

31. 31.

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

32. 32.

    ·ͱΊ☀

33. 33.

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

34. 34.

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