sounisi5011/README.md

## README.md

      
    Raw
  

              README.md
            
          
https://bl.ocks.org/sounisi5011/raw/f671ba491064630e7966764785240787


## index.html
<!doctype html>
<html lang=ja>
<meta charset=utf-8>
<meta name=viewport content="width=device-width,initial-scale=1">
<meta name=format-detection content="telephone=no,email=no,address=no">
<title>入力項目が自動で増えていく入力欄郡</title>
<h1>入力項目が自動で増えていく入力欄郡</h1>

<h2>Hyperapp</h2>
<p id=hyperapp-app>

<h2>Mithril</h2>
<p id=mithril-app>

<footer>
  <h2>Gist</h2>
  <p><a href="https://gist.github.com/sounisi5011/f671ba491064630e7966764785240787">https://gist.github.com/sounisi5011/f671ba491064630e7966764785240787</a>
</footer>
<script src=https://unpkg.com/hyperapp@1.2.9/dist/hyperapp.js integrity="sha512-Ybb0wXz6bm1POGjbKYy6Z7fo+Ja+grGC9bf4vIa+GEb5rD5oIo1NlkS5jISRArb9p+XyZwd733MMdXKx4jsMDw==" crossorigin=anonymous></script>
<script src=https://unpkg.com/mithril@1.1.6/mithril.js integrity="sha512-I/X/C6biw9PlwVcXBlEYPvj+aHdimyJ4d9ORRe85a4nOBCOc1R6xkfLVNkltz8JZKIdvIfS7WP/KToQw5F2+HA==" crossorigin=anonymous></script>
<script src=./main.hyperapp.js></script>
<script src=./main.mithril.js></script>

## main.hyperapp.js
{
  const {h, app} = hyperapp;

  const state = {
    valueMap: new Map,
  };
  const actions = {
    input: ([key, value]) => state => {
      const { valueMap } = state;

      valueMap.set(key, value);

      return {
        valueMap,
      };
    },
    update: ([key, value]) => state => {
      const { valueMap } = state;

      // 値が空、または、値が他の項目と被っている場合、
      // 現在の入力欄を削除する
      if (
        value === '' ||
        [...valueMap.entries()].some(([k, v]) => k !== key && v === value)
      ) {
        valueMap.delete(key, value);
      }

      return {
        valueMap,
      };
    },
  };

  const view = (state, actions) => {
    const { valueMap } = state;
    const maxKey = Math.max(-1, ...valueMap.keys())
    const lastItem = valueMap.get(maxKey);

    return h('div', {}, [
      [...valueMap.entries()]
        .concat((lastItem === undefined || lastItem !== '') ? [[maxKey + 1, '']] : [])
        .map(([key, value]) => h('div', { key }, [
          h('input', {
            type: 'text',
            oninput(event) {
              actions.input([key, event.target.value]);
            },
            onblur(event) {
              actions.update([key, event.target.value]);
            },
          }),
          `key:${key}`,
        ])),
    ]);
  };

  app(state, actions, view, document.getElementById('hyperapp-app'));
}

## main.mithril.js
{
  const valueMap = new Map;

  const input = ([key, value]) => {
    valueMap.set(key, value);
  };
  const update = ([key, value]) => {
    // 値が空、または、値が他の項目と被っている場合、
    // 現在の入力欄を削除する
    if (
      value === '' ||
      [...valueMap.entries()].some(([k, v]) => k !== key && v === value)
    ) {
      valueMap.delete(key, value);
    }
  };

  const App = {
    view() {
      const maxKey = Math.max(-1, ...valueMap.keys());
      const lastItem = valueMap.get(maxKey);

      return m('div', {}, [
        [...valueMap.entries()]
          .concat((lastItem === undefined || lastItem !== '') ? [[maxKey + 1, '']] : [])
          .map(([key, value]) => m('div', { key }, [
            m('input', {
              type: 'text',
              oninput(event) {
                input([key, event.target.value]);
              },
              onblur(event) {
                update([key, event.target.value]);
              },
            }),
            `key:${key}`,
          ])),
      ]);
    },
  };

  m.mount(document.getElementById('mithril-app'), App);
}
	<!doctype html>
	<html lang=ja>
	<meta charset=utf-8>
	<meta name=viewport content="width=device-width,initial-scale=1">
	<meta name=format-detection content="telephone=no,email=no,address=no">
	<title>入力項目が自動で増えていく入力欄郡</title>
	<h1>入力項目が自動で増えていく入力欄郡</h1>

	<h2>Hyperapp</h2>
	<p id=hyperapp-app>

	<h2>Mithril</h2>
	<p id=mithril-app>

	<footer>
	<h2>Gist</h2>
	<p><a href="https://gist.github.com/sounisi5011/f671ba491064630e7966764785240787">https://gist.github.com/sounisi5011/f671ba491064630e7966764785240787</a>
	</footer>
	<script src=https://unpkg.com/hyperapp@1.2.9/dist/hyperapp.js integrity="sha512-Ybb0wXz6bm1POGjbKYy6Z7fo+Ja+grGC9bf4vIa+GEb5rD5oIo1NlkS5jISRArb9p+XyZwd733MMdXKx4jsMDw==" crossorigin=anonymous></script>
	<script src=https://unpkg.com/mithril@1.1.6/mithril.js integrity="sha512-I/X/C6biw9PlwVcXBlEYPvj+aHdimyJ4d9ORRe85a4nOBCOc1R6xkfLVNkltz8JZKIdvIfS7WP/KToQw5F2+HA==" crossorigin=anonymous></script>
	<script src=./main.hyperapp.js></script>
	<script src=./main.mithril.js></script>
	{
	const {h, app} = hyperapp;

	const state = {
	valueMap: new Map,
	};
	const actions = {
	input: ([key, value]) => state => {
	const { valueMap } = state;

	valueMap.set(key, value);

	return {
	valueMap,
	};
	},
	update: ([key, value]) => state => {
	const { valueMap } = state;

	// 値が空、または、値が他の項目と被っている場合、
	// 現在の入力欄を削除する
	if (
	value === '' \|\|
	[...valueMap.entries()].some(([k, v]) => k !== key && v === value)
	) {
	valueMap.delete(key, value);
	}

	return {
	valueMap,
	};
	},
	};

	const view = (state, actions) => {
	const { valueMap } = state;
	const maxKey = Math.max(-1, ...valueMap.keys())
	const lastItem = valueMap.get(maxKey);

	return h('div', {}, [
	[...valueMap.entries()]
	.concat((lastItem === undefined \|\| lastItem !== '') ? [[maxKey + 1, '']] : [])
	.map(([key, value]) => h('div', { key }, [
	h('input', {
	type: 'text',
	oninput(event) {
	actions.input([key, event.target.value]);
	},
	onblur(event) {
	actions.update([key, event.target.value]);
	},
	}),
	`key:${key}`,
	])),
	]);
	};

	app(state, actions, view, document.getElementById('hyperapp-app'));
	}
	{
	const valueMap = new Map;

	const input = ([key, value]) => {
	valueMap.set(key, value);
	};
	const update = ([key, value]) => {
	// 値が空、または、値が他の項目と被っている場合、
	// 現在の入力欄を削除する
	if (
	value === '' \|\|
	[...valueMap.entries()].some(([k, v]) => k !== key && v === value)
	) {
	valueMap.delete(key, value);
	}
	};

	const App = {
	view() {
	const maxKey = Math.max(-1, ...valueMap.keys());
	const lastItem = valueMap.get(maxKey);

	return m('div', {}, [
	[...valueMap.entries()]
	.concat((lastItem === undefined \|\| lastItem !== '') ? [[maxKey + 1, '']] : [])
	.map(([key, value]) => m('div', { key }, [
	m('input', {
	type: 'text',
	oninput(event) {
	input([key, event.target.value]);
	},
	onblur(event) {
	update([key, event.target.value]);
	},
	}),
	`key:${key}`,
	])),
	]);
	},
	};

	m.mount(document.getElementById('mithril-app'), App);
	}