自由気ままにブログ

地方零細企業プログラマがひっそりとなにかしています。

Goでサーバー立ち上げ、cssとjavaScript読み込みhtmlの表示まで

f:id:nono138:20200421225921p:plain

Goでローカルでサーバーを立てて、html・cssjavaScriptを読み込み、Hello worldを表示させるところまでやってみましょう。

 

フォルダー構成

 

css

    └helloworld.css

├html

    └index.html

├js

    └helloworld.js

├src

    └main.go

 

こんな感じの構成になっています。

サンプルコード

main.go
package main

import (
    "fmt"
    "html/template"
    "net/http"
)
 
func main() {
    http.HandleFunc("/index", index) 
 
    http.Handle("/js/", http.FileServer(http.Dir("..")))
    http.Handle("/css/", http.FileServer(http.Dir("..")))
    if err := http.ListenAndServe(":80"nil); err != nil {
        fmt.Println("ListenAndServe err:", err)
    }
}

//
func index(w http.ResponseWriter, r *http.Request) {
    // テンプレートをパース
    t := template.Must(template.ParseFiles("../html/index.html"))

    // テンプレートを描画
    if err := t.ExecuteTemplate(w, "index.html"nil); err != nil {
        fmt.Println(err)
    }
}
index.html
<html>
<head>
    <title>Go localserver</title>
    <script src="../js/helloworld.js"></script>
    <link rel="stylesheet" type="text/css" href="../css/helloworld.css">
</head>
<body class="helloworld">
    <h1>Hello world by golang!!</h1>
</body>
</html>
helloworld.css
body.helloworld {
color#000000;
background-color#00FFFF   
}

 

helloworld.js
console.log("hello world");

 

表示結果

f:id:nono138:20200524000939j:plain

解説

main関数では、ハンドラーの制御・サーバーをポート:80で立てています。

err := http.ListenAndServe(":80"nil)

 

handleFuncでは、indexのhttp://localhost以下のurlが要求された際に、index関数が呼び出されるようになっています。

http.HandleFunc("/index", index)

 

それでは、index関数の中身を見てみましょう。

t := template.Must(template.ParseFiles("../html/index.html"))

templateを使い、指定のhtmlのパスを引数にしてhtmlが読み込まれます。

 

err := t.ExecuteTemplate(w, "index.html"nil)

パースされた、htmlを描画(write)します。

今回は、nilで何も送っていませんが、エラー時など、エラーメッセージなどをブラウザ側に送ることが出来ます。

 

この時点で、main.goとindex.htmlを用意してプログラムを起動して、好きなブラウザでhttp://localhost/index検索してあげればindex.htmlを表示させることが出来ると思います。

 

しかし、この時点では、htmlにcssやjsの呼び出しを記述しても、cssとjsファイルが読み込めません。

 

なので、新たにHandleを追加してあげます。

http.Handle("/js/", http.FileServer(http.Dir("..")))

"/js/"でフォルダーを指定名をしていしてやり、http.Dir("..")で、main.goから見た、1つ前の"/js/"フォルダーの中のファイルを参照しに行きます。

 

表示結果の画像が分かりにくいですが、ブラウザーでF12を押してconsoleを確認すると、hello worldが出力されているのが分かります。

 

注意点

IDEによっては、IDEで実行してから中断すると、以前のポートが使われた状態になってしまい、エラーが吐かれる場合があります。

 

dosプロンプトで実行して、crl + c で中断すればポートは残ることはありません。

 

エクスプローラーを開いて、実行したいgoファイルまで行き、赤枠で表示された部分をクリックし、"cmd"と打ち込むとその階層でdosプロンプトが開きます。

cd "path"でその階層まで行けますが、ぜひ活用してみて下さい。

f:id:nono138:20200524005139j:plain

また、コマンドライン引数を必要とするプログラムではdosプロンプトで慣れておいた方が楽です。

 

個人的書き置き場

久しぶりにブログを更新しました。

家だとついつい寝てしまうので、なかなかプログラムを書く気力が芽生えません。

過眠症でなかなか苦労していますが、現在、通院している病院を睡眠障害に強い病院に変えようかなと考えています。

 

Goでのハンドラーの扱いは結構分かりやすいので、webで遊びたい人は結構おすすめの言語だと思います。

 

jsとの連携性では、PHPに軍配が上がりますが、処理の早さなどのメリットにあります。

最近、Rubyなどで作られていたシステムをGoに置き換えたりと言った流れが見られます。

 

私事ですが、このブログも、とりあえず脳死アドセンスに申請してみましたが、やはり落ちました。

なので、引っかかってそうな記事をいくつか削除してみました。