From 69f718a95cf1497da6fd263b8ca4d157fcc2108b Mon Sep 17 00:00:00 2001 From: ken7253 Date: Mon, 1 Jan 2024 00:09:43 +0900 Subject: [PATCH 1/6] =?UTF-8?q?=E8=A6=8B=E5=87=BA=E3=81=97=E3=81=AE?= =?UTF-8?q?=E4=BD=9C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- articles/progressive-enhancement.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 articles/progressive-enhancement.md diff --git a/articles/progressive-enhancement.md b/articles/progressive-enhancement.md new file mode 100644 index 0000000..bdeb453 --- /dev/null +++ b/articles/progressive-enhancement.md @@ -0,0 +1,13 @@ +--- +title: "Progressive Enhancementもしくは私達が目指すべき姿について" +emoji: "😽" +type: "idea" # tech: 技術記事 / idea: アイデア +topics: [] +published: false +--- + +## Progressive Enhancementについて + +## 推奨環境と必須環境という考え方 + +## 私達ができること From cf93c625d2ccba0a458980f33fcd5e4ea54db742 Mon Sep 17 00:00:00 2001 From: ken7253 Date: Mon, 1 Jan 2024 01:23:42 +0900 Subject: [PATCH 2/6] writing --- articles/progressive-enhancement.md | 39 +++++++++++++++++- .../system-requirement.png | Bin 0 -> 28284 bytes 2 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 images/articles/progressive-enhancement/system-requirement.png diff --git a/articles/progressive-enhancement.md b/articles/progressive-enhancement.md index bdeb453..6608bf1 100644 --- a/articles/progressive-enhancement.md +++ b/articles/progressive-enhancement.md @@ -2,12 +2,49 @@ title: "Progressive Enhancementもしくは私達が目指すべき姿について" emoji: "😽" type: "idea" # tech: 技術記事 / idea: アイデア -topics: [] +topics: ["フロントエンド"] published: false --- ## Progressive Enhancementについて +MDNでは下記のように説明されています。 + +> プログレッシブエンハンスメント (Progressive enhancement) とは、可能な限り多くのユーザーに不可欠なコンテンツと機能のベースラインを提供することを中心とした設計哲学であり、必要なすべてのコードを実行できる最新のブラウザーのユーザーに限り、最高の体験を提供します。 + +https://developer.mozilla.org/ja/docs/Glossary/Progressive_Enhancement + +### Graceful Degradationとの違いについて + +Progressive Enhancementが基礎を作ってから積み上げていくようなイメージに対して、Graceful Degradationはとりあえず作ってから最低限のラインを補修するようなイメージでしょうか。 +この２つは多くのユーザーに最低限必要な機能を届けるという点で非常に似ていますがアプローチと考え方が異なります。 + +https://developer.mozilla.org/ja/docs/Glossary/Graceful_degradation + +## 古いブラウザ向けに届けるということ + ## 推奨環境と必須環境という考え方 +PCゲームの世界では「動作推奨環境」と「動作必須環境」という考え方があります。 +PCゲームの場合特定のハードというのは存在せず、ユーザーが自分でパーツを選んでPCを組んだり市販のPCでもスペックに差があります。 + +すべてのPCで同じようにゲームが動く保証はなく、自分がプレイしたい水準を満たしているかなどを確認した上でゲームを購入します。 + +動作推奨環境：ゲームが快適にプレイできるハードウェアスペックの基準 +動作必須環境：ゲームを実行するのに最低限必要なハードウェアスペックの基準 + +![THE FINALSというゲームのシステム要件を表示している画面のスクリーンショット](/images/articles/progressive-enhancement/system-requirement.png) +*動作必須環境と動作推奨環境を比べてみるとCPUやGPUのスペックが高くなっているのが分かる* + +### 品質の保証基準も範囲で考える + +Progressive EnhancementやGraceful Degradationの考え方を取り入れるのであれば動作環境も「最低」と「推奨」を分けるべきではないかと思いました。 + ## 私達ができること + +## 参考資料 + +- [Progressive Enhancement (プログレッシブエンハンスメント) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN](https://developer.mozilla.org/ja/docs/Glossary/Progressive_Enhancement) +- [Graceful degradation (グレースフルデグラデーション) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN](https://developer.mozilla.org/ja/docs/Glossary/Graceful_degradation) +- [Progressive Enhancement reading list 2021](https://www.quirksmode.org/blog/archives/2021/02/progressive_enh_1.html) +- [HTML: The Inaccessible Parts](https://daverupert.com/2020/02/html-the-inaccessible-parts/) diff --git a/images/articles/progressive-enhancement/system-requirement.png b/images/articles/progressive-enhancement/system-requirement.png new file mode 100644 index 0000000000000000000000000000000000000000..6db7c4f62bb3ef46363b26139a8141f24dc58df0 GIT binary patch literal 28284 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 literal 0 HcmV?d00001 From 4c4f898e84c68d168af98eb43f8102cc6933df0c Mon Sep 17 00:00:00 2001 From: ken7253 <57705206+ken7253@users.noreply.github.com> Date: Wed, 3 Jan 2024 16:40:28 +0900 Subject: [PATCH 3/6] =?UTF-8?q?progressive-enhancement.md=20=E3=81=AE?= =?UTF-8?q?=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- articles/progressive-enhancement.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/articles/progressive-enhancement.md b/articles/progressive-enhancement.md index 6608bf1..264f4d8 100644 --- a/articles/progressive-enhancement.md +++ b/articles/progressive-enhancement.md @@ -5,6 +5,9 @@ type: "idea" # tech: 技術記事 / idea: アイデア topics: ["フロントエンド"] published: false --- + +昨今、Progressive Enhancementという言葉を耳にする機会が多くなったと感じています。 +個人的に興味のある考え方であったので、少し調べて考えをまとめてみようと思います。 ## Progressive Enhancementについて @@ -19,8 +22,12 @@ https://developer.mozilla.org/ja/docs/Glossary/Progressive_Enhancement Progressive Enhancementが基礎を作ってから積み上げていくようなイメージに対して、Graceful Degradationはとりあえず作ってから最低限のラインを補修するようなイメージでしょうか。 この２つは多くのユーザーに最低限必要な機能を届けるという点で非常に似ていますがアプローチと考え方が異なります。 -https://developer.mozilla.org/ja/docs/Glossary/Graceful_degradation +https://developer.mozilla.org/ja/docs/Glossary/Graceful_degradation + +### JSが無効な環境は重要なファクターではあるが全てではない +Progressive Enhancementを語る場合、フロントエンドにおいてはよくJSが無効化されている環境向けにHTMLやCSSの活用が挙げられることも多いと思います。 + ## 古いブラウザ向けに届けるということ ## 推奨環境と必須環境という考え方 From 5982dbb8c4510bb7f945b13f57464267b76a28b9 Mon Sep 17 00:00:00 2001 From: ken7253 Date: Wed, 3 Jan 2024 17:30:44 +0900 Subject: [PATCH 4/6] =?UTF-8?q?JS=E3=81=A8HTML=E3=81=AE=E8=A9=B1=E3=82=92?= =?UTF-8?q?=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- articles/progressive-enhancement.md | 30 ++++++++++++++++++++--------- 1 file changed, 21 insertions(+), 9 deletions(-) diff --git a/articles/progressive-enhancement.md b/articles/progressive-enhancement.md index 264f4d8..ac36d97 100644 --- a/articles/progressive-enhancement.md +++ b/articles/progressive-enhancement.md @@ -5,9 +5,9 @@ type: "idea" # tech: 技術記事 / idea: アイデア topics: ["フロントエンド"] published: false --- - -昨今、Progressive Enhancementという言葉を耳にする機会が多くなったと感じています。 -個人的に興味のある考え方であったので、少し調べて考えをまとめてみようと思います。 + +昨今、Progressive Enhancementという言葉を耳にする機会が多くなったと感じています。 +個人的に興味のある考え方であったので、少し調べて考えをまとめてみようと思います。 ## Progressive Enhancementについて @@ -15,21 +15,33 @@ MDNでは下記のように説明されています。 > プログレッシブエンハンスメント (Progressive enhancement) とは、可能な限り多くのユーザーに不可欠なコンテンツと機能のベースラインを提供することを中心とした設計哲学であり、必要なすべてのコードを実行できる最新のブラウザーのユーザーに限り、最高の体験を提供します。 -https://developer.mozilla.org/ja/docs/Glossary/Progressive_Enhancement +https://developer.mozilla.org/ja/docs/Glossary/Progressive_Enhancement#:~:text=%E3%83%97%E3%83%AD%E3%82%B0%E3%83%AC%E3%83%83%E3%82%B7%E3%83%96%E3%82%A8%E3%83%B3%E3%83%8F%E3%83%B3%E3%82%B9%E3%83%A1%E3%83%B3%E3%83%88%20(Progressive%20enhancement)%20%E3%81%A8%E3%81%AF%E3%80%81%E5%8F%AF%E8%83%BD%E3%81%AA%E9%99%90%E3%82%8A%E5%A4%9A%E3%81%8F%E3%81%AE%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%AB%E4%B8%8D%E5%8F%AF%E6%AC%A0%E3%81%AA%E3%82%B3%E3%83%B3%E3%83%86%E3%83%B3%E3%83%84%E3%81%A8%E6%A9%9F%E8%83%BD%E3%81%AE%E3%83%99%E3%83%BC%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%B3%E3%82%92%E6%8F%90%E4%BE%9B%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%82%92%E4%B8%AD%E5%BF%83%E3%81%A8%E3%81%97%E3%81%9F%E8%A8%AD%E8%A8%88%E5%93%B2%E5%AD%A6%E3%81%A7%E3%81%82%E3%82%8A%E3%80%81%E5%BF%85%E8%A6%81%E3%81%AA%E3%81%99%E3%81%B9%E3%81%A6%E3%81%AE%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E5%AE%9F%E8%A1%8C%E3%81%A7%E3%81%8D%E3%82%8B%E6%9C%80%E6%96%B0%E3%81%AE%E3%83%96%E3%83%A9%E3%82%A6%E3%82%B6%E3%83%BC%E3%81%AE%E3%83%A6%E3%83%BC%E3%82%B6%E3%83%BC%E3%81%AB%E9%99%90%E3%82%8A%E3%80%81%E6%9C%80%E9%AB%98%E3%81%AE%E4%BD%93%E9%A8%93%E3%82%92%E6%8F%90%E4%BE%9B%E3%81%97%E3%81%BE%E3%81%99%E3%80%82 ### Graceful Degradationとの違いについて Progressive Enhancementが基礎を作ってから積み上げていくようなイメージに対して、Graceful Degradationはとりあえず作ってから最低限のラインを補修するようなイメージでしょうか。 この２つは多くのユーザーに最低限必要な機能を届けるという点で非常に似ていますがアプローチと考え方が異なります。 -https://developer.mozilla.org/ja/docs/Glossary/Graceful_degradation - -### JSが無効な環境は重要なファクターではあるが全てではない +https://developer.mozilla.org/ja/docs/Glossary/Graceful_degradation + +### JSが無効な環境は重要な要素ではあるが全てではない + +Progressive Enhancementを語る場合、フロントエンドにおいてはよくJSが無効化されている環境向けたHTMLやCSSの活用が挙げられることも多いと思います。 +この考え方は[Progressive Enhancement reading list 2021 - QuirksBlog](https://www.quirksmode.org/blog/archives/2021/02/progressive_enh_1.html#:~:text=I%20find%20any.-,Layer%203%3A%20JavaScript,-Then%20we%20come)のLayer 3: JavaScriptでも触れられている通り、重要な要素ではありますがProgressive Enhancementの全てではないと思っています。 + +最初に記載したように「可能な限り多くのユーザーに不可欠なコンテンツと機能のベースラインを提供する」という観点では、確かにHTMLとCSSのみで基本的な機能を実装し発展的なUXをJavaScriptで実現するという手法は実に合理的だと思っています。 + +しかし「可能な限り多くのユーザー」という定義であるならばProgressive Enhancementはまずはじめに古いブラウザのユーザーのことを考えるべきではないかという考えに至ります。 -Progressive Enhancementを語る場合、フロントエンドにおいてはよくJSが無効化されている環境向けにHTMLやCSSの活用が挙げられることも多いと思います。 - ## 古いブラウザ向けに届けるということ +Progressive Enhancementの話題になるとよく引き合いに出される最新のHTMLやCSSの仕様ですが、これらは古いブラウザではサポートされていないことが多いです。 +特にSafari 14.xなどでは現在〇〇%のユーザーがいますがCSSの`:has()`やHTMLの`popover`/`popoverTarget`などの属性値はサポートされていません。 + + + +Progressive Enhancementが「可能な限り多くのユーザーに不可欠なコンテンツと機能のベースラインを提供する」ことを目的とするならば、まずきちんとアプリケーションの対応ブラウザを決め、それから対応ブラウザのレンジを広くしてくことが最初に目指すべき項目なのではないでしょうか。 + ## 推奨環境と必須環境という考え方 PCゲームの世界では「動作推奨環境」と「動作必須環境」という考え方があります。 From a6fd0cedbf8745bbc2411c2fb8791baca6c83f63 Mon Sep 17 00:00:00 2001 From: ken7253 Date: Thu, 4 Jan 2024 21:30:38 +0900 Subject: [PATCH 5/6] =?UTF-8?q?=E8=BF=BD=E8=A8=98=E3=80=81=E8=A6=8B?= =?UTF-8?q?=E5=87=BA=E3=81=97=E3=81=AE=E8=BF=BD=E5=8A=A0=E3=81=AA=E3=81=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- articles/progressive-enhancement.md | 20 ++++++++++++++------ 1 file changed, 14 insertions(+), 6 deletions(-) diff --git a/articles/progressive-enhancement.md b/articles/progressive-enhancement.md index ac36d97..c5d3e87 100644 --- a/articles/progressive-enhancement.md +++ b/articles/progressive-enhancement.md @@ -35,19 +35,25 @@ Progressive Enhancementを語る場合、フロントエンドにおいてはよ ## 古いブラウザ向けに届けるということ -Progressive Enhancementの話題になるとよく引き合いに出される最新のHTMLやCSSの仕様ですが、これらは古いブラウザではサポートされていないことが多いです。 +Progressive Enhancementの話題になるとよく引き合いに出される最新のHTMLやCSSの仕様について、当たり前ですがこれらは古いブラウザではサポートされていないことが多いです。 特にSafari 14.xなどでは現在〇〇%のユーザーがいますがCSSの`:has()`やHTMLの`popover`/`popoverTarget`などの属性値はサポートされていません。 -Progressive Enhancementが「可能な限り多くのユーザーに不可欠なコンテンツと機能のベースラインを提供する」ことを目的とするならば、まずきちんとアプリケーションの対応ブラウザを決め、それから対応ブラウザのレンジを広くしてくことが最初に目指すべき項目なのではないでしょうか。 +HTMLやCSSのポリフィルはJavaScriptのポリフィルに比べて制約が多く、FlexGapやPopoverのポリフィルではREADMEに使用する際の注意事項が記載されています。 -## 推奨環境と必須環境という考え方 +https://github.com/oddbird/popover-polyfill?tab=readme-ov-file#caveats + +https://github.com/gavinmcfarland/flex-gap-polyfill?tab=readme-ov-file#known-limitations + +エンジニアとしては最新ブラウザのみをサポートするという風にしたくなりますが、Progressive Enhancementが「可能な限り多くのユーザーに不可欠なコンテンツと機能のベースラインを提供する」ことを目的とするならば、まずは古いブラウザへの対応を考える必要があると考えます。 -PCゲームの世界では「動作推奨環境」と「動作必須環境」という考え方があります。 -PCゲームの場合特定のハードというのは存在せず、ユーザーが自分でパーツを選んでPCを組んだり市販のPCでもスペックに差があります。 + -すべてのPCで同じようにゲームが動く保証はなく、自分がプレイしたい水準を満たしているかなどを確認した上でゲームを購入します。 +## 推奨環境と必須環境という考え方 + +急に話が変わりますが、PCゲームの世界では「動作推奨環境」と「動作必須環境」という考え方があります。 +これは家庭用ゲーム機のようにハードウェアが統一されていないPCゲームの世界においては非常に重要な情報になります。 動作推奨環境：ゲームが快適にプレイできるハードウェアスペックの基準 動作必須環境：ゲームを実行するのに最低限必要なハードウェアスペックの基準 @@ -61,6 +67,8 @@ Progressive EnhancementやGraceful Degradationの考え方を取り入れるの ## 私達ができること +## 最後に + ## 参考資料 - [Progressive Enhancement (プログレッシブエンハンスメント) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN](https://developer.mozilla.org/ja/docs/Glossary/Progressive_Enhancement) From 1d18ba870e45c1e773e3ca7352907c089160d0d3 Mon Sep 17 00:00:00 2001 From: ken7253 Date: Tue, 16 Jan 2024 01:15:26 +0900 Subject: [PATCH 6/6] =?UTF-8?q?=E3=81=96=E3=81=A3=E3=81=8F=E3=82=8A?= =?UTF-8?q?=E7=9D=80=E5=9C=B0=E7=82=B9=E3=81=A8=E3=81=8B=E3=82=92=E6=9B=B8?= =?UTF-8?q?=E3=81=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- articles/progressive-enhancement.md | 52 +++++++++++++++++++++++++---- 1 file changed, 46 insertions(+), 6 deletions(-) diff --git a/articles/progressive-enhancement.md b/articles/progressive-enhancement.md index c5d3e87..47b5dde 100644 --- a/articles/progressive-enhancement.md +++ b/articles/progressive-enhancement.md @@ -27,13 +27,13 @@ https://developer.mozilla.org/ja/docs/Glossary/Graceful_degradation ### JSが無効な環境は重要な要素ではあるが全てではない Progressive Enhancementを語る場合、フロントエンドにおいてはよくJSが無効化されている環境向けたHTMLやCSSの活用が挙げられることも多いと思います。 -この考え方は[Progressive Enhancement reading list 2021 - QuirksBlog](https://www.quirksmode.org/blog/archives/2021/02/progressive_enh_1.html#:~:text=I%20find%20any.-,Layer%203%3A%20JavaScript,-Then%20we%20come)のLayer 3: JavaScriptでも触れられている通り、重要な要素ではありますがProgressive Enhancementの全てではないと思っています。 +[Progressive Enhancement reading list 2021 - QuirksBlog](https://www.quirksmode.org/blog/archives/2021/02/progressive_enh_1.html#:~:text=I%20find%20any.-,Layer%203%3A%20JavaScript,-Then%20we%20come)のLayer 3: JavaScriptでも触れられている通り、この考え方は重要な要素ではありますがProgressive Enhancementの全てではないと思っています。 最初に記載したように「可能な限り多くのユーザーに不可欠なコンテンツと機能のベースラインを提供する」という観点では、確かにHTMLとCSSのみで基本的な機能を実装し発展的なUXをJavaScriptで実現するという手法は実に合理的だと思っています。 -しかし「可能な限り多くのユーザー」という定義であるならばProgressive Enhancementはまずはじめに古いブラウザのユーザーのことを考えるべきではないかという考えに至ります。 +## 可能な限り多くのユーザーとは -## 古いブラウザ向けに届けるということ +しかし「可能な限り多くのユーザー」という定義であるならばProgressive Enhancementはまずはじめに古いブラウザのユーザーのことを考えるべきではないかという考えに至ります。 Progressive Enhancementの話題になるとよく引き合いに出される最新のHTMLやCSSの仕様について、当たり前ですがこれらは古いブラウザではサポートされていないことが多いです。 特にSafari 14.xなどでは現在〇〇%のユーザーがいますがCSSの`:has()`やHTMLの`popover`/`popoverTarget`などの属性値はサポートされていません。 @@ -50,10 +50,17 @@ https://github.com/gavinmcfarland/flex-gap-polyfill?tab=readme-ov-file#known-lim -## 推奨環境と必須環境という考え方 +## 我々は何をサポートするべきなのか + +理想論を書いてみましたが、すべてをサポートするというのは現実的ではありません。 +サポート範囲を単純にブラウザバージョンで区切ることも可能ですが、JS/CSSの有効・無効やアクセシビリティ観点など、考慮することは多岐に渡りプロダクトの性質によって求められるサポート範囲は変わってくると思います。 + +ソフトウェアを作るためにはどのような環境をサポートするのか、しないのかという話は簡単に決められませんが非常に重要な項目だと考えています。 + +### 推奨環境と必須環境という考え方 急に話が変わりますが、PCゲームの世界では「動作推奨環境」と「動作必須環境」という考え方があります。 -これは家庭用ゲーム機のようにハードウェアが統一されていないPCゲームの世界においては非常に重要な情報になります。 +これは家庭用ゲーム機のようにハードウェアが統一されていないPCゲームの世界において、快適に製品を遊べるかという重要な指標になっています。 動作推奨環境：ゲームが快適にプレイできるハードウェアスペックの基準 動作必須環境：ゲームを実行するのに最低限必要なハードウェアスペックの基準 @@ -63,12 +70,45 @@ https://github.com/gavinmcfarland/flex-gap-polyfill?tab=readme-ov-file#known-lim ### 品質の保証基準も範囲で考える -Progressive EnhancementやGraceful Degradationの考え方を取り入れるのであれば動作環境も「最低」と「推奨」を分けるべきではないかと思いました。 +このように、Progressive EnhancementやGraceful Degradationの考え方を取り入れるのであれば要求環境も「最低」と「推奨」を分けるべきではないかと思いました。 +あくまで例ですが、下記のように達成するべき基準を対応環境ごとに分けて定義することによってこれらの考え方をプロダクトの品質管理に反映できるのではないか、と考えています。 + +#### 推奨環境での動作 + +プロダクトのUX指標としての目標 +最新バージョンのブラウザのみをサポートする。 + +- パフォーマンス指標 +- デザインやインタラクションの再現性 +- （高度な）アクセシビリティ対応 + +#### 必須環境での動作 + +プロダクトを基本的に利用するための目標 +FirefoxとChromeは３バージョン前までSafariは14.0までをサポートする。 + +- プロダクトの利用が継続困難になるバグが無いか +- （基本的な）アクセシビリティ対応 ## 私達ができること +私達ができること（もしくは目指すべき目標）としては + +- 最低限アプリケーションが動作する環境と快適に動く環境を分けて考える。 +- それらをそれぞれ定義した上でユーザーと約束をする。 +- 基準に沿ってリリースが行えるように体制を整える。 +- 定期的に動作環境を見直す。 + +これらのことができるようになるとProgressive EnhancementやGraceful Degradationを意識して開発ができるようになるのではないかという考えに至りました。 + ## 最後に +Progressive Enhancementについて調べてみたり、考えを巡らせてみたりした結果として、着地点があまり関係のないプロダクトの仕様の話になってしまいました。 +内容も現在のプロダクト開発からすると、複数の動作環境を定義して品質保証をするというのはかなり理想論的な話だとも思っています。 +しかし、これらの考え方を取り入れる上で自分たちがどこを目標として開発を進めていくのかということが明確になっていることは非常に重要なことだと考えています。 + +プロダクト開発の生産性が上がったり、品質保証に必要なコストが自動化などによって削減できた未来ではこのようにきめ細かい開発目標の定義とユーザーとの約束ができるようになる未来を目指していきたいとフロントエンドエンジニアとして思いました。 + ## 参考資料 - [Progressive Enhancement (プログレッシブエンハンスメント) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN](https://developer.mozilla.org/ja/docs/Glossary/Progressive_Enhancement)