Return to Video

08-10 Variable Substitution

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

more » « less
Video Language:
English
Team:
Udacity
プロジェクト:
CS253 - Web Development
Duration:
02:29

Japanese subtitles

改訂