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

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

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

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

Go

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

JavaScript

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

HTML

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

Q&A

解決済

1回答

1448閲覧

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

seiji0807

総合スコア12

Vue.js

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

Go

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

JavaScript

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

HTML

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

0グッド

0クリップ

投稿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

1<!DOCTYPE html> 2<html> 3 <body> 4 <!--CDNによるVueの取り込み --> 5 <script src="https://unpkg.com/vue@next"></script> 6 7 <!--Vueインスタンスの生成--> 8 <script> 9 new Vue({ 10 el: "#show", 11 data() { 12 return { 13 message: "Hello Vue!" 14 }; 15 } 16 }); 17 </script> 18 19 <!--messageの表示--> 20 <div id="show"> 21 Message: {{ message }} 22 </div> 23 24 </body> 25</html>

main.go

go

1package main 2 3import ( 4 "net/http" 5 "app/controllers" 6 7 "github.com/gin-gonic/gin" 8) 9 10func serve() { 11 12 r := gin.Default() 13 14 r.LoadHTMLGlob("views/html/*") 15 16 r.GET("index", func(ctx *gin.Context) { 17 ctx.HTML(http.StatusOK, "index.html", gin.H{ 18 "title": "Main Page", 19 }) 20 }) 21 22//ルーティングについては記載を省略 23 24 r.Run(":8888") 25} 26 27func main() { 28 29 serve() 30 31}

期待していた動作

html

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

この {{ message }}に、

html

1 <!--Vueインスタンスの生成--> 2 <script> 3 new Vue({ 4 el: "#show", 5 data() { 6 return { 7 message: "Hello Vue!" 8 }; 9 } 10 }); 11 </script>

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

試したこと

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

html

1<!DOCTYPE html> 2<html> 3 <h1>Hello Gin!</h1> 4</html>

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Goのテンプレートが置き換えする部分と、Vueをのテンプレートが置き換えする部分は書式がバッティングします。
index.htmlはまずGoのテンプレート処理したものがクライアント(ブラウザ)に送られます。
クライアント側でVueのテンプレート処理が走って描画されるという手順です。

なので、Goのテンプレート処理の後、Vue側で処理可能なように記述する必要があります。

html

1Message: {{`{{message}}`}}

上記のようにすると、Goのテンプレート処理が終わると、以下のようなHTMLがクライアントに渡されます。

html

1Message: {{message}}

投稿2022/09/14 09:59

nobonobo

総合スコア3367

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

seiji0807

2022/09/14 15:23

ありがとうございます!!納得しました CDNで読み込むVueのバージョンを変える(?)と正常に動作することもあるようで、VueとGoとでなんとなく相性がよくないのかも?と思っていたところだったので腑に落ちました 処理の流れまでご教示いただきましてありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.44%

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

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

質問する

関連した質問