var lesson = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\nimport { createSignal, For } from 'solid-js';\n\nfunction App() {\n  const [cats, setCats] = createSignal([\n    { id: 'J---aiyznGQ', name: 'Keyboard Cat' },\n    { id: 'z_AbfPXTKms', name: 'Maru' },\n    { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }\n  ]);\n  \n  return (\n    <ul>\n      <li>\n        <a target=\"_blank\" href=\"\">\n          1: Garfield\n        </a>\n      </li>\n    </ul>\n  );\n}\n\nrender(() => <App />, document.getElementById('app'))\n"
		}
	]
};
var solved = {
	files: [
		{
			name: "main",
			content: "import { render } from 'solid-js/web';\nimport { createSignal, For } from 'solid-js';\n\nfunction App() {\n  const [cats, setCats] = createSignal([\n    { id: 'J---aiyznGQ', name: 'Keyboard Cat' },\n    { id: 'z_AbfPXTKms', name: 'Maru' },\n    { id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }\n  ]);\n  \n  return (\n    <ul>\n      <For each={cats()}>{(cat, i) =>\n        <li>\n          <a target=\"_blank\" href={`https://www.youtube.com/watch?v=${cat.id}`}>\n            {i() + 1}: {cat.name}\n          </a>\n        </li>\n      }</For>\n    </ul>\n  );\n}\n\nrender(() => <App />, document.getElementById('app'))\n"
		}
	]
};
var markdown = "`<For>` コンポーネントは、オブジェクトの配列をループするための最良の方法です。配列が変更されると、`<For>` は DOM 内のアイテムを再作成するのではなく、更新したり移動したりします。例を見てみましょう。\n\n```jsx\n<For each={cats()}>{(cat, i) =>\n  <li>\n    <a target=\"_blank\" href={`https://www.youtube.com/watch?v=${cat.id}`}>\n      {i() + 1}: {cat.name}\n    </a>\n  </li>\n}</For>\n```\n\n`<For>` コンポーネントには、ループさせる配列を渡す `each` というプロパティがひとつあります。\n\nそして、`<For>` と `</For>` の間に直接ノードを書き込むのではなく、コールバックを渡します。これは、JavaScript の [`map` コールバック](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map#parameters)に似た関数です。配列の各要素に対して、その要素を第一引数、インデックスを第二引数としてコールバックが呼び出されます（この例では `cat` と `i` です）。これらをコールバック内で使用して、レンダリングするノードを返します。\n\nインデックスは定数ではなく、Signal であることに注意してください。これは `<For>` が \"参照キー\" であるためで、レンダリングする各ノードは配列の要素に結合されています。つまり、ある要素が配列の中で配置を変えた場合、破棄して再作成するのではなく、対応するノードも移動し、そのインデックスが変更されます。\n\n`each` プロパティは配列を想定していますが、 [`Array.from`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from) や [`Object.keys`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/keys) 、あるいは [`spread syntax`](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Spread_syntax) などのユーティリティを使用すれば、他の反復可能オブジェクトを配列に変換できます。\n";
var flow_for = {
	lesson: lesson,
	solved: solved,
	markdown: markdown
};

export { flow_for as default, lesson, markdown, solved };
