マルチメディア

reCAPTCHA

LGTM

構造化データ

結合テスト

受け入れテスト

単体テスト

キャッシュバスター

CORS

CircleCI

CI/CD

モバイルファースト

モジュール

メタデータ

YAML

クライアントサイド

a11y

アクセシビリティ

Google Analytics

ユーザビリティ

CSRF

GitHub Copilot

サーバーサイド

OpenAI

ChatGPT

オブジェクト指向

オブジェクト

配列

プロパティ

jQuery

DOM操作

メソッド

イベント

アロー関数

非同期処理

Figma

Cloud Messaging

Web Push

Manifest

Service Worker

Cookie

UUID

Jest

View Transitions API

GSAP

Three.js

WebGL

tRPC

OpenAPI

Volta

Deno

pnpm

ディレクトリ

モノレポ

Bitbucket

GitLab

GitHub

リポジトリ

Unix

Linux

Render.com

PostgreSQL

MongoDB

NoSQL

リファクタリング

モックサーバー

i18n

SaaS

PaaS

IaaS

ドメイン駆動設計

テスト駆動開発

SOLID原則

YAGNI原則

DRY原則

DDoS攻撃

SQLインジェクション

DevOps

WAI-ARIA

WordPress

仮想DOMとは、主にReactやVueで採用されているSPAを実現するために使われている技術の1つです。旧来のMPAであればページ遷移や、APIとの通信が発生しHTMLファイルが返却された場合にページ全体を描画する必要がありました。SPAでは変更箇所のみを書き換えることが可能です。 仮想DOMは以下のような動作します。<ol><li>仮想DOMが操作によって状態が変化した時、変化前と変化後の差分を検出する(diff)</li><li>差分が発生した箇所の変更内容を実際のDOMに反映する(patch)</li></ol> このようにdiff and patch と呼ばれる処理が行われることで、仮想DOMを通してDOMを簡単かつ迅速に扱うことが可能になります。 最近のモダンフロントフレームワークでは仮想DOMが主流ですが、Svelteのように仮想DOMを使用しないものもあります。

仮想DOMとは、主にReactやVueで採用されているSPAを実現するために使われている技術の一つです。
旧来のMPAであればページ遷移や、APIとの通信が発生しhtml fileが返却された場合にページ全体を描画する必要がありました。

仮想DOM

DOMツリーとは、WebページのHTMLドキュメントの各要素をツリー構造にして表現したものです。ブラウザがHTMLドキュメントを読み込む際に、HTML要素を読み取り、それらを親子関係に従ってツリー構造にします。このツリー構造をDOMツリー（Document Object Model）と呼びます。 DOMツリーは、JavaScriptによって動的に変更することができ、その結果、Webページの表示も変化します。ブラウザのWeb開発者ツールで確認することができ、それぞれの要素の属性やCSSスタイル、テキストコンテンツなどを見ることができます。 ReactやVueなどのモダンなフレームワーク・ライブラリでは、仮想DOMが採用されているため、SPAが実現できます。

DOMツリーとは、WebページのHTMLドキュメントの各要素をツリー構造にして表現したものです。
ブラウザがHTMLドキュメントを読み込む際に、HTML要素を読み取り、それらを親子関係に従ってツリー構造にします。このツリー構造をDOMツリー（Document Object Model）と呼びます。

DOMツリー

SPAは、Single Page Applicationの略称で 単一のHTMLファイルから構成されるWebアプリケーションのことです。従来のMPAではpage遷移毎にデータの通信や、レンダリングが発生していましたが、SPAでは仮想DOMという技術を使うことで差分(変更箇所)のみ描画することで高いUXを実現しました。 しかし、SPAにも<ul><li>初回ローディングに時間がかかる</li><li>クライアントの通信環境に依存している</li></ul>といったデメリットがあり、現在ではMPAへのゆり戻しが発生しています。

SPAは、Single Page Applicationの略称で 単一のhtml fileから構成されるWebアプリケーションのことです。
従来のMPAではpage遷移毎にデータの通信や、レンダリングが発生していましたが、SPAでは仮想DOMという技術を使うことで差分(変更箇所)のみ描画することで高いUXを実現しました。

Strapiは、オープンソースのヘッドレスCMSの1つです。APIを構築することで、Webサイトやモバイルアプリケーションと連携することができます。Strapiは柔軟な構成と管理画面を提供し、ユーザーがコンテンツを簡単に作成、管理することができます。さらに、Strapiは複数のデータベースとの互換性があり、拡張性も高く、業界標準のAPI通信規格をサポートしています。 その他にも、Contentfulや日本製のmicroCMSといったヘッドレスCMSもあります。

Strapiは、オープンソースのヘッドレスCMSの1つです。
APIを構築することで、Webサイトやモバイルアプリケーションと連携することができます。
Strapiは柔軟な構成と管理画面を提供し、ユーザーがコンテンツを簡単に作成、管理することができます。

Strapi

React Suspenseは、Reactのバージョン18で発表された機能で、Reactのライブラリにおいて、非同期のデータ読み込みを管理するための新しいAPIです。このAPIは、ユーザーが待つことができるように、アプリケーションの一部を遅延レンダリングすることができます。これにより、アプリケーション全体のパフォーマンスが向上し、ユーザー体験(UX)も向上します。React Suspenseは、アプリケーションのUIコンポーネントに遅延を指定することができます。これにより、データの読み込み中にはローディング画面が表示され、データが読み込まれたときには実際のUIが表示されます。

React Suspenseは、Reactのバージョン18で発表された機能で、Reactのライブラリにおいて、非同期のデータ読み込みを管理するための新しいAPIです。
このAPIは、ユーザーが待つことができるように、アプリケーションの一部を遅延レンダリングすることができます。

React Suspense

MPAは、Multi Page Applicationの略称で複数のHTMLファイルから構成されるWebアプリケーションのことです。ページ遷移するたびにサーバーにリクエストを送信し、サーバーからHTMLなどのマークアップ言語を受け取り、ブラウザ上で表示するといった形式を採用します。MPAは検索エンジンへのインデックス作成などに適しており、SPAが登場するまでは主流のアーキテクチャでした。 しかし、SPAにもデメリットが存在しており、現在ではMPAへのゆり戻しが発生しています。

MPAは、Multi Page Applicationの略称で複数のhtml fileから構成されるWebアプリケーションのことです。ページ遷移するたびにサーバーにリクエストを送信し、サーバーからHTMLなどのマークアップ言語を受け取り、ブラウザ上で表示するといった形式を採用します。MPAは検索エンジンへのインデックス作成などに適しており、SPAが登場するまでは主流のアーキテクチャでした。

CSS Modulesは、各コンポーネントに対してスコープを適用し、他のコンポーネントから隔離されたスタイルを提供するスタイリング方法の一種です。CSS Modulesでは、クラスセレクターがユニークになるように変換することで、クラスセレクター同士が被らないようになっています。以下のように、<code>*.module.css</code>にすると、バンドラーツールが自動的に紐付けてくれます。

/*index.module.css */
.hoge {
 color: red;
}

/*index.tsx */
import styles from './index.module.css';
export const Home = () => <div className={styles.hoge}>ボタン</div>

CSS Modulesは、各コンポーネントに対してスコープを適用し、他のコンポーネントから隔離されたスタイルを提供するスタイリング方法の一種です。
CSS Modulesでは、クラスセレクターがユニークになるように変換することで、クラスセレクター同士が被らないようになっています。

CSS Modules

ヘッドレスCMSとは、Webサイトやアプリケーションに対するコンテンツの管理を行うためのシステムです。通常のCMSと異なり、ヘッドレスCMSはWebサイトのフロントエンド（ユーザーが直接閲覧する部分）とバックエンド（コンテンツの管理を行う部分）を分離し、APIを介して連携するというアプローチをとっています。オンラインショップやメディアサイトなどの大規模なWebサイトから、IoTデバイスやAR/VRアプリケーションなどの新しいタイプのシステムまで、様々な用途に利用することができます。 一般的によく使われるサービスには以下のようなものがあります（アルファベット順）。<ul><li>Contentful</li><li>Kuroco</li><li>microCMS</li><li>Netlify CMS</li><li>Newt</li><li>Strapi</li></ul>

ヘッドレスCMSとは、Webサイトやアプリケーションに対するコンテンツの管理を行うためのシステムです。通常のCMSと異なりヘッドレスCMSは、Webサイトのフロントエンド（ユーザーが直接閲覧する部分）とバックエンド（コンテンツの管理を行う部分）を分離し、APIを介して連携するというアプローチをとっています。

ヘッドレスCMS

SSGとは、Static Site Generationの略称で、静的なサイトを生成するアーキテクチャのことです。ビルド時にデータフェッチしてHTMLを生成し、静的なコンテンツを配信するので高速でかつセキュアです。SSGはMarkdownなどの記述言語を使ってコンテンツを作成し、テンプレートエンジンを使ってHTMLに変換することで動的なサイトのような表示が可能です。Next.js、Nuxt.js、Gatsby.jsなどのフレームワーク・ライブラリを使って作成することがほとんとです。 他にレンダリング手法として、CSRやSSR、ISRなどもあるので目的に応じて選択します。

SSGとは、Static Generationの略称で、静的なサイトを生成するアーキテクチャのことです。
ビルド時にデータフェッチしてHTMLを生成し、静的なコンテンツを配信するので高速でかつセキュアです。

<a href="/service/jamstack/next-js">Next.js</a>のバージョン13から導入されたapp<a href="/service/jamstack/directory">ディレクトリ</a>には以下のような特徴があります。 <ul><li>getServerSideProps などの従来の<a href="/service/jamstack/next-js">Next.js</a>で使われていた<a href="/service/jamstack/api">API</a>がこの<a href="/service/jamstack/directory">ディレクトリ</a>内では使用できません。fetch <a href="/service/jamstack/api">API</a> を使用した取得が推奨されています。</li><li><a href="/service/jamstack/react">React</a> Server Components / <a href="/service/jamstack/react-suspense">React Suspense</a> を最大限に活用できるようにするための仕組みです。</li><li>従来の _app, _document, error といったファイルは app<a href="/service/jamstack/directory">ディレクトリ</a>に統合されます。</li></ul>

Next.jsのバージョン13からappディレクトリが導入されました。
getServerSideProps などの従来のNext.jsで使われていたAPIがこのディレクトリ内では使用できません。fetch API を使用した取得が推奨されています。

appディレクトリ

appディレクトリアップディレクトリ

関連する用語を探す