質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

解決済

Vueを使用したHTMLを返すwebサーバを起動しようとすると「function "〇○○" not defined」と表示され起動できない

seiji0807
seiji0807

総合スコア12

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

1回答

0リアクション

0クリップ

1060閲覧

投稿2022/09/10 09:07

編集2022/09/10 13:46

前提

プログラミング初心者です。
練習でGoとVueを使ったwebアプリケーションのフロントエンド部分を作成しているときにエラーが発生して困っています。

具体的には、下記「該当のソースコード」に記載のHTMLファイルが表示されるようにしてwebサーバを起動しようとすると、エラーが発生してwebサーバの起動に失敗します。

実現したいこと

  • webサーバを正常に起動できるようにする
  • jsから正常にhtmlに値を渡せるようにする

発生している問題・エラーメッセージ

※「message」が表示されてほしい文字列が入る変数です

PS C:\Users\***\Go\***> go run .\main.go [GIN-debug] [WARNING] Creating an Engine instance with the Logger and Recovery middleware already attached. [GIN-debug] [WARNING] Running in "debug" mode. Switch to "release" mode in production. - using env: export GIN_MODE=release - using code: gin.SetMode(gin.ReleaseMode) panic: template: index.html:20: function "message" not defined goroutine 1 [running]: html/template.Must(...) C:/Program Files/Go/src/html/template/template.go:368 github.com/gin-gonic/gin.(*Engine).LoadHTMLGlob(0xc0000849c0, {0x88f8ac, 0xc}) C:/Users/***/go/pkg/mod/github.com/gin-gonic/gin@v1.8.1/gin.go:251 +0x306 main.serve() C:/Users/***/Go/***/main.go:14 +0x33 main.main() C:/Users/***/Go/***/main.go:53 +0x17 exit status 2

特に

panic: template: index.html:20: function "message" not defined

の部分です。

フォルダ構成

C:.
app
│ .gitignore
│ go.mod
│ go.sum
│ main.go

├─controllers
│□□Controller.go

├─models
│ ├─db
│ │□□ UserDb.go
│ │
│ └─entity
│□□□□ User.go

└─views
□□├─html
□□│□□index.html
□□│
□□└─js
□□□□test.js

該当のソースコード

index.html

html

<!DOCTYPE html> <html> <body> <!--CDNによるVueの取り込み --> <script src="https://unpkg.com/vue@next"></script> <!--Vueインスタンスの生成--> <script> new Vue({ el: "#show", data() { return { message: "Hello Vue!" }; } }); </script> <!--messageの表示--> <div id="show"> Message: {{ message }} </div> </body> </html>

main.go

go

package main import ( "net/http" "app/controllers" "github.com/gin-gonic/gin" ) func serve() { r := gin.Default() r.LoadHTMLGlob("views/html/*") r.GET("index", func(ctx *gin.Context) { ctx.HTML(http.StatusOK, "index.html", gin.H{ "title": "Main Page", }) }) //ルーティングについては記載を省略 r.Run(":8888") } func main() { serve() }

期待していた動作

html

<!--messageの表示--> <div id="show"> Message: {{ message }} </div>

この {{ message }}に、

html

<!--Vueインスタンスの生成--> <script> new Vue({ el: "#show", data() { return { message: "Hello Vue!" }; } }); </script>

ここで設定したmessageが入るという動作を期待していました。

試したこと

index.htmlが以下の場合には正常にwebサーバが起動し、「localhost:8888/index」にアクセスすることでindex.htmlが表示されます。

html

<!DOCTYPE html> <html> <h1>Hello Gin!</h1> </html>

よろしくお願いいたします。

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Go

Go(golang)は、Googleで開発されたオープンソースのプログラミング言語です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。