Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

[インデックス 14429] ファイルの概要

このコミットは、Go言語のドキュメンテーションツールであるgodocの一部であるcodewalk.htmlファイルから、重複するjQueryのインクルージョンを削除するものです。具体的には、google.loadメソッドを使用してjQueryを読み込むスクリプトタグが削除されました。これにより、親テンプレートであるgodoc.htmlで一元的にjQueryが管理されるようになり、冗長性の排除とパフォーマンスの向上が図られています。

コミット

lib/godoc/codewalk.htmlファイルから、重複してjQueryを読み込むスクリプトタグを削除しました。jQueryはすでに親ファイルであるgodoc.htmlで読み込まれているため、この変更により冗長な読み込みが解消されます。

GitHub上でのコミットページへのリンク

https://github.com/golang/go/commit/792e664ee401e41f8e34dc758c88ba6bbd8122e2

元コミット内容

lib/godoc/codewalk.html: remove duplicate jquery inclusion
now we load jquery in its parent--godoc.html.

R=golang-dev, adg
CC=golang-dev
https://golang.org/cl/6814112

変更の背景

この変更の背景には、ウェブアプリケーションにおけるスクリプトの読み込み効率化と、依存関係の適切な管理という目的があります。

  1. 重複読み込みの解消: 以前のcodewalk.htmlでは、親ページであるgodoc.htmlが既にjQueryを読み込んでいるにもかかわらず、自身でもjQueryを読み込むコードが含まれていました。これは、同じライブラリを複数回ダウンロード・解析・実行することになり、ウェブページのロード時間の増加や、潜在的なスクリプトの競合問題を引き起こす可能性があります。
  2. 一元的な管理: 親テンプレート（godoc.html）で共通のライブラリを読み込むことで、子ページ（codewalk.htmlなど）は個別にライブラリを読み込む必要がなくなります。これにより、ライブラリのバージョン管理や更新が容易になり、コードベース全体の保守性が向上します。
  3. google.loadの利用: 当時のGoogle AJAX Libraries APIのgoogle.loadメソッドは、GoogleのCDNから人気のあるJavaScriptライブラリを簡単に読み込むための便利な方法でした。しかし、このメソッドは後に非推奨となり、現代のウェブ開発ではCDNからの直接リンクやパッケージマネージャーを通じた導入が主流となっています。このコミットは、その過渡期における最適化の一環と見ることができます。

前提知識の解説

jQuery

jQueryは、高速で小さく、機能豊富なJavaScriptライブラリです。HTMLのDOM操作、イベントハンドリング、アニメーション、Ajaxなどを、よりシンプルでクロスブラウザ互換性のある方法で記述できるように設計されています。ウェブ開発において非常に広く利用されており、多くのウェブサイトやアプリケーションでインタラクティブな機能を実現するために使われています。

google.load (Google AJAX Libraries API)

google.loadは、Google AJAX Libraries APIの一部として提供されていたJavaScript関数です。このAPIは、GoogleがホストするCDN（Content Delivery Network）から、jQuery、Prototype、MooTools、Dojoなどの人気のあるJavaScriptライブラリをウェブページに簡単に組み込むための仕組みを提供していました。開発者は、google.load("jquery", "1.3.2");のように記述するだけで、指定されたバージョンのライブラリを非同期で読み込むことができました。

しかし、このAPIは現在非推奨（deprecated）となっており、GoogleはCDNから直接ライブラリのURLを指定して読み込む方法や、npmなどのパッケージマネージャーを利用する方法を推奨しています。これは、google.loadが提供するバージョンが古く、最新のセキュリティ修正や機能強化が適用されていない可能性があるためです。

godocとcodewalk.html

  • godoc: Go言語の公式ドキュメンテーションツールです。Goのソースコードからコメントや宣言を解析し、ウェブブラウザで閲覧可能な形式でドキュメントを生成します。開発者がGoのパッケージや関数、型などの情報を簡単に参照できるようにするために不可欠なツールです。
  • codewalk.html: godocが提供する機能の一つである「コードウォーク（Codewalk）」のHTMLテンプレートファイルです。コードウォークは、特定のコードベースを段階的に解説するチュートリアルのような形式で、コードの理解を深めるのに役立ちます。このファイルは、コードウォークの表示に必要なHTML構造と、関連するJavaScriptやCSSファイルを読み込む役割を担っていました。

重複するスクリプトのインクルージョン

ウェブページで同じJavaScriptファイルを複数回読み込むことは、一般的に避けるべきプラクティスです。その理由は以下の通りです。

  1. パフォーマンスの低下: ブラウザは、同じファイルを複数回ダウンロードしようとするか、キャッシュから読み込むにしても、スクリプトの解析と実行を複数回行う必要があります。これにより、ページのロード時間が長くなり、ユーザーエクスペリエンスが損なわれます。
  2. 競合とエラー: 特にjQueryのようなライブラリでは、グローバルスコープに変数（例: $, jQuery）を定義します。同じライブラリが複数回読み込まれると、これらの変数が上書きされたり、予期しない動作を引き起こしたりする可能性があります。プラグインなどが特定のバージョンのライブラリに依存している場合、問題が顕在化しやすくなります。
  3. 帯域幅の無駄: 不要なダウンロードは、ユーザーのデータ通信量を無駄にします。

技術的詳細

このコミットは、ウェブページの最適化における基本的な原則である「重複の排除」を適用しています。

codewalk.htmlファイルから削除された以下の2行は、Google AJAX Libraries APIを通じてjQueryバージョン1.3.2を読み込むためのものです。

<script src="http://www.google.com/jsapi"></script>
<script>google.load("jquery", "1.3.2");</script>

この変更が行われた時点では、godoc.html（codewalk.htmlの親テンプレート）が既にjQueryを読み込む責任を負っていました。したがって、codewalk.html内で再度jQueryを読み込むことは冗長であり、非効率的でした。

この重複を削除することで、以下の技術的なメリットが得られます。

  • HTTPリクエストの削減: http://www.google.com/jsapiへのリクエストが不要になります。これにより、ブラウザがサーバーと通信する回数が減り、ページの初期ロードが高速化されます。
  • JavaScriptの解析・実行時間の短縮: jQueryライブラリのコードが一度だけ解析・実行されるようになります。これにより、ブラウザのCPU負荷が軽減され、特に低スペックのデバイスやモバイル環境でのパフォーマンスが向上します。
  • メモリ使用量の削減: 同じライブラリのインスタンスが複数メモリ上に存在することを防ぎ、ブラウザのメモリ使用量を最適化します。
  • 潜在的な競合の回避: jQueryのグローバルオブジェクト（$やjQuery）が複数回定義されることによる、スクリプト間の競合や予期しない動作のリスクがなくなります。これは、特に複雑なウェブアプリケーションや、複数のJavaScriptライブラリやプラグインを使用している場合に重要です。

この変更は、ウェブ開発における「DRY (Don't Repeat Yourself)」原則の一例であり、コードの保守性とパフォーマンスを向上させるための良い実践です。

コアとなるコードの変更箇所

--- a/lib/godoc/codewalk.html
+++ b/lib/godoc/codewalk.html
@@ -4,8 +4,6 @@
 	license that can be found in the LICENSE file.\n -->
 \n-<script src="http://www.google.com/jsapi"></script>\n-<script>google.load("jquery", "1.3.2");</script>\n <style type='text/css'>@import "/doc/codewalk/codewalk/codewalk.css";</style>\n <script type="text/javascript" src="/doc/codewalk/codewalk.js"></script>\n \n```

## コアとなるコードの解説

削除された2行は以下の通りです。

1.  `<script src="http://www.google.com/jsapi"></script>`
    *   この行は、Google AJAX Libraries APIのローダー（`jsapi`）を読み込んでいます。このローダーが提供する`google.load`関数を使って、他のライブラリを動的に読み込むことができます。
2.  `<script>google.load("jquery", "1.3.2");</script>`
    *   この行は、`google.load`関数を呼び出し、GoogleのCDNからjQueryライブラリのバージョン1.3.2を読み込むように指示しています。

これらの行が削除されたことで、`codewalk.html`は自身でjQueryを読み込むことをやめ、親テンプレートである`godoc.html`が提供するjQueryインスタンスを利用するようになりました。これにより、ウェブページのロード効率が向上し、リソースの無駄がなくなります。

## 関連リンク

*   Go CL 6814112: [https://golang.org/cl/6814112](https://golang.org/cl/6814112)

## 参考にした情報源リンク

*   Google AJAX Libraries API (非推奨に関する情報を含む): [https://developers.google.com/speed/libraries/](https://developers.google.com/speed/libraries/)
*   jQuery 公式サイト: [https://jquery.com/](https://jquery.com/)
*   Subresource Integrity (SRI) について: [https://developer.mozilla.org/ja/docs/Web/Security/Subresource_Integrity](https://developer.mozilla.org/ja/docs/Web/Security/Subresource_Integrity)
*   npm (Node Package Manager): [https://www.npmjs.com/](https://www.npmjs.com/)
*   Yarn (パッケージマネージャー): [https://yarnpkg.com/](https://yarnpkg.com/)
*   jsdom (Node.js環境でDOMをシミュレート): [https://github.com/jsdom/jsdom](https://github.com/jsdom/jsdom)