npm install -D frontjimport { writeFileSync } from 'fs'
import { createElement } from 'frontj'
import { build } from '@frontj/builder'
const html = createElement('html')
const head = createElement('head')
const title = createElement('title')
const body = createElement('body')
const h1 = createElement('h1')
const p = createElement('p')
const br = createElement('br', { children: false })
const input = createElement('input', { children: false })
const div = createElement('div')
const text = (...contents) => p`.text`(
...contents
)
const contents = html(
head(
title('frontJ example.'),
),
body(
h1`.heading`('Hello!'),
text('foo', br(), 'bar'),
input`[type="checkbox"][checked]`(),
div`#id.class1.class2`()
)
)
build({
routes: {
'/': contents
}
})HTML(整形後):
<!DOCTYPE html>
<html>
<head>
<title>frontJ example.</title>
</head>
<body>
<h1 class="heading">Hello!</h1>
<p class="text">foo<br>bar</p>
<input type="checkbox" checked>
<div id="id" class="class1 class2"></div>
</body>
</html>createElementメソッドで各要素を生成する代わりに、@frontj/elementsパッケージからimportすることを推奨します。
HTMLファイルの出力には@frontj/builderを使用することを推奨します。
condition引数の値によってvalueまたはelseValueの値を返します。
FrontJElement関数内で値を出し分ける際に有用です。
$if(condition: boolean, value: string | number, elseValue: string | number = ''): string | number| 引数 | 説明 |
|---|---|
| condition | この値がtrueの場合はvalueの値、falseの場合はelseValueの値が返されます。 |
| value |
conditionがtrueの場合に返される値。 |
| elseValue |
conditionがfalseの場合に返される値。初期値は空文字です。 |
const hasPosts = false
div(
h2('関連記事'),
$if(hasPosts,
article(/* ... */),
p('記事が見つかりませんでした。')
)
)
/*
<div>
<h2>関連記事</h2>
<p>記事が見つかりませんでした。</p>
</div>
*/FrontJElement型の関数を返します。
createElement(name: string, options: FrontJCreateElementOptions): FrontJElement| 引数 | 説明 |
|---|---|
| name | HTML要素名。'html'が渡された場合、このcreateElementが返したFrontJElementを実行時すると自動的に'<!DOCTYPE html>'が付与されます。 |
| options | 各種オプション設定用オブジェクト。設定項目はFrontJCreateElementOptions型の項目に記載しています。 |
createElementメソッドの返り値として存在し、HTML要素の文字列を返します。
// `FrontJElement`の部分は実際にはタグ名などになります。
FrontJElement(...contents: (string | number)[]): string
// 要素の属性を設定する場合はテンプレート文字列を使用します。
FrontJElement`TemplateStrings`: (...contents: (string | number)[]) => string| 引数 | 説明 |
|---|---|
| contents | 省略可能で、カンマ区切りで文字列または数値を渡せます。渡された値は結合されHTML要素内に出力されます。 |
| TemplateStrings | CSSセレクタのような文字列を渡して、要素の属性を設定することができます。${}には文字列または数値を入力できます。 |
const div = createElement('div')
div('Hello', 1) // => <div>Hello1</div>
div`#id.class`('Hello', 1) // => <div id="id" class="class">Hello1</div>
div`#id${'1'}.class${1}`('Hello', 1) // => <div id="id1" class="class1">Hello1</div>createElementメソッドのoptions引数の型として使用されます。
FrontJCreateElementOptions {
children?: boolean;
}| 引数 | 説明 |
|---|---|
| children | この要素が子要素(テキストノードも含む)を持てるかを真偽値で指定します。falseの場合、FrontJElement関数に渡した引数は無視され、閉じタグが無いHTML要素として出力されます。デフォルトはtrueです。 |