前のパートに戻る 完了して次のパートへ  

  1-5 JavaScript を配信しよう

本パートでは HTML 返却後のサブリソースとして JavaScript を返却しブラウザ上で任意の処理を実行できるようにします。

本パートでの目標物


Chrome の開発者ツールのコンソールに JavaScript で文字列を表示してみます。


目標物を作成するまでの流れ


  1. 静的ファイル配信の設定の追加
  2. JavaScript ファイルの作成
  3. JavaScript ファイルの読み込み

では実際に進めていきましょう。

1. 静的ファイル配信の設定の追加


CSS のときと同様にして echo に対して設定を追加します。

main.go ファイルを次のように編集します。

go-tech-blog
└── main.go


2. JavaScript ファイルの作成


まずは JavaScript を配置するためのディレクトリを作成します。

$ mkdir -p src/js/article

ディレクトリが作成できたら JavaScript ファイルを作成します。

$ touch src/js/article/index.js

このときのディレクトリ構造を tree コマンドで確認してみます。

$ tree

実行結果は次のようになります。

$ tree
.
├── go.mod
├── go.sum
├── main.go
└── src
    ├── css
    │   └── article
    │       └── index.css
    ├── js
    │   └── article
    │       └── index.js
    └── template
        └── article
            └── index.html

7 directories, 6 files

作成した src/js/article/index.js に次の内容を記述して保存します。

go-tech-blog
└── src
    └── js
        └── article
            └── index.js

3. JavaScript ファイルの読み込み


src/template/article/index.html を編集し、サブリソースとして JavaScript ファイルを読み込むようにします。

go-tech-blog
└── src
    └── template
        └── article
            └── index.html


動作確認


go run main.go で Web サーバーを起動し、Chrome で http://localhost:8080 にアクセスします。画面が表示されたら Chrome 上で command + option + J を押して開発者ツールの Console タブを開きます。

ウェブブラウザで JavaScript を動作させ、文字列を表示できました。


以上で今回のパートは終了です。

JavaScript を用いることで、ボタンクリック時に画面をどう変化させるかをカスタマイズしたり、一度 HTML を表示させた後で別の要素を画面上に加えたりといったことができるようになります。本教材では JavaScript について詳細な解説は行いませんので、ぜひ個人で学習して使いこなせるようになりましょう。

お疲れさまでした。

議論

0 質問

このコースの評価は?