から確認ができます。
-- [1. Svelte を始める](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started)
+- [Svelte を始める](/ja/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_getting_started)
- : この記事では、 [Svelte フレームワーク](https://svelte.dev/)の簡単な紹介をします。 Svelte がどのように動作するのか、そしてこれまで見てきた他のフレームワークやツールと何が違うのかを見ていきます。その後、開発環境を構築し、サンプルアプリを作成し、プロジェクトの構造を理解し、ローカルで実行し、本番用にビルドする方法を学びます。
-- [2. Svelte Todo リストアプリを始める](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_Todo_list_beginning)
+- [Svelte Todo リストアプリを始める](/ja/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_Todo_list_beginning)
- : さて、 Svelte でこれらがどのように動作するのか基本的な理解ができたところで、例のアプリであるTodoリストの作成を始めてみましょう。この記事では、まずアプリに求められる機能を見ていきます。次に `Todos.svelte` コンポーネントを作成し、静的なマークアップとスタイルを所有し、 ToDo リストアプリの機能を開発し始めるための準備をすべて整えます（この後の記事で詳しく説明します）。
-- [3. Svelte の動的な動作: 変数とプロップを一緒に作業する](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_variables_props)
+- [Svelte の動的な動作: 変数とプロップを一緒に作業する](/ja/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_variables_props)
- : これでマークアップとスタイルが保有されたので、 Svelte の ToDo リストアプリに必要な機能の開発に取り掛かることができます。この記事では、変数と props を使用してアプリを動的にし、 ToDo を追加したり削除したり、完了マークをつけたり、ステータスでフィルタリングしたりできるようにします。
-- [4. Svelte アプリのコンポーネント化](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_components)
+- [Svelte アプリのコンポーネント化](/ja/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_components)
- : この記事の主な目的は、アプリを管理しやすいコンポーネントに分割し、それらのコンポーネント間で情報を共有する方法を見ることです。アプリをコンポーネント化し、さらにユーザーが既存のコンポーネントを更新できるように機能を追加していきます。
-- [5. 高度な Svelte: リアクティブ、ライフサイクル、アクセシビリティ](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_reactivity_lifecycle_accessibility)
+- [高度な Svelte: リアクティブ、ライフサイクル、アクセシビリティ](/ja/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_reactivity_lifecycle_accessibility)
- : この記事では、アプリの最終的な機能を追加し、さらにアプリをコンポーネント化します。オブジェクトや配列の更新に関連するリアクティビティの問題に対処する方法について学びます。よくある落とし穴を避けるために、 Svelte のリアクティブシステムを少し深く掘り下げる必要があります。また、アクセシビリティのフォーカスに関する問題の解決や、その他の問題にも目を向けていきます。
-- [6. Svelte のストアでの作業](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_stores)
+- [Svelte のストアでの作業](/ja/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_stores)
- : この記事では、Svelteで状態管理を処理するもう一つの方法である[ストア](https://learn.svelte.dev/tutorial/writable-stores)を示します。ストアは、値を格納するグローバルなデータリポジトリーです。コンポーネントはストアに格納され、その値が変更されたときに通知を受け取ることができます。
-- [7. TypeScript support in Svelte](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_TypeScript)
+- [TypeScript support in Svelte](/ja/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_TypeScript)
- : これで、 Svelte アプリケーションで TypeScript を使用する方法を学ぶことができます。まず、 TypeScript とは何か、そして TypeScript が私たちにもたらす好ましいこととは何かを学びます。次に、 TypeScript ファイルを使用して作業するために、プロジェクトをどのように設定するかを見ていきます。最後に、 TypeScript の機能を十分に活かすためにはどのような修正が必要なのか、アプリを確認します。
-- [8. 展開と次の手順](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_deployment_next)
+- [展開と次の手順](/ja/docs/Learn_web_development/Core/Frameworks_libraries/Svelte_deployment_next)
- : この最終記事では、アプリケーションを展開してオンラインにする方法と、 Svelte の学習を継続するために取得すべきリソースをいくつか紹介します。
-## Angular のチュートリアル
+### Angular のチュートリアル
> [!NOTE]
-> この Angular のチュートリアルは 2022 年 5 月に、 Angular CLI (NG) 13.3.4 で動作確認を行いました。
+> この Angular のチュートリアルは 2021 年 4 月に、 Angular CLI (NG) 11.2.5 で動作確認を行いました。
-- [1. Angular を始める](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started)
+- [Angular を始める](/ja/docs/Learn_web_development/Core/Frameworks_libraries/Angular_getting_started)
- : この記事では、Angular が提供するものを確認し、前提条件をインストールしてサンプルアプリを設定し、Angular の基本的なアーキテクチャを確認します。
-- [2. Angular todo リストアプリの事始め](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning)
+- [Angular todo リストアプリの事始め](/ja/docs/Learn_web_development/Core/Frameworks_libraries/Angular_todo_list_beginning)
- : この時点で、Angular を使用して todo リストアプリケーションの作成を開始する準備が整いました。 完成したアプリケーションには、やることのリストが表示され、機能の編集、削除、追加が含まれます。 この記事では、アプリケーションの構造を理解し、やることの基本的なリストを表示するようになります。
-- [3. Angular アプリのスタイリング](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling)
+- [Angular アプリのスタイリング](/ja/docs/Learn_web_development/Core/Frameworks_libraries/Angular_styling)
- : 基本的なアプリケーション構造がセットアップされ、アプリケーションが表示されるようになったので、次の段階へ移って、Angular がアプリケーションのスタイリングをどのように処理するかを見てみましょう。
-- [4. item コンポーネントの作成](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component)
+- [item コンポーネントの作成](/ja/docs/Learn_web_development/Core/Frameworks_libraries/Angular_item_component)
- : コンポーネントは、アプリケーションを整理するための方法を提供されます。この記事では、リスト内の個々の項目を処理するコンポーネントを作成し、チェック、編集、削除の機能を追加する方法を説明します。 Angular のイベントモデルについて説明します。
-- [5. To Do アイテムのフィルタリング](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_filtering)
+- [To Do アイテムのフィルタリング](/ja/docs/Learn_web_development/Core/Frameworks_libraries/Angular_filtering)
- : これで、ユーザーが ToDo 項目をフィルタリングして、アクティブ、完了、すべての項目を表示できるようにする機能を追加することにしましょう。
-- [6. Angular アプリケーションのビルドとその他のリソース](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building)
+- [Angular アプリケーションのビルドとその他のリソース](/ja/docs/Learn_web_development/Core/Frameworks_libraries/Angular_building)
- : この最後の Angular の記事は、プロダクションに適したアプリを構築する方法を取り上げ、学習の旅を続けるためのさらなるリソースを提供します。
## どのフレームワークを選ぶべきか？
-私たちは、 5 つのフレームワークに焦点を当てたガイド付きの記事の最初のセットを公開しています。そのうち4つのフレームワークは、 React/ReactDOM、Ember、Vue、Angular と非常に人気があり確立されたものですが、 Svelte は比較的新しいもので、多くのプロミスを示し、最近多くの人気を獲得しているものです。
-
-これらを取り上げた理由は以下の通りです。
+私たちは、 5 つのフレームワーク、Angular、Ember、React/ReactDOM、Svelte、Vue を扱います。
-- どのようなソフトウェアツールでもそうですが、積極的に開発されているもので、来週には開発中止になっていないようなもの、また、就職活動で自分のスキルセットに加えるのに望ましいものを選ぶとよいでしょう。
-- 強力なコミュニティと優れた文書化があります。特に始めたばかりの頃は、複雑なテーマを学習する際に助けを得られることがとても重要です。
+- これらはしばらくの間は人気が続く選択肢です。ソフトウェアツールの場合と同様に、来週には販売中止にならない可能性が高く、就職活動中にスキルセットに加えるのに望ましい選択肢として、現在も積極的に開発されているものを選ぶのが良いでしょう。
+- 強力なコミュニティと優れたドキュメントがあります。特に始めたばかりの頃は、複雑なテーマを学習する際に助けを得られることがとても重要です。
- 私たちは現代のフレームワークをすべて網羅するためのリソースは持っていません。常に新しいものが現れるため、最新版を掲載するのはとても難しいでしょう。
- 初心者のうちは、利用できる膨大な数の選択肢の中から何に注目すべきかを選ぼうとするのは、とても難しい問題です。そのため、リストを短くすることが有効です。
前もって言っておきますが、取り上げたフレームワークは私たちがベストだと思うから選んだわけでは**ありません**。また推奨しているわけでもありません。ただ、上記の基準を満たしていると考えただけです。
-初期の段階では、もっと多くのフレームワークを取り上げたいと考えていましたが、このコンテンツの公開を遅らせることよりも、後からフレームワークを追加する方が良いと考えました。もし、あなたのお気に入りのフレームワークがこのコンテンツに含まれておらず、それを変える手助けをしたいのであれば、私たちと気軽に[意見を交わしましょう](/ja/docs/MDN/Community/Communication_channels)！
+{{NextMenu("Learn_web_development/Core/Frameworks_libraries/Introduction", "Learn_web_development/Core")}}
diff --git a/files/ja/learn_web_development/core/frameworks_libraries/introduction/index.md b/files/ja/learn_web_development/core/frameworks_libraries/introduction/index.md
index b3f5043610fb00..2ba29a98063f96 100644
--- a/files/ja/learn_web_development/core/frameworks_libraries/introduction/index.md
+++ b/files/ja/learn_web_development/core/frameworks_libraries/introduction/index.md
@@ -1,12 +1,13 @@
---
title: クライアントサイドフレームワークの概要
slug: Learn_web_development/Core/Frameworks_libraries/Introduction
-original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction
l10n:
- sourceCommit: 70da4a8f77d691220aa8ed9d7305b290d52e7337
+ sourceCommit: 5b20f5f4265f988f80f513db0e4b35c7e0cd70dc
---
-{{LearnSidebar}}{{NextMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{LearnSidebar}}
+
+{{NextMenu("Learn_web_development/Core/Frameworks_libraries/Main_features", "Learn_web_development/Core/Frameworks_libraries")}}
JavaScript とフレームワークの簡単な歴史を見て、フレームワークがなぜ存在するのか、そしてそれが私たちに何をもたらすのか、学習するフレームワークの選択をどのように考え始めるか、そしてクライアント側フレームワークの代替手段は何があるのかをこの分野の一般的な概要からフレームワークの考察を始めます。
@@ -15,29 +16,32 @@ JavaScript とフレームワークの簡単な歴史を見て、フレームワ
| 前提条件: |
- HTML、
- CSS、
- JavaScript に精通していること。
+ コアの HTML、
+ CSS、
+ JavaScript 言語が分かっていること。
|
- | 目的: |
+ 学習成果: |
- クライアントサイド JavaScript フレームワークがどのようにして登場したのか、それによって何が解決されるのか、どのような代替案があるのか、どのように一つを選べばよいかを理解すること。
+
+ - サードパーティーコードとは何か、そして、クライアントサイドJavaScriptフレームワークがどのようにして存在するようになったのか。
+ - フレームワークが解決する問題、どのような選択肢があるか、そして、どのようにして選べばよいか。
+ - ライブラリーとフレームワークの違い。
+ - フレームワークを使用すべき場合と使用すべきでない場合。
+
|
-## 簡単な歴史
+## ライブラリーやフレームワークの登場
1996 年に JavaScript が登場すると、それまで静的な文書で構成されていたウェブに、ところどころの操作の可能性と興奮が加わりました。 ウェブは単に _ものを読む_ だけではなく、 _何かをする_ ための場所になりました。 JavaScript の人気は着実に高まりました。 JavaScript を扱う開発者は、直面した問題を解決するためのツールを作成し、**ライブラリー**と呼ばれる再利用可能なパッケージにパッケージ化して、他のユーザーとソリューションを共有できるようにしました。このライブラリーの共有エコシステムは、ウェブの成長を形作るのに役立ちました。
-現在、 JavaScript はウェブに不可欠な部分となり、[すべてのウェブサイトの 98% で使用されており](https://w3techs.com/technologies/details/cp-javascript)、ウェブは現代生活に不可欠な部分です。ユーザーは論文を書いたり、予算を管理したり、音楽をストリーミングしたり、映画を鑑賞したり、テキスト、音声、またはビデオチャットを使って遠距離の他のユーザーと瞬時にコミュニケーションしたりできます。ウェブを使用すると、これまでコンピューターにインストールされたネイティブアプリケーションでのみ可能であったことが実行できるようになります。これらの最新の複雑でインタラクティブなウェブサイトは、**ウェブアプリケーション**と呼ばれることがよくあります。
-
-最新の JavaScript フレームワークの出現により、非常に動的でインタラクティブなアプリケーションの構築がはるかに簡単になりました。**フレームワーク**は、ソフトウェアの構築方法についての意見を提供するライブラリーです。これらの意見により、アプリケーションの予測可能性と均一性が可能になります。予測可能性により、ソフトウェアを巨大なサイズに拡張しながらも保守可能になります。予測可能性と保守性は、ソフトウェアの健全性と寿命にとって不可欠です。
+**フレームワーク**とは、ソフトウェアの構築方法に関する意見を提供するライブラリーです。これらの意見により、アプリケーションの予測可能性と均一性が実現します。予測可能性により、ソフトウェアは巨大なサイズに拡大しても、保守性を維持することができます。予測可能性と保守性は、ソフトウェアの健全性と寿命を維持するために不可欠です。現行の JavaScript フレームワークの出現により、高度に動的で操作性の高いアプリケーションを構築することが格段に容易になりました。
-JavaScript フレームワークは、あなたが毎日使用するウェブサイトの多くを含む、現代のウェブ上の優れたソフトウェアの多くを強化しています。現在この記事を読んでいる MDN Web Docs は、React/ReactDOM フレームワークを使用してフロントエンドを強化します。
+JavaScript フレームワークは、現行のウェブ上で使用されている多くの優れたソフトウェアの基盤となっています。これには、あなたが日常的に使用しているウェブサイトの多くも含まれます。
## どのようなフレームワークがあるのか
@@ -47,24 +51,18 @@ JavaScript フレームワークは、あなたが毎日使用するウェブサ
[Ember](https://emberjs.com/) は、 [SproutCore](https://en.wikipedia.org/wiki/SproutCore) プロジェクトで開始された作業の継続として、2011 年 12 月に最初にリリースされました。これは古いフレームワークであり、React や Vue などの最新の代替フレームに比べてユーザー数は少ないですが、その安定性、コミュニティサポート、いくつかの賢いコーディング原則により、依然としてかなりの人気を誇っています。
-[Ember の学習を開始する](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started)
-
### Angular
[Angular](https://angular.io) は、Google の Angular チームと個人および企業のコミュニティが主導するオープンソースのウェブアプリケーションフレームワークです。これは、 [AngularJS](https://angularjs.org/) を構築したのと同じチームによる完全な書き直しです。 Angular は 2016 年 9 月 14 日に正式にリリースされました。
Angular は、宣言型 HTML テンプレートを使用するコンポーネントベースのフレームワークです。ビルド時に、開発者に対して透過的に、フレームワークのコンパイラーがテンプレートを最適化された JavaScript 命令に変換します。 Angular は、JavaScript のスーパーセットである [TypeScript](https://www.typescriptlang.org/) を使用します。これについては、次の章でもう少し詳しく説明します。
-[Angular の学習を開始する](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started)
-
### Vue
オリジナルの [AngularJS](https://angularjs.org/) プロジェクトに取り組み、そこから学んだエヴァン・ユーは、2014年に [Vue](https://vuejs.org/) をリリースしました。 Vue はビッグ 4 の中では最も歴史が浅いが、最近人気が急上昇しています。
Vue は、 [AngularJS](https://angularjs.org/) と同様に、独自のコードの一部で HTML を拡張します。それとは別に、主に最新の標準 JavaScript に依存しています。
-[Vue の学習を開始する](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started)
-
### React
Facebook は 2013 年に [React](https://react.dev/) をリリースしました。この時点で、Facebook はすでに React を使用して社内の問題の多くを解決していました。技術的には、 React 自体はフレームワークではありません。これは UI コンポーネントをレンダリングするためのライブラリーです。 React は、アプリケーションを作成するために他のライブラリーと組み合わせて使用されます。 React と [React Native](https://reactnative.dev/) を使用すると、開発者はモバイルアプリケーションを作成できます。 React と [ReactDOM](https://react.dev/reference/react-dom) を使用すると、ウェブアプリケーションなどを作成できます。
@@ -73,9 +71,7 @@ React と ReactDOM は一緒に使用されることが多いため、React は
React は、 [JSX](https://react.dev/learn/writing-markup-with-jsx) として知られる HTML のような構文で JavaScript を拡張します。
-[React の学習を開始する](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started)
-
-## 何故フレームワークが存在するのか
+## なぜフレームワークが存在するのか
フレームワークの作成にインスピレーションを与えた環境について説明しましたが、実際には、開発者がフレームワークを作成する必要性を _なぜ_ 感じたのかというと、そうではありません。その理由を探るには、まずソフトウェア開発の課題を検討する必要があります。
@@ -183,7 +179,7 @@ JavaScript フレームワークは、この種の作業をはるかに簡単に
Vue のおかげで、 UI を構築するために独自の関数を作成する必要がなくなりました。フレームワークは、最適化された効率的な方法でそれを処理します。ここでの私たちの唯一の役割は、各項目がどのように見えるべきかを Vue に記述することでした。 Vue に精通している開発者は、プロジェクトに参加すると何が起こっているのかをすぐに理解できます。これは Vue だけではありません。フレームワークを使用すると、チームだけでなく個人の効率も向上します。
-これと _似たようなこと_ をバニラ Javascript でも実現できます。[テンプレートリテラル文字列](/ja/docs/Web/JavaScript/Reference/Template_literals)を使用すると、最終的な要素がどのようになるかを表す HTML の文字列を簡単に作成できます。これは、 To Do リストアプリケーションのような単純なものには便利なアイデアかもしれませんが、数千のデータレコードを管理し、ユーザーインターフェイスに同じ数の固有の要素をレンダリングする可能性がある大規模なアプリケーションでは維持できません。
+これと _似たようなこと_ をバニラ JavaScript でも実現できます。[テンプレートリテラル文字列](/ja/docs/Web/JavaScript/Reference/Template_literals)を使用すると、最終的な要素がどのようになるかを表す HTML の文字列を簡単に作成できます。これは、 To Do リストアプリケーションのような単純なものには便利なアイデアかもしれませんが、数千のデータレコードを管理し、ユーザーインターフェイスに同じ数の固有の要素をレンダリングする可能性がある大規模なアプリケーションでは維持できません。
## フレームワークが私たちに与えてくれるその他のこと
@@ -194,7 +190,7 @@ Vue のおかげで、 UI を構築するために独自の関数を作成する
このモジュールに含まれるフレームワークはそれぞれ大規模で活発なコミュニティを持っているので、それぞれのフレームワークのエコシステムは開発者の経験を向上させるツールを提供します。これらのツールによって、テスト(アプリケーションがあるべきように動作することを保証する) や lint (コードがエラーフリーでスタイルが一貫していることを保証する)のようなものを簡単に追加できます。
> [!NOTE]
-> ウェブツールのコンセプトについてもっと詳しく知りたい方は、[クライアントサイドツールの概要](/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview)をご覧ください。
+> ウェブツールのコンセプトについてもっと詳しく知りたい方は、[クライアントサイドツールの概要](/ja/docs/Learn_web_development/Extensions/Client-side_tools/Overview)をご覧ください。
### コンパートメント化
@@ -220,7 +216,7 @@ JavaScript とブラウザーのネイティブ機能を使用してルーター
### オーバーエンジニアリング
-もしあなたのウェブ開発プロジェクトが数ページの個人的なポートフォリオで、それらのページにインタラクティブな機能がほとんどない、もしくは全くないのであれば、フレームワーク（とその JavaScript のすべて）は全く必要ないかもしれません。とはいえ、フレームワークは一枚岩ではないし、小規模なプロジェクトに適したものもある。 Smashing Magazine の記事で、 Sarah Drasner は、ウェブページの小さな部分をインタラクティブにするツールとして、[Vue が jQuery を置き換えることができる](https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/)ということを書いています。
+もしあなたのウェブ開発プロジェクトが数ページの個人的なポートフォリオで、それらのページにインタラクティブな機能がほとんどない、もしくは全くないのであれば、フレームワーク（とその JavaScript のすべて）は全く必要ないかもしれません。とはいえ、フレームワークは一枚岩ではないし、小規模なプロジェクトに適したものもあります。 Smashing Magazine の記事で、 Sarah Drasner は、ウェブページの小さな部分をインタラクティブにするツールとして、[Vue が jQuery を置き換えることができる](https://www.smashingmagazine.com/2018/02/jquery-vue-javascript/)ということを書いています。
### より大きなコードベースと抽象化
@@ -248,9 +244,9 @@ JavaScript とブラウザーのネイティブ機能を使用してルーター
このモジュールで説明する各フレームワークは、ウェブアプリケーション開発に対して異なるアプローチを取ります。それぞれが定期的に改善されたり変化したりしており、それぞれに長所と短所があります。適切なフレームワークを選択することは、チームとプロジェクトに依存するプロセスであり、何があなたのニーズに合っているかを明らかにするために、あなた自身で調査する必要があります。とはいえ、選択肢をより効果的に調査するために、いくつかの質問を挙げてみました
-1. フレームワークはどのブラウザーをサポートしていますか？
-2. フレームワークではどのようなドメイン固有言語が使用されますか？
-3. このフレームワークには強力なコミュニティがあり、優れたドキュメント(およびその他のサポート)が利用可能ですか？
+1. そのフレームワークはどのブラウザーに対応しているか
+2. そのフレームワークではどのようなドメイン固有言語が使用されているか
+3. そのフレームワークには強力なコミュニティがあり、優れたドキュメント（およびその他のサポート）が利用可能ですか？
このセクションの表は、各フレームワークが現在提供している _ブラウザーのサポート_ と、**ドメイン固有言語**を一目でわかるようにまとめたものです。
@@ -258,27 +254,27 @@ JavaScript とブラウザーのネイティブ機能を使用してルーター
新しいプロジェクトを選択するときは、フレームワークのサポートマトリックスと DSL を真剣に検討する必要があります。ブラウザーのサポートが一致しないと、ユーザーの障害となる可能性があります。 DSL サポートが一致しないと、あなたとあなたのチームメイトにとって障害となる可能性があります。
-| Framework | Browser support | Preferred DSL | Supported DSLs | Citation |
-| --------- | ----------------------------------- | ------------- | ---------------------- | ---------------------------------------------------------------------------------- |
-| Angular | モダン | TypeScript | HTML-based; TypeScript | [公式ドキュメント](https://angular.io/guide/browser-support) |
-| React | モダン | JSX | JSX; TypeScript | [公式ドキュメント](https://react.dev/reference/react-dom/client#browser-support) |
-| Vue | モダン (IE9+ in Vue 2) | HTML-based | HTML-based, JSX, Pug | [公式ドキュメント](https://cli.vuejs.org/guide/browser-compatibility.html) |
-| Ember | モダン (IE9+ in Ember version 2.18) | Handlebars | Handlebars, TypeScript | [公式ドキュメント](https://guides.emberjs.com/v3.3.0/templates/handlebars-basics/) |
+| フレームワーク | ブラウザーの対応 | 推奨される DSL | 対応している DSL | 引用 |
+| -------------- | ----------------------------------- | -------------- | ---------------------- | ---------------------------------------------------------------------------------- |
+| Angular | モダン | TypeScript | HTML-based; TypeScript | [公式ドキュメント](https://angular.dev/guide/browser-support) |
+| React | モダン | JSX | JSX; TypeScript | [公式ドキュメント](https://react.dev/reference/react-dom/client#browser-support) |
+| Vue | モダン (IE9+ in Vue 2) | HTML-based | HTML-based, JSX, Pug | [公式ドキュメント](https://cli.vuejs.org/guide/browser-compatibility.html) |
+| Ember | モダン (IE9+ in Ember version 2.18) | Handlebars | Handlebars, TypeScript | [公式ドキュメント](https://guides.emberjs.com/v3.3.0/templates/handlebars-basics/) |
> [!NOTE]
> 「HTML-based」と説明した DSL には正式な名前がありません。これらは実際には真の DSL ではありませんが、非標準の HTML であるため、強調する価値があると考えられます。
-### フレームワークには強力なコミュニティがありますか？
+### そのフレームワークには強力なコミュニティがあるか
コミュニティの規模はアクセスしやすい数字と直接相関しないため、これはおそらく測定するのが最も難しい指標です。プロジェクトの GitHub スターの数や週ごとの npm ダウンロードを確認して人気を知ることができますが、いくつかのフォーラムを検索したり、他の開発者に相談したりするのが最善の場合もあります。コミュニティの規模だけでなく、コミュニティがどれほど歓迎的で包括的であるか、利用可能なドキュメントがどれほど優れているかも重要です。
### ウェブ上の意見
-この問題については、私たちの言葉をそのまま鵜呑みにしないでください。ウェブ上では議論が行われています。ウィキメディア財団は最近、フロントエンドに Vue を使用することを選択し、[フレームワークの採用に関するコメント要求( RFC )](https://phabricator.wikimedia.org/T241180)を投稿しました。 RFC の著者である Eric Gardner は、時間をかけてウィキメディアプロジェクトのニーズと、特定のフレームワークがチームにとって良い選択である理由を概説しました。この RFC は、フロントエンドフレームワークの使用を計画するときに自分で行うべき調査の優れた例として役立ちます。
+この問題については、私たちの言葉をそのまま鵜呑みにしないでください。ウェブ上では議論が行われています。ウィキメディア財団は最近、フロントエンドに Vue を使用することを選択し、[フレームワークの採用に関するコメント要求 (RFC)](https://phabricator.wikimedia.org/T241180) を投稿しました。 RFC の著者である Eric Gardner は、時間をかけてウィキメディアプロジェクトのニーズと、特定のフレームワークがチームにとって良い選択である理由を概説しました。この RFC は、フロントエンドフレームワークの使用を計画するときに自分で行うべき調査の優れた例として役立ちます。
[JavaScript の現状調査アンケート](https://stateofjs.com/) は、 JavaScript 開発者からの有益なフィードバックを集めたものです。フレームワークの使用とフレームワークに対する開発者の感情の両方に関するデータなど、 JavaScript に関連する多くのトピックをカバーしています。現在、数年分のデータが入手可能であり、フレームワークの人気を把握することができます。
-Vue チームは [Vue を他の一般的なフレームワークと徹底的に比較](https://v2.vuejs.org/v2/guide/comparison.html)しました。この比較には多少の偏りがあるかもしれません(彼らはそれを指摘しています)が、それでも貴重な情報源です。
+Vue チームは [Vue を他の一般的なフレームワークと徹底的に比較](https://v2.vuejs.org/v2/guide/comparison.html)しました。この比較には多少の偏りがあるかもしれません（彼らはそれを指摘しています）が、それでも貴重な情報源です。
## クライアント側フレームワークの代替
@@ -290,28 +286,28 @@ Vue チームは [Vue を他の一般的なフレームワークと徹底的に
### コンテンツ管理システム
-**コンテンツ管理システム** (**CMS: Content-management systems**) は、ユーザーが自分で直接コードを書かずにウェブ用のコンテンツを作成できるツールのことです。大規模なプロジェクト、特にコーディング能力に乏しいコンテンツ・ライターからのインプットを必要とするプロジェクトや時間を節約したいプログラマーにとっては良いソリューションです。しかし CMS のセットアップにはかなりの時間を要し、 CMS を利用するということは、少なくともウェブサイトの最終的なアウトプットをコントロールする手段を放棄することを意味します。例えば、選択したCMSがデフォルトでアクセシブルなコンテンツを作成しない場合、これを改善するのは難しいことが多いです。
+**コンテンツ管理システム** (**CMS**: Content-management systems) は、ユーザーが自分で直接コードを書かずにウェブ用のコンテンツを作成できるツールのことです。大規模なプロジェクト、特にコーディング能力に乏しいコンテンツ・ライターからのインプットを必要とするプロジェクトや時間を節約したいプログラマーにとっては良いソリューションです。しかし CMS のセットアップにはかなりの時間を要し、 CMS を利用するということは、少なくともウェブサイトの最終的なアウトプットをコントロールする手段を放棄することを意味します。例えば、選択したCMSがデフォルトでアクセシブルなコンテンツを作成しない場合、これを改善するのは難しいことが多いです。
-有名な CMS システムには、 [Wordpress](https://wordpress.com/)、[Joomla](https://www.joomla.org/)、[Drupal](https://www.drupal.org/) などがあります。
+有名な CMS システムには、 [WordPress](https://wordpress.com/)、[Joomla](https://www.joomla.org/)、[Drupal](https://www.drupal.org/) などがあります。
### サーバーサイドレンダリング
-**サーバーサイドレンダリング** (**SSR: Server-side rendering**) は、単一ページアプリケーションをレンダリングするのが _サーバー_ の仕事であるアプリケーションアーキテクチャです。これは、JavaScript アプリケーションを構築する最も一般的で最も簡単な方法である _クライアントサイドレンダリング_ の逆です。サーバーサイドレンダリングは、レンダリングされた HTML ファイルをクライアントのデバイスに送信するだけなので、クライアントのデバイスでは簡単ですが、クライアント側でレンダリングされるアプリケーションに比べてセットアップが難しい場合があります。
+**サーバーサイドレンダリング** (**SSR**: Server-side rendering) は、単一ページアプリケーションをレンダリングするのが _サーバー_ の仕事とするアプリケーションアーキテクチャです。これは、 JavaScript アプリケーションを構築する最も一般的で最も簡単な方法である _クライアントサイドレンダリング_ の逆です。サーバーサイドレンダリングは、レンダリングされた HTML ファイルだけを送信するので、クライアントの端末にとってはより簡単ですが、クライアントサイドレンダリングのアプリケーションに比べてセットアップが難しい場合があります。
-このモジュールで説明されているフレームワークはすべて、クライアントサイドのレンダリングだけでなくサーバーサイドのレンダリングもサポートしています。 React については [Next.js](https://nextjs.org/) 、Vue については [Nuxt](https://nuxtjs.com/)（はい、わかりにくいです、いいえ、これらのプロジェクトは関係ありません!）、 Ember の場合は [FastBoot](https://github.com/ember-fastboot/ember-cli-fastboot)、 Angular の場合は [Angular Universal](https://angular.io/guide/universal) をチェックしてください。
+このモジュールで説明されているフレームワークはすべて、クライアントサイドのレンダリングだけでなくサーバーサイドのレンダリングにも対応しています。 React については [Next.js](https://nextjs.org/)、Vue については [Nuxt](https://nuxt.com/)（はい、わかりにくいです、いいえ、これらのプロジェクトは関係ありません!）、 Ember の場合は [FastBoot](https://github.com/ember-fastboot/ember-cli-fastboot)、 Angular の場合は [Angular Universal](https://angular.dev/guide/universal) をチェックしてください。
> [!NOTE]
> SSR ソリューションの中にはコミュニティによって作成および保守されているものもありますが、フレームワークの保守者によって提供される「公式」ソリューションもあります。
### 静的サイトジェネレーター
-静的サイトジェネレーターは、複数ページのウェブサイトのすべてのウェブページ(関連する CSS や JavaScript を含む)を動的に生成し、任意の数の場所に公開できるようにするプログラムです。公開ホストは例えば、 GitHub ページブランチ、 Netlify インスタンス、または選択したプライベートサーバーにすることができます。このアプローチには多くの利点があり、主にパフォーマンス(ユーザーのデバイスは JavaScript を使用してページを構築していません。すでに完成しています)とセキュリティ(静的ページは攻撃ベクトルが少ない)に関するものです。これらのサイトでは、必要に応じて JavaScript を引き続き利用できますが、 JavaScript に「依存」しているわけではありません。静的サイトジェネレーターは、他のツールと同様に学習に時間がかかるため、開発プロセスの障壁となる可能性があります。
+静的サイトジェネレーターは、複数ページのウェブサイトのすべてのウェブページ（関連する CSS や JavaScript を含む）を動的に生成し、任意の数の場所に公開できるようにするプログラムです。公開ホストは例えば、 GitHub ページブランチ、 Netlify インスタンス、または選択したプライベートサーバーにすることができます。このアプローチには多くの利点があり、主にパフォーマンス（ユーザーの端末は JavaScript を使用してページを構築していません。すでに完成しています）とセキュリティ（静的ページは攻撃ベクトルが少ない）に関するものです。これらのサイトでは、必要に応じて JavaScript を引き続き利用できますが、 JavaScript に「依存」しているわけではありません。静的サイトジェネレーターは、他のツールと同様に学習に時間がかかるため、開発プロセスの障壁となる可能性があります。
静的サイトには、必要な数の固有のページを含めることができます。フレームワークを使用すると、クライアント側の JavaScript アプリケーションを迅速に作成できるようになりますが、静的サイトジェネレーターを使用すると、個別に作成する必要があった HTML ファイルを迅速に作成できます。フレームワークと同様、静的サイトジェネレーターを使用すると、開発者はウェブページの共通部分を定義するコンポーネントを作成し、それらのコンポーネントを組み合わせて最終ページを作成できます。静的サイトジェネレーターのコンテキストでは、これらのコンポーネントは **テンプレート** と呼ばれます。静的サイトジェネレーターによって構築されたウェブページは、フレームワークアプリケーションのホームとなることもあります。たとえば、静的に生成されたウェブサイトの特定のページで、ユーザーがそのページにアクセスしたときに React アプリケーションを起動したい場合は、それが可能です。
-静的サイトジェネレーターはかなり古くから存在しており、最近になって新たな関心と革新の波が押し寄せています。[Astro](https://astro.build/)、[Eleventy](https://www.11ty.dev/)、[Hugo](https://gohugo.io/)、[Jekyll](https://jekyllrb.com/)、[Gatsby](https://www.gatsbyjs.com/) などのいくつかの強力な選択肢が利用可能になりました。
+静的サイトジェネレーターはかなり古くから存在しており、最近になって新たな関心と革新の波が押し寄せています。[Astro](https://astro.build/)、[Eleventy](https://www.11ty.dev/)、[Hugo](https://gohugo.io/)、[Jekyll](https://jekyllrb.com/)、[Gatsby](https://www.gatsbyjs.com/) などのいくつかの強力な選択肢が利用可能になりました。他の選択肢である [Docusaurus](https://docusaurus.io/) や [VitePress](https://vitepress.dev/) などについては、テンプレートの代わりにクライアントサイドのフレームワークを使用しており、同様に最適化された静的ファイルを生成します。
-静的サイトジェネレーター全体について詳しく知りたい場合は、Tatiana Mac の [Eleventy の初心者ガイド](https://www.tatianamac.com/posts/beginner-eleventy-tutorial-parti/)を参照してください。シリーズの最初の記事では、静的サイトジェネレーターとは何か、そしてそれがウェブコンテンツを公開する他の手段とどのように関連するのかについて説明します。
+静的サイトジェネレーター全体について詳しく知りたい場合は、 Tatiana Mac の [Eleventy の初心者ガイド](https://www.tatianamac.com/posts/beginner-eleventy-tutorial-parti/)を参照してください。シリーズの最初の記事では、静的サイトジェネレーターとは何か、そしてそれがウェブコンテンツを公開する他の手段とどのように関連するのかについて説明します。
## まとめ
@@ -319,4 +315,4 @@ Vue チームは [Vue を他の一般的なフレームワークと徹底的に
次の記事では、より低いレベルまで掘り下げて、フレームワークが提供する傾向にある特定の種類の機能と、フレームワークがなぜそのように機能するのかを見ていきます。
-{{NextMenu("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{NextMenu("Learn_web_development/Core/Frameworks_libraries/Main_features", "Learn_web_development/Core/Frameworks_libraries")}}
diff --git a/files/ja/learn_web_development/core/frameworks_libraries/main_features/index.md b/files/ja/learn_web_development/core/frameworks_libraries/main_features/index.md
index f7ff652f824a5d..f44becc434a4cf 100644
--- a/files/ja/learn_web_development/core/frameworks_libraries/main_features/index.md
+++ b/files/ja/learn_web_development/core/frameworks_libraries/main_features/index.md
@@ -1,12 +1,13 @@
---
title: フレームワークの主な機能
slug: Learn_web_development/Core/Frameworks_libraries/Main_features
-original_slug: Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Main_features
l10n:
- sourceCommit: 03f247507ae02105bcfe822b8e97ae8e0006bc19
+ sourceCommit: c86c36ca478c7da904c22531e91fdcc2d2a6c690
---
-{{LearnSidebar}}{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{LearnSidebar}}
+
+{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Main_features","Learn_web_development/Core/Frameworks_libraries/React_getting_started", "Learn_web_development/Core/Frameworks_libraries")}}
主要な JavaScript フレームワークはそれぞれ、 DOM の更新、ブラウザーイベントの処理、楽しい開発者エクスペリエンスの提供に関して、異なるアプローチが採用されています。この記事では、「ビッグ 4」フレームワークの主な特徴を探り、フレームワークがどのように機能する傾向があるかを高いレベルから見ていき、それらの違いを見ていきます。
@@ -15,14 +16,14 @@ l10n:
| 前提条件: |
- HTML、
- CSS、
- JavaScript に精通していること。
+ コアの HTML、
+ CSS、
+ JavaScript 言語が分かっていること。
|
- | 目的: |
- フレームワークの主なコード機能を理解すること。 |
+ 学習成果: |
+ JavaScript フレームワークで提供される主要な機能を理解すること。 |
@@ -31,13 +32,13 @@ l10n:
このモジュールで説明するすべてのフレームワークは JavaScript を利用しており、アプリケーションを構築するためにドメイン固有言語 (DSL) を使用できます。特に、 React はコンポーネントの作成に **JSX** の使用を普及させ、一方、 Ember は **Handlebars** を利用します。 HTML とは異なり、これらの言語はデータ変数の読み取り方法を知っており、このデータを使用して UI を作成するプロセスを合理化できます。
-Angular アプリでは、**TypeScript** が頻繁に使用されます。 TypeScript はユーザーインターフェイスの記述には関与しませんが、ドメイン固有の言語であり、通常の JavaScript とは大きな違いがあります。
+Angular アプリでは、 **TypeScript** が頻繁に使用されます。 TypeScript はユーザーインターフェイスの記述には関与しませんが、ドメイン固有の言語であり、通常の JavaScript とは大きな違いがあります。
-DSL はブラウザーで直接読み取ることはできません。最初に JavaScript または HTML に変換する必要があります。[開発プロセスにおいて、変換という追加のステップ](/ja/docs/Learn/Tools_and_testing/Understanding_client-side_tools/Overview#変換)が必要になります。しかし、フレームワークツールには通常、このステップを処理するために必要なツールが含まれているか、このステップを含めるように調整することができます。これらのドメイン固有言語を使用せずにフレームワークアプリを構築することも可能ですが、これらの言語を採用すると、開発プロセスが合理化され、それらのフレームワークに関するコミュニティからのヘルプを見つけやすくなります。
+DSL はブラウザーで直接読み取ることはできません。最初に JavaScript または HTML に変換する必要があります。フレームワークツールには通常、このステップを処理するために必要なツールが含まれているか、このステップを含めるように調整することができます。これらのドメイン固有言語を使用せずにフレームワークアプリを構築することも可能ですが、これらの言語を採用すると、開発プロセスが合理化され、それらのフレームワークに関するコミュニティからのヘルプを見つけやすくなります。
### JSX
-[JSX](https://react.dev/learn/writing-markup-with-jsx) は、JavaScript と XML の略で、JavaScript 環境に HTML のような構文をもたらす JavaScript の拡張機能です。これは React アプリケーションで使用するために React チームによって発明されましたが、 Vue アプリなどの他のアプリケーションの開発にも使用できます。
+[JSX](https://react.dev/learn/writing-markup-with-jsx) は、 JavaScript と XML の略で、JavaScript 環境に HTML のような構文をもたらす JavaScript の拡張機能です。これは React アプリケーションで使用するために React チームによって発明されましたが、 Vue アプリなどの他のアプリケーションの開発にも使用できます。
以下に簡単な JSX の例を示します。
@@ -50,7 +51,7 @@ const header = (
);
```
-この式は、 [``](/ja/docs/Web/HTML/Element/Heading_Elements) 要素を持つ HTML [``](/ja/docs/Web/HTML/Element/header) 要素の内部を表します。 `{subject}` を囲む中括弧は、アプリケーションに `subject` 定数の値を読み取り、それを `` に挿入するように指示します。
+この式は、 HTML の [``](/ja/docs/Web/HTML/Element/header) 要素の内部に [``](/ja/docs/Web/HTML/Element/Heading_Elements) 要素があることを表します。 `{subject}` を囲む中括弧は、アプリケーションに `subject` 定数の値を読み取り、それを `` に挿入するように指示します。
React で使用すると、前のスニペットの JSX は次のようにコンパイルされます。
@@ -73,11 +74,11 @@ const header = React.createElement(
### Handlebars
-[Handlebars](https://handlebarsjs.com/) テンプレート言語は Ember アプリケーションに固有のものではありませんが、 Ember アプリケーションで頻繁に利用されています。 Handlebars コードは HTML に似ていますが、他の場所からデータを取り込むオプションがあります。このデータは、アプリケーションが最終的に構築する HTML に影響を与えるために使用できます。
+[Handlebars](https://handlebarsjs.com/) はテンプレート言語で、 Ember アプリケーションに固有のものではありませんが、 Ember アプリケーションで頻繁に利用されています。 Handlebars コードは HTML に似ていますが、他の場所からデータを取り込むオプションがあります。このデータは、アプリケーションが最終的に構築する HTML に影響を与えるために使用できます。
JSX と同様に、 Handlebars は中括弧を使用して変数の値を挿入します。ハンドルバーは、単一ペアではなく、二重ペアの中括弧を使用します。
-このハンドルバー テンプレートを考慮すると、次のようになります。
+このハンドルバーテンプレートを考慮すると、次のようになります。
```html
@@ -127,13 +128,13 @@ function add(a: number, b: number) {
前の章で述べたように、ほとんどのフレームワークには何らかのコンポーネントモデルがあります。 React コンポーネントは JSX で、 Ember コンポーネントは Handlebars で、 Angular コンポーネントと Vue コンポーネントは HTML を軽く拡張したテンプレート構文で作成できます。
-コンポーネントをどのように記述するべきかについての意見に関係なく、各フレームワークのコンポーネントは、必要となる可能性のある外部プロパティ、コンポーネントが管理する必要がある内部状態、およびユーザーがコンポーネントのマークアップでトリガーできるイベントを記述する方法を提供します。
+コンポーネントをどのように記述するべきかについての意見が何であろうと、各フレームワークのコンポーネントは、必要となる可能性のある外部プロパティ、コンポーネントが管理する必要がある内部状態、およびユーザーがコンポーネントのマークアップでトリガーできるイベントを記述する方法を提供します。
この節の残りのコードスニペットは例として React を使用し、 JSX で書かれています。
-### プロパティ (Properties)
+### プロパティ
-Properties 、または **props** は、コンポーネントがレンダリングするために必要な外部データです。オンラインマガジンのウェブサイトを構築していて、各寄稿者が自分の作品に対してクレジットを取得できるようにする必要があるとします。各記事に付随する `AuthorCredit` コンポーネントを作成することもできます。このコンポーネントは、著者の肖像と著者に関する短い署名文を表示する必要があります。どの画像をレンダリングするか、どの署名欄を印刷するかを知るために、 `AuthorCredit` はいくつかの props を受け入れる必要があります。
+プロパティ (Properties、または **props**) は、コンポーネントがレンダリングするために必要な外部データです。オンラインマガジンのウェブサイトを構築していて、それぞれの寄稿者が自分の作品に対してクレジットを取得できるようにする必要があるとします。各記事に付随する `AuthorCredit` コンポーネントを作成することもできます。このコンポーネントは、著者の肖像と著者に関する短い署名文を表示する必要があります。どの画像をレンダリングするか、どの署名欄を印刷するかを知るために、 `AuthorCredit` はいくつかのプロパティを受け入れる必要があります。
この `AuthorCredit` コンポーネントの React 表現は次のようになります。
@@ -158,7 +159,7 @@ function AuthorCredit(props) {
/>
```
-これにより、最終的に次の [``](/ja/docs/Web/HTML/Element/figure) 要素がブラウザーにレンダリングされます。その構造は `AuthorCredit` コンポーネントで定義されているとおりであり、そのコンテンツは次のようになります。 `AuthorCredit` コンポーネント呼び出しに含まれる props で定義されます。
+これにより、最終的に次の [``](/ja/docs/Web/HTML/Element/figure) 要素がブラウザーにレンダリングされます。その構造は `AuthorCredit` コンポーネントで定義されているとおりであり、そのコンテンツは次のようになります。 `AuthorCredit` コンポーネント呼び出しに含まれるプロパティで定義されます。
```html
@@ -167,11 +168,11 @@ function AuthorCredit(props) {
```
-### 状態 (State)
+### 状態
-前の章で **state** の概念について説明しました。効果的なフレームワークの鍵となるのは堅牢な状態処理メカニズムであり、各コンポーネントには状態の制御が必要なデータが含まれる場合があります。この state は、コンポーネントが使用されている限り、何らかの形で持続します。 props と同様に、 state を使用してコンポーネントのレンダリング方法に影響を与えることができます。
+前の章で状態 (**state**) の概念について説明しました。効果的なフレームワークの鍵となるのは堅牢な状態処理メカニズムであり、各コンポーネントには状態の制御が必要なデータが含まれる場合があります。この状態は、コンポーネントが使用されている限り、何らかの形で持続します。プロパティと同様に、状態を使用してコンポーネントのレンダリング方法に影響を与えることができます。
-例として、クリックされた回数をカウントするボタンについて考えてみましょう。このコンポーネントは、自身の _count_ 状態を追跡する必要があり、次のように記述できます。
+例として、クリックされた回数を数えるボタンについて考えてみましょう。このコンポーネントは、自身の _count_ 状態を追跡する必要があり、次のように記述できます。
```jsx
function CounterButton() {
@@ -190,9 +191,9 @@ function CounterButton() {
### イベント
-インタラクティブであるためには、アプリケーションがユーザーに応答できるように、コンポーネントがブラウザーイベントに応答する方法が必要です。フレームワークはそれぞれ、ブラウザーイベントをリッスンするための独自の構文を提供し、同等のネイティブブラウザーイベントの名前を参照します。
+操作できるようにするためには、アプリケーションがユーザーに応答できるように、コンポーネントがブラウザーイベントに応答する方法が必要です。フレームワークはそれぞれ、ブラウザーイベントを待ち受けするための独自の構文を提供し、同等のネイティブブラウザーイベントの名前を参照します。
-React では、[`click`](/ja/docs/Web/API/Element/click_event) イベントをリッスンするには、特別なプロパティ `onClick` が必要です。上記の `CounterButton` コードを更新して、クリック数をカウントできるようにしましょう。
+React では、[`click`](/ja/docs/Web/API/Element/click_event) イベントを待ち受けするには、特別なプロパティ `onClick` が必要です。上記の `CounterButton` コードを更新して、クリック数をカウントできるようにしましょう。
```jsx
function CounterButton() {
@@ -253,13 +254,13 @@ import AuthorCredit from "./components/AuthorCredit";
プロップドリルを回避するために、フレームワークは依存関係注入として知られる機能を提供します。これは、特定のデータを、介在するレベルを介さずに、必要なコンポーネントに直接取得する方法です。各フレームワークは、異なる名前で異なる方法で依存性注入を実装しますが、結果は最終的には同じです。
-Angular では、このプロセスを[依存関係の注入](https://angular.io/guide/dependency-injection)と呼びます。 Vue には [`provide()` および `inject()` コンポーネントメソッド](https://v2.vuejs.org/v2/api/#provide-inject)があります。 React には[Context API](https://react.dev/learn/passing-data-deeply-with-context) があります。 Ember は [サービス](https://guides.emberjs.com/release/services/)を通じて状態を共有します。
+Angular では、このプロセスを[依存関係の注入](https://angular.dev/guide/di/dependency-injection)と呼びます。 Vue には [`provide()` および `inject()` コンポーネントメソッド](https://v2.vuejs.org/v2/api/#provide-inject)があります。 React には[Context API](https://react.dev/learn/passing-data-deeply-with-context) があります。 Ember は [サービス](https://guides.emberjs.com/release/services/)を通じて状態を共有します。
### ライフサイクル
-フレームワークのコンテキストでは、コンポーネントの **ライフサイクル** は、コンポーネントが DOM に追加されてブラウザーによってレンダリングされる時点 DOM の追加(_mounting_ と呼ばれることが多い)から削除される時点まで、コンポーネントが通過するフェーズの集合です。 DOM の削除 (_unmounting_ と呼ばれることが多い)。各フレームワークはこれらのライフサイクルフェーズに異なる名前を付けており、すべてのフレームワークで開発者が同じフェーズにアクセスできるわけではありません。すべてのフレームワークは同じ一般的なモデルに従います。開発者は、コンポーネントの _DOM の追加(mounting)_ , _DOM の描画(renders)_, _DOM の削除(unmounts)_ およびそれらの間の多くのフェーズで特定のアクションを実行できます。
+フレームワークのコンテキストでは、コンポーネントの **ライフサイクル** は、コンポーネントが DOM に追加されてブラウザーによってレンダリングされる時点 DOM の追加（マウントと呼ばれることが多い）から削除される時点まで、コンポーネントが通過するフェーズの集合です。 DOM の削除（アンマウントと呼ばれることが多い）。各フレームワークはこれらのライフサイクルフェーズに異なる名前を付けており、すべてのフレームワークで開発者が同じフェーズにアクセスできるわけではありません。すべてのフレームワークは同じ一般的なモデルに従います。開発者は、コンポーネントの _DOM の追加（マウント）_ , _DOM の描画 (レンダリング)_, _DOM の削除（アンマウント）_ およびそれらの間の多くのフェーズで特定のアクションを実行できます。
-_render_ フェーズは、ユーザーがアプリケーションを操作するときに最も頻繁に繰り返されるため、理解することが最も重要です。これは、ブラウザーが何か新しい情報を表示する必要があるたびに実行されます。その新しい情報がブラウザー内の情報への追加、削除、または編集であるかどうかに関係ありません。
+レンダリングフェーズは、ユーザーがアプリケーションを操作するときに最も頻繁に繰り返されるため、理解することが最も重要です。これは、ブラウザーが何か新しい情報を表示する必要があるたびに実行されます。その新しい情報がブラウザー内の情報への追加、削除、または編集であるかどうかに関係ありません。
この [React コンポーネントのライフサイクルの図](https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)は、概念の概要を示しています。
@@ -269,7 +270,7 @@ _render_ フェーズは、ユーザーがアプリケーションを操作す
**仮想 DOM** は、ブラウザーの DOM に関する情報を JavaScript メモリーに保存するアプローチです。アプリケーションは、 DOM のこのコピーを更新し、それを「実際の」 DOM (ユーザーに対して実際にレンダリングされる DOM) と比較して、何をレンダリングするかを決定します。アプリケーションは、更新された仮想 DOM と現在レンダリングされている DOM の違いを比較する「差分」を構築し、その差分を使用して実際の DOM に更新を適用します。 React と Vue はどちらも仮想 DOM モデルを利用しますが、差分分析やレンダリング時にまったく同じロジックを適用するわけではありません。
-[仮想 DOM の詳細については、React ドキュメントをご覧ください](https://reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom)。
+[仮想 DOM の詳細については、React のドキュメントをご覧ください](https://reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom)。
**増分 DOM** は、何をレンダリングするかを決定するために DOM diff を構築するという点で仮想 DOM に似ていますが、 JavaScript メモリー内に DOM の完全なコピーを作成しないという点で異なります。変更する必要のない DOM の部分は無視されます。 Angular は、このモジュールでこれまで説明した、増分 DOM を使用する唯一のフレームワークです。
@@ -279,7 +280,7 @@ _render_ フェーズは、ユーザーがアプリケーションを操作す
## ルーティング
-[前の章で述べたように、ルーティング](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction#routing)はウェブエクスペリエンスの重要な部分です。多数のビューを備えた非常に複雑なアプリでの操作性の低下を避けるために、このモジュールで説明する各フレームワークは、開発者がアプリケーションにクライアント側ルーティングを実装するのに役立つライブラリー(または複数のライブラリー)を提供します。
+[前の章で述べたように、ルーティング](/ja/docs/Learn_web_development/Core/Frameworks_libraries/Introduction#routing)はウェブエクスペリエンスの重要な部分です。多数のビューを備えた非常に複雑なアプリでの操作性の低下を避けるために、このモジュールで説明する各フレームワークは、開発者がアプリケーションにクライアント側ルーティングを実装するのに役立つライブラリー(または複数のライブラリー)を提供します。
## テスト
@@ -287,7 +288,7 @@ _render_ フェーズは、ユーザーがアプリケーションを操作す
各フレームワークには、そのエコシステム内に単体テストと統合テストの機能を備えた広範なツールがあります。
-[Testing Library](https://testing-library.com/) は、 React 、 Vue 、 Angular などの多くの JavaScript 環境用のツールを備えたテストユーティリティのスイートです。 Ember ドキュメントでは、[Ember アプリのテスト](https://guides.emberjs.com/release/testing/)について説明しています。
+[Testing Library](https://testing-library.com/) は、React、Vue、Angular などの多くの JavaScript 環境用のツールを備えたテストユーティリティのスイートです。 Ember ドキュメントでは、[Ember アプリのテスト](https://guides.emberjs.com/release/testing/)について説明しています。
これは、 React テストライブラリーの助けを借りて書かれた `CounterButton` の簡単なテストです。ボタンの存在や、ボタンが 0 、1 、 2 回クリックされた後に正しいテキストが表示されているかどうかなど、さまざまなことをテストします。
@@ -320,10 +321,4 @@ it("Increments the count when clicked", () => {
この時点で、フレームワークを使用してアプリケーションを作成するときに使用する実際の言語、機能、ツールについてさらに理解できるはずです。あなたはきっと、実際にコーディングをしてみたいと熱意を持って取り組んでいると思います。それが次に行うことです。この時点で、最初に学習を開始するフレームワークを選択できます。
-- [React](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started)
-- [Ember](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Ember_getting_started)
-- [Vue](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Vue_getting_started)
-- [Svelte](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started)
-- [Angular](/ja/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started)
-
-{{PreviousMenuNext("Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Introduction","Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started", "Learn/Tools_and_testing/Client-side_JavaScript_frameworks")}}
+{{PreviousMenuNext("Learn_web_development/Core/Frameworks_libraries/Main_features","Learn_web_development/Core/Frameworks_libraries/React_getting_started", "Learn_web_development/Core/Frameworks_libraries")}}