ちょっとがんばってJamstackでWEBサイトを作ってみました。〜その１Jamstackってなーに？
弊社の新ソリューション「密集度モニターシステム 密 ミツシル」のリリースに伴い、今までとは違った手法「Jamstack」でwebサイトを制作しました。今回は、Jamstackでwebサイトを作る過程をブログに連載していきたいと思っています。
👉 今回は、こんな人に向けて書いています。
・HTML・CSS・PHPなんかは、ちょっとぐらいは書けるよ〜
・ワードプレスから卒業したい
・新しい物が好き
・webサイトのパフォーマンスを改善したい
なぜJamstackで作りたいか？
弊社のwebサイトはワードプレスで作られています。ワードプレスは非常に人気のあるCMSですが、いくつかの課題もありました。
課題1. パフォーマンスを向上させたい
Googleは、ページエクスペリエンスに基づいてウェブサイトをランク付けします。ページ・エクスペリエンスに影響を与える主な要因は、特にモバイル向けのパフォーマンス。Lighthouseでの、弊社のモバイルwebサイトのパフォーマンスはかなり低いです。これは以前から解決したい課題でした。
課題2. サイトの運営・管理をシンプルに、安全にしたい
提供するソリューションが増えた分だけ、コンテンツも追加されました。そして、ソースコードも多くなりちょっと複雑に。コードをスッキリさせたいことや、将来デザインチームができた時、みんなでコードを管理・共有できる環境を整えたい。
課題 3.新しいことに挑戦したい
ただ単に新しいモノ、コトに挑戦してみたい。これも理由の一つです。😁
それが便利で、メリットがあるなら、勉強してやってみる価値はありますよね。💪
Jamstack とは
Jamstackについて話す前に、まずは、ワードプレスの仕組みについてお話したいと思います。
ワードプレスはwebサイト構築のプラットフォームで、アクセスがあるごとに、サーバーで毎回リアルタイムにページを作成し、閲覧者に返します。
このようなサイトを動的サイトといいます。
Jamstackで作られたwebサイトは、すでにHTMLで作られたページをCDN（コンテンツ・デリバリー・ネットワーク）で閲覧者に返します。
すでにページが出来上っており、閲覧者が要求したページを、ほいっと閲覧者に返すサイトのことを静的サイトといいます。
Jamstackは、ウェブをより速く、より安全に、そしてより簡単に拡張するための構築方法のことで、複数のサービスやプラットフォームを組み合わせて、より速く、より安全なWebサイトやWebアプリケーションを作成することができます。
また、サイトに必要なCMS、フロントエンド技術、サービスは自分で選ぶことができます。
セキュリティに関しても優位性があります。
ワードプレスはサードパーティのプラグインによるさまざまなセキュリティ問題があり、サイトがハッキングされると、多大な損失を被ることになります。プラグイン同士のコンフリクト（競合）で動かなかったりなどのトラブルも多いです。
Jamstackでは、ハッキングが不可能な静的ページだけを配信するため、サードパーティのセキュリティに関するリスクを確実に排除できます。
そして、ソースコードもGithubで管理、共有し、デプロイするのもとても簡単にできます。（使いこなすには、慣れが必要ですが・・😅）
サイトパフォーマンス、サイトのリスク管理、好奇心、この三つを満たしてくれる。これはもうJamstack使うしかない 👍
さて、どんなフレームワークを使って静的サイトを作れば良いのでしょう。巷ではNext.jsが人気のようです。
次回は人気のフレームワーク、Next.jsとは何か？について書きたいと思います。
この記事が気に入ったらサポートをしてみませんか？