書いた理由

go言語でginを使っていたら、htmlからjsが読み込めない問題が発生したので、忘れないようにメモっておきます。また、ginを使わない場合でも同様の操作が必要らしいです。
cssの読み込みも同様にやるので、省略します。

ディレクトリについて

githubに今回のコードはおいてあります。
correct.goが正常に動作するプログラムで、incorrect.goが正常に動作しないプログラムです。

./
├── correct.go
├── incorrect.go
└── src
    ├── index.html
    └── js
        └── main.js

htmlとjs

ボタンを押すと、alertでPushed!!と出るだけの簡単なプログラムです。

index.html

<html>
  <head>
    <title>gin-js</title>
    <script defer="defer" src="./js/main.js" ></script>
  </head>
  <body>
      <button id="btn">Push!!</button>
  </body>
</html>

main.js

document.getElementById("btn").onclick=function(){
    alert("Pushed!!")
}

失敗するプログラム

/に接続すると、index.htmlが表示されるいたって簡単なプログラムです。

incorrect.go

package main

import "github.com/gin-gonic/gin"

func main() {
	router := gin.Default()
	router.LoadHTMLGlob("src/*.html")
	router.GET("/", func(ctx *gin.Context) {
		ctx.HTML(200, "index.html", gin.H{})
	})
	router.Run()
}

実行すると/js/main.jsにGETリクエストをして、404が返ってきています。

成功するプログラム

correct.go

package main

import "github.com/gin-gonic/gin"

func main() {
	router := gin.Default()
	router.Static("/js", "src/js/") // ここを追加するだけ!
	// router.Static("HTMLで読み込むURL","読み込むファイルがあるディレクトリの場所")
	router.LoadHTMLGlob("src/*.html")
	router.GET("/", func(ctx *gin.Context) {
		ctx.HTML(200, "index.html", gin.H{})
	})
	router.Run()
}

実行すると/js/main.jsにGETリクエストをして、200が返ってきて成功しています!

静的なファイルにはこのメソッドを使用するらしいです。(詳しくは自分で調べて...)
router.Static("HTMLで読み込むURL","読み込むファイルがあるディレクトリの場所")

最後に

調べても全然出てこなく、30分ぐらいかかったので備忘録&周知のために記事を書きました。
誰かの役に立ったら幸いです。

今回のリポジトリ