WikiChree.COM
新規
編集
添付
管理
WikiChreeガイド
WikiChreeの公式ガイドです。
最新の20件
2026-09-19
プラグイン/linkvote
2026-09-05
DokuFarm
WikiChree.COM
プラグイン/touchgraph
プラグイン/tracker_list
プラグイン/template
プラグイン/version
プラグイン/yetlist
プラグイン/unfreeze
プラグイン/source
プラグイン/versionlist
プラグイン/update_entities
2026-09-04
[テーブル番号または設定]
プラグイン/vote
プラグイン/tracker
プラグイン/topicpath
プラグイン/size
プラグイン/showrss
プラグイン/server
プラグイン/setlinebreak
開始行:
* Pkript/文法/JSX [#kd8fa19f]
HTML要素を式として記述する記法。文字列連結の代わりに使う。
** リファレンス [#x916181f]
*** 構文 [#ad1b5edc]
#highlight{{
<タグ 属性="値">{式}</タグ>
}}
- 設定定数 PKRIPT_JSX が 1（既定）の場合に利用できる。0 ...
- {} 内に渡された文字列は自動でHTMLエスケープされる
- JSX要素どうしを {} 内に埋め込んだ場合はエスケープされず...
- 単一の親要素、またはフラグメント <> ... </>...
#highlight{{
function plugin_hello_convert(e) {
const name = e.args[0];
return <p class="greeting">こんにちは、{name} さん</p>;
}
}}
*** 書ける形 [#p616b045]
**** 要素と入れ子 [#form_nest]
#highlight{{
return <ul><li>a</li><li>b</li></ul>;
}}
**** 空要素 [#form_void]
#highlight{{
return <br />;
}}
閉じスラッシュが要る。<br> だけでは閉じタグ待ちにな...
**** フラグメント [#form_fragment]
複数の要素を、囲む要素なしで並べる。
#highlight{{
return <><p>a</p><p>b</p></>;
}}
**** 属性 [#form_attr]
文字列か {式} を書く。
#highlight{{
const cls = e.opts["class"];
return <p class="fixed">x</p>;
return <p class={cls}>x</p>;
return <p title={42}>x</p>;
}}
- className と書いても class になる
- 値が null の属性は出力されない
- {...obj} のスプレッド属性には対応していない
**** {} の中身 [#form_expr]
式なら何でも書ける。
#highlight{{
return <div><span>{1 + 1}</span></div>;
return <ul>{items.map((x) => <li>{x}</li>).join("")}</ul>;
}}
null, false, 空文字列は何も出力しない。0 は "0" と出る。
*** エスケープの規則 [#s4d26f32]
ここがJSXの要点。文字列は必ずエスケープされ、JSX要素はさ...
#highlight{{
const s = "<li>x</li>"; // ただの文字列
return <ul>{s}</ul>; // <ul><li>x</li&...
const el = <li>x</li>; // JSX要素
return <ul>{el}</ul>; // <ul><li>x</li></ul>
}}
wiki.convert() の戻り値もエスケープされない。Wiki記法から...
#highlight{{
return <div>{wiki.convert(e.body)}</div>;
}}
**** htmlsc は使わない [#escape_htmlsc]
{} の中は自動でエスケープされる。htmlsc() を重ねると二重...
#highlight{{
return <p>{htmlsc("<b>")}</p>; // &lt;b&gt; と...
return <p>{"<b>"}</p>; // <b> が正しい
}}
**** 属性値も同じ [#escape_attr]
属性値に入れた文字列はエスケープされる。引用符を混ぜて属...
#highlight{{
const c = "a\" onclick=\"alert(1)";
return <p class={c}>y</p>; // class ごと落とされる
}}
*** サニタイザとの関係 [#m9847ca9]
JSXで書いたHTMLも、他の出力と同じようにサニタイザを通る。...
|~書いたもの|~出力|h
|<script>alert(1)</script>|タグごと削除|
|<p onclick="...">|onclick が削除|
|<p id="a">|id="pkript-a" に変換|
|<a href="javascript:...">|href が削除|
|<p style="position: fixed">|position の宣言のみ削...
|<form>|action が自Wikiに補完|
詳しくは [[Pkript/設定/サニタイザ]] を参照。
** 使用法 [#l5abaadf]
*** 変数を埋め込んでコンポーネントを出力する [#usage_comp...
#highlight{{
function plugin_profile_convert(e) {
const name = e.args[0] || "ゲスト";
return (
<div class="profile-box">
<h3>プロフィール</h3>
<p>名前: {name}</p>
</div>
);
}
}}
*** 配列から要素を組み立てる [#usage_list]
#highlight{{
const items = e.args;
return <ul>{items.map((x) => <li>{x}</li>).join("")}</ul>;
}}
** 注意点 [#kf841ec8]
*** 要素を文字列として切り貼りしない [#note_string]
JSX要素は、出力の直前まで内部の目印として持ち回る。length...
#highlight{{
const el = <b>x</b>;
return el.length; // 8 ではない
}}
連結（+）と join() は安全。
#highlight{{
return <b>a</b> + <i>b</i>;
return items.map((x) => <li>{x}</li>).join("");
}}
*** タグの間の空白は消える [#note_space]
#highlight{{
return <ul>
<li>a</li>
<li>b</li>
</ul>;
}}
上は <ul><li>a</li><li>b</li&g...
*** HTMLコメントは書けない [#note_comment]
<!-- --> は使えない。
*** < が比較演算子になる場合 [#note_lt]
直前のトークンで判断する。値や ) の後ろの < は比較演算...
#highlight{{
if (n < 10) { } // 比較
return <p>x</p>; // JSX
}}
終了行:
* Pkript/文法/JSX [#kd8fa19f]
HTML要素を式として記述する記法。文字列連結の代わりに使う。
** リファレンス [#x916181f]
*** 構文 [#ad1b5edc]
#highlight{{
<タグ 属性="値">{式}</タグ>
}}
- 設定定数 PKRIPT_JSX が 1（既定）の場合に利用できる。0 ...
- {} 内に渡された文字列は自動でHTMLエスケープされる
- JSX要素どうしを {} 内に埋め込んだ場合はエスケープされず...
- 単一の親要素、またはフラグメント <> ... </>...
#highlight{{
function plugin_hello_convert(e) {
const name = e.args[0];
return <p class="greeting">こんにちは、{name} さん</p>;
}
}}
*** 書ける形 [#p616b045]
**** 要素と入れ子 [#form_nest]
#highlight{{
return <ul><li>a</li><li>b</li></ul>;
}}
**** 空要素 [#form_void]
#highlight{{
return <br />;
}}
閉じスラッシュが要る。<br> だけでは閉じタグ待ちにな...
**** フラグメント [#form_fragment]
複数の要素を、囲む要素なしで並べる。
#highlight{{
return <><p>a</p><p>b</p></>;
}}
**** 属性 [#form_attr]
文字列か {式} を書く。
#highlight{{
const cls = e.opts["class"];
return <p class="fixed">x</p>;
return <p class={cls}>x</p>;
return <p title={42}>x</p>;
}}
- className と書いても class になる
- 値が null の属性は出力されない
- {...obj} のスプレッド属性には対応していない
**** {} の中身 [#form_expr]
式なら何でも書ける。
#highlight{{
return <div><span>{1 + 1}</span></div>;
return <ul>{items.map((x) => <li>{x}</li>).join("")}</ul>;
}}
null, false, 空文字列は何も出力しない。0 は "0" と出る。
*** エスケープの規則 [#s4d26f32]
ここがJSXの要点。文字列は必ずエスケープされ、JSX要素はさ...
#highlight{{
const s = "<li>x</li>"; // ただの文字列
return <ul>{s}</ul>; // <ul><li>x</li&...
const el = <li>x</li>; // JSX要素
return <ul>{el}</ul>; // <ul><li>x</li></ul>
}}
wiki.convert() の戻り値もエスケープされない。Wiki記法から...
#highlight{{
return <div>{wiki.convert(e.body)}</div>;
}}
**** htmlsc は使わない [#escape_htmlsc]
{} の中は自動でエスケープされる。htmlsc() を重ねると二重...
#highlight{{
return <p>{htmlsc("<b>")}</p>; // &lt;b&gt; と...
return <p>{"<b>"}</p>; // <b> が正しい
}}
**** 属性値も同じ [#escape_attr]
属性値に入れた文字列はエスケープされる。引用符を混ぜて属...
#highlight{{
const c = "a\" onclick=\"alert(1)";
return <p class={c}>y</p>; // class ごと落とされる
}}
*** サニタイザとの関係 [#m9847ca9]
JSXで書いたHTMLも、他の出力と同じようにサニタイザを通る。...
|~書いたもの|~出力|h
|<script>alert(1)</script>|タグごと削除|
|<p onclick="...">|onclick が削除|
|<p id="a">|id="pkript-a" に変換|
|<a href="javascript:...">|href が削除|
|<p style="position: fixed">|position の宣言のみ削...
|<form>|action が自Wikiに補完|
詳しくは [[Pkript/設定/サニタイザ]] を参照。
** 使用法 [#l5abaadf]
*** 変数を埋め込んでコンポーネントを出力する [#usage_comp...
#highlight{{
function plugin_profile_convert(e) {
const name = e.args[0] || "ゲスト";
return (
<div class="profile-box">
<h3>プロフィール</h3>
<p>名前: {name}</p>
</div>
);
}
}}
*** 配列から要素を組み立てる [#usage_list]
#highlight{{
const items = e.args;
return <ul>{items.map((x) => <li>{x}</li>).join("")}</ul>;
}}
** 注意点 [#kf841ec8]
*** 要素を文字列として切り貼りしない [#note_string]
JSX要素は、出力の直前まで内部の目印として持ち回る。length...
#highlight{{
const el = <b>x</b>;
return el.length; // 8 ではない
}}
連結（+）と join() は安全。
#highlight{{
return <b>a</b> + <i>b</i>;
return items.map((x) => <li>{x}</li>).join("");
}}
*** タグの間の空白は消える [#note_space]
#highlight{{
return <ul>
<li>a</li>
<li>b</li>
</ul>;
}}
上は <ul><li>a</li><li>b</li&g...
*** HTMLコメントは書けない [#note_comment]
<!-- --> は使えない。
*** < が比較演算子になる場合 [#note_lt]
直前のトークンで判断する。値や ) の後ろの < は比較演算...
#highlight{{
if (n < 10) { } // 比較
return <p>x</p>; // JSX
}}
ページ名:
既存のページ名で編集する
![[Logo]](https://wikichree.com/sys/core/pukiwiki-1.5.4/../../site/skin/wikic.png "[Logo]"){kind=small}
WikiChree.COM
![[PukiWiki]](./skin/logo.png "[PukiWiki]"){kind=logo}
