コーディング

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

2016.08.04

2017.05.24

道しるべ

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制作ではより動的な制御を必要とする言語やサービス、コーディングが必要とされる場面もあるはずですので、どういった応用にも対応できるように今のうちに使いこなしておきたいですね。

SHARE

この記事の筆者

Web&Soundクリエイター 田村 培修

Web&Soundクリエイター 田村 培修

楽器とパソコンのキーボードを使い分ける当社のマルチクリエイター。e-sportsに興味津々であれこれ情報を収集中。

Archive

CONTACT

06-6537-9941
受付時間
9:00〜19:00
休日
土日祝日

株式会社ゼロワンアース
〒550-0012 大阪市西区立売堀2-5−41合田ビル6F

メールで問い合わせる

ホームページで成果をあげるには、
まず現状分析

反響のないホームページをあきらめていませんか?ホームページで成果をあげるためには、現状を分析し改善していく必要があります。大阪市西区の本社にて無料相談を受け付けておりますので、ホームページ制作のことでお悩みの方は上記CONTACTより、お問い合わせください。