6章コンポーネント

2. コンポーネントの使用例

簡単なコンポーネントの使用例として、箇条書きを実装するコンポーネントを説明します。

下のスナップショットは「箇条書」という名前のコンポーネントの要素定義画面です。コンポーネントの要素はひとつだけです。要素名は items となっています。要素の型は「複数行テキスト」にしてあります。この要素は「繰り返しあり」の指定があります。この要素が箇条書きのひとつの項目を入力する要素になります。

この箇条書きコンポーネントは、generateText() という名称のメソッドをひとつ持っています。のメソッド定義は下図のとおりです。メソッド名は、ここでは generateText() となっていますが、特定のメソッド名を付ける必要はありません。好きな名前を使ってください。

箇条書きコンポーネントの generateText() メソッドのメソッド定義画面

展開部分を切り出してみますと下記のとおりです。items のひとつひとつを <li> タグで囲むだけの単純な展開です。

<ol>
<wr-for list="items" variable="x">
<li>%x%</li>
</wr-for>
</ol>

次に、この箇条書きコンポーネントを使用する側のテンプレートを作成してゆきます。テンプレートの名前は「サンプル１」としておきます。要素はひとつだけでその名前は orderedList としておきます。要素のタイプはコンポーネントを指定してあります。要素 orderedList にはまだコンポーネントを指定していないので「Component」の表示部分が赤く表示されています。

ここで、orderedList 要素に、先ほど作成した箇条書コンポーネントを指定すると下記の状態になります。

コンポーネントを指定することができました。ここで、参照している「箇条書」コンポーネントに定義されている要素やメソッドを見るために、コンポーネント要素の表示を「開いて」みましょう。

コンポーネント要素の左に表示されている三角形のボタンをクリックすると、コンポーネント内の要素やメソッドが表示されます。

「箇条書」コンポーネントに定義されている要素 items が orderedList の子要素であるかのように見えています。実際、展開中またはメソッド中から、この items を orderedList の子要素として参照することができます。

items に並んで箇条書きコンポーネントに定義されているメソッド generateText() も見えています。このテンプレートの展開やメソッドの中からは、この generateText() メソッドを呼び出すことができます。

この「サンプル１」テンプレートの展開を下記のように書いてみます。

展開部分を切り出してみると下記のとおりです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>%pageTitle()%</title>
</head>
<body>
%orderedList.generateText()%
</body>
</html>

この展開は「箇条書」コンポーネントのメソッド generateText() を使ってコンテンツを生成しています。コンポーネントを利用する側のテンプレートの展開では、コンテンツの生成をコンポーネントのメソッドに委ねているので、展開自体は非常に簡単になっています。

コンポーネントのメソッドをうまく使うことで、コンポーネントを修正するだけでそれを利用しているいくつものテンプレートやコンポーネントに対して、修正を波及させることができます。コンポーネントの要素の追加や展開のバリエーションを増やすなどの作業も、コンポーネント側の修正のみで対応することができるでしょう。

もし、コンポーネント側のメソッドを使わずに同等の結果を得ようとするならば、展開は下記のようになります。これでも同じ結果が得られますが、この方式では、箇条書きの展開を変更する場合（例えば ol ではなく ul に変更するとか、class= 属性を付け加えるなどの場合）には、コンポーネント側の修正ではなく、コンポーネントを使用している側のテンプレートに修正を加える必要が生じてしまします。

<html>
<body>
<ol>
<wr-for list="orderedList.items" variable="x">
<li>%x%</li>
</wr-for>
</ol>
</body>
</html>

このコンポーネントを使ったテンプレートでページを作成する場合のページ編集画面は下図のようになります。

箇条書きの、各項目を入力するフィールドが表示されています。この例では、入力フィールドの短縮表示の対象になっているため、最上位の「orderdList」という要素名は省略されています。

2. コンポーネントの使用例

関連項目