プログラマーへの道 #93 の補足説明

こんにちは、プログラマーVTuberの衣亥栖ティオです。
今回は以下の動画の補足説明をします。 動画内で実装したソースコードも載せています。

今回の動画で実装したソースコード

今回の実装は以下です。
https://github.com/tio-iis/memo-server/pull/19/files

現時点でのソースコード全体は以下です。
https://github.com/tio-iis/memo-server/tree/027d6cce0c1b07c3ea0b06217ec6b518dacabf85

JavaScriptのファイルを分ける方法

今まではindex.htmlというHTMLファイルにJavaScriptを記載していましたが、 JavaScriptの実装は別のファイルに切り出すことができます。 ファイルの拡張子は js です。

https://www.javadrive.jp/google-maps-javascript/charset/index2.html

JavaScriptのファイルを分けることができなかった理由

動画内でもあった通り、今回はJavaScriptのファイルを切り出すことができませんでした。 その理由はGoのバックエンドサーバ側にあります。

動画内でmemo.jsを利用するための設定は以下です。 この設定をすると、ブラウザは localhost:8080/memo.js にアクセスしてmemo.jsのファイルを取得しにいきます。

<script src="./memo.js"></script>

一方のGoのバックエンドサーバでは、以下の部分でHTMLファイルを出力するURLと関数の紐付けをしていますが、 この紐付け方だと "localhost:8080/memo.js" でも index.html の内容を出力してしまうことになります。 なので、既存の実装のままだとうまくいきませんでした。 https://github.com/tio-iis/memo-server/blob/c49dbd300ff3a6b6bc3a0ab59353395262f4a98f/main.go#L20

ファイルを分ける場合は、バックエンドサーバを以下のように修正する必要があります。

func main() {
    fmt.Println("start")

    //http://localhost:8080/
    http.HandleFunc("/", showHTML)

        http.HandleFunc("/memojs", showMemoJS) //memo.js用の紐付けを追加する

    http.HandleFunc("/add_memo", addMemo)
    http.HandleFunc("/list_memos", listMemos)
    http.HandleFunc("/delete_memos", deleteMemos)
    http.ListenAndServe(":8080", nil)
}

//memo.jsの内容を返す handler を追加する。
func showMemoJS(w http.ResponseWriter, r *http.Request) {
    data, err := os.ReadFile("=memo.js")
    if err != nil {
        //ファイルが見つからない場合
        log.Fatal(err)
    }

    htmlStr = string(data)

    fmt.Fprintln(w, htmlStr)
}

動画内でこの実装を追加して、動作確認するのが難しかったため、一旦今まで通り index.html を利用することにしました。

しばらくは難しい話が続くと思います

今回の動画からクラスを利用することになりますが、しばらくは難しい内容が続くと思います。 というのも、私自身もどのようにクラスを使っていくのかを試行錯誤しなければいけないからです。 リファクタリングが一段落ついたら、改めて説明をしようと思うので、それまでは理解できなくても大丈夫だと思います。 なんとなく「こーゆーものなんだなー」とか「こうやって使うんだなー」という感想を持ってもらえれば大丈夫です。