diff --git a/src/content/en/2024/javascript.md b/src/content/en/2024/javascript.md index 0c697bce12f..fb5506b4eb9 100644 --- a/src/content/en/2024/javascript.md +++ b/src/content/en/2024/javascript.md @@ -10,6 +10,8 @@ editors: [tunetheweb] analysts: [onurguler18, nrllh] translators: [] results: https://docs.google.com/spreadsheets/d/16isMe5_rvmRmJHtK5Je66AhwO8SowGgq0EFqXyjEXw8/ +haddiamjad_bio: Amjad is a fourth-year Ph.D. candidate at Virginia Tech, advised by Dr. Muhammad Ali Gulzar from Virginia Tech. He is also member of ProperData research group and co-host at NothingToHide? podcast. His research focuses on using program analysis techniques to solve internet security and privacy problems. +NishuGoel_bio: Nishu Goel is an engineer at Epilot. She is a Google Developer Expert for Web Technologies and Angular, Microsoft MVP for Developer Technologies, and the author of Step by Step Guide Angular Routing (BPB, 2019) and A Hands-on Guide to Angular (Educative, 2021). Find her writings at unravelweb.dev. featured_quote: Heavy dependence on JavaScript involves compromises. Each stage—from downloading and parsing to execution—demands substantial browser resources. Using too little can compromise user experience and business objectives while overusing it can lead to sluggish load times, unresponsive pages, and poor user engagement. featured_stat_1: 14% featured_stat_label_1: Increase in median mobile JavaScript bytes. diff --git a/src/content/ja/2024/javascript.md b/src/content/ja/2024/javascript.md new file mode 100644 index 00000000000..42b6996ad02 --- /dev/null +++ b/src/content/ja/2024/javascript.md @@ -0,0 +1,797 @@ +--- + +#See https://github.com/HTTPArchive/almanac.httparchive.org/wiki/Authors'-Guide#metadata-to-add-at-the-top-of-your-chapters +title: JavaScript +description: 2024年版Web AlmanacのJavaScriptの章では、Web上でのJavaScriptの使用状況、ライブラリとフレームワーク、圧縮、Webコンポーネント、ソースマップについて解説します。 +hero_alt: Web Almanacのキャラクターが自転車をこいでウェブサイトに電力を供給しているヒーロー画像。 +authors: [haddiamjad, NishuGoel] +reviewers: [tunetheweb] +editors: [tunetheweb] +analysts: [onurguler18, nrllh] +translators: [ksakae1216] +results: https://docs.google.com/spreadsheets/d/16isMe5_rvmRmJHtK5Je66AhwO8SowGgq0EFqXyjEXw8/ +haddiamjad_bio: Amjadは、Virginia Techの4年目の博士課程の学生で、Virginia TechのDr. Muhammad Ali Gulzarの指導を受けています。ProperData研究グループのメンバーであり、NothingToHide?ポッドキャストの共同ホストです。プログラム分析技術を使用してインターネットのセキュリティとプライバシーの問題を解決することに焦点を当てた研究を行っています。 +NishuGoel_bio: Nishu GoelはEpilotのエンジニアです。WebテクノロジーとAngularのGoogle Developer Expert、Developer TechnologiesのMicrosoft MVPであり、Step by Step Guide Angular Routing（BPB、2019）とA Hands-on Guide to Angular（Educative、2021）の著者です。執筆内容はunravelweb.devでご覧いただけます。 +featured_quote: JavaScriptへの過度な依存には、妥協が必要です。ダウンロードやパースから実行までの各段階で、ブラウザのリソースを大量に消費します。使用が少なすぎるとユーザー体験やビジネス目標に影響を与え、多すぎると読み込みが遅くなり、ページが応答しなくなり、ユーザーのエンゲージメントが低下する可能性があります。 +featured_stat_1: 14% +featured_stat_label_1: モバイルのJavaScriptバイト数の中央値の増加 +featured_stat_2: 47% +featured_stat_label_2: モバイルの未使用JavaScriptの中央値 +featured_stat_3: 30% +featured_stat_label_3: Webワーカーを使用しているページ +doi: 10.5281/zenodo.14962516 +--- + +## はじめに + +JavaScriptは、基本的なアニメーションから高度な機能まで、インタラクティブなWeb体験を作り出すために不可欠です。その発展により、Webの動的な機能が大幅に向上しました。 + +しかし、JavaScriptへの過度な依存には、妥協が必要です。ダウンロードやパースから実行までの各段階で、ブラウザのリソースを大量に消費します。使用が少なすぎるとユーザー体験やビジネス目標に影響を与え、多すぎると読み込みが遅くなり、ページが応答しなくなり、ユーザーのエンゲージメントが低下する可能性があります。 + +この章では、Web上でのJavaScriptの役割を再評価し、スムーズで効率的なユーザー体験を設計するための推奨事項を提供します。 + +## どのくらいのJavaScriptを読み込んでいるのか？ + +Web開発者がデプロイしているJavaScriptの量を分析します。現状を明確に把握することは、効果的な改善を推進するために重要です。 + +{{ figure_markup( + image="median-javascript-kilobytes-per-page.png", + caption="ページあたりのJavaScriptの中央値（キロバイト）。", + description="2019年から2024年までのJavaScript使用量の中央値を示す棒グラフ。デスクトップのJavaScriptの中央値は、2019年の391キロバイトから、444、463、509、538、そして2024年には613キロバイトに増加。モバイルでは、2019年の359キロバイトから、411、427、461、491、そして2024年には558キロバイトに増加。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTCTcjvYejhJMWHZwhCSCVm3cbTzqq8pdJRqC6wnBnbsTvPvHu5rTOTbX4_6gWHx-urn-pccmk9bhT3/pubchart?oid=1181894330&format=interactive", + sheets_gid="1824580205", + sql_file="bytes_2024.sql" + ) +}} + +JavaScriptの量は継続的に増加しています。2024年には、この上昇傾向が続き、モバイルで558キロバイト、デスクトップで613キロバイトに達し、中央値のJavaScriptペイロードが14%増加しました。この継続的な傾向は懸念すべきものです。デバイスの性能は向上していますが、最新のテクノロジーにアクセスできる人は限られています。大きなJavaScriptバンドルは、デバイスのリソースに追加の負荷をかけ、とくに古いまたは性能の低いハードウェアを使用するユーザーのパフォーマンスに影響を与えます。 + +## ページあたりのJavaScriptリクエスト数はいくつか？ + +Webページ上の各リソースは少なくとも1つのリクエストを引き起こしますが、そのリソースが他のリソースを引き込むと、急速に増加する可能性があります。 + +{{ figure_markup( + image="median-javascript-requests-per-page.png", + caption="ページあたりのJavaScriptリクエストの中央値。", + description="2019年から2024年までのJavaScriptリクエストの中央値を示す棒グラフ。デスクトップでは2019年の19から2024年には23に、モバイルでは18から22に増加。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTCTcjvYejhJMWHZwhCSCVm3cbTzqq8pdJRqC6wnBnbsTvPvHu5rTOTbX4_6gWHx-urn-pccmk9bhT3/pubchart?oid=2056554025&format=interactive", + sheets_gid="342139378", + sql_file="requests_2024.sql" + ) +}} + +スクリプトリクエストの場合、リスクはさらに高くなります。リクエストを多く送信するほど、より多くのJavaScriptを読み込むことになり、これらのスクリプトがメインスレッドで競合する可能性が高くなります。このリソースの競合により、パフォーマンスが低下し、起動が遅延し、ユーザーを待たせることになります。 + +2024年、モバイルページの中央値は22のJavaScriptリクエストを行い、90パーセンタイルでは68に達します。これは、中央値で1つ、90パーセンタイルで4つのリクエストが前年比で増加したことを示しています。 + +デスクトップでは、状況は同様です。中央値は23のJavaScriptリクエストに増加し、90パーセンタイルでは70リクエストに達します。ここでも、中央値で1つ、90パーセンタイルで5つのリクエストが増加しており、モバイルで観察される傾向と一致しています。 + +これらの増加は一見控えめに見えるかもしれませんが、Webの動作の継続的な進化を示しています。Web Almanacが2019年に開始されて以来、JavaScriptリクエストは着実に増加しており、将来、この増加がパフォーマンスの改善を大幅に上回る可能性があることを示唆しています。これは、JavaScriptが重いWebの複雑さを乗り越えながら、開発者とユーザーの両方にとって何を意味するのでしょうか？ + +{{ figure_markup( + image="distribution-of-unused-javascript.png", + caption="未使用JavaScriptの分布。", + description="パーセンタイル別の未使用JavaScriptバイトを示す棒グラフ。デスクトップでは、10パーセンタイルで21キロバイト、25パーセンタイルで87キロバイト、中央値で235キロバイト、75パーセンタイルで509キロバイト、90パーセンタイルで923キロバイト。モバイルでは、10パーセンタイルで0キロバイト、25パーセンタイルで74キロバイト、中央値で206キロバイト、75パーセンタイルで450キロバイト、90パーセンタイルで818キロバイト。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTCTcjvYejhJMWHZwhCSCVm3cbTzqq8pdJRqC6wnBnbsTvPvHu5rTOTbX4_6gWHx-urn-pccmk9bhT3/pubchart?oid=762521448&format=interactive", + sheets_gid="1175581542", + sql_file="unused_js_bytes_distribution.sql" + ) +}} + +JavaScriptの増加とともに、ページ読み込み時にダウンロードされたバイトの約半分（モバイルでは中央値で206キロバイト—配信されたバイトの44%）が未使用であることがわかります。 + +## JavaScriptのパッケージはどのように処理されるのですか？ + +Web開発の急速な世界では、JavaScriptの読み込み方法がサイトのパフォーマンスを左右する可能性があります。ページレンダリングを遅くする可能性のある同期的な読み込みから、速度を向上させる非同期技術まで、開発者はさまざまなオプションを利用できます。課題は、JavaScriptのインタラクティブ性の力と、迅速でシームレスなユーザー体験の必要性のバランスを取ることです。最適な読み込み戦略を習得することで、Webクリエイターはサイトの応答性とユーザー満足度を大幅に向上させることができます。 + +### バンドラー + +JavaScriptバンドラー（webpackやParcelなど）は、複数のJavaScriptファイルを1つのバンドルにパッケージ化してユーザーへの配信を効率化します。コードとその依存関係を分析し、HTTPリクエストの数を減らすために最終的な出力を最適化します。ファイルを結合することで、バンドラーは読み込み時間とパフォーマンスを改善できます。ただし、これらのツールは機能的なコードとユーザートラッキングスクリプトを意図せずに絡み合わせてしまい、パフォーマンスとプライバシーの考慮事項を複雑にする可能性があります。 + +{{ figure_markup( + image="sites-using-webpack-grouped-by-rank.png", + caption="ランク別のwebpack使用サイト。", + description="ランク別のwebpack使用率を示す棒グラフ。デスクトップでは上位1,000サイトで15%、上位10,000サイトで17%、上位100,000サイトで13%、上位100万サイトで9%、上位1,000万サイトで6%、全サイトで6%。モバイルでは上位1,000サイトで13%、上位10,000サイトで16%、上位100,000サイトで13%、上位100万サイトで9%、上位1,000万サイトと全サイトで5%。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTCTcjvYejhJMWHZwhCSCVm3cbTzqq8pdJRqC6wnBnbsTvPvHu5rTOTbX4_6gWHx-urn-pccmk9bhT3/pubchart?oid=784514302&format=interactive", + sheets_gid="1114140412", + sql_file="usage_of_webpack_by_rank.sql" + ) +}} + +webpackの使用率は全体的に5%で安定していますが、最近の傾向では、モバイルとデスクトップの両方で上位1,000サイトでの採用が減少しています。5%は控えめに見えるかもしれませんが、Web Almanacのサイト全体でみると依然として相当な数を示しています。 + +{{ figure_markup( + image="sites-using-parcel-grouped-by-rank.png", + caption="ランク別のParcel使用サイト。", + description="ランク別のParcel使用率を示す棒グラフ。デスクトップでは上位1,000サイトで0.32%、上位10,000サイトで0.40%、上位100,000サイトで0.51%、上位100万サイトで0.65%、上位1,000万サイトで0.54%、全サイトで0.49%。モバイルでは上位1,000サイトで0.26%、上位10,000サイトで0.28%、上位100,000サイトで0.43%、上位100万サイトで0.58%、上位1,000万サイトで0.44%、全サイトで0.34%。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTCTcjvYejhJMWHZwhCSCVm3cbTzqq8pdJRqC6wnBnbsTvPvHu5rTOTbX4_6gWHx-urn-pccmk9bhT3/pubchart?oid=989440772&format=interactive", + sheets_gid="422902451", + sql_file="usage_of_parcel_by_rank.sql" + ) +}} + +Parcelはwebpackに次ぐ2番目に人気のある選択肢として、開発者の間で注目すべき採用率を誇っています。しかし、最近の傾向では使用率が低下しており、昨年のモバイルウェブサイトの1.3%から今年は0.3%に減少しています。デスクトップでも同様のパターンが見られ、JavaScriptバンドラーの状況が変化していることを示しています。 + +### トランスパイラー + +2022年のWeb Almanacでは、[ソースマップが利用可能なサイトに対するトランスパイラーの割合を調査](../2022/javascript#トランスパイラ)しました。今年は、全サイトに対する割合に変更しました。この方法論の変更により、サイトの過剰カウント（ソースマップを使用しているサイトは、定義上、トランスパイルが必要な複雑なWebアプリケーションである可能性が高い）から、過小カウント（すべてのサイトが公開ソースマップを公開しているわけではない）に移行しています。 + +{{ figure_markup( + image="sites-using-babel-grouped-by-rank.png", + caption="ランク別のBabel使用サイト。", + description="ランク別のBabel使用率を示す棒グラフ。デスクトップでは上位1,000サイトで7.6%、上位10,000サイトで8.9%、上位100,000サイトで6.9%、上位100万サイトで4.7%、上位1,000万サイトで4.1%、全サイトで5.3%。モバイルでは上位1,000サイトで9.9%、上位10,000サイトで12.0%、上位100,000サイトで9.1%、上位100万サイトで5.8%、上位1,000万サイトで4.7%、全サイトで6.1%。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTCTcjvYejhJMWHZwhCSCVm3cbTzqq8pdJRqC6wnBnbsTvPvHu5rTOTbX4_6gWHx-urn-pccmk9bhT3/pubchart?oid=2030733123&format=interactive", + sheets_gid="1658473552", + sql_file="usage_of_typescript_and_babel_by_rank.sql" + ) +}} + +Babelは上位ランクのウェブサイトで特に普及しており、上位10,000のモバイルサイトの12%がBabelを使用しています（これはソースマップを使用しているサイトの23%～38%で、[昨年のBabelの結果](../2022/javascript#fig-6)と同様です）。モバイルサイトは、ランクに関係なく、デスクトップサイトよりも一貫して高い採用率を示しています。これらの傾向は、とくに上位層やモバイル最適化されたサイトにおけるBabelの重要性を浮き彫りにし、モダンなWeb開発における重要性の高まりを示しています。 + +#### TypeScriptはどのくらい使用されているか？ + +TypeScriptはJavaScriptのスーパーセットで、静的型を追加し、開発中のエラーを捕捉しやすくし、コードの保守性を向上させます。これらのツールは開発プロセスを効率化し、ブラウザ間の互換性を確保します。 + +{{ figure_markup( + image="sites-using-typescript-grouped-by-rank.png", + caption="ランク別のTypeScript使用サイト。", + description="ランク別のTypeScript使用率を示す棒グラフ。デスクトップでは上位1,000サイトで5.2%、上位10,000サイトで6.7%、上位100,000サイトで6.1%、上位100万サイトで5.5%、上位1,000万サイトで4.9%、全サイトで6.0%。モバイルでは上位1,000サイトで4.5%、上位10,000サイトで6.2%、上位100,000サイトで5.7%、上位100万サイトで5.4%、上位1,000万サイトで4.9%、全サイトで6.2%。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTCTcjvYejhJMWHZwhCSCVm3cbTzqq8pdJRqC6wnBnbsTvPvHu5rTOTbX4_6gWHx-urn-pccmk9bhT3/pubchart?oid=295342967&format=interactive", + sheets_gid="1658473552", + sql_file="usage_of_typescript_and_babel_by_rank.sql" + ) +}} + +全ランクにおいて、約6%のページがTypeScriptを使用しており、モバイルの方がやや高い採用率を示しています。これは、ソースマップを公開しているサイトのみをカウントしていることに注意してください。使用率はおおむね一定していますが、上位ランク（1,000）のページは、下位ランクのページと比較してTypeScriptの採用率がやや低くなっています。 + +## JavaScriptはどのようにリクエストされるのか？ + +Web開発の急速な世界では、JavaScriptの読み込み方法がサイトのパフォーマンスを左右する可能性があります。ページレンダリングを遅くする可能性のある同期的な読み込みから、速度を向上させる非同期技術まで、開発者はさまざまなオプションを利用できます。課題は、JavaScriptのインタラクティブ性の力と、迅速でシームレスなユーザー体験の必要性のバランスを取ることです。最適な読み込み戦略を習得することで、Webクリエイターはサイトの応答性とユーザー満足度を大幅に向上させることができます。 + +### `async`、`defer`、`module`、`nomodule` + +When optimizing JavaScript loading, developers have several powerful attributes at their disposal. + +`async`属性は、HTMLの解析を継続しながらスクリプトを非同期で読み込み、利用可能になった時点で即座に実行します。一方、`defer`はHTMLの解析が完了するまでスクリプトの実行を遅延させ、遅延されたスクリプトの順序を維持します。 + +モダンなWebアプリケーションでは、`module`属性はスクリプトがJavaScriptモジュールであることを示し、ES6のimport/export構文と厳格モードをデフォルトで有効にします。これを補完する`nomodule`属性は、ES6モジュールをサポートしていないブラウザ用のフォールバックスクリプトを指定し、より広い互換性を確保しながら、モダンブラウザではこれらのフォールバックを無視できるようにします。これらの属性を戦略的に使用することで、開発者はページのパフォーマンスとユーザー体験を最適化するためにスクリプトの読み込み動作を微調整できます。 + +{{ figure_markup( + image="how-is-javascript-requested.png", + caption="JavaScriptはどのようにリクエストされているか？", + description="デスクトップでは、`async`が87%のサイトで使用され、`defer`が48%、`async`と`defer`の両方が22%、`module`が4%、`nomodule`が0%、`async`も`defer`も使用していないのが11%のサイトです。モバイルではほぼ同じで、`async`が87%のサイトで使用され、`defer`が47%、`async`と`defer`の両方が22%、`module`が4%、`nomodule`が0%、`async`も`defer`も使用していないのが11%のサイトです。", + chart_url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTCTcjvYejhJMWHZwhCSCVm3cbTzqq8pdJRqC6wnBnbsTvPvHu5rTOTbX4_6gWHx-urn-pccmk9bhT3/pubchart?oid=1907402404&format=interactive", + sheets_gid="901949116", + sql_file="breakdown_of_pages_using_async_defer.sql" + ) +}} + +[2022年のWeb Almanac](../2022/javascript#async-defer-moduleとnomodule)から2024年までのJavaScriptの読み込みトレンドを比較すると、開発者の実践に顕著な変化が見られます。`async`属性の使用は、デスクトップとモバイルの両方で76%から87%に大幅に増加しました。`defer`属性の使用は、42%から47%と控えめな増加を見せています。`async`と`defer`の組み合わせは、28-29%から22%にわずかに減少しており、これは開発者が一方の方法を選択するようになった可能性があります。 + +`module`の使用は4%と低いままで、`nomodule`はほぼゼロの採用率を示しており、モダンなJavaScriptモジュールシステムがまだWeb全体で広く実装されていないことを示しています。 + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
属性20222024変化率
async47.2%49.5%4.8%
defer9.1%13.0%43.3%
asyncとdefer3.1%3.0%-3.0%
module0.4%1.2%208.8%
nomodule0.0%0.0%N/A
+
{{ figure_link(caption="スクリプト別のJavaScriptリクエスト（モバイル）。", sheets_gid="8375823", sql_file="breakdown_of_scripts_using_async_defer_module_nomodule.sql") }}
+
+ +2022年から2024年までの`