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

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

このコミットは、Go言語の公式ドキュメントサイトに組み込まれているGo Playgroundに、新しいサンプルプログラム（"toys"）とGo Tourへのリンクボタンを追加するものです。これにより、ユーザーはGo Playgroundでより多様なGo言語の機能や概念を試すことができるようになり、またGo言語の学習リソースであるGo Tourへのアクセスも容易になります。

コミット

commit d528f52d87bc611c2b7e73c358e5b86a18bdf71d
Author: Andrew Gerrand <adg@golang.org>
Date:   Thu Mar 15 17:44:47 2012 +1100

    cmd/godoc: add toys, tour button to playground
    
    Fixes #3241.
    
    R=golang-dev, r
    CC=golang-dev
    https://golang.org/cl/5835043

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

https://github.com/golang/go/commit/d528f52d87bc611c2b7e73c358e5b86a18bdf71d

元コミット内容

このコミットは、cmd/godoc（Goドキュメントサーバー）に関連する変更であり、Go Playgroundに「toys」（サンプルプログラム）と「tour button」（Go Tourへのリンクボタン）を追加することを目的としています。これはIssue #3241を修正するものです。

変更の背景

Go Playgroundは、Go言語のコードをブラウザ上で記述、実行、共有できる非常に便利なツールです。しかし、初期のGo Playgroundには、ユーザーが試せるサンプルコードが限られていました。このコミットの背景には、ユーザーがGo言語の様々な側面（並行処理、再帰、データ構造など）をより手軽に体験できるように、多様なサンプルプログラムを提供したいという意図があります。また、Go言語の学習を始めるユーザーがGo Tourへ簡単にアクセスできるように、導線を強化することも目的とされています。

Issue #3241は、Go Playgroundに「面白いサンプルプログラム」を追加する要望でした。このコミットは、その要望に応える形で、Go言語の特性を示すいくつかの新しいサンプルコードを導入し、それらを簡単に選択して実行できるUI要素を追加しています。

前提知識の解説

  • Go Playground: Go言語のコードをブラウザ上で実行できるオンライン環境です。Go言語の公式ウェブサイトに組み込まれており、コードのテスト、共有、学習に利用されます。バックエンドで実際のGoコンパイラとランタイムが動作し、結果をフロントエンドに返します。
  • Go Tour: Go言語の基本的な概念から高度な機能までをインタラクティブに学べるウェブベースのチュートリアルです。Go Playgroundが組み込まれており、コードをその場で実行しながら学習を進めることができます。
  • Go言語の並行処理: Go言語はゴルーチン（goroutine）とチャネル（channel）というプリミティブを用いて、シンプルかつ強力な並行処理をサポートしています。ゴルーチンは軽量なスレッドのようなもので、チャネルはゴルーチン間で安全にデータをやり取りするための通信路です。
  • Peano Integers (ペアノの公理): 自然数を定義するための公理系です。このコミットで追加されたpeano.goは、Goの再帰的な計算能力を示すために、ペアノの公理に基づいた数値表現と演算を実装しています。
  • Sieve of Eratosthenes (エラトステネスの篩): 素数を効率的に見つけるためのアルゴリズムです。sieve.goは、Goのチャネルとゴルーチンを用いた並行処理によるエラトステネスの篩の実装例です。
  • Binary Tree (二分木): 各ノードが最大2つの子ノードを持つツリー型のデータ構造です。tree.goは、Goの並行処理を用いて二分木を比較する例を示しています。

技術的詳細

このコミットの技術的な変更は、主に以下の3つの領域に分けられます。

  1. 新しいサンプルプログラムの追加:

    • doc/play/fib.go: フィボナッチ数列をクロージャで生成する例。
    • doc/play/hello.go: "Hello, 世界"を出力する基本的なプログラム。
    • doc/play/peano.go: ペアノ整数をGoの再帰とポインタで表現し、演算を行う例。Goのセグメントスタックの効率性を示す。
    • doc/play/pi.go: Goの並行処理（ゴルーチンとチャネル）を用いて円周率を計算する例。
    • doc/play/sieve.go: Goの並行処理を用いたエラトステネスの篩の実装例。
    • doc/play/solitaire.go: ペグソリティアのボードゲームを解くプログラム。再帰とバックトラッキングの例。
    • doc/play/tree.go: Goの並行処理を用いて二分木を比較する例。 これらのファイルは、Go Playgroundのバックエンドが提供する/doc/play/エンドポイントから取得できるようになります。

  2. Go PlaygroundのJavaScriptロジックの変更 (doc/play/playground.js):

    • setBody関数が追加され、CodeMirrorエディタまたは通常のtextareaにコードを設定する機能が提供されます。
    • opts['toysEl']オプションが追加され、サンプルプログラムを選択するためのドロップダウン要素が指定できるようになります。
    • ドロップダウンのchangeイベントリスナーが追加され、選択されたサンプルプログラムのコードを/doc/play/から取得し、エディタにロードするAJAXリクエストが実行されます。

  3. HTMLとCSSの変更 (doc/root.html, doc/style.css):

    • doc/root.htmlに、Go Tourへのリンクボタンと、新しいサンプルプログラムを選択するための<select>要素（ドロップダウン）が追加されます。
    • doc/style.cssは、これらの新しいUI要素のスタイリングを調整し、ボタンやドロップダウンの配置と見た目を改善します。特に、div#learn .buttonsのフロート設定が変更され、div#learn .toysという新しいスタイルが追加されています。

  4. Goドキュメントサーバーの変更 (src/cmd/godoc/godoc.go):

    • registerPublicHandlers関数内で、/doc/play/パスに対するハンドラが追加されます。これにより、doc/play/ディレクトリ内のファイル（新しく追加されたサンプルプログラムなど）がHTTP経由で提供されるようになります。これはfileServerによって処理されます。

これらの変更により、Go Playgroundは単なるコード実行環境から、Go言語の様々な機能やイディオムを体験できるインタラクティブな学習ツールへと進化しています。

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

  • doc/play/playground.js:
    • setBody関数の追加（エディタへのコード設定）
    • opts['toysEl']の処理と、ドロップダウンのchangeイベントハンドラの実装。これにより、選択されたサンプルコードがAJAXでロードされる。
  • doc/root.html:
    • Go Tourボタンの追加。
    • サンプルプログラム選択用の<select>要素の追加。
  • src/cmd/godoc/godoc.go:
    • /doc/play/パスに対するfileServerハンドラの追加。

コアとなるコードの解説

doc/play/playground.js

function setBody(text) {
    if (editor) {
        editor.setValue(text);
        return;
    }
    $(opts['codeEl']).val(text);
}

// ...

if (opts['toysEl'] != null) {
    $(opts['toysEl']).bind('change', function() {
        var toy = $(this).val();
        $.ajax("/doc/play/"+toy, {
            processData: false,
            type: "GET",
            complete: function(xhr) {
                if (xhr.status != 200) {
                    alert("Server error; try again.")
                    return;
                }
                setBody(xhr.responseText);
            }
        });
    });
}

setBody関数は、CodeMirrorエディタが初期化されている場合はそのsetValueメソッドを呼び出し、そうでない場合は通常のtextareaのvalueプロパティを設定することで、Go Playgroundのコード表示領域にテキストを挿入します。 opts['toysEl']が存在する場合（つまり、HTMLにサンプル選択用のドロップダウンが提供されている場合）、そのchangeイベントにリスナーがバインドされます。ユーザーがドロップダウンで新しいサンプルを選択すると、選択された値（例: "fib.go"）が取得され、/doc/play/fib.goのようなURLに対してAJAX GETリクエストが送信されます。リクエストが成功すると、取得したGoコードがsetBody関数を通じてエディタにロードされます。

doc/root.html

<div class="buttons">
<a class="run" href="#" title="Run this code [shift-enter]">Run</a>
<a class="share" href="#" title="Share this code">Share</a>
<a class="tour" href="http://tour.golang.org/" title="Learn Go from your browser">Tour</a>
</div>
<div class="toys">
<select>
    <option value="hello.go">Hello, World!</option>
    <option value="fib.go">Fibonacci Closure</option>
    <option value="peano.go">Peano Integers</option>
    <option value="pi.go">Concurrent pi</option>
    <option value="sieve.go">Concurrent Prime Sieve</option>
    <option value="solitaire.go">Peg Solitaire Solver</option>
    <option value="tree.go">Tree Comparison</option>
</select>
</div>

このHTMLスニペットは、Go PlaygroundのUIに新しい要素を追加しています。

  • <a class="tour" href="http://tour.golang.org/" ...>Tour</a>: Go Tourへの直接リンクを提供するボタンです。
  • <div class="toys"><select>...</select></div>: 新しいサンプルプログラムを選択するためのドロップダウンメニューです。各<option>のvalue属性は、対応するGoサンプルファイルのファイル名（例: "fib.go"）に設定されており、これがJavaScriptでAJAXリクエストのパスとして使用されます。

src/cmd/godoc/godoc.go

func registerPublicHandlers(mux *http.ServeMux) {
    // ...
    mux.Handle("/doc/play/", fileServer)
    // ...
}

registerPublicHandlers関数は、GoドキュメントサーバーのHTTPリクエストハンドラを登録します。この変更では、/doc/play/というURLパスに対してfileServerハンドラを関連付けています。fileServerは、指定されたディレクトリ（この場合はdoc/play/）内の静的ファイルをHTTP経由で提供する役割を担います。これにより、ブラウザから/doc/play/fib.goのようなリクエストがあった際に、サーバーはdoc/play/fib.goファイルの内容を返すことができるようになります。これは、JavaScriptがAJAXでサンプルコードをロードするために不可欠な設定です。

関連リンク

参考にした情報源リンク