--- title: 備忘録 Goでginを使う時に、cssやjsのファイルが読み込めない問題の解決 tags: Go gin HTML CSS JavaScript author: suzakutakumi3 slide: false --- # 書いた理由 go言語でginを使っていたら、htmlからjsが読み込めない問題が発生したので、忘れないようにメモっておきます。また、ginを使わない場合でも同様の操作が必要らしいです。 cssの読み込みも同様にやるので、省略します。 ## ディレクトリについて [github](https://github.com/suzakutakumi/gin-staticJS)に今回のコードはおいてあります。 `correct.go`が正常に動作するプログラムで、`incorrect.go`が正常に動作しないプログラムです。 ``` ./ ├── correct.go ├── incorrect.go └── src ├── index.html └── js └── main.js ``` ## htmlとjs ボタンを押すと、alertで`Pushed!!`と出るだけの簡単なプログラムです。 ```html:index.html gin-js ``` ```javascript:main.js document.getElementById("btn").onclick=function(){ alert("Pushed!!") } ``` ## 失敗するプログラム `/`に接続すると、`index.html`が表示されるいたって簡単なプログラムです。 ```go: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`が返ってきています。 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467463/520bb136-d11e-2661-606d-780cf2349ba1.png) ## 成功するプログラム ```go: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`が返ってきて成功しています! ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/467463/9448120d-4169-e691-9a2c-0f3104b50e9f.png) 静的なファイルにはこのメソッドを使用するらしいです。(詳しくは自分で調べて...) `router.Static("HTMLで読み込むURL","読み込むファイルがあるディレクトリの場所")` ## 最後に 調べても全然出てこなく、30分ぐらいかかったので備忘録&周知のために記事を書きました。 誰かの役に立ったら幸いです。 [今回のリポジトリ](https://github.com/suzakutakumi/gin-staticJS)