テンプレート(erb)を使ってみる


動画の流れ

  • contactsにマウスをあてて右クリック New Folder を選びます。
  • viewsフォルダを作ります。
  • viewsフォルダ内にファイルindex.erb を作成します。
  • index.erb内にHTMLを書いていきます。
    <html>
        <head>
            <meta charset="UTF-8">
            <title>連絡帳</title>
        </head>
        <body>
            <h1>これはErbで書きました</h1>
        </body>
    </html>
  • app.rberb :index を追加します。
    get '/' do
        now = Time.now
        erb :index
    end
  • https://workspace-username.c9users.io/にアクセスして「これはErbで書きました」と表示されることを確認します。
  • ブラウザで右クリックを押して、ソースを表示を選んでHTMLのソースを確認します。
  • 次に@を使った変数を使ってテンプレート側に値を渡します。now@nowに変更します。
    • 先頭に@をつけた変数はerbに渡すことができます。
  • 渡された変数の値をテンプレート側に埋め込みます。
    • <%= %> で変数の中身を出したりできます。
    <html>
        <head>
            <meta charset="UTF-8">
            <title>連絡帳</title>
        </head>
        <body>
            <h1>これはErbで書きました</h1>
            <p>今の時刻は <%=@now%></p>
        </body>
    </html>
  • プログラムを実行して、https://workspace-username.c9users.io/に現在時刻が表示されていることを確認します。
  • 人が作ってくれた便利なものを利用するときには、作ってくれた人のルールに従うことを覚えておいてください。

いろいろやってみよう

  • https://workspace-username.c9users.io/のブラウザ上で右クリックを押してソースを確認してみましょう。
  • index.erb内の<%=@now%>がどんな表示になっているか確認しましょう。
  • リロードして現在時刻がプログラムによって動的に変わることを確認してみましょう。

一歩進んだ学習

@を付けると、erbに情報が渡せると今は覚えて大丈夫です。本当はもう少し深い意味があります。気になる人はオブジェクト指向の考え方を学ぶと少しだけ助けになるでしょう。Sinatraはオブジェクトっぽさをうまく隠しています。

今回のコードはこちらで確認できます。

前の章に戻る

次の章に進む


コメントを残す