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

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

ただいまの
回答率

90.62%

  • HTML

    8641questions

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

  • HTTP

    529questions

    HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

  • Go

    480questions

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

  • バックグラウンド処理

    10questions

    バックグラウンド処理とは、マルチタスク環境において、ユーザーに対して前面に表示させている処理の裏側で実行させる処理のことを呼びます。バックグラウンド処理を行う事によって、ユーザーが他の作業に携わることが可能となります。

golangのechoの使い方がわかりません

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 1,063

DDxlk

score 115

はじめに

先日Goで掲示板を作りたいのですが

という質問をしました。
僕自身、何でもかんでも質問するつもりはなかったのですが、web自体初めて扱うため、バックエンドの基本用語すらわからず、頭が?でいっぱいです...すみません。

やりたいこと

掲示板を作りたいです。
とりあえずhtml,css,jsで適当にログインフォームを作りました。

まずフロントとechoをつなげるところから

で、とりあえずデータベース云々というよりまずバックエンドについてを理解しようと思い、echoをgo getしてexampleコードを実行して確認しました。

これだと確かにhttp://localhost:1323にアクセスした時にHello, Workdが表示されるのですが、ローカルのhtmlのフォームからのHTTPリクエストをうけつけたりする方法がわかりません。

最終的には、ログインページで、ユーザー名とパスワードをPOSTして、それをechoで受け取って処理する(DBの情報と照合するなど?)などをすると思うのですが...

とにかく、htmlからsubmitしたものをgoのコンソールで表示するようなことをするコード等の書き方を教えていただきたいです。

 別件

exampleコード
ここで、

  • Routing
  • path parameters
  • Query Parameters
    という単語が出てきました。
    Query Parametersはおそらく、URLの後の?hoge=piyo
    というクエリのことだと思うのですが、他の二つの単語の意味が調べてもよくわかりませんでした。よければ参考サイト等くださると嬉しいです。

最後に

いちいち質問してしまい申し訳なく思っています。お時間取らせてすみません。

追記

環境
これは、mattnさんのコードの
"views/*.html"
の部分を
"views/html/*.html"
に変更しただけのコードです。staticには今の所何も入っていません。
これで実行して、http://localhost:8989/loginにアクセスしたところ、
login

このようにまったくcssが適用されていないものが表示されました。
htmlには

<link rel="stylesheet" href="../css/login.css">


こう記述してあります。

原因として考えられるものは
イメージ説明
ここがUnexpected tokensとなっていることです。
<!DOCTYPE html>を削除して実行して見ましたが、結果は同じでした。

echoを介さず、そのままhtmlファイルをブラウザに落とし込んだところ、しっかり表示されました。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

 echo と繋げるところ

SPA(シングルページアプリケーション) にするかどうかで大きく変わりますが、まずは簡単な SPA では無い物から始めると良いです。

まずは簡単なアプリケーションを書きます。

package main

import (
    "net/http"

    "github.com/labstack/echo"
)

func main() {
    e := echo.New()
    e.GET("/", func(c echo.Context) error {
        return c.String(http.StatusOK, "Hello World")
    })
    e.Logger.Fatal(e.Start(":8989"))
}

これを動かして http://localhost:8989/ にアクセスすると「Hello World」と表示されるページが表示されます。

作られたログイン画面を表示させる事になるのですが、(SPA でない場合は)画面毎に異なる URL となります。今回のケースだと以下の様になると思います。

   URL    詳細              
/         発言一覧画面      
/page/123 個別発言画面      
/login    ログインページ画面

これをコードで書くには以下の様に変更します。

package main

import (
    "net/http"

    "github.com/labstack/echo"
)

// テンプレートのレンダラ―を作る
type Renderer struct {
    templates *template.Template
}

func (r *Renderer) Render(w io.Writer, name string, data interface{}, c echo.Context) error {
    return r.templates.ExecuteTemplate(w, name, data)
}

func main() {
    e := echo.New()

    // views/* を読ませる仕組み
    e.Renderer = &Renderer{
        templates: template.Must(template.ParseGlob("views/*.html")),
    }

    e.GET("/login", func(c echo.Context) error {
        // views/login.html がサーブされる
        return c.Render(http.StatusOK, "login", nil)
    })
    e.GET("/", func(c echo.Context) error {
        // views/index.html がサーブされる
        return c.Render(http.StatusOK, "index", nil)
    })
    // 画像などを assets の下に置くと /static/xxx として見える
    e.Static("/static", "assets")
    e.Logger.Fatal(e.Start(":8989"))
}

この views/login.html を作った物で置き換えて下さい。画像などは assets の下に置き、/static/foo.jpg の様に見えるよう変更して下さい。

view/login.html は以下の様に記述して下さい。

{{define "login"}}
ページの中身
{{end}}

この define "login" が c.Render で指定するテンプレートの名前です。今は理解出来てなくても後から何故必要なのか分かってくると思います。

ここまで出来たら、次はサブミット時のアクションを作る事になりますが、そこはまた勉強頂き、分からなければ質問されると良いかと思います。

 別件

ウェブ用語でルーティング(Routing)とは、上記の /login や /page/123/ といったパスに対して処理を割り当てる事を言います。

パスパラメータ(Path Parameter)とは、上記の /page/123 の可変部 123 をアプリケーションから取れる様にした仕組みもしくは得られた値の事を言います。echo の場合、パスに :id と書く事で c.Param("id") から id の値が得られます。

e.GET("/page/:id", func(c echo.Context) error {
    // c.Param("id") で id が取れる
})

クエリパラメータ(Query Parameter)については認識の通りで良いです。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/08 13:14 編集

    いつも回答ありがとうございます🙇
    たまにブログ拝見させて頂きますが、難しくて殆ど分かりませんwですがteratailの回答はとてもわかりやすく、ややこしいことは省いて下さるので大変助かります。

    コード上ではviews/*.htmlと書いてあり、その後の解説でview/login.htmlと言われているのはミスですかね...?

    ディレクトリ構造
    echo.go
    assetsー画像群
    viewsーlogin.html
    |
    ーlogin.css
    こうですかね。

    あと、views/login.htmlを

    {{define "login"}}
    <html>
    <head>something</head>
    <body>something</body>
    </html>
    {{end}}

    こういう風に書けということですね。帰宅したらやってみます。
    ルーティング等の説明も付けてくださりありがとうございました。(別件と見出しを付けましたが、別件ではないですねw寝ぼけてました。)

    キャンセル

  • 2017/09/08 13:18

    >ミスですかね...?

    ミスではないです。実際にコードでも views/*.html と書きます。
    今後 views/index.html や view/statuses.html という物が増えてくるかと思います。

    キャンセル

  • 2017/09/08 23:18 編集

    "html/template"

    "io"
    をimportし忘れていらっしゃるようです

    キャンセル

  • 2017/09/08 23:26

    あ、すみません。

    キャンセル

  • 2017/09/09 21:02

    追加でわからない部分を追記させていただきました...

    キャンセル

  • 2017/09/09 21:28 編集

    ↑の回答に書かせてもらった通り、静的ファイルは assets の中に纏めているので

    assets/css/xxx.css

    に置いて /static/css/xxx.css で参照できる様に修正して頂くか

    e.Static("/static", "assets")

    ここを

    e.Static("/css", "css")

    に変えて貰う必要があります。だたしこの場合 js や image など他も対応しなければならなくなるので、面倒になります。Unexpected Token の警告が出ているのは、HTML の中に go のテンプレート記法が書かれているのが理由なので、特に問題ではないです。

    キャンセル

  • 2017/09/09 22:47

    あー、ナルホド!
    e.Static("/static", "assets")
    にしたのち、
    <link rel="stylesheet" href="/static/css/login.css">
    のように参照すればうまくできました!
    とりあえず、これ以降はまた別の質問として出そうと思います。
    ありがとうございました。

    キャンセル

+1

用語は検索なりなんなりで見つけることができると思います。
例えばROUTING

他も英語そのままではなくカタカナ日本語で検索すると日本語記事が見つかりやすいですよ。

そもそも「その言語でwebサイトを作る」という基本部分を学ばれた方が良いのではと思います。
Go言語だと下記のまとめ記事(目次ページです)が参考になるかもしれません。

ログイン関係の記事も分かりやすくまとめてあると思いますよ。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/09/08 12:43

    回答ありがとうございます。
    echoで調べてトップに出てきたqiita記事は見たのですが、この記事は見つけられていませんでした!
    まさに知りたいことがパート分けで書いてあり助かりました☺️

    キャンセル

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

  • ただいまの回答率 90.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • HTML

    8641questions

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

  • HTTP

    529questions

    HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

  • Go

    480questions

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

  • バックグラウンド処理

    10questions

    バックグラウンド処理とは、マルチタスク環境において、ユーザーに対して前面に表示させている処理の裏側で実行させる処理のことを呼びます。バックグラウンド処理を行う事によって、ユーザーが他の作業に携わることが可能となります。