今回はプログラムの醍醐味である「条件分岐」を学びます。

“もし○だったら▲の処理、○でなければ■の処理”と、条件に合わせて処理を変えることで、プログラミングの楽しさ、奥深さに触れていきます。

if文

JavaScriptではif文を覚えると、できることが一気に広がります。エクスプレッションでは、「ソーステキストがあれば、そのまま表示、なければデフォルトの文言を表示」。スクリプトでは「テキストレイヤーを選択していれば処理続行、選択レイヤーにテキストレイヤーがなければ処理を停止」など、プログラムの分岐や、エラーの巻き取りまでアイディア次第であらゆることが実現できます。

書き方

if( 条件を比較するための式 ){
  条件が「真(true)」の場合の処理
} else {
  条件が「偽(false)」の場合の処理
}

条件の式に合っている場合を「真(true)」、条件に合っていない場合を「偽(false)」と呼びます。

例えば「不透明度のレイヤー」に

if(position[0]<500){;
  opacity=0;
} else {
  opacity=100;
}

というエクスプレッションを記述すると、このレイヤーは左端から右に500px未満では、見えなくなります。

条件の比較方法

if文の条件の比較方法は下記の通りです。

比較演算子	意味
==	左辺と右辺が同じ
!=	左辺と右辺が違う
<	左辺が右辺未満
>	右辺が左辺未満
<=	右辺が左辺以上
>=	左辺が右辺以上
===	左辺と右辺が値も型も同じ

このように左辺と右辺を比較演算子で繋ぎ、正しければtrue、異なればfalseとなる処理を分けるトリガーが簡単に作れます。

複数の条件1

var point=30;

if(point>95){
  alert("合格です！");
}else{
  if(point>80){
    alert("もう少し");
  }else{
  alert("不合格！");
  }
}

if文を入れ子にすれば、条件を増やせます。

ただし多少煩雑になるため、次のif文があります。

複数の条件2

「else if文」

var point=30;

if(point>95){
  alert("合格です！");
}else if(point>80){
  alert("もう少し");
}else{
  alert("不合格！");
}

elseとifをひとまとめにした「else if」という記述があります。「else if」を繰り返すことで、何通りもの条件を追加しやすくなります。

複数の条件3

論理演算子

論理演算子	意味
AND &&	if(条件1 && 条件2){ 条件1「かつ」条件2がtrueであれば
OR ||	if(条件1 || 条件2){ 条件1「もしくは」条件2がtrueであれば
NOT !	if(!条件){ 条件がfalseであれば if(条件1 != 条件2){ 左辺と右辺が異なれば

if文で効率化を広げる

条件での分岐を行うことで、様々な処理を自動化できます。プログラムの可能性を一気に広げる知識ですので、if文を使いこなして、想像を上回る効率化を見つけていきましょう。

次回予告

次回はJavaScript内で意味を持ってしまう文字「”」や、使う機会が多い「改行」などはどう指定すればいいのか、特殊文字について学んでいきます。

下記リンクから飛べます。

JavaScriptでの特殊文字の指定方法