Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

34481b1414dafff115c1e4ee39df92a5?s=47 Shagamii
January 28, 2019

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

34481b1414dafff115c1e4ee39df92a5?s=128

Shagamii

January 28, 2019
Tweet

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" 1SPHSFTTJWF8FC"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. ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ