YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Japanese subtitles

← 08-10 Variable Substitution

Get Embed Code
2 Languages

Showing Revision 1 created 01/21/2017 by 政裕 大窪.

  1. では実際にテンプレートを使おうと思います。
  2. 最初に学ぶことは「変数置換」です。
  3. jinja2における変数置換の構文は単純です。
  4. 開始の {{ の後に 変数の名前
  5. そして終了の }} です。簡単ですね?!
  6. この {{ }} はprintメソッドのようなものと考えてください。
  7. HTMLコードの途中でprintを使っているイメージです。
  8. 実際に使って見ましょう。
  9. shopping_list.htmlに移動して
  10. 一番下にコードを追加します。
  11. "Hello"と表示するだけのHTMLに
  12. {{ name }} を追加しました。nameはどこで定義されるのでしょう?
  13. nameはまだどこにも定義していません。
  14. ページをリロードするとどうなるでしょうか。
  15. ブラウザをリロードします。"Hello"とだけ表示されました。
  16. この"eggs"は消しましょう。残っていただけです。
  17. jinja2では変数がセットされていない場合
  18. ただ単に何も表示しません。
  19. ではnameを表示させてみましょう。
  20. これ修正は本当にすぐ終わります。name="steve"
  21. **の意味に関する説明を覚えていますか?
  22. name="steve"はそのまま変数として**kwに渡されて
  23. **kwはここに変数を渡します。
  24. 渡された変数はrender_str()に**paramsとして渡されます。
  25. 変数名がころころ変わって混乱しそうですが、
  26. これは理由があってのことです。
  27. そして変数はjinja2のrender()にparamsとして渡されます。
  28. name="steve"と定義しました。
  29. ブラウザに戻ってリロードしましょう。
  30. "Hello, steve"と表示されました。
  31. 少しいじりましょう。nameを固定値の"steve"ではなく
  32. self.request.get("name")にします。
  33. nameパラメータに値を渡せば
  34. それが表示されるはずです。
  35. リロードすると何も表示されません。パラメータを渡していないからです。
  36. "udacity"をパラメータとして渡します。
  37. テンプレートによって"udacity"が表示されました。
  38. このよく考えられた方法とコードによって
  39. 無事、文字列の置換ができました。
  40. しかし正しく美しいコードを書くため、さらに考慮すべきことがあります。
  41. それではクイズです。
  42. 考えて欲しいのは、今説明した変数置換の構文を使って
  43. この文字列を生成することです。
  44. "The quick brown animal1 jumped over the lazy animal2"
  45. さぁどうぞ。
  46. 変数置換を使ったコードを
  47. ここに記載してください。