条件分岐の基本形、javascriptでのif文の書き方

wordpressやjavascriptで頻出利用する条件分岐タグについて、最近業務でまとまって利用することがあったので基本事項をまとめたいと思います。 条件分岐タグの基本といえばif文でしょう。if文を使えば同じタグを使いながら、ある条件のときは文章A、そうではないときは文章Bを表示といった、静的なhtmlだけでは不可能な記述をコントロールすることができます。 早速その書き方を見てみましょう。

if文の書き方

if文はjavascriptやphp、worspressなどで利用されますが基本の構造は以下のようになっています。

if (条件) {
条件が真であれば実行
}

()内に条件を書き、条件が一致すれば{}内の処理が実行される、というのがif文の基本的な構造です。
今回はjavascriptで例文を書いてみます。

See the Pen QEVVoJ by hoshu_t (@hoshu_t) on CodePen.

pointの値が50以上なら「ポイントが50以上です」と表示するif文です。htmlにはなにも記述していませんが「ポイントが50以上です」と表示されています。

See the Pen pbOxom by hoshu_t (@hoshu_t) on CodePen.

上記は同じif文ですが、pointが50以下なのでなにも表示されません。

条件を追加する(elseif)

上で2つの例文を制作しましたが、if文ではこれを一つのコードで実現することができます。
else ifという記述を使うことで複数の条件を設定しこれを実現させます。書き方は以下です。

if (条件) {
条件が真であれば実行
}
else if (条件2) {
条件2が真であれば実行
}

同じく例文を書いてみましょう。

See the Pen ZOrqQG by hoshu_t (@hoshu_t) on CodePen.

pointの値が50以上なら「ポイントが50以上です」、ポイント50未満なら「ポイントが50未満です」と表示されるjavasceiptです。
pointの値が50未満なので「ポイントが50未満です」と表示されています。
是非例文右上のリンクから編集ページに飛び、pointの値を変化させてみてください。50以上の場合、違うテキストが出力されます。

紹介したif文は条件分岐の最小単位と言えます。今後のweb制作ではより動的な制御を必要とする言語やサービス、コーディングが必要とされる場面もあるはずですので、どういった応用にも対応できるように今のうちに使いこなしておきたいですね。