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

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

Shagamii
January 28, 2019

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

Shagamii

January 28, 2019
Tweet

More Decks by Shagamii

Other Decks in Programming

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