bladeとjinja2 比較してみた

8972 ワード
Flask Python Laravel jinja2 blade Python テキストリンク

LaravelとFlaskの行き来をしているとテンプレートの書き方どっちだっけ？となったので、備忘録として。

これを読むといい人

LaravelやってたけどFlaskやってみたい
FlaskやってたけどLaravelやってみたい
どちらかは触ったことある人向けです。

基本的なやつ

比較対象 blade jinja2
出力 {{ 変数 }} {{ 変数 }}
エスケープしない出力 {!! 変数 !!} {% 変数 %}
コメント {{-- コメント --}} {# コメント #}
if @if (条件式) {% if 条件式 %}
elseif @elseif {% elif 条件式2 %}
else @else {% else %}
endif @endif {% endif %}
for @for (条件式) {% for 条件式 %}
endfor @endfor {% endfor %}
現在のループのインデックス(初期値0) $loop->index loop.index0
現在のループのインデックス(初期値1) $loop->iteration loop.index
総アイテム数 $loop->count loop.length
最初のループか $loop->first loop.first
最後のループか $loop->last loop.last

bladeの$loop->indexは0始まりだけど、jinja2のloop.indexは1始まりなんですねえ。知らなかった。

その他の比較

変数のセット方法

blade
@php 
$test = 'test';
@endphp
jinja2
{% set test = 'test' %}

三項演算子

blade
@php 
$test = 'test';
@endphp
jinja2
{% set test = 'test' %}

テンプレート

blade

views/layouts/parent.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
    @yield('head')
    <title>@yield('title') - My Webpage</title>
</head>
<body>
    <main>
        @yield('content')
    </main>
</body>
</html>
views/child.blade.php
@extends('layouts.parent')
@section('head')
    <style type="text/css">
        .text{ color: #336699; }
    </style>
@endsection
@section('title')
Index
@endsection
@section('content')
    <h1>Index</h1>
    <p class="text">
        これはIndexページです。
    </p>
@endsection

表示すると…

タイトルや本文もうまく表示されていますね！

jinja2

parent.html
<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
    <title>{% block title %}{% endblock %} - My Webpage</title>
    {% endblock %}
</head>
<body>
    <main>{% block content %}{% endblock %}</main>
</body>
</html>
child.html
{% extends "base.html" %}
{% block head %}
    {{ super() }}
    <style type="text/css">
        .text { color: #336699; }
    </style>
{% endblock %}
{% block title %}
Index
{% endblock %}
{% block content %}
    <h1>Index</h1>
    <p class="text">
      これはIndexページです。
    </p>
{% endblock %}

表示すると…

bladeと同じ表示になりました。

親のテンプレートはbladeの方がすっきり書けますね。

以上です！