From e04278b31615aeb7867a7435be87aa029c4ee217 Mon Sep 17 00:00:00 2001 From: kotaro_sakae Date: Sat, 17 Dec 2022 13:16:29 +0900 Subject: [PATCH] Translation of javascript chapter to Japanese --- src/content/en/2022/javascript.md | 6 +- src/content/ja/2022/javascript.md | 1074 +++++++++++++++++++++++++++++ 2 files changed, 1077 insertions(+), 3 deletions(-) create mode 100644 src/content/ja/2022/javascript.md diff --git a/src/content/en/2022/javascript.md b/src/content/en/2022/javascript.md index 1c6d44f62ed..35088c475f0 100644 --- a/src/content/en/2022/javascript.md +++ b/src/content/en/2022/javascript.md @@ -334,7 +334,7 @@ Unfortunately, we see five `preload` hints for JavaScript resources at the 90th {{ figure_markup( image="modulepreload.png", caption="Distribution of `modulepreload` adoption for JavaScript resources per page.", - description="Bar chart showing the 10, 25, 50, 75, and 90th percentiles of modulepreload hints for JavaScript resources per page. The values for mobile pages are 1, 1, 2, 6, and 14, respectively. Desktop values are nearly identical to mobile..", + description="Bar chart showing the 10, 25, 50, 75, and 90th percentiles of modulepreload hints for JavaScript resources per page. The values for mobile pages are 1, 1, 2, 6, and 14, respectively. Desktop values are nearly identical to mobile.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTok8UGqYaA58uKaASB2pfM2jlmQu6g3kwHxB6Lb8L7dbccyDtQht823YhchdXRG8SZpB3asRayJI97/pubchart?oid=100852946&format=interactive", sheets_gid="397179470", sql_file="resource-hints-preload-prefetch-modulepreload-distribution.sql" @@ -648,7 +648,7 @@ The first of these is First Input D {{ figure_markup( image="fid.png", caption="The distribution of websites' 75th percentile FID values.", - description="Bar chart showing the 10, 25, 50, 75 and 90th percentiles of origin's 75th percentile FID values. All values are 0 ms until the 90th percentile, where both desktop and phone are 25 ms.'", + description="Bar chart showing the 10, 25, 50, 75 and 90th percentiles of origin's 75th percentile FID values. All values are 0 ms until the 90th percentile, where both desktop and phone are 25 ms.", chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTok8UGqYaA58uKaASB2pfM2jlmQu6g3kwHxB6Lb8L7dbccyDtQht823YhchdXRG8SZpB3asRayJI97/pubchart?oid=217835320&format=interactive", sheets_gid="2108420759", sql_file="fid.sql" @@ -777,7 +777,7 @@ Avoid using synchronous XHR, and XHR in general. `fetch` is a much more ergonomi Before the introduction of DOM insertion methods ([`appendChild`](https://developer.mozilla.org/docs/Web/API/Node/appendChild) and others, for example), `document.write` was used to insert content at the position the `document.write` was made in the document. -`document.write` is very problematic. For one, it blocks the HTML parser, and is problematic for a number of other reasons the HTML spec itself warns against its use). On slow connections, blocking document parsing to append nodes in this way creates performance problems that are entirely avoidable. +`document.write` is very problematic. For one, it blocks the HTML parser, and is problematic for a number of other reasons the HTML spec itself warns against its use. On slow connections, blocking document parsing to append nodes in this way creates performance problems that are entirely avoidable. {{ figure_markup( caption="The number of mobile pages using `document.write`.", diff --git a/src/content/ja/2022/javascript.md b/src/content/ja/2022/javascript.md new file mode 100644 index 00000000000..94d58e82eae --- /dev/null +++ b/src/content/ja/2022/javascript.md @@ -0,0 +1,1074 @@ +--- +#See https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Authors'-Guide#metadata-to-add-at-the-top-of-your-chapters +title: JavaScript +#TODO - Review and update chapter description +description: 2022年版Web AlmanacのJavaScriptの章では、Web上でのJavaScriptの使用方法、ライブラリとフレームワーク、圧縮、Webコンポーネント、ソースマップをカバーしています。 +authors: [malchata] +reviewers: [mgechev, pankajparkar, NishuGoel, housseindjirdeh, kevinfarrugia, tunetheweb] +analysts: [NishuGoel, kevinfarrugia] +editors: [DesignrKnight, rviscomi] +translators: [ksakae1216] +malchata_bio: Jeremy Wagnerは、GoogleのパフォーマンスとCore Web Vitalsに関するテクニカルライターです。また、A List Apart、CSS-Tricks、Smashing Magazineでも執筆しています。いつか、砂がまだ考えることを教えられていない人里離れた荒野に移住する予定です。それまでは、妻と義理の娘たちとともにミネソタ州のツインシティに住み、ストリップモールの存在を嘆き続けています。 +results: https://docs.google.com/spreadsheets/d/1vOeFUyfEtWRen3Xj57ZsWav40n5tlcJoV0HmAxmNE_I/ +featured_quote: JavaScriptの状況は常に進化しています。私たちがこれまで以上に JavaScript に依存していることは明らかですが、これはウェブの総合的なユーザー体験にとってトラブルの元となります。私たちは、プロダクションウェブサイトに搭載されるJavaScriptの量を減らすために、できる限りのことをする必要があり、またそれ以上のことをする必要があります。 +featured_stat_1: 26% +featured_stat_label_1: Babelでコードを変換しているページがもっとも多い。 +featured_stat_2: 8% +featured_stat_label_2: モバイルで過去1年間にダウンロードされた追加のJavaScript +featured_stat_3: 20 +featured_stat_label_3: サードパーティ製スクリプトの提供数中央値 +--- + +## 序章 + +JavaScriptは、ウェブ上のインタラクティブ機能の大部分を提供する強力な力です。単純なものから複雑なものまで、さまざまな動作を実現し、Web上でかつてないほど多くのことを可能にしています。 + +しかし、リッチなユーザー体験を提供するためにJavaScriptを使用する機会が増えたことで、代償を払うことになりました。JavaScriptがダウンロードされ、解析され、コンパイルされた瞬間から実行されるコードのすべての行まで、ブラウザはすべてを可能にする為あらゆる種類の作業をオーケストレーションする必要があります。JavaScriptの使用量が少なすぎると、ユーザー体験やビジネス上の目標を達成できない可能性があります。一方JavaScriptを使いすぎると、読み込みが遅く、反応が鈍く、ユーザーをイライラさせるようなユーザー体験を作ることになります。 + +今年も、WebにおけるJavaScriptの役割について、2022年の調査結果を発表し、快適なユーザー体験を実現するためのアドバイスを提供します。 + +## JavaScriptの負荷はどのくらい？ + +まず始めに、ウェブ開発者がウェブ上で提供しているJavaScriptの量を評価します。結局のところ、改善を行う前に、現在の状況の評価を行う必要があるのです。 + +{{ figure_markup( + image="bytes-per-page.png", + caption="1ページあたりに読み込まれるJavaScriptの量の分布。", + description="1ページあたりのJavaScriptのキロバイト数の10、25、50、75、90パーセンタイルを示す棒グラフ。モバイルページでは、それぞれ87KB、209KB、461KB、857KB、1,367KBとなっています。デスクトップは全体的にやや高い値となっています。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTok8UGqYaA58uKaASB2pfM2jlmQu6g3kwHxB6Lb8L7dbccyDtQht823YhchdXRG8SZpB3asRayJI97/pubchart?oid=807278764&format=interactive", + sheets_gid="1117050794", + sql_file="bytes_2022.sql" + ) +}} + +昨年に引き続き、今年もブラウザに搭載されるJavaScriptの量が増えています。[2021年](../2021/javascript#JavaScriptをどれだけ読み込むか？)から2022年にかけて、モバイル端末では8％の増加、一方、デスクトップ端末では10％の増加が確認されています。この増加幅は例年より少ないものの、それでも懸念される傾向が続いています。デバイスの性能は向上し続けていますが、すべての人が最新のデバイスを使用しているわけではありません。JavaScriptが増えれば増えるほど、端末のリソースに負担がかかるのは事実です。 + +{{ figure_markup( + image="unused-js.png", + caption="JavaScriptの未使用バイト数の分布。", + description="1ページあたりの未使用JavaScriptのキロバイト数を10、25、50、75、90パーセンタイルで示した棒グラフです。モバイルページでは、0、62、162、342、604の値になっています。デスクトップはやや高い傾向にあります。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTok8UGqYaA58uKaASB2pfM2jlmQu6g3kwHxB6Lb8L7dbccyDtQht823YhchdXRG8SZpB3asRayJI97/pubchart?oid=1640758017&format=interactive", + sheets_gid="943216000", + sql_file="unused_js_bytes_distribution.sql" + ) +}} + +Lighthouse によると、中央のモバイル ページでは、162KBの未使用のJavaScriptがロードされているそうです。90パーセンタイルでは604KBのJavaScriptが、未使用であることがわかります。これは、未使用のJavaScriptの中央値と90パーセンタイルがそれぞれ155KBと598KBであった昨年からわずかに上昇したものです。とくにこの分析ではJavaScriptリソースの転送サイズを追跡しているため圧縮されている場合は、使用されたJavaScriptの解凍部分が、このグラフが示すよりもはるかに大きい可能性があることを考えると、この量は未使用のJavaScriptに相当します。 + +モバイルページで読み込まれた総バイト数の中央値と比較すると、未使用のJavaScriptは、読み込まれたスクリプト全体の35%を占めています。これは、昨年の36%からわずかに減少していますが、それでも未使用で読み込まれるバイトの大部分であることに変わりはありません。このことは多くのページが、現在のページでは使われないかもしれない、あるいはページのライフサイクルの後半でのインタラクションによって引き起こされるスクリプトを読み込んでおり、起動コストを減らすために[ダイナミックな`import()`](#ダイナミックなimport()) が有効かもしれないことを示唆しています。 + +## 1ページあたりのJavaScriptリクエスト数 + +ページ上のすべてのリソースは、少なくとも1つのリクエストを開始し、リソースがより多くのリソースに対して追加のリクエストを行う場合は、より多くのリクエストを開始する可能性があります。 + +スクリプトのリクエストは多ければ多いほど、より多くのJavaScriptを読み込むだけでなくスクリプトリソース間の競合が増え、メインスレッドを停滞させ起動が、遅くなる可能性が高くなるのです。 + +{{ figure_markup( + image="requests-per-page.png", + caption="1ページあたりのJavaScriptリクエスト数の分布。", + description="1ページあたりのJavaScriptリクエストの10、25、50、75、90パーセンタイルを示す棒グラフ。モバイルページでは、4、10、21、37、60の値になっています。デスクトップでは、全体的に1～3リクエストとやや高い傾向にあります。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTok8UGqYaA58uKaASB2pfM2jlmQu6g3kwHxB6Lb8L7dbccyDtQht823YhchdXRG8SZpB3asRayJI97/pubchart?oid=372493183&format=interactive", + sheets_gid="1148191446", + sql_file="requests_2022.sql" + ) +}} + +2022年、モバイルページの中央値は21のJavaScriptリクエストに応答したのに対し、90パーセンタイルでは60のリクエストに応答しています。昨年と比較すると、中央値で1リクエスト、90パーセンタイルで4リクエストの増加です。 + +2022年のデスクトップデバイスでは、JavaScriptのリクエスト数が中央値で22、90パーセンタイルで63になっています。昨年と比較すると、中央値で1件、90パーセンタイルで4件増加しており、モバイルデバイスと同じ増加率になっています。 + +リクエスト数の増加幅は大きくないものの、2019年のWeb Almanac開始以来、前年比でリクエスト増加の傾向が続いています。 + +## JavaScriptはどのように処理されるのですか？ + +Node.jsのようなJavaScriptランタイムの出現以来、JavaScriptをバンドルし変換するためビルドツールへ依存することがますます一般的になってきました。これらのツールは紛れもなく便利ですが、JavaScriptの提供量に影響を与える可能性があります。今年のWeb Almanacでは、新たにバンドルとトランスパイラの使用状況に関するデータを提示します。 + +### バンドル + +JavaScriptバンドルは、プロジェクトのJavaScriptソースコードを処理し、変換や最適化を適用するビルドタイムツールです。出力はプロダクションレディのJavaScriptです。たとえば、次のようなコードです。 + +```js +function sum (a, b) { + return a + b; +} +``` + +バンドルはこのコードをより小さく、しかしより最適化された同等品に変換し、ブラウザがダウンロードする時間をより短くします。 + +```js +function n(n,r){return n+r} +``` + +バンドルは、ソースコードを最適化し、実稼働環境でのパフォーマンスを向上させるための重要な役割を担っています。 + +JavaScriptのバンドルに関しては豊富な選択肢がありますが、よく頭に浮かぶのはwebpackでしょう。幸いなことに、webpackの生成するJavaScriptにはいくつかのシグネチャ（たとえば `webpackJsonp`）が含まれており、ウェブサイトのプロダクションJavaScriptがwebpackを使ってバンドルされているかどうかを検出することが可能です。 + +{{ figure_markup( + image="webpack-rank.png", + caption="webpack-bundled JavaScriptを使用しているページの順位。", + description="webpackを使用しているページの割合を、人気の高い順に棒グラフで表示したものです。モバイルでは、上位1Kで17%、上位10Kでは15%、上位100Kは12%、上位1Mが8%、全ウェブサイトでは5%という値になっています。デスクトップページはモバイルに近い傾向です。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTok8UGqYaA58uKaASB2pfM2jlmQu6g3kwHxB6Lb8L7dbccyDtQht823YhchdXRG8SZpB3asRayJI97/pubchart?oid=1191436570&format=interactive", + sheets_gid="1329160999", + sql_file="usage_of_webpack_by_rank.sql" + ) +}} + +もっとも普及している1,000のWebサイトのうち、17%がバンドルとしてwebpackを使用しています。HTTP Archiveがクロールするもっとも多いページの多くは、ソースコードのバンドルと最適化にwebpackを使用している知名度の高いeコマースサイトである可能性が高いため、これは理にかなった結果です。それでも、HTTP Archiveのデータセットに含まれる全ページの5%がwebpackを使用しているという事実は、重要な統計データです。しかし、使用されているバンドルはwebpackだけではありません。 + +{{ figure_markup( + image="parcel-rank.png", + caption="Parcel-bundled JavaScriptを使用しているページの順位。", + description="Parcelを使用しているページの割合を、人気の高い順に示した棒グラフです。モバイルでは、上位1Kで1.3%、上位10Kでは1.9%、上位100Kが1.5%、上位1Mは1.2%、全ウェブサイトでは1.3%という値になっています。デスクトップページはモバイルに近い傾向です。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTok8UGqYaA58uKaASB2pfM2jlmQu6g3kwHxB6Lb8L7dbccyDtQht823YhchdXRG8SZpB3asRayJI97/pubchart?oid=369910383&format=interactive", + sheets_gid="908384281", + sql_file="usage_of_parcel_by_rank.sql" + ) +}} + +Parcelは、webpackの代替品として注目され、その採用実績は大きいです。Parcelの採用率はすべてのランクで一貫しており、ランク間で1.2%から1.9%の幅を占めている。 + +HTTP Archiveはエコシステム内のすべてのバンドラーの使用状況を追跡することはできませんが、バンドラーの使用状況はJavaScriptの全体像において開発者の体験にとって重要であるだけでなく、依存性管理コードという形で貢献できるオーバーヘッドがJavaScriptの提供量の要因になりうる、という点で重要です。ユーザーが使用するブラウザに対してもっとも効率的に出力できるよう、プロジェクト全体の設定がどのように行われているかを確認することは価値があります。 + +### トランスパイラ + +トランスパイラとは、新しいJavaScriptの機能を古いブラウザで実行できる構文に変換するため、ビルド時にツールチェーンでよく使われるものです。JavaScriptは長年にわたって急速に進化してきたため、これらのツールは今でも使用されています。今年のWeb Almanacでは、広く互換性のあるプロダクション対応のJavaScriptを提供する際の Babel の使用に関する分析が新たに掲載されました。とくにBabelに注目したのは、開発者コミュニティで代替品よりも広く使われているためです。 + +{{ figure_markup( + image="babel-rank.png", + caption="Babelを使用しているページをランク別に紹介。", + description="Babelを使用しているページの割合を、人気の高い順に示した棒グラフです。モバイルページでは、上位1kの40%、上位10kの40%、上位100kの32%、上位1Mの23%、そして全ウェブサイトの26%という値になっています。デスクトップはモバイルに迫る勢いです。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTok8UGqYaA58uKaASB2pfM2jlmQu6g3kwHxB6Lb8L7dbccyDtQht823YhchdXRG8SZpB3asRayJI97/pubchart?oid=1109529452&format=interactive", + sheets_gid="304021769", + sql_file="usage_of_typescript_and_babel_by_rank.sql" + ) +}} + +この結果は、JavaScriptが長年にわたって進化してきたことを考えれば、驚くような展開ではありません。特定のブラウザのセットに対して幅広い互換性を維持するために、Babelはトランスフォームを使用して互換性のあるJavaScriptコードを出力しています。 + +トランスフォームは、トランスフォームしていないものよりも大きくなることがよくあります。トランスフォームが大規模であったり、コードベース全体で重複していたりすると、潜在的に不必要な、あるいは使用されていないJavaScriptがユーザーに出荷される可能性があります。これはパフォーマンスに悪影響を及ぼす可能性があります。 + +上位100万位にランクインしたページの26％でさえ、Babelを使ってJavaScriptのソースコードをトランスフォームしていることを考えると、これらの体験の中には必要のないトランスフォームを提供している可能性もないわけではありません。プロジェクトでBabelを使用する場合、Babelの利用可能な 設定オプション とプラグインを慎重に検討し、その出力を最適化する機会を探してください。 + +Babelは特定の機能をレガシーな構文に変換する必要があるかどうかを判断するためBrowserslistに依存しているため、あなたのコードがあなたのユーザーが実際に使用しているブラウザで動作するように変換されるよう、Browerslist設定も必ずレビューしてください。 + +## JavaScriptはどのようにリクエストされるのですか？ + +JavaScriptを要求する方法は、パフォーマンスにも影響を与える可能性があります。JavaScriptをリクエストする方法には最適なものがありますが、場合によっては最適とは言い難い方法もあります。ここでは、ウェブが全体としてどのようにJavaScriptを提供しているか、そしてそれがパフォーマンスへの期待にどのように合致するかを見ていきます。 + +### `async`、`defer`、`module`と`nomodule` + +HTMLの `