<p>JAMStack・・・JavaScript &#x2F; API &#x2F; Markupの頭文字。<br><br><span style="color:#1a202c">JavaScriptで外部APIを叩いてMarkup(HTML)を構成する技術のこと。</span><br><br>このブログはJAMStackな技術を用いて作成しました。<br><br>作るに至ったきっかけやメリット・デメリット、そこで得た知見などをブログ構築の一番手の選択肢であるWordPressと比較しながら紹介します。<br><br>そもそもJAMStackって何？という方は、先日2021年の「フロントエンドエンジニアに求められそうなスキル」という記事の中でJAMStackについて紹介している箇所があるので併せて読んでいただければと思います。<br><br><a href="https://blog-sorellina-coda.dev/articles/mi8bywjolf" target="_blank" rel="noopener noreferrer">https://blog-sorellina-coda.dev/articles/mi8bywjolf</a><br></p><h2 id="h27111e9216">なんでJAMStackで作ったの？</h2><p>イケてる技術＆好きな技術で自前のブログを作りたい！というのがモチベーションの源泉です。<br><br>以前Nuxt.js, Contentful, Netlifyを主に使ってブログを構築したこともありましたが、ブログそのものを更新しなくなってしまいました。<br><br>その前のブログをそのまま使うでもよかったかもしれませんが、</p><ul><li>今はReactが好きで、Next.jsのSSG&#x2F;ISGがブログに適しているので使いたかったこと</li><li>上記に付随して、個人的にVueベースのNuxtを使いたい要求が弱くなったこと≒メンテに対するモチベーションが沸かなくて辛い</li><li>以前のブログはCSSのパフォーマンスが悪く画面のチラつきが鬱陶しく感じていたこと</li><li>Contentfulが正直使いづらい(簡単にブログを更新したいだけなのに英語を読みながらコンテンツ管理したくない)</li></ul><p>という点から、Next.js &#x2F; TypeScript &#x2F; Vercel &#x2F; microCMSの構成で作り直すことにしました。<br><br>結果としてトップページ、記事ページともにLighthouseで高スコアが出るくらいの改善がなされました。<br><img src="https://images.microcms-assets.io/protected/ap-northeast-1:c7c8182c-88d5-4972-a4d4-22b5f7904ef2/service/gens-blog/media/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202021-01-23%2023.36.26.png" alt><br>やはり静的Webサイトの生成はパフォーマンスに優れていますね。<br><br>ページ遷移も非常にサクサクで、体験もよく感じています。</p><h2 id="hc3a07fcea1">WordPressじゃダメ？</h2><p>正直、ブログで収益化を目指すならWordPressで作った方が圧倒的に立ち上げが速いと思います。<br><br>ブログ向けのテーマやプラグインも充実していますし、事例も豊富です。<br><br>SEO対策もすでに整っているテーマなどが販売されていますし、WordPressブログは始めるだけならとても簡単です。<br><br>ただ、ページデザインの自由度はJAMStackブログに軍配が上がると思いますし、偏見が入りますがWordPressのセキュリティ対策が正直面倒に感じています。<br><br>今、個人開発でWordPressか...という若干過激派思想的な部分も正直あります。</p><h2 id="h72f4f74d01">JAMStackのメリット</h2><h3 id="hd10e8f1ec5">クライアントサイドでJAMStackブログは動くこと</h3><p>JAMStackのメリットは、SPA(Single Page Application)としてクライアントサイドで動くため、自前でサーバーを立てたりレンタルサーバーと契約する必要がないところです。<br><br>静的なアセットをVercelなどのホスティングサービスに乗せて配信しているだけなので、サーバーの管理をする必要がありません。<br><br>例えばWordPressだとサーバー側でページを構築するため、サーバーが停止してしまった場合にブログの読者にページを提供できなくなってしまいます。<br><br>JAMStackの場合、ページの構築はビルドを行うタイミングになるので、仮にサーバーが不具合で止まるとしても記事・ページを新しく作る段階で影響を受ける程度です。<br><br>すでに配信されているページには影響を受けません。<br><br>また、レンタルサーバーを契約すると大体月々1000円ほどかかる見込みですが、JAMStackなこのブログは<strong><s>「完全無料」</s></strong><s>で動いています。</s>ドメイン代で年1000円ちょっとかかってます🙇‍♂️<br><br>今後ブログを収益化すると考えるとこのランニングコストの差は大きいと思います。</p><h3 id="hddfe2d5fe8">セキュリティに対して比較的安全であること</h3><p>JAMStack構成ではサーバーを基本的に持たないため、攻撃の入り口になるような対象がなく、安全性を保ちやすくなります。<br><br>WordPressのセキュリティ対策が面倒と前述したのは、WordPressはサーバー上で動くためです。<br><br>世界の約3割のサイトがWordPressで構築されていると言われており、攻撃者からすればWordPressのサイトをターゲットにすることも多いです。<br><br>常々脆弱性対策をしなくてはならないのがWordPressのデメリットとも言えます。<br><br>ログインページを&#x2F;wp-admin&#x2F;のままにしていませんか？攻撃者の格好の的ですよ。</p><h3 id="h7d81356872">静的サイトのため高速</h3><p>JAMStack構成の場合、ページをサーバーからの返却ではなく静的アセットとして事前生成しておくことでCDN(<span style="color:#252525">Content Delivery Network</span>)から配信できるので非常に高速です。<br><br>サーバーでの処理を挟まないため高速化が実現できているというわけです。<br><br>ブログとしての用途だとコメント機能など一部例外はありますが、動的に値が変わる要素はほぼ無いので、オリジンサーバーを介して配信する必要がありません。<br><br>また、静的アセットの配置などもGithub連携などCI&#x2F;CDの構築が容易である点はメリットだと思います。</p><h3 id="hac760cc108">もしもの時に...</h3><p>JAMStackブログでは、View、API、ホスティングをそれぞれ別のサービスを用いて作るため、例えばViewのところが気に入らなくなった時に他のところは残して作り直すのが容易です。<br><br>例としてNext.js &#x2F; microCMS &#x2F; Vercelでこのブログは作っていますが、今後Next.jsが落ち目になり新しいフレームワークで作った方が良いとなれば、Next.jsの部分は他の技術に置き換えてmicroCMSでブログコンテンツの管理は続ける、ということが可能です。<br><br>各サービスで責務の分離がされているので障害時にも何が悪いかの切り分けがしやすいのもメリットだと思います。</p><h2 id="h7433da2982">JAMStackのデメリット</h2><h3 id="h4756a766cf">自分で作るものが多い</h3><p>WordPressには先人たちの作った数々のプラグインやテーマが存在するため、デザインを深く考えなくてもいい感じのブログが作れます。<br><br>一方JAMStackブログでは内部処理やUIコンポーネントはパッケージ、ライブラリとして提供されているものがあるものの、基本的には自分でページデザインを考え、コンテンツデータ取得の処理を書かなくてはならないため、構築まで時間がかかります。<br><br>WordPressならおそらく1時間もあればブログとしての体を成すものが作れると思いますが、JAMStackで0から作るとそれ相応の時間がかかります。<br><br>僕はいろいろ調べながら作って2〜3週間くらいでブログの体を成す形に仕上げました。</p><h3 id="h884039bc62">時間ぴったりにブログを公開するのが難しい</h3><p>JAMStackは作成したコンテンツを公開する際に、コードをビルドしてHTMLなど静的アセットを生成し配信しています。<br><br>コードのビルドがいつ終わるかはページ数次第なので、「17時ぴったりに情報解禁！」と思って17時に公開ボタンを押したとしてもビルドが終わるまでの数分間はページ表示ができません。<br><br>WordPressならコンテンツ公開の時点でサーバーにコンテンツを登録し、ユーザーが見に来たタイミングでページを作るので時間通りに公開も可能で、(調べてないので分かりませんが)タイマー配信もできるのではないでしょうか。</p><h3 id="ha93cad7d44">ページが多いとビルド完了まで時間がかかる</h3><p>先述の通りコンテンツ公開の都度全てのページに対してビルドを行なっているので、ページ数が多いと公開まで時間がかかってしまいます。<br><br>もちろんビルド中にはそれまでに公開しているコンテンツに影響は無いので個人ブログ程度の分量ならほぼ影響はありませんが、ニュースサイトのように莫大なページ数を持つWebサイトにはJAMStackは向いていないと言えます。</p><h3 id="ha96df7d158">選択肢が多い</h3><p>JAMStackではいくつかのサービス、フレームワークを組み合わせて構築するので、「どれを使って構築していいかわからない！」となる場合がありそうです。<br></p><ul><li>静的サイトジェネレータ： Next.js &#x2F; Nuxt.js &#x2F; Gatsby.jsなど</li><li>ヘッドレスCMS：microCMS &#x2F; Contentfulなど</li><li>ホスティングサービス：Vercel &#x2F; Netlify &#x2F; Firebase Hosting &#x2F; AWS S3など</li></ul><p><br>WordPressならWordPressだけで完結できるのでJAMStackのこのサービスの組み合わせは煩雑に写るかもしれません。<br><br>どの組み合わせがいいか迷ったときはNext &#x2F; microCMS &#x2F; Vercelで良いのではないでしょうか。<br><br>メリットのところでも書きましたが、合わなければそのサービスの部分だけ置き換えることも十分可能です。</p><h2 id="h157b8f3d90">これまでに得た知見</h2><p>ざっと箇条書きにします。</p><ul><li>CI &#x2F; CDの構築がとても簡単。WebhookでmicroCMSとVercelをつないでいるので、microCMSでコンテンツ公開すればすぐVercelでビルドを行ってくれる。</li><li>デザインからAPI構成まで自分で考える必要がある。コントロールが効きやすいので作ってて楽しい。</li><li>microCMSめちゃくちゃ使いやすい。個人的にはContentfulよりmicroCMSの方がいい。</li><li>SEO対策のためのコードやOGP画像生成を作るのはNext.jsの&#x2F;apiで行なった。</li><li>コードリファクタリングの余地がかなりあるので対応したい。</li><li>SEO対策用にAPIに概要欄を設けてdescriptionを書くようにしたのは効果がありそう。</li><li>サイトマップをどうやって作るかは模索中。</li><li>Webhookでブログの記事公開を検知させてNext.jsでSSGしているが、Webhook外してISRするのでもいいような気はしている。</li><li>難易度はめちゃくちゃ高いわけではない。フロントエンドエンジニアを目指したい初学者にはJAMStackブログの構築・運用をお勧めしたい。</li></ul><h2 id="ha214098e44">まとめ</h2><p>JAMStackは2021年現在、注目されている技術であり、ブログの構築の場合WordPressよりも運用コストは低いと考えています。(導入コストは若干高いですが...)<br><br>JAMStackブログの構築は以下のようにメリットが多くデメリットも実はほとんどない手法だと思います。</p><ul><li>クライアントサイドで動くためサーバーの管理が要らない</li><li>サーバーを持たないのでセキュアであるし、レンタルサーバー代もかからない</li><li>静的サイトなため非常に高速に描画が可能</li><li>自分で作るものが多いがプログラミングスキルアップに繋がる</li><li>ビルドに時間がかかったり時間通りに公開が難しいが、個人ブログには影響なし</li></ul><p><br>知見のところで述べましたが、フロントエンドエンジニアを目指したい人ほどJAMStαckでブログを立ててみるのは有効な気がしています。<br><br>Viewの部分はゴリゴリJSフレームワークを使って作りますし、APIとの接続≒バックエンドとの連携は現場で必ず使う技術ですし、ブログを立てた後はそこに学習記録を残していくことで求職時のアピールにも繋がります。<br><br>トレンドな技術でブログを立ててみたい！という気概があればぜひJAMStackに挑戦してみてはいかがでしょうか。</p>

<ol><li>なんでJAMStackで作ったの？</li><li>WordPressじゃダメ？</li><li>JAMStackのメリット</li><li>JAMStackのデメリット</li><li>これまでに得た知見</li><li>まとめ</li></ol>

JAMStackのメリット・デメリットを解説し、JAMStackでブログを作ることの有効性について書きました。JAMStackは2021年のフロントエンド技術トレンドとして上がってくると思っています。

JAMStackでブログを作った理由とそのメリット・デメリット − JAMStackはいいぞ