Web 技術関連のキーワードについて（前編）
こんにちは、サイトコアの原水です。前回は Sitecore コンポーザブル DXP の考え方におけるアーキテクチャとして、MACH アーキテクチャについて紹介をしました。あくまでサイトコアの製品全般の話を紹介した形ですが、Web サイトのリニューアルにおけるキーワードが最近は変わってきています。
今回は、Web 技術関連のキーワードについて紹介をしていきます。少し難しいお話に聞こえるかもしれませんが、使える必要はありません。どういうものかを頭に入れておくことで、将来役に立つ、そんなキーワード一式となります。
Jamstack
Jamstack というキーワードは JavaScript / APIs / Markup の３つのキーワードの頭文字を利用して、これらの３つのテクノロジーをうまく利用する仕組みとして利用されています。この３つの項目がなぜ重要になってくるのか、それぞれ掘り下げていきます。
JavaScript
JavaScript は Java と名前がついていますが同じ言語ではなく、ブラウザ上で利用できるスクリプト言語として開発され、時代のニーズに合わせて成長してきた言語になります。
昔はブラウザでスクリプトを動かすとなると、互換性の問題でエラーが発生したり、またページを表示する速度が遅くなるなどでなるべく利用しない方が良い、という位置付けでした。しかしながら、Google マップなどの Web で利用できる便利なサービスにおいて、すべてサーバー側で処理をするのではなく、ブラウザ側で処理をするために利用されるケースが増えてきました。ブラウザの互換性に関しては各ブラウザが進化したこともあり、またデバイスの速度も向上してきたため、上手に利用するのにちょうど良い言語となっています。
海外の調査ですが、Stackoverflow というエンジニアの掲示板において実施したアンケートにおいて、よく利用されている開発言語として 2022年は 1 位となっています。
5 位にランキングしている TypeScript はマイクロソフトが開発をした新しい言語で、JavaScript のスーパーセットとなるため、JavaScript を拡張してている言語となるため、非常に人気のある言語になっていることがわかります。
APIs
実際に Web サイトを構築するとなった場合、規模が大きなサイトになると１つのデータソースからコンテンツを展開するのではなく、他のサービスから情報を取得する、そのデータを処理するといった開発をすることができるようになります。この部分が API 連携という形となってきます。
この際、JavaScript が利用しやすいデータ交換フォーマットとして JSON （JavaScript Object Notation）というデータ形式があります。サーバーに問い合わせをすると、JSON 形式のデータが返ってきて、それを JavaScript で処理をする、というような実装が簡単にできます。
設定ファイルなどではまだ XML ファイルを利用するケースもありますが、データの交換に関しては JSON が主流になりつつあります。JSON に関しては便利なデータ形式のため、最近は JavaScript 以外でも利用できるようになっています。
API を通じて取得することができるデータが JSON なのかどうか、というのも API の部分では重要なポイントになります。
Markup
Markup はいわゆるマークアップ言語と言われるもので、今回のケースでいけば Markup = HTML という感じで設定して問題ありません。すでに JavaScript の説明のところで紹介をした Stackoverflow のサイトでは HTML は 2 位という形になっています。JavaScript と HTML でワンツーフィニッシュを決めている形です。
Jamstack の組み合わせで整理をすると、JavaScript で処理をする、その際のデータは API から取得して、HTML として出力をするというような形となります。
コンセプトは理解したとしても、実際にそれを１から作っていくのは大変です。そこで次のキーワード JavaScript フレームワークを紹介したいと思います。
JavaScript フレームワーク
Jamstack のアーキテクチャを実際に活用していきたい、それも手軽に、というのであれば、このアーキテクチャをベースとしたフレームワークを利用するのが手っ取り早い形となります。ちなみに Jamstack の公式サイトには、数多くのフレームワークのロゴが流れています。
上記のサイトではロゴが多く流れています。どれがいいのか悩ましいところですが、改めてもう一度、Stackoverflow の Web framework の項目が参考になります。
トップの Node.js は今後のキーワードで改めて紹介をしますが、ここでは以下の４つが JavaScript ライブラリ / フレームワークと言われるものになります。
React.js
後述します
jQuery
歴史ある JavaScript のライブラリ
Angular
Google やオープンソースで展開されているフレームワーク
初期の AngularJS が利用しにくい形であったため、一から作り直したものを Angular として提供している
Vue.js
Google にて AngularJS の開発に関わった人が軽いものを作るという形で作成したフレームワーク
実は 2020年まで jQuery がトップを走っていました（参考）。2021年には React がトップに躍り出て、今年は２連覇を達成した形となっています。
その他のフレームワークを見ていくと、Angular と Vue.js に関しては少し関係性があり、もともと Google が JavaScript フレームワークとして展開をした初期のものが AngularJS があります。ただし、開発のしやすさ、パフォーマンスという点でさまざまな問題があり、もう一度一から作り直したものが Angular になります。Google のエンジニアが Angular をもっと軽いもので作れないか、として展開されているフレームワークが Vue.js となります。
とそれぞれの立ち位置を紹介したあと、今回はこの React を掘り下げて説明していきます。
React
この JavaScript フレームワークは Facebook（現 Meta） が提供しているオープンソースのフレームワークとなります。Github のリポジトリを見にいくと、Facebook になっていることがわかります。
React を説明する上で便利な機能として JSX というキーワードがあります（これは Vue.js でも利用可能です）。JSX は JavaScript XML から生まれた名前で、コードの中に XHTML 形式で記述したコードをそのまま Web サイトの HTML のコードとして利用することが可能となります。
これを利用することで、React のコードの中に HTML のコードを埋め込むことができ、コンポーネント化などの作業が非常に簡単になります。API から取得したデータを HTML の中に埋め込むというのもコードの記述でできます。
もちろん関数、データの受け渡し、なども仕組みとしては持っているため、Web サイトを作る上で必要となる仕組みが一通り揃っている形となります。
Next.js
Stackoverflow の Web フレームワークとしては順位はそれほど上ではありませんが、Next.js というフレームワークがあります。このフレームワークは React ベースで作られた仕組みとなっており、開発に関しては React と同様にできるだけでなく、独自の機能も実装しています。
URL のルーティング処理
URL に合わせてコンテンツを表示するといった際の仕組みに利用できます *
Static Site Generator - SSG
静的サイト構築が可能です
Incremental Static Regeneration - ISR
連携しているデータソースが更新された際に、SSG で処理をしたページを差分だけ更新することができます *
API 処理
画像最適化
上記のうち、* のマークをつけたものは CMS との相性が非常に良いと言えます。また SSG という形で静的なサイトとして運用ができるとインフラに関しても改善することができます。このメリットの部分は後編で改めて紹介をします。
少し補足しますが、同じコンセプトのフレームワークとして提供されているものに Nuxt.js があります。Vue.js をベースで影響を受けて開発、提供されている形ですが、バージョンアップの速度、機能強化において元々 React と Vue.js の開発者通の違いもあり、グローバルでは Next.js が多くのケースで採用されている状況です。
日本語の情報提供があるので、という感じで Nuxt.js を利用している人も多いかもしれませんが、バージョンアップ、機能強化の速度を考えると、Next.js が大きくリードしている状況と考えて良く、今採用するのであれば Next.js が良い形です。
CSS framework
Web サイトの見た目を調整するためのスタイルシート、CSS にもいくつかフレームワークがあります。これに関してはデザインのしやすさ、好みの問題がありますので細かくはそれぞれ紹介しませんが、以下のようなものがあります。
Bootstrap - React Bootstrap など React 連携のサイトもあり
Tailwind CSS - 日本語のサイトやコンポーネントサイトなどもあり
Material UI - Google が公開しているガイドラインに沿った CSS フレームワーク
この分野のテクノロジーに関しては、採用したいデザインで使い勝手が良いのか、メンテナンスされているのか（新しいトレンドのデザインを作れそうか）、コミュニティがしっかりしているか、テンプレートが揃っているのか、など様々な評価ポイントがある状況です。
ちなみに私は Tailwind CSS が個人的に好みでもあるので、デモなどでは利用しています。
余談ですが
今回、Stackovervflow のアンケートを何度か紹介しましたが、ここには好き嫌いに関してのアンケート結果もあります。
半数以上の方が嫌っている言語の中には C++ や Java も入っていますが、Web でよく出てくる言語としては PHP があり、6割近くの人が嫌っている形です。嫌われている言語は、開発効率が悪かったり、トラブルが多くてニーズに合わない、市場にもマッチしていない古い言語になってきている可能性があります。
実はオープンソースの CMS と言われる製品の多くは PHP が利用されています。もしかしたらみなさんの Web サイトも PHP が利用されているかもしれません。あまり愛されていない開発言語のソフトウェアの将来性、ロードマップをどういう風にやっていくのか？と考えると、よく利用される、多くのエンジニアがいる言語を積極的に採用していくのが良いかと思います。
まとめ
今回は Web において出てきているトレンドのキーワードについて紹介をしました。まだまだ取り上げたいキーワードがあるのですが、ボリュームが多いと頭に入れるのも大変なので、今回はここまで。あと２回、中編（ヘッドレスCMS）と後編（インフラ関連）という形で私の順番が来た時に改めて紹介させていただきます。