Web制作で頑張りたいと思っている駆け出しにオススメしたいJamstack
自己紹介
こんにちは、駆け出し web エンジニアの柿です。
現在は都内の SES 企業で働いております。
自分の担当領域は基本的にフロントエンドですが、バックエンドの開発を行うこともあります。
最初にプログラミングに興味を持ち始めたのは緊急事態宣言がきっかけでした。
遊び感覚で始めた Progate が楽しくて、いつの間にか仕事にしたいと思い始めて今に至ります。
おわかりいただけましたでしょうか？エンジニアとして仕事を始めてからまだ 1 年も経っていないレベルです笑
拙い文章ではありますが頑張って書いていこうと思うので、お読みいただけると幸いです!
はじめに
最近、Twitter を見てて思うのですが
#駆け出しエンジニアと繋がりたい
といタグがありますよね。
自分も駆け出しなので、よくこのタグを見ていたり、たまーにツイートしていたりしてました。
タグ関連のツイートを見てて思ったんです。
「Web 制作で稼ぎたがっている人多すぎないか？？」
と。
個人的主観
あとはインフルエンサーが多すぎます笑
やたら 0->1 を達成したがる方とか、、笑
あとは、すごいドヤ顔で変な情報を拡散していたりしますね笑
インフルエンサーの方が仰っているような、
未経験から数ヶ月で〇〇万！
みたいな謳い文句は信じないほうがいいと思います笑
確かに夢があってキラキラしていますけどね、、
個人的にはインフルエンサーは相手にしない、これが一番だと思っています。笑
多くの方は HTML と CSS に四苦八苦した後、JS と PHP を簡単に学んで Wordpress に挑戦されているように見受けられました。
実際、WEB 制作において Wordpress を使っている人は多いですよね。
サイトを作成するにあたって、Wordpress を使うことはメジャーな方法の一つです。
しかし本記事では、駆け出しエンジニアの皆さんに新しい選択肢を提案したいです。
それが
Jamstack
です！
Jamstack とは
あんまり見慣れない言葉ですよね
自分も最初目にしたときは
「なんじゃそりゃ」
って思いました笑
これはそれぞれの単語の頭文字を取った造語です。
-
JavaScript
- みんな大好きなプログラミング言語
-
API
- データをやり取りするための仕組み
-
Markup
- おおまかに HTML や CSS のこと
これらの頭文字を取って、Jamstack という一つの単語になりました。
テストに出ます。
ちなみに stack は構成という意味ですね。
これは今までの方法となにが違うんでしょうか？
少しおさらいしていきましょう！
今までの方法
これまでは、サーバーサイドでウェブページを作る方法とクライアントサイドでウェブページを作る方法、この２種類が主流でした。
サーバーサイド
簡単に言うと、
- クライアント側(WEB サイト)から URL にアクセスする。
- ブラウザからリクエストを受け取った web サーバーがデータベースからデータを取得しつつ、HTML を生成する。
- web サーバーが生成した HTML をクライアント側に返す。
- WEB サイトが表示される。
という流れでした。
この方法をサーバーサイドレンダリングといいます。
クライアントサイド
簡単に言うと、
- クライアント側(WEB サイト)から URL にアクセスする。
- HTML,CSS,JS などの静的ファイルをクライアント側に返す。
- ブラウザはページ内の JS を実行し、web サーバーにコンテンツを取得しに行く
- ブラウザからリクエストを受け取った web サーバーがデータベースからデータを取得する。
- データベースからデータを取得したら、そのデータをクライアント側に返す。
- ブラウザはページ内の JS を実行し、取得したデータを表示する。
こんな感じです。
ちょっと長かったですね笑
この 2 つの方法と一体どう違うんでしょうか？
Jamstack で構成された Web サイト
実は上記の方法では、アクセスするたびに Web サーバーを経由する必要があるんです。
これを解決するために、Jamstack という方法が生まれたと言っても過言ではありません。
もちろん一切使わないわけではありません。
予め web サーバーを介して全部生成しておいて、それをストレージに保存します。
アクセスされたら、ストレージからそのままできているものを返すだけです。
なのでアクセスするときは Web サーバを介さないんです！！
料理で考えると、
- 従来の方法は、食材を買ってきて、調理して、食べる。
- Jamstack は、食材を買ってきて、調理して、冷凍庫に入れておく。食べたいときに解凍して食べる
みたいな感じですかね！
Jamstack で構成された Web サイトのメリット
様々ありますが、Wordpress に比べて
- 高速
- 比較的セキュリティが高い
- 大量アクセスに強い
ということがあげられるのではないかと思います。
高速
これは、アクセスするたびに Web サーバーを経由する必要がないないので、処理が軽いからです。
比較的セキュリティが高い
一見 web サーバーが存在していないように見えるため、比較的安全性が保たれていると言えるでしょう。
大量アクセスに強い
これも、アクセスするたびに Web サーバーを経由する必要がないので処理が軽いからです。
どんな画面に向いているのか
すごい良さげに思えてきませんか？
ここでは一体どんなサイトに向いているのかを紹介していきます。
- メディアサイト
- コーポレートサイト
などはかなり向いていると言えます。
Jamstack の特性は、「あらかじめページを作成しておく」 でしたね？
なので、見る人によって内容が基本的には変わらないサイトには相性が非常に良いです。
逆に見る人によって違うもの、YouTube だったり Twitter などは向いていないと言えるでしょう。
まとめ
今回は、Jamstack というものについて紹介しました。
なんとなく雰囲気は掴めたでしょうか？
非常にざっくりとした説明で申し訳ないです。
比較的モダンな技術で、扱うフレームワークも Nuxt や Next になってくるかと思います。
これらのフレームワークと、ヘッドレス CMS である MicroCMS なんかは非常に相性がいいので、ぜひ気になった方は調べてみてください！
これが扱えるようになったあなたは他の駆け出しの方より何歩も前に進んだ状態のスキルとなっていると思うので頑張っていきましょう！
まだまだ自分も勉強中です。
なにか間違った情報等ございましたらコメントください！
それでは皆様、良きカタカタライフを！！
参考
Discussion