ES2015(ES6) のsome()とevery()でバリデーションを実装する


some()とevery()はES5との指摘を受けました。
ES6となっているとろはES5と読み替えてください…。


#someメソッド、everyメソッドとは

**someメソッド**
配列の中の値のどれか一つでも一致したら**true**を返し、一つも一致しない場合は**false**を返します。
[Array.prototype.some()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/some)

**everyメソッド**
配列の中の値すべてに一致した場合に**true**を返し、一つでも一致しないものがあった場合、**false**を返します。
[Array.prototype.every()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/every)


```javascript:サンプル

//配列の設定
const array = [1, 30, 39, 29, 10, 13];

//someメソッド
const some = array.some(elem =>{
	return elem < 20;
});
//everyメソッド
const every = array.every(elem =>{
	return elem < 20;
});
console.log(some); // true
console.log(every); // false
```

#someメソッドとeveryメソッドで実装するバリデーション

ES6より導入されたsomeメソッドとeveryメソッドを使うとバリデーションを簡単に実装することが出来ます。
以下簡易的なサンプルです。
<p class="codepen" data-height="300" data-theme-id="dark" data-default-tab="js,result" data-user="YusukeIkeda" data-slug-hash="RzzEyp" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="RzzEyp">
  <span>See the Pen <a href="https://codepen.io/YusukeIkeda/pen/RzzEyp/">
  RzzEyp</a> by YusukeIkeda (<a href="https://codepen.io/YusukeIkeda">@YusukeIkeda</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

```html:HTML
<html>
<head>
<meta charset="utf-8">
<style>
form{
	padding: 10px;
}
input[type="text"] {
  width:  100px;
  padding: 5px; 
}
p{
	margin-bottom: 0;
}
</style>
</head>
<body>
<form>
<div>
<p>電話番号</p>
<input type="text" value="" name="phone1" id="phone1"> -
<input type="text" value="" name="phone2" id="phone2"> -
<input type="text" value="" name="phone3" id="phone3">
</div>
<div>
<p>住所1</p>
<input type="text" value="" name="address1" id="address1">
<p>住所2</p>
<input type="text" value="" name="address2" id="address2">
</div>
<br>
<input type="button" value="送信" id="button">
</form>
<script src="validate.js"></script>
</body>
</html>
```


##JavaScript

###ES5までの書き方
まずはES5までの書き方です。if文の中に **||** か **&&** で繋いで条件を判定する方法です。

```javascript:JavaScript【ES5までの書き方】

document.getElementById('button').addEventListener('click', validate, false);
function validate(){

//値の取得
	var address1 = document.getElementById('address1').value; 
	var address2 = document.getElementById('address2').value; 
	var phone1 = document.getElementById('phone1').value; 
	var phone2 = document.getElementById('phone2').value; 
	var phone3 = document.getElementById('phone3').value; 

	if(address1.length != '' || address2.length != ''){
		console.log('address OK');
	} else {
		console.log('どちらかは入力する必要があります');
	}
	if(phone1.length != '' && phone2.length != '' &&  phone3.length){
		console.log('phone OK');
	} else {
		console.log('すべて入力されている必要があります');
	}
}
```

###some()とevery()を使った書き方

ES6で導入された**some()**と**every()**を使った書き方です。
正直このサンプルの場合、ES5までの書き方の方がシンプルな気がするけど、バリデーションの項目が増えても返り値の真偽を判定するだけなのでif文の条件を弄らなくてよくなります。

```javascript:JavaScript【some()とevery()を使った書き方】

document.getElementById('button').addEventListener('click', validate, false);
function validate(){

	//値の取得
	const address1 = document.getElementById('address1').value; 
	const address2 = document.getElementById('address2').value;
	const phone1 = document.getElementById('phone1').value; 
	const phone2 = document.getElementById('phone2').value; 
	const phone3 = document.getElementById('phone3').value; 

	const array_address = [address1, address2];
	const array_phone   = [phone1, phone2, phone3];

	const check_input = element =>{
		return element.length != '';
	}

	const check_address = array_address.some(check_input);
	const check_phone = array_phone.every(check_input);

	//someメソッドの返り値で条件判定をする。
	if(check_address){
		console.log('address OK');
	} else {
		console.log('どちらかは入力する必要があります');
	}

	//everyメソッドの返り値で条件判定をする。
	if(check_phone){
		console.log('phone OK');
	} else {
		console.log('すべて入力されている必要があります');
	}
}
```

##まとめ
es6より便利なメソッドが多く追加されていますが特にsomeとeveryはバリデーションを実装する時に威力を発揮しそうです。また、someメソッドについてはPHPの**in_array**的な実装が簡単にできる感じなので今後使ってみようと思います。