Go to Qiita Advent Calendar Top
LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@a_kawasaki(絢加 川﨑)

a-blog cms の公式ドキュメントを参考に Twig の練習問題に挑戦！

Posted at

先月はトレーニングキャンプに参加しました。

去年と同様、トレキャンはやっぱりいい緊張感と刺激を感じられる場だなと思いました。
年齢を重ねてくると、緊張する機会が減るとよく耳にします。
確かに、学生の頃と比べると、緊張する機会が減っているなぁと実感します。
大人になると誰かにテストされたり、強制的に評価される機会は驚くほど減っていきます。
つくづく社会人になると、自由ではありますが、ぽけ〜っとしてると置いていかれてしまいます:astonished:。
だからこそ、強制的にスイッチをONにしてくれる場、ってとても大事で、自らそこに参加することに意義を感じます。
今回、トレキャンに参加してまず刺激を貰ったのは、「勉強しなきゃ！！」ということでした:writing_hand:
そういうわけで、今回は「Twig」を手を動かして勉強しようと思います:raised_hand:。

Twigをやってみよう

公式ドキュメントを参考に、手を動かしてみます。

Twigとは・・・？

ここに説明されていました。

Twigは、PHPで広く利用されているテンプレートエンジンの1つだそうです。
Twigを使うと「これまでJavaScriptやPHPを書かないとできなかった『計算』や『複雑な条件分岐』が、HTMLファイルの中で完結できる」ようになるとのこと。
テンプレート内で「計算」ができたり、「もし〇〇で、かつ××なら」という条件が一行で書ける、校正オプションより柔軟に文字の加工ができる。などのメリットがあるらしいです（Gemini調べ）。

上記の記事に、練習問題があったので、それをやってみます:writing_hand:

image.png

Twig の書き方 早見表

Twig には役割ごとに書き方が分かれているそう。練習問題に取り組む前に分かる範囲で理解しておきます。

やりたいこと 書き方 役割
値を表示したい {{ }} 変数や値を画面に出力する
変数を作る {% set %} データを変数に代入する
条件分岐・繰り返し {% if %} / {% for %} 処理の流れを制御する
コメントを書く {# #} 画面に表示されないメモ

練習問題

以下のコードをテンプレートに貼り付けて、変数が使える状態にしてから各問題に挑戦してみてください。

{% set data = {
  title: 'テストデータ',
  fruits: ['りんご', 'バナナ', 'みかん'],
  users: [
    { name: '山田', age: '18', address: { city: '東京都', postalCode: '100-0005' } },
    { name: '佐藤', age: '30', address: { city: '大阪府', postalCode: '530-0001' } },
    { name: '鈴木', age: '45', address: { city: '愛知県', postalCode: '460-0002' } }
  ]
} %}

問題例

2番目「fruits」を表示してください。

回答

{{ data.fruits[1] }} {# バナナ #}

問題1

最初の果物の名前を表示してください。（「りんご」が出力されればOK）

{{ data.fruits[0] }}

「data」は変数。dataの中にある、fruitsの配列の１個目を出す:apple:。
プログラミングでは、１個目が０から始まるらしい。

問題2

2番目のユーザーの名前を表示してください。（「佐藤」が出力されればOK）

{{ data.users[1].name }}

これ、twigのコードだけで考えるとけっこうややこしい:frowning2:
でも、図に落とし込むと、腑に落ちました。

▼図にすると、こんな感じ
image.png

問題3

最後のユーザーの住所（city）を表示してください。（「愛知県」が出力されればOK）

{{data.users[2].address.city}}

※配列になるのは、[]の中にあるもの！になります。
detaの中の、usersの3番目（最後）の中の、addressの中のcityが愛知県です。

問題4

for文を使って果物を全て表示してください。（「りんご、バナナ、みかん」が出力されればOK）

for文の基本は、調べると、以下とのこと。

{% for item in items %}
　<p>{{ item }}</p>
{% endfor %}

いったん、上記の形を真似して当てはめてみます。

{% for fruit in data.fruits %}
	{{fruits}}
{% endfor %}

fruit は data.fruits 配列の中身を1つずつ受け取るための変数。

問題5

for文を使って各ユーザーの名前と住所を以下の形式で表示してください。

山田 - 東京都
佐藤 - 大阪府
鈴木 - 愛知県

{% for users in data.users %}
	{{users.name}} - {{users.address.city}} <br/>
{% endfor %}

なんとかできましたが、4問目、5問目をもう少し理解できるようにするのが今後の課題だなと思いました。

取り組んだ感想

やはり自分の場合、手を動かしてみた方が理解できてくるな、と思います。
抽象的な法則をそのまま理解できて、使いこなすセンスがほしいです・・・
具体的にどう表示できる？どこで使えるんだろう？というところをイメージしないと自分の場合、しっくりこない。
そういう意味で、この練習問題は、とても良かったです:relaxed:。
なにができるかが具体的に分かりやすかったです。

こんな感じで実務に使うのかな？

一番具体的に思いついた実務での使い所としては、
例えば、LPサイトとかで、セクションごとに何回も出てくるであろう、
「❄️冬のキャンペーン実施中！！」
「🌻夏のキャンペーン実施中！！」
みたいなコピーで、夏冬で、夏モード、冬モードとして出しわけするのに便利そうだなと。
そこから派生してテキストだけじゃなくて、画像とかも一気に変えられたりするんだろうか？と疑問に思い、AIに聞いてみたところできるそう。
変数を一個書き換えるだけで、夏/冬モードを変えられるのはなんだか夢があっていいな〜✨と思いを馳せました。

例えばこんな感じ。



{% set campaignType = 'winter' %}

{% if campaignType == 'winter' %}
  <p>❄️ 冬のキャンペーン実施中！！</p>
{% elseif campaignType == 'summer' %}
  <p>🌻 夏のキャンペーン実施中！！</p>
{% endif %}

そういうわけで具体的に簡単にやってみた

今回やってみるのは、1ページ完結の、本当に簡単なもの。
簡単にTwigを使ってデザインを切り替えてみよ〜！という試みです。
chatGPT（実は先月から課金をしてます:thumbsup:）にコードと画像を作ってもらいました。
そして、実験場所は、a-blog cms で Twigテンプレートを利用可能にする
の「test.html.twig」で行います。


{% set campaignType = 'winter' %}

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>{{ campaignType }} campaign LP</title>
  <style>
	body {
	  margin: 0;
	  font-family: sans-serif;
	  line-height: 1.6;
	  font-size: 2rem;
	}

	.hero, .section {
	  padding: 60px 20px;
	  text-align: center;
	}

	/* 背景テーマ */
	.summer {
	  background: #e6f7ff;
	  color: #006699;
	}

	.winter {
	  background: #f5f7fa;
	  color: #003366;
	}

	.hero {
	  font-size: 2rem;
	  font-weight: bold;
	}

	.section {
	  border-top: 1px solid rgba(0,0,0,0.1);
	}

	img {
	  max-width: 100%;
	  height: auto;
	  margin: 20px 0;
	}
  </style>
</head>

<body class="{{ campaignType }}">

  <!-- メインビジュアル -->
  <div class="hero">
	{% if campaignType == 'summer' %}
	  <h1>🌻 夏のキャンペーン実施中！</h1>
	  <img src="/assets/img/hero-summer.png" alt="夏のメインビジュアル">
	{% else %}
	  <h1> ❄️ 冬のキャンペーン実施中！<h1>
	  <img src="/assets/img/hero-winter.png" alt="冬のメインビジュアル">
	{% endif %}
  </div>

  <!-- セクション1 -->
  <section class="section">
	<h2>{{ campaignType == 'summer' ? '夏のキャンペーン実施中！' : '冬のキャンペーン実施中！' }}</h2>
	<img src="/assets/img/section1-{{ campaignType }}.png" alt="セクション1画像">
	<p>サービスの魅力を紹介。</p>
  </section>

  <!-- セクション2 -->
  <section class="section">
	<h2>{{ campaignType == 'summer' ? '夏のキャンペーン実施中！' : '冬のキャンペーン実施中！' }}</h2>
	<img src="/assets/img/section2-{{ campaignType }}.png" alt="セクション2画像">
	<p>利用シーンや特徴。</p>
  </section>

  <!-- セクション3 -->
  <section class="section">
	<h2>{{ campaignType == 'summer' ? '夏のキャンペーン実施中！' : '冬のキャンペーン実施中！' }}</h2>
	<img src="/assets/img/section3-{{ campaignType }}.png" alt="セクション3画像">
	<p>申し込みにつながる説明。</p>
  </section>

</body>
</html>

こんな感じで切り替えられました！:snowflake::sunflower:

変数を変えてアップロード後、ブラウザを更新すると・・・
Adobe Express - REC-20251213011220.gif
ちゃんと切り替わります。
便利ですね:relaxed:

まとめ

Twigの初歩的なところを今回は学習しました。
今回理解したことは、

  • Twigは、Twig対応のテンプレート上で動く（ブラウザそのままでは動かない:sweat_smile:）。
  • テンプレート上にデータをセットして変数として扱える。
  • 画像も切り替え可能
  • CSSクラスを切り替え可能
  • 変数を作る場合は{% set %}
  • 結果を返すときは{{ }}
  • 分岐するときは{% if %}
  • {% for %}で複数結果を返せる
  • デザイナーにも優しい、テンプレートエンジン！
  • LPサイトとの相性抜群

こんなところでしょうか。
もっと知見を深めたいなと思います。
制作時にさっそく採り入れてみよう！と思えました。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?