プログラミング奮闘記

難しいと評判!初心者がN予備校でプログラミングを学んだ感想と備忘録!
No.28:テンプレートエンジン

N予備校 プログラミングコース 第28回

あなたは2019年の目標って立てましたか?
どんな目標を立てたか覚えていますか?

私は2018年末に2019年の目標を立てました。
その一つにプログラミングを学び仕事として使えるようにすることをあげました。
そして、思い立ったが吉日と「N予備校のプログラミングコース」を申し込みました。

そして受講と同時に自身の振替と、これから始めようと考えている人の参考になればとブログを書き始めました。
今回ブログの移設にともない、再度そのブログを読み返しながら、今思うことを加えて記載していきたいと思います。

また私が受講したのは【2018年度】で、現在公開されている【2019年度】との違いについても書いていきたいと思います。

このブログは、初心者が学びながら書いているため、間違っている場合があります。
分かり次第修正していくつもりです。

そのあたりも含め楽しんでいただければと思います。 

最後に進めていてわからなかったところや気になったところをまとめています。

プログラミング入門 webアプリコース 第28回

前回は、アンケートフォームを作成しました。
今回は1つのファイルで複数のアンケートを表示できるようなプログラムを作ります。

  • 今回の内容まとめ(第3章 15)
    ・テンプレートエンジンについて 

  • 今回の目標
    1つのファイルで複数のアンケートを表示できるようなプログラムを実装する

  • 今回新しく扱っているコマンド等
    ・pug
    ・renderFile

テンプレートエンジン

テンプレートとプログラムを組み合わせて文字列を作る仕組みのことをテンプレートエンジンといいます。
JavaScriptでは、静的なユーザーインタフェースのデータであるHTMLを動的に出力することができるライブラリのことを言います。

今回は、Node.jsのpugというテンプレートエンジンを利用します。

pugについて

Pugでは、閉じタグ(< /h1>などのタグを閉じる時のタグ)が不要なタグの宣言など、HTMLを簡潔に表現することができます。

<HTML形式で書いた場合>

< !DOCTYPE html>
< html lang=”ja”>
< head>
< meta charset=”UTF-8″>
< title>○○< /title>
< /head>

< body>
< h1>××< /h1>
< form method=”post” action=”△△”>
名前: < input type=”text” name=”name”>
< input type=”radio” name=”ABC” value=”abc” /> abc
< input type=”radio” name=”DEF” value=”def” /> def
< button type=”submit”>□□< /button>
< /form>
< /body>

< /html>

<Pugで書いた場合>

doctype html
html(lang=”ja”)
 head
  meta(charset=”UTF-8″)
  title ○○
 body
  h1 ××
  form(method=”post” action=”△△”)
   span 名前:
   input(type=”text” name=”name”)
   input(type=”radio” name=”ABC” value=”abc”)
   span abc
   input(type=”radio” name=”DEF” value=”def”)
   span def
   button(type=”submit”) 投稿

以上のように、Pugではタグの設定などを簡潔にできます。

ただ、Pugでは、スペースやタブによるインデントも意味を持つため注意が必要です。そこで、空白の部分がわかりやすい様にVS Codeを設定します。

VS Codeの設定変更

Windowsでは、VS Codeでctrl+shift+Pを押し(Macでは、command+shift+P)、JSONの設定を開き内容を変更します。その内容が以下になります。
これにより、本来は見えない文字列を、ドットや矢印で表示されます。

 
//既定の設定を上書きするには、このファイル内に設定を挿入します
{
//1つのタブに相当するスペースの数。’editor.detectIndentation’がオンの場合、
この設定はファイル コンテンツに基づいて上書きされます。
“editor.tabSize”: 2,

//Tab キーを押すとスペースが挿入されます。’editor.detectIndentation’がオンの場合、
この設定はファイル コンテンツに基づいて上書きされます。
“editor.insertSpaces”: true,

//エディターで空白文字を表示する方法を制御します。
‘none’、’boundary’ および ‘all’が使用可能です。’boundary’ オプションでは、単語間の単一スペースは表示されません。
“editor.renderWhitespace”: “boundary”
}
 

複数のアンケートを表示するプログラムを実装する

前回は1つのアンケート(焼肉としゃぶしゃぶなど)を表示するプログラムを作成しました。しかし前回のプログラムでは、2つのアンケートを表示したい場合には2つのプログラムを作成する必要があります。

そこで、1つのプログラムで複数のアンケートを表示できるように以下のようにコードを変更します。

doctype html
html(lang=”ja”)
 head
  meta(charset=”UTF-8″)
  title アンケート
 body
  h1 どちらが食べたいですか?
  form(method=”post” action=path)
  span 名前:
  input(type=”text” name=”name”)
  input(type=”radio” name=”favorite” value=firstItem)
  span #{firstItem}
  input(type=”radio” name=”favorite” value=secondItem)
  span #{secondItem}
  button(type=”submit”) 投稿

pugというテンプレートエンジンでは、属性値をaction=pathのように指定することで好きな変数の値を設定できます。
また、inputのvalue属性にfirstItem, secondItemという変数を用いることで複数のアンケートを1つのプログラムで表示することができます。

さらに、このfirstItem, secondItemをJacaScriptファイルで設定します。

その際に用いるのが、renderFile関数です。

renderFile

 res.write(pug.renderFile(‘./form.pug’, {
          path: req.url,
          firstItem: ‘焼き肉’,
          secondItem: ‘しゃぶしゃぶ’
1行目で、変数を書き込むファイルを指定しています。今回はform.pugファイルに指定しています。

2-4行目で、form.pugファイル内のpathにreq.url、firstItemに「焼き肉」、secondItemに「しゃぶしゃぶ」を設定します。

このrenderFile関数と、if文を用いることで複数のアンケートを1つのファイルで表示が可能です。

  if (req.url === ‘/enquetes/yaki-shabu’){
        res.write(pug.renderFile(‘./form.pug’, {
          path: req.url,
          firstItem: ‘焼き肉’,
          secondItem: ‘しゃぶしゃぶ’
        }));
      } else if (req.url === ‘/enquetes/rice-bread’){
        res.write(pug.renderFile(‘./form.pug’, {
          path: req.url,
          firstItem: ‘ごはん’,
          secondItem: ‘パン’
1行目と7行目では、リクエストのパスがそれぞれ/enquetes/yaki-shabu、/enquetes/rice-breadであった場合に呼び出す関数を指定しています。

2-5行目では、パスが/enquetes/yaki-shabuであれば、form.pugファイルのpath, firstItem, secondItemにそれぞれ、/enquetes/yaki-shabu, 焼き肉, しゃぶしゃぶを適応するように設定しています。

8-11行目では、パスが/enquetes/rice-breadであれば、form.pugファイルのpath, firstItem, secondItemにそれぞれ、/enquetes/rice-bread, ごはん, パンを適応するように設定しています。

以上のように設定することで、/enquetes/yaki-shabuからアクセスした場合は、

が表示され、/enquetes/rice-breadからアクセスした場合は、

と表示されます。


 

以上のように、テンプレートエンジンのPugを使うことでコードを簡潔にでき、また「焼き肉としゃぶしゃぶ」と「ごはんとパン」のアンケートを1つのファイルで表示できるようなプログラムを実装出来ました。

 次回は作成したアンケートフォームを全世界に公開できるようにします。

 

ABOUT ME
GoodAmbition
オンライン塾経営者(大阪大学工学部出身の元開発技術者) 自身も家庭教師や塾講師として働きつつ、後輩の育成やオンライン塾を経営しています。 私自身も約10年にわたり家庭教師や塾講師として100人以上の受験生と向き合ってきました。 色々な学生、保護者の方とかかわる中でよく質問される内容や、受験に必要な内容について書いています。 独学で頑張っている人たちへ勉強計画や悩み相談なども受け付けていますので気軽にお問い合わせください。 就職活動や資格の勉強などで悩んでいる方もご連絡ください。 教育・就活、書籍、食べ歩きに関するお話がメインです。 最近取り組んでいること プログラミング、筋トレ、マラソン、ライティングスキル向上etc. 苦手なことを克服しようと頑張っています。