JAMstackアーキテクチャを用いたモダンWebサイト開発

Transcript

1. +".TUBDLΞʔΩςΫνϟ
   Λ༻͍ͨϞμϯ8FCαΠτ։ൃ 1)1
   $0/'&3&/$&
   '6,60,"
   
   Ӝాɹେو

2. ࣗݾ঺հ
   ໊લ
   Ӝా
   େو
   
   ձࣾ
   גࣜձࣾ'VTJD
   
   5XJUUFS
   !EBJLJOPIF
   
   ෱Ԭࡏॅ
   ೥

3. ࿩͢͜ͱ
   +".TUBDLͱ͸ʁ
   
   ϒϩάΛߏஙͯ͠ΈΔ
   
   ͳͥ+".TUBDLͳͷ͔ʁ
   
   'VTJD
   5FDI
   #MPH
   
   ࠷ޙʹ

4. +".TUBDLͱ͸ʁ

5. +".TUBDLͱ͸ʁ XJLJQFEJB
   
   δϟϜ
   ӳ
   +BN
   ͷޠݯ͸ɺ৯඼ͷδϟϜʹ༝དྷ͍ͯ͠Δͱਪଌ͞Ε͓ͯΓɺ
   lTPNFUIJOH
   TXFFU
   TPNFUIJOH
   FYDFMMFOUzʢ؁͍ײ͡ɺૉ੖Β͍͠ײ͡ʣ
   Λදͨ͠දݱͱͯ͠೥ʹੜͨ͡ݴ༿ͱ͞Ε͍ͯΔ

6. +".TUBDLͱ͸ʁ ؁ͯ͘ૉ੖Βָ͍͠ේͷͳ͍
   +".ηογϣϯͷΑ͏ͳ
   ΞʔΩςΫνϟʂ

7. +".TUBDLͱ͸ʁ

8. +".TUBDLͱ͸ʁ ܾ·ٕͬͨज़ ָේ ͸ͳ͍ʂ

9. +".TUBDLͱ͸ʁ J A M stack

10. +".TUBDLͱ͸ʁ J A M JavaScript API Markup

11. J JavaScript
    ΫϥΠΞϯτͷಈతͳॲཧ
    
    ϑϨʔϜϫʔΫ͸ࣗ༝
    
    7BOJMMB
    +BWB4DSJQUͰ΋

12. A API
    ࠶ར༻Մೳͳ"1*
    
    %#ॲཧ΍αʔόʔॲཧ͸શͯ"1*
    
    αʔυύʔςΟͰ΋ɺࣗ࡞Ͱ΋͍͍

13. A API

14. )FBEMFTT
    $.4 headlesscms.org

15. )FBEMFTT
    $.4

16. )FBEMFTT
    $.4

17. M Markup
    ࣄલϏϧυ͞Εͨ.BSLVQ
    
    4UBUJD
    4JUF
    (FOFSBUPSΛ࢖࣮ͬͯݱ

18. Data (API) M Markup Build Tool CDN (API) Webhook (API)

    σϓϩΠ࣌

19. Data (API) M Markup Build Tool CDN (API) σϓϩΠ࣌ Webhook

    (API)

20. M Markup Build Tool Data (API) CDN (API) σϓϩΠ࣌ Webhook

    (API)

21. M Markup Build Tool M Data (API) CDN (API) σϓϩΠ࣌

22. M Markup CDN (API) Build Tool Data (API) M σϓϩΠ࣌

23. M Markup CDN (API) σϓϩΠޙ Browser M

24. M Markup σϓϩΠޙ Browser J A A A

25. ࣄલϏϧυ.BSLVQΛ࣮ݱ͢ΔͨΊͷ
    4UBUJD
    4JUF
    (FOFSBUPS
    44( 4UBUJD(FODPN

26. ϒϩάΛߏஙͯ͠ΈΔ
    Version Control, Data HeadlessCMS CDN, Build, Auth Static

    Site Generator

27. ϒϩάΛߏஙͯ͠ΈΔ #VJME &EHF generated by

28. ϒϩάΛߏஙͯ͠ΈΔ 4UBSU
    XJUI
    B
    5FNQMBUF

29. ϒϩάΛߏஙͯ͠ΈΔ 4UBSU
    XJUI
    B
    5FNQMBUF Click

30. ϒϩάΛߏஙͯ͠ΈΔ
    

31. ϒϩάΛߏஙͯ͠ΈΔ
    

32. ϒϩάΛߏஙͯ͠ΈΔ
    

33. ϒϩάΛߏஙͯ͠ΈΔ
    

34. ϒϩάΛߏஙͯ͠ΈΔ
    

35. ϒϩάΛߏஙͯ͠ΈΔ

36. ϒϩάΛߏஙͯ͠ΈΔ

37. ϒϩάΛߏஙͯ͠ΈΔ

38. ϒϩάΛߏஙͯ͠ΈΔ

39. ύϑΥʔϚϯε εέʔϥϏϦςΟ ηΩϡΞ ্͕҆Γ ΑΓྑ͍DX ͳͥ+".TUBDLͳͷ͔ʁ

40. ύϑΥʔϚϯε Browser HTML Program WordpressͳͲ

41. ύϑΥʔϚϯε Browser HTML JAMstack

42. εέʔϥϏϦςΟ WordpressͳͲ Server ߴෛՙʂ

43. εέʔϥϏϦςΟ CDN JAMstack CDN CDN CDN

44. ηΩϡΞ Browser Server Database WordpressͳͲ ѱҙͷ͋Δ ϦΫΤετ ߈ܸʂ

45. ηΩϡΞ Browser A A M ੩తͳϑΝΠϧͷΈ αʔόʔॲཧ͸૸Βͳ͍ όοΫΤϯυͱ ϑϩϯτΤϯυͷ෼཭ Database

    JAMstack

46. ্͕҆Γ

47. ্͕҆Γ FREE FREE FREE

48. ΑΓྑ͍%9

49. Database Build, Hosting, Function Client ΑΓྑ͍%9

50. Database Build, Hosting, Function Push Notification Payment Client ΑΓྑ͍%9

51. Database Build, Hosting, Function Push Notification Payment Client ΑΓྑ͍%9

52. ࣗ༝ʂ

53. Fusic Tech Blog

54. Fusic Tech Blog J A M stack IUUQTUFDIGVTJDDPKQ

55. Fusic Tech Blog

56. Fusic Tech Blog 1VTI

57. Fusic Tech Blog )PPL

58. Fusic Tech Blog )PPL

59. Fusic Tech Blog #VJME

60. Fusic Tech Blog M #VJME

61. Fusic Tech Blog M %FQMPZ

62. Fusic Tech Blog M %FQMPZ

63. Fusic Tech Blog

64. Fusic Tech Blog

65. Fusic Tech Blog

66. Fusic Tech Blog چϒϩά ৽ϒϩά

67. ࠷ޙʹ A single page site A giant web app

68. ࠷ޙʹ A single page site A giant web app +".
    4QPU

    'SPN
    +FTTJDB
    -PSE
    
    &WFSZPOF
    JT
    B
    %FWFMPQFS
    JO
    +".TUBDL
    $POG

69. 
    +".TUBDLͱ͸ʁ
    ˠ
    +ɺ"ɺ.ͷج४ʹԊͬͨΞʔΩςΫνϟ
    
    ϒϩάΛߏஙͯ͠ΈΔ
    ˠ
    ̍෼Ͱ؆୯ʹແྉͰߏஙͰ͖Δʂ
    
    ͳͥ+".TUBDLͳͷ͔ʁ
    ˠ
    ଎͍ʂڧ͍ʂ҆શʂ͍҆ʂָ͍͠ʂ
    
    'VTJD
    5FDI
    #MPH
    ˠ
    
    
    
    ࠷ޙʹ
    ˠ
    +".
    4QPUͰ࢖ͬͯΈΑ͏ʂ

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