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