golangとjavascriptで日めくりカレンダー的なのを作った。 #JavaScript

やりたかったこと
１・1か月ごとのカレンダーを表示
２・スケジュールの入力ができる（todoアプリ的な）
３・タスクがすべて完了したらマスの色を変える。
４・一か月前、一か月後まではボタンで切り替えて表示

ここまでを約１週間で行いたかった。

実際は？
現在の年月日、曜日を表示、時刻はデジタル時計のように、リアルタイムで更新するようにしました。
日めくりカレンダーのようにしました。

使用言語
golang,javascript,html,css

フォルダ構成

calender
      |_resources 
      |         |_index.html
      |         |
      |         |_styles.css
      |_hello.go

苦戦したところ
goで定義したもの（現在日時など）をどうやってHTMLに埋め込むか
CSSファイルを読み取ってくれなかった。
この二つが特に悩まされた。後はgoにこだわらないでほかの言語なら行けたんじゃね？と思う
（Goを必ず使わなくてはいけなかったのでそこのさじ加減が掴めませんでした）

どうやったか

hello.go

package main 


 import ( 
    "fmt" 
    "html/template" 
    "net/http" 
    "time" 
 ) 


 func main() { 
    fmt.Println("The Server runs with http://localhost:3000/") 
    http.Handle("/resources/", http.StripPrefix("/resources/", http.FileServer(http.Dir("resources/")))) 
    http.HandleFunc("/", Handler) 
    http.ListenAndServe(":3000", nil) 
 } 


 type Time struct { 
    Year    int 
    Month   string 
    Day1    int 
    Weekday string 
    Hour    int 
    Minute  int 
    Second  int 
 } 


 func Handler(w http.ResponseWriter, r *http.Request) { 


    t := Time{ 
        Year:    time.Now().Year(), 
        Month:   time.Now().Month().String(), 
        Day1:    time.Now().Day(), 
        Hour:    time.Now().Hour(), 
        Minute:  time.Now().Minute(), 
        Second:  time.Now().Second(), 
        Weekday: time.Now().Weekday().String(), 
    } 


    tmpl := template.Must(template.ParseFiles("./resources/index.html")) 
    tmpl.Execute(w, t) 


 }

苦戦した箇所である、html、cssを読み込む処理は、

tmpl := template.Must(template.ParseFiles("./resources/index.html")) tmpl.Execute(w, t)

読み込みたいファイルのパスを指定してあげて、
上で定義した変数を引数にして一緒に実行するようにしました。
これでhtml上にgoを埋め込むことに成功。

cssの読み込みは、
http.Handle("/resources/", http.StripPrefix("/resources/", http.FileServer(http.Dir("resources/"))))
この一文でresourcesフォルダ以下の静的ファイルを探してきてくれ、読み込みができるようになりました。

index.html


<!DOCTYPE html> 
 <html lang="en"> 
 <head> 
     <meta charset="UTF-8"> 
    <title>テスト</title> 
     <link rel="stylesheet" type="text/css" href="../resources/styles.css"> 
      <script> 
         function digitalClock(){ 
             // 現在日時を取得 
             var now = new Date(); 
             // 「時」を取得 
             var hour = now.getHours(); 
             // 「分」を取得 
             var minute = now.getMinutes(); 
             // 「秒」を取得 
             var second = now.getSeconds(); 

             // 0埋めで2桁表示にする　例）08:45:09 
             if(hour < 10) hour = "0" + hour; 
             if(minute < 10) minute = "0" + minute; 
             if(second < 10) second = "0" + second; 

            // 現在時刻を表示する 
             var elem = document.getElementById("clock"); 
             elem.innerHTML = hour + ":" + minute + ":" + second; 

             // 500ミリ秒後に再帰呼び出し 
             setTimeout(digitalClock, 500); 
         } 

         window.onload = function(){ 
             digitalClock(); 
         } 
     </script> 
 </head> 
 <body> 
 <div class="calenderbox"> 
    <pre><h1 class="month_now"><span>{{.Year }}</span></h1></pre> 
   <div id ="box1">  
    <div id="box2">  
         <p class="Date">{{.Month }}</p> 
      <p class="Date">{{.Day1 }}</p> 
     <p class="Date">{{.Weekday }}</p> 
    </div> 
   <div id="box3">  
        <p id="clock"></p> 
    </div> 
   </div> 
 </div> 
 </body>

hello.goで処理したので、goの変数を以下のような形で受け取ることができます。

また、内で時刻を取得し、デジタル時計の見た目に設計したものをhtmlで返しています。

cssファイルは特に変わったことをしていないので割愛させて頂きます。

まとめ
触ったことがないものばかりだったのでここまでできたのも奇跡に等しいです。
ただ、まだ追加したい機能やより良い記述があるはずなのでしばらくこれを継続して取り組みます。
Goはとりあえずチュートリアルを完走します。
あとはjavascriptはじめてまともに使ってマスターしたらかなり便利だと感じました。
こちらもしっかり取り組んでいきます。