{"componentChunkName":"component---src-components-single-blog-components-single-post-js","path":"/blog/history-of-jamstack","result":{"data":{"markdownRemark":{"html":"<h2 id=\"jamstackの必然性\">Jamstackの必然性</h2>\n<p>海外ではすでにWeb開発のトレンドとして定着しつつあるJamstackについては<a href=\"/blog/what-is-jamstack\">「これだけ読めばOK！ Jamstackのすべてがわかります」</a>で紹介しましたが、今回はJamstackが現れるまでの歴史を簡単に紹介します。</p>\n<div class=\"rich-card-link\">\n<a href=\"/blog/what-is-jamstack/?inline=id61\">\n<div class=\"grid\">\n<div class=\"r-card-img\">\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 52.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB8ElEQVQoz4WSzW8SURTF+/dpW2AG2ppgY2JKibFoP6y1BWZgECF+tJRCP1Kr2ARTNVosMwzY0IKUYk1jjGsTd25duP+ZeUxaihgXJ/e+mfPOO+++07cyNM3eaJzaeIqqb4lDf4oDf4oP3iSGS8WQo5TkCGU5LKpYS3btgb6YbwZjYpEvD3Y4iWzzOZbnNLHDgW8J3aFgulUKzvvkpTQlSaUsKRhSW7SnoD4YxnAoFPtDHQiiO1Sx0XBEKF7LkrhaIzFS4aW0jCmr/3ZYcmvthVXdURsaZbdCZTjCq7E4D0df8yOZZv/mCllHjoocbrvsJWhY87DtG2ezUXnrfUThSpA3++PkHmf4HQnw0++l4Ixjyuf8vx3aTaeoNatdV5JdV5T3M3f5VZjk+0KAmmce3Z7fBX63YOdH06NhDsUoD2uUPRoVKU5lREOXNXR3XPwr2ZxuM2dXthrdqbJ3KShiUw9kaN7bohXOcTS7wbfVIl+X33Eaz4sknKjbVMcWxQN2i7YdOlVBqN/K8nFyTaAxtU4rlKM595Tj+S2as5t8Ul7QCj7neOEZzblNDm+kMT2xiw6FO4ciXFnkozsbNKbXBay+PpERmaxefyJ6cejtVRpTa9QD2f9c+XKwncMBG/0hrJxaBwoMhikOnENkuOtx/gDzuT5eCl/nMAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"social-card\"\n        title=\"social-card\"\n        src=\"/static/acaf0bbb48b23e5a293204137f92881c/5a190/blog-fb-60.png\"\n        srcset=\"/static/acaf0bbb48b23e5a293204137f92881c/772e8/blog-fb-60.png 200w,\n/static/acaf0bbb48b23e5a293204137f92881c/e17e5/blog-fb-60.png 400w,\n/static/acaf0bbb48b23e5a293204137f92881c/5a190/blog-fb-60.png 800w,\n/static/acaf0bbb48b23e5a293204137f92881c/c1b63/blog-fb-60.png 1200w\"\n        sizes=\"(max-width: 800px) 100vw, 800px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n    </span></p>\n</div>\n<div class=\"r-card-text\">\nこれだけ読めばOK！ Jamstackのすべてがわかります\n</div>\n</div>\n</a>\n</div>\n<p>「静 → 動 → 静」という原点回帰の流れと、Jamstackの登場は必然的であったことが見えてくると思います。</p>\n<h2 id=\"ウェブサイトの始まり\">ウェブサイトの始まり</h2>\n<div class=\"rich-card-link\">\n<a href=\"/blog/what-is-static-website/?inline=id61\">\n<div class=\"grid\">\n<div class=\"r-card-img\">\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 52.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABsElEQVQoz42RTU8TURiF+UXuJXFnwgKJ7UzBrxBMSJRoIMpXYv2KJOqChQElgUyZmRYNFBpoO525U2IcgU7aWYDRKAH+gj/iMXOnlLaLwcXJ/TjnPfe87+0RpkoLhoLThDBUuVZWbyCMJCKbwjFCnUJHTRd6Oi/axTfZzY2wV3iFbd7BWhlAZNXI1FD+z9AxmgWmSlFLUtRH+RsE/LQXqXwaxpbJFRxTvejksoShyF1L4by9ysaHK/z2v3B8qHN2usEPL4Ol9SPMlBxJbMLotejFMEmgD3BamsPVRvn4Ls2hqHB25FLSriPMQTrrugzPLy9IhXJmkFr+DX+qBayFab69v4aTf05+uU8mbG+53bRl2CL1RPOcwNL6qGaHCZZGOJnvxTb6sVbvSi42YUQkcXND/KotceTNU7fT1EpT7G0/plaeoiHmaIiX+OVJ6k5a7nc/34szjIiD4hPq9jP2dybwtsb4un6fg+JTfGsa35rhe+ERvjUrdWGA2BnaeoLq2m0pDrG/PY639VDuG+IFgftapg7TeZsPcHO3ZGexCc/bd/RktIbzbM01gt127v6UfzKoVowFPdwcAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"social-card\"\n        title=\"social-card\"\n        src=\"/static/798fb36b19e8c87dc17f1c7535564e23/5a190/blog-fb-14.png\"\n        srcset=\"/static/798fb36b19e8c87dc17f1c7535564e23/772e8/blog-fb-14.png 200w,\n/static/798fb36b19e8c87dc17f1c7535564e23/e17e5/blog-fb-14.png 400w,\n/static/798fb36b19e8c87dc17f1c7535564e23/5a190/blog-fb-14.png 800w,\n/static/798fb36b19e8c87dc17f1c7535564e23/c1b63/blog-fb-14.png 1200w\"\n        sizes=\"(max-width: 800px) 100vw, 800px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n    </span></p>\n</div>\n<div class=\"r-card-text\">\n静的サイトのメリット・デメリットをWordPressと比較して解説\n</div>\n</div>\n</a>\n</div>\n<p>上の記事で紹介したように世界で一番最初のウェブサイトはHTMLだけで作られた次のような静的サイトでした。</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 47.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAKABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAAAQACBf/EABQBAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhADEAAAAe5pQmP/xAAVEAEBAAAAAAAAAAAAAAAAAAABIP/aAAgBAQABBQIr/8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAIP/aAAgBAQAGPwJf/8QAFhAAAwAAAAAAAAAAAAAAAAAAABEg/9oACAEBAAE/ISp//9oADAMBAAIAAwAAABBjD//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABsQAAEEAwAAAAAAAAAAAAAAAAEAEXGRICFh/9oACAEBAAE/EAcMNQUJ2U3TeH//2Q=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"first-website\"\n        title=\"first-website\"\n        src=\"/static/0ba317a6d2d18e5bd6cd00ee6b96bc62/4b190/first-website.jpg\"\n        srcset=\"/static/0ba317a6d2d18e5bd6cd00ee6b96bc62/e07e9/first-website.jpg 200w,\n/static/0ba317a6d2d18e5bd6cd00ee6b96bc62/066f9/first-website.jpg 400w,\n/static/0ba317a6d2d18e5bd6cd00ee6b96bc62/4b190/first-website.jpg 800w,\n/static/0ba317a6d2d18e5bd6cd00ee6b96bc62/e5166/first-website.jpg 1200w,\n/static/0ba317a6d2d18e5bd6cd00ee6b96bc62/c1291/first-website.jpg 1256w\"\n        sizes=\"(max-width: 800px) 100vw, 800px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n    </span></p>\n<p><a href=\"http://info.cern.ch/hypertext/WWW/TheProject.html\">http://info.cern.ch/hypertext/WWW/TheProject.html</a></p>\n<h2 id=\"lampの登場\">LAMPの登場</h2>\n<p>静的サイトはシンプルな反面、できることも限られており、「ユーザーごとに違うページを表示する（Customised Contents）」というような複雑な機能を持つことはできませんでした。</p>\n<p>そこで開発されたのがプログラミング言語のPHPで、これをコアとした「LAMP」と呼ばれるテクノロジーが2000年代初頭からよく使われるようになります。</p>\n<p>LAMPは<strong>L</strong>inux（オペレーティングシステム）、<strong>A</strong>pache（HTTP/Webサーバー）、<strong>M</strong>ySQL（データベース）、<strong>P</strong>HP（サーバーサイド言語）の頭文字を取ったもので、このLAMPの最大の功績はサーバーで様々な処理を行えるようにして、ウェブサイトで複雑な操作をできるようにしたことです。</p>\n<p>LAMPは今でも現役のテクノロジーで、WordPressはLAMPで作られた代表的なシステムです。</p>\n<h2 id=\"meanの登場\">MEANの登場</h2>\n<p>それまでの「ユーザーに情報を表示するだけ」という「一方通行」の静的サイトから、LAMPによって「ユーザーの操作に応じて表示が変わる」という「双方向」の動的サイトへとウェブサイトは進化を遂げました。</p>\n<p>LAMPはその長い歴史おかげでノウハウやサポートの体制が充実している反面、登場からすでに10年以上が経過し、パフォーマンスやセキュリティの問題、またそれぞれのテクノロジーの習得に時間がかかる、といった難しさも無視できなくなってきます。</p>\n<p>そこで2011年ごろから使われ始めたのが「MEAN」と呼ばれるもので、これもそれぞれのテクノロジー、<strong>M</strong>ongoDB（データベース）、<strong>E</strong>xpress（バックエンドのフレームワーク）、<strong>A</strong>ngular（フロントエンドのフレームワーク）、<strong>N</strong>ode（バックエンド）の頭文字に由来しています。</p>\n<p>MEANの最大の特徴は、この4つのテクノロジーすべてがJavaScriptという1つのプログラミング言語によって書ける点で、これはJavaScriptの機能が拡張したことで実現しました。</p>\n<p>そのためLAMPのような複雑さを抑えながらも、LAMPと同じような複雑なウェブサイト（ウェブアプリケーションとも。違いについては下の記事を参照）を制作できるようになりました。</p>\n<div class=\"rich-card-link\">\n<a href=\"/blog/differences-website-and-webapplication/?inline=id61\">\n<div class=\"grid\">\n<div class=\"r-card-img\">\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 52.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABjklEQVQoz5WTyUoDQRCG8yTiu4gg4pJFxSVqokZxBaO4IVEPevMgHkSMkxDjZDEKWWacmMk4kriBFwWf55PpxJUR9FBU09X19f9X047LqIefoUbcH1mPd6OfuClILtSIVXfXs304fitYTaWYh73dMY72fVSSPWjRT+i/gJYyRfJQjrcxt+KnoamL4JqfXMSL9l+FX+1q8T6MzDwbOyEamweYX/Vjyh4K0h+B77Da2kkpOsqLckAxHCIpbZKWt9AiHag/ztoCvx/oEjkfbkWP+TBTm8gHHZiJPtR6zb6vDnzfVCQnynEnhXA7t7lFHrUN7tUVri9m0c+mMFIB9MQwitSJKjm/jcdGoQs94cPMTGKkA1QFMEQ1uyDgRmoUIz2OLg9TkocoJ/0UT3pFn61lS52RGuNBXRfKzMwU12cT3FzMUMkGhbqb82lu80tUs0HKyRGKsV+An9Jd5A5beNJ3RNzll3mu7PP6cCQusWBPpW0BtsZiN0eH7e+wbJ16haWaxcFanHq5ivd/PJrdo7wBVn5QueV/kYQAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"social-card\"\n        title=\"social-card\"\n        src=\"/static/d109a7c51997745d1606c93768b56f57/5a190/blog-fb-4.png\"\n        srcset=\"/static/d109a7c51997745d1606c93768b56f57/772e8/blog-fb-4.png 200w,\n/static/d109a7c51997745d1606c93768b56f57/e17e5/blog-fb-4.png 400w,\n/static/d109a7c51997745d1606c93768b56f57/5a190/blog-fb-4.png 800w,\n/static/d109a7c51997745d1606c93768b56f57/c1b63/blog-fb-4.png 1200w\"\n        sizes=\"(max-width: 800px) 100vw, 800px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n    </span></p>\n</div>\n<div class=\"r-card-text\">\n【2分でわかる】WebサイトとWebアプリの本質的な違い\n</div>\n</div>\n</a>\n</div>\n<p>MEANによって作られたウェブサイトはSPA（Single Page Application）とも呼ばれ、ここにある\"Single Page\"という語は、MEANがウェブサイトを表示する方法に由来しています。</p>\n<p>つまり、MEANのウェブサイトで使われるのは一つのHTMLページ（=Single Page）だけであり、そのページの上でJavaScriptがページのUIや複雑な処理、ページ移動などを行っているのです。</p>\n<p>そのため、ページ移動や処理ごとに毎回サーバーとの通信が発生していたLAMPよりも速く、ダイナミックにユーザーとの双方向通信を行うことが可能となっています。</p>\n<div class=\"rich-card-link\">\n<a href=\"/blog/what-is-spa/?inline=id61\">\n<div class=\"grid\">\n<div class=\"r-card-img\">\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 52.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAABr0lEQVQoz3VTaU/CQBTsHwS7LfFAxSvexCNi1CjaBYso3qBVjAlqRE00GgPLqQLilfgD/DdjdoGKWD9M3svbebMz2VZKqT5YQqFgqg9phSJh8+GuKfBrzqvVntQ4YApHdUlewo0ziEfPPO76dmCQMzBVQ4pz/jEi/R1SgSTx48XlQaF5AQfuAEIDccyQBOIOHdnahVaCrMF6jZiUfbjt2cP1yDm06RiOWjaxpR7hStWRaRCs17AWdFAklFVEZQOX2gW+NsMoyrO4V3Uw1W/prKYjIjNCwWQNyaaln8phn8e93YtThxc3KkWaUHFm8uyLlZ5QU1RiREOucxWF4V0U3RG8zR3jxRPF86QhZiV3BOUxA+XxfZQmDLzOHqMwtIPiaBilsT1Rs84VU1TiTaYtgIfedTz0boj62L8lLsm51lCqCnFxfp7vDiHTqiPfFRI8jnTz8t/ISbkahWgCCZtXEMtTh3hfiAknYpFoZjwzvlIfue5ReM/d8shcgNd3bwxPg9vC8fPkAT4WT/Cpx4X7xt1/PmyKbHuwErmjEjvftYaMcwXZjqAAj5ty+MEs/pZvDKY5CJmJi8oAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"social-card\"\n        title=\"social-card\"\n        src=\"/static/5e186ce91a908989368285b3f22e17e2/5a190/blog-fb-69.png\"\n        srcset=\"/static/5e186ce91a908989368285b3f22e17e2/772e8/blog-fb-69.png 200w,\n/static/5e186ce91a908989368285b3f22e17e2/e17e5/blog-fb-69.png 400w,\n/static/5e186ce91a908989368285b3f22e17e2/5a190/blog-fb-69.png 800w,\n/static/5e186ce91a908989368285b3f22e17e2/c1b63/blog-fb-69.png 1200w\"\n        sizes=\"(max-width: 800px) 100vw, 800px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n    </span></p>\n</div>\n<div class=\"r-card-text\">\nSPAの「シングルページ」とは何か？仕組み・メリット・デメリットをわかりやすく解説\n</div>\n</div>\n</a>\n</div>\n<p>MEANの１番の功績は、管理レイヤーと表示レイヤーとを明確に分離するアーキテクチャーを浸透させたことです。</p>\n<p>それまでのLAMPのウェブサイトは、monolithic（モノリシック／一枚岩）とも呼ばれる作りで、管理レイヤー（サーバー or バックエンド）と表示レイヤー（クライアント or フロントエンド）が一体化していました。</p>\n<p>この問題は、一部分の変更が全体に影響を及ぼしてしまうことで、例えばユーザーが見ている「表示レイヤー」のデザインを一部変える場合にも、それがどのようにサーバーという「管理レイヤー」に影響を及ぼすかという、いわゆる「副作用」を考慮する必要がありました。</p>\n<p>これは当時、表示レイヤー側に大きな処理を担えるほどの力がなく、管理レイヤー側がほとんどの機能を担当していたからです。</p>\n<p>しかしMEANが現れた頃には、JavaScriptの能力が上がっており、これまで管理レイヤーで行っていた作業の一部を表示レイヤー側でも行えるようになっていました。</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 58.50000000000001%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAMCAYAAABiDJ37AAAACXBIWXMAAAsTAAALEwEAmpwYAAADhElEQVQoz01PXUxbBRg9pW5M8UGzB41xmiV1ZJFkG8lc2HQ6Q7BrYGVIF9jalXZ0o6N/97aUe8sG5d71TyitK9DWgl3BAW03maVXCmVQYFlkypguOlkwM9EHZzRmD87Ha1pnsofznS/nnO/L94EimCmaZKdsJMtRJoZzd/s5N+PnKMLO2cwMR5PMFEWwKZpkOdsTUMZuzmn3pXqd/an8vI0s5PJI48TZNkTMXqSoAcSb3bhG9iCXdGAipEc8pMOA0wRxkwPZjjAm2/uR0PZgROPCJ/1RjF5KI+qncWXYhvEQiZGACeB/5bFsDpctWyNkVt6jndWwZ299blbNJ8/oZi+riC8/bSz91teBjGWwYokINWfVXuXMSY90wG8T8A+O4pu0cdvNFFV1PdH6QXa8+S3wOR5fkcHStc6oekk3qJzTOnRXYvb+6bG6xly88cRM9Lho3XcOq3Rg31pX1Lio6tXPKnqUod2ruByh8cW4uWE2oXItTDR2ZseaDAgyHuEjYz+qa6YjlY7bnvd+uVU+OX7z7kruYdQ5dP/1ZGAPDhxYQX1tWiFWXk/s+/3x257WJD5yuLcCKPYGEoPz6ftT/tiqKBX1ACcVWiHP8wLZ4eGr4pZkQB3/YSTUt/D46/l7/BL3PW9l+pQGw2dQK+JWcWX4hmLhJ69Cu2wxyIdEAIQT8WlqdXGDv73wgA+HJkOwGh3PnNLEcLo2Brk+A6XsGn3o4MAfdgsZnMvc+LE3GNOFRq+CcVk3t5IZUMczL9UeGeP37PLV7N8fgEYmAWVoOc8lM38PXUrdAU0ywovsaRjUcUFbkRvNrTMl5bsC25zOPgDD4Hm+BAAYm3/zx8dMWPyNF7x/0Ff22qvO5yr2yuFpQj6DOc679e7Gd9tBEazQaryAWkkLqt59GeLKihJlw+7nN9b/FADv4J9HfyHQGyxq09s3zaal2FL2CqoOuVAvlbxQI67bWVddV5xfuJKLYO3eHYAimE3aU4QgL9ZLG56VSmRlRw7L9jbUybf8vP5QcLEvXNRm6BJSBFN8RqUv5I5WK1+USupLpZIPy6WS+u1NjRrh2NBIUSQyKgRNsgVYjV3wuYbz3xVecHUF0G6y/+cTDDqJ7kLfbuoGY/PCarTDoj8P9pwPNvOF/GEFP1920iT7BkUwO/LcYXGIOswO0dMaRTClFMG8+bRGk+z/XOif6Dv+BS9Zr7igR8KJAAAAAElFTkSuQmCC'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"lamp-mean\"\n        title=\"lamp-mean\"\n        src=\"/static/4b5f81e89d08d2547473661a04edbc32/5a190/lamp-mean.png\"\n        srcset=\"/static/4b5f81e89d08d2547473661a04edbc32/772e8/lamp-mean.png 200w,\n/static/4b5f81e89d08d2547473661a04edbc32/e17e5/lamp-mean.png 400w,\n/static/4b5f81e89d08d2547473661a04edbc32/5a190/lamp-mean.png 800w\"\n        sizes=\"(max-width: 800px) 100vw, 800px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n    </span></p>\n<p>これは表示レイヤーの管理レイヤーからの独立を促し、管理レイヤーと表示レイヤーを明確に分けてウェブ開発を行うスタイルを一般化させます。</p>\n<p>このような分離スタイルは、メンテナンス性のみならず、スケール性、セキュリティ、パフォーマンスに大きなメリットがあり、これが次に説明するJamstackへと繋がっていきます。</p>\n<h2 id=\"jamstackへ\">Jamstackへ</h2>\n<p>MEANを経て、2015年ごろから現れたのが静的サイトジェネレーターというテクノロジーです。</p>\n<p>これはJamstackのコアとなるテクノロジーで、ウェブ黎明期のシンプルな静的サイトとは異なる、多機能でさまざまなメリットをもつ「現代版静的サイト」作るシステムのことです。</p>\n<p>くわしくは下の記事をご覧ください。</p>\n<div class=\"rich-card-link\">\n<a href=\"/blog/what-is-ssg/?inline=id61\">\n<div class=\"grid\">\n<div class=\"r-card-img\">\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 52.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAADIElEQVQozzWSXU9bBQCGz80UzeIHczFZ1BCDV3Khi3EalmU4W5PNBKOTSaCDllK2jjkHlg8XxkCkHXGbUPtxztnhAO1pu5aWtrBSx+zigE22sSxzZotzE2KcgYL+g+eYQbx4L9734rl5XmFICyCHEni0DGe0S/Rpc/Rotzke/A3H0AMOeO7T5vwFx8m7mH1L1EnLWMU8Vb4FzP5FbNLKWq8Tl9ciWOpMVJpMfFZro8LcyEf7j/ChyUG55ThVHRG6XNdwVkT0doOq2ztuY1FWqBf/Ye/Adb7wxmmVb1HtW6b+f6AgCHpRUZG+qbBQLyh4Un/5pS36a8Wv6o/3N977lL5TNwh25vSBhpT+pfMO++VV7P6/UXwxKvv9mPojfOKewiqvYn0MPNBgo7m5ia1b36SlpYXS7dsxGI08/9yzunGvlU7lOie6cnzVPYvd/ztmeYV27xzhkIbdN0G7qFDvCvOx6x4WKY/wSlGxvu2dUr1w02b9hc0v6gUFT+kbNjyhP7Pxab1sdwW9IzO0yjM0Kzc5Kv3K574FGn2PsPXd4lBPFpPnCkdOeZAH3JjFPxD2lL2OYUcJu99/G+OudzEadmL4wEjpjp1YDrfRp2Y54b/AMXGaVnGety6eozw6R9XIAxr671PjXcUTzDKsKtjkPMLlUCO5cAsZrYOU5iQaPEMg4EfVArgVDZcvTLeYxOnJUTmapGwySvFViZKfwtjkpXXDUp4a8V8sYh7hUvAwFwJNZEOdjGvfkI66SUQlQiGFcCyKEo7jH0nTHRqnZNpLeTLOrkyC0uwo2zITHPo+T624hMW/tG55PtnKlZiDmbGvmYp0MRU/zQ9JkWRMYiyhEYpFGNJG6dWi7ElL7DsfpiGYxZiNsS+Vw3F2EbvyiINKHqu0jLB4M8K9y17mM6416MVoN5PnTpKOfEc84ieVDJM8P85wKE5wJEsidQ2PNkswcZfI5ALu8Ye44n/Sm8iv3+bnYA1XA9VMD1fz42At2cGDTKjNjKnHiAdcaOq3DA95EAdl3GqA0+oozrNpetQpuoZmaZNv0CTd4ajyEJv4F/8BjT5EWACR3+IAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"social-card\"\n        title=\"social-card\"\n        src=\"/static/2b46a0867bfa7f7659271fbff88e36f1/5a190/blog-fb-65.png\"\n        srcset=\"/static/2b46a0867bfa7f7659271fbff88e36f1/772e8/blog-fb-65.png 200w,\n/static/2b46a0867bfa7f7659271fbff88e36f1/e17e5/blog-fb-65.png 400w,\n/static/2b46a0867bfa7f7659271fbff88e36f1/5a190/blog-fb-65.png 800w,\n/static/2b46a0867bfa7f7659271fbff88e36f1/c1b63/blog-fb-65.png 1200w\"\n        sizes=\"(max-width: 800px) 100vw, 800px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n    </span></p>\n</div>\n<div class=\"r-card-text\">\nこれだけで「静的サイトジェネレーター」のすべてがわかります\n</div>\n</div>\n</a>\n</div>\n<p>Jamstackは、これまでのLAMPやMEANのように具体的な「テクノロジー」を指すのではなく「アーキテクチャー」を指すという点も異なりますが、最大の違いは「静的サイト」である点です。</p>\n<p>ウェブサイトの歴史は、シンプルな静的サイトから始まって、LAMP、MEANと、その機能や構造が高度化・複雑化していきました。</p>\n<p>それによってユーザーは大きな恩恵を受けましたが、その反面、ウェブサイトの開発やメンテナンスに時間がかかるようになったこと、ページの処理が遅くなったこと、セキュリティリスクが高まったことなどのデメリットも見えてきました。</p>\n<p>そしてまた「ほとんどのウェブサイトにLAMPやMEANのような複雑な機能が実は必要ない」ということも明らかになり、シンプルでありながら高パフォーマンス、高セキュリティ、そして低コスト、低メンテナンスなものが求められ、Jamstackというアーキテクチャーが支持されるベースとなっていきます。</p>\n<p>このように現れたJamstackの具体的な特徴、メリットについては<a href=\"/blog/what-is-jamstack\">「これだけ読めばOK！ Jamstackのすべてがわかります」</a>でくわしく解説しているので参考にしてください。</p>\n<div class=\"rich-card-link\">\n<a href=\"/blog/what-is-jamstack/?inline=id61\">\n<div class=\"grid\">\n<div class=\"r-card-img\">\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 800px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 52.5%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAALCAYAAAB/Ca1DAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB8ElEQVQoz4WSzW8SURTF+/dpW2AG2ppgY2JKibFoP6y1BWZgECF+tJRCP1Kr2ARTNVosMwzY0IKUYk1jjGsTd25duP+ZeUxaihgXJ/e+mfPOO+++07cyNM3eaJzaeIqqb4lDf4oDf4oP3iSGS8WQo5TkCGU5LKpYS3btgb6YbwZjYpEvD3Y4iWzzOZbnNLHDgW8J3aFgulUKzvvkpTQlSaUsKRhSW7SnoD4YxnAoFPtDHQiiO1Sx0XBEKF7LkrhaIzFS4aW0jCmr/3ZYcmvthVXdURsaZbdCZTjCq7E4D0df8yOZZv/mCllHjoocbrvsJWhY87DtG2ezUXnrfUThSpA3++PkHmf4HQnw0++l4Ixjyuf8vx3aTaeoNatdV5JdV5T3M3f5VZjk+0KAmmce3Z7fBX63YOdH06NhDsUoD2uUPRoVKU5lREOXNXR3XPwr2ZxuM2dXthrdqbJ3KShiUw9kaN7bohXOcTS7wbfVIl+X33Eaz4sknKjbVMcWxQN2i7YdOlVBqN/K8nFyTaAxtU4rlKM595Tj+S2as5t8Ul7QCj7neOEZzblNDm+kMT2xiw6FO4ciXFnkozsbNKbXBay+PpERmaxefyJ6cejtVRpTa9QD2f9c+XKwncMBG/0hrJxaBwoMhikOnENkuOtx/gDzuT5eCl/nMAAAAABJRU5ErkJggg=='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"social-card\"\n        title=\"social-card\"\n        src=\"/static/acaf0bbb48b23e5a293204137f92881c/5a190/blog-fb-60.png\"\n        srcset=\"/static/acaf0bbb48b23e5a293204137f92881c/772e8/blog-fb-60.png 200w,\n/static/acaf0bbb48b23e5a293204137f92881c/e17e5/blog-fb-60.png 400w,\n/static/acaf0bbb48b23e5a293204137f92881c/5a190/blog-fb-60.png 800w,\n/static/acaf0bbb48b23e5a293204137f92881c/c1b63/blog-fb-60.png 1200w\"\n        sizes=\"(max-width: 800px) 100vw, 800px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n    </span></p>\n</div>\n<div class=\"r-card-text\">\nこれだけ読めばOK！ Jamstackのすべてがわかります\n</div>\n</div>\n</a>\n</div>\n<h2 id=\"lampmeanjamstack比較表\">LAMP、MEAN、Jamstack比較表</h2>\n<table>\n<thead>\n<tr>\n<th align=\"center\"></th>\n<th align=\"center\"><strong>LAMP</strong></th>\n<th align=\"center\"><strong>MEAN</strong></th>\n<th align=\"center\"><strong>Jamstack</strong></th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td align=\"center\">時期</td>\n<td align=\"center\">2000年代初期</td>\n<td align=\"center\">2010年頃</td>\n<td align=\"center\">2017年頃</td>\n</tr>\n<tr>\n<td align=\"center\">構造</td>\n<td align=\"center\">一体型<br/>(Coupled)</td>\n<td align=\"center\">分離型<br/>(De-coupled)</td>\n<td align=\"center\">分離型<br/>(De-coupled)</td>\n</tr>\n<tr>\n<td align=\"center\">強み</td>\n<td align=\"center\">すべてがオープンソースであること</td>\n<td align=\"center\">JavaScriptを全面的に使えること</td>\n<td align=\"center\">高パフォーマス / 高セキュリティ / 低コスト</td>\n</tr>\n<tr>\n<td align=\"center\">弱み</td>\n<td align=\"center\">セキュリティ / パフォーマンス / outdated</td>\n<td align=\"center\">NoSQLのため複雑なデータ管理には不適な場合あり</td>\n<td align=\"center\">複雑なインタラクティブ処理には不適な場合あり</td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"jamstackサイトの作り方\">Jamstackサイトの作り方</h2>\n<p>Jamstackの開発方法をくわしく知りたい方は、Jamstackサイト開発とヘッドレスCMSとの連携について解説した拙著「<a target=\"_blank\" rel=\"noopener\" href=\"/cu3tfwv45sr9jvei9nm2/?r=jamstackbook=inline=id61\">はじめてつくるJamstackサイト with ヘッドレスCMS</a>」を参考にしてください。</p>\n<a target=\"_blank\" rel=\"noopener\" href=\"/cu3tfwv45sr9jvei9nm2/?r=jamstackbook=id61\">\n<div class=\"img-border img40percent\" style=\"padding-top: 30px;\">\n<p><img src=\"/7157750d63c3947505745e3b3ec3ab86/jamstackbook.svg\" alt=\"jamstackbook\"></p>\n</div>\n</a>\n<p><a target=\"_blank\" rel=\"noopener\" href=\"/cu3tfwv45sr9jvei9nm2/?r=jamstackbook=id61\">【Amazonで見る】</a></p>","frontmatter":{"id":"061","path":"/blog/history-of-jamstack","date":"2020.12.18","update":"2021.10.08","title":"Jamstackが現れるまでの歴史 ― LAMPからMEAN、そしてJamstackへ","author":"Moment Memory","excerpt":"","description":"これまでのWordPressに代わって、「静的サイト」と呼ばれるウェブサイトを採用するケースが増えてきています。静的サイトを採用することには、高速のページ表示、高セキュリティ、そして低コストという多くのメリットがあります。この記事では、そんなメリットとともに、静的サイトの活用方法についても紹介します。","keywords":["jamstack","スピード","静的サイト","SSG","wordpress"],"tags":["Jamstack"],"categoryTagEN":"nextjs","heroImg":"nextjs","ad":"jamGuide","estimatedTime":"5","show":true,"robots":null,"featuredImage":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAYAAAC0VX7mAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB4UlEQVQoz3WS/09SYRTG+f+KcbkXwlobZqTMamXmKkXuF/lyDdQKJtJQIZ3RZtYG3AsEClGki35qrT/n03iDpLAfnp13O+c8z3POeR2R9zKFrSDJqp9E8waJhp+15hTJxiQrthfDdmPUXWg1Gb3qYcVW0C0Z3VYwLoAjWZzgh56l0F7k4FuMvTONYi/OwdcIsboP9ega6v40uykJ8/Ayi5YLwxqQWvI4YV9JtVxoloRacaFWzuNSQyKXCZDeDJLITJJ/e5fcx4DIGf9zaFyg0heJlxRM28nG/hTr2XmmO8uYrQWOfr5js+ohfEHfgFBhCN2WRdRqblYPfaRTM4TqEtGdh+zF3qDnA0R27mFaXrRB7TjhqDOxF0UcQi/50Pdn0GsSZtmDvbZCNPsAPT2HZkuDPSpje3QMif5W8mDYMlrNKXJqWWax5CTaVDAbV4nVJkbqzs38PsrgIRorEstlJ1pFYrv7hMJpWMTt7mPypyGKvVVK3zPsflkiVLpEuOwUGOX44zBS9fL8JCiaX52pPDuZJt2+w+teXJDluo942vCT/TQv8pnOfbY6c7z8vEC05kO33P+O7BGf+UVrllT7NtGqD/PDdVKtWTaOb7HWvEmkeoX144Ag6ov10a/tmxmO/AvRXwm+X10jiQAAAABJRU5ErkJggg=="},"images":{"fallback":{"src":"/static/4a09a6448697fc34c267aac27b9d7c92/0ccb9/blog-fb-61.png","srcSet":"/static/4a09a6448697fc34c267aac27b9d7c92/0c964/blog-fb-61.png 300w,\n/static/4a09a6448697fc34c267aac27b9d7c92/2bdcf/blog-fb-61.png 600w,\n/static/4a09a6448697fc34c267aac27b9d7c92/0ccb9/blog-fb-61.png 1200w","sizes":"(min-width: 1200px) 1200px, 100vw"},"sources":[]},"width":1200,"height":628},"original":{"src":"/static/blog-fb-61-4a09a6448697fc34c267aac27b9d7c92.png"}}}},"headings":[{"depth":2,"value":"Jamstackの必然性"},{"depth":2,"value":"ウェブサイトの始まり"},{"depth":2,"value":"LAMPの登場"},{"depth":2,"value":"MEANの登場"},{"depth":2,"value":"Jamstackへ"},{"depth":2,"value":"LAMP、MEAN、Jamstack比較表"},{"depth":2,"value":"Jamstackサイトの作り方"}]}},"pageContext":{"slug":"/blog/history-of-jamstack","next":{"frontmatter":{"path":"/blog/what-is-jamstack","title":"これだけ読めばOK！ Jamstackのすべてがわかります"}},"previous":{"frontmatter":{"path":"/blog/what-is-cdn-in-jamstack","title":"Jamstackサイトが0円で公開できる理由とは？"}}}},"staticQueryHashes":["1772891587","581605533","884797926"]}