jquery if文で分岐をつくってみよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

if文で分岐をつくってみよう

jQuery|2018年11月01日

2018年11月01日
  • このエントリーをはてなブックマークに追加

少しだけ難易度が上がります。
ただ、今回はjQueryというよりJavaScriptそのものです。
プログラミング的な書き方の第一歩と言ったところでしょうか。

if文とは、条件によって処理を変える書き方の1つです。
条件がAだったらAの処理を行い、BだったらBの処理を行う、という分岐ができます。
例えば、冷蔵庫の中身が魚だったら焼き魚を食べる。
肉だったらステーキを食べる。
そんな分岐です。
JavaScriptやjQueryに限らず、他言語でも多用する書き方です。
しっかり覚えておきましょう。

今回も、以下のミッションに挑戦してみてください。
必要なソースコードについては、ページ下部に記載しました。

ミッションの内容

下記のファイルを再現してみましょう。

まず「input要素」に文字を入力して、ボタンを押します。
inputに入力した文字が「こんにちは」なら「Hello」が返ってきます。
「こんばんは」なら「Good afternoon」が返ってきます。

一度「ソースコードの解説」を確認してから、挑戦してみましょう。
もし、どうしても再現できない場合は、下記のファイルを参考にしてください。

ソースコードの解説

では、今回の処理の流れを考えてみましょう。
文字にするとそんなに難しいことはありません。

  1. input要素に文字を入力してボタンを押す
  2. input要素に入力された文字を取り出して「変数」に入れる
  3. 取り出した文字 ( 変数の中身 ) が「こんにちは」「こんばんは」のどちらなのかを判断する
  4. 判断結果を見て、alertでHelloかGood afternoonを出す

JavaScriptに限らず、プログラミング言語には「変数」が存在します。
変数とは、数字や言葉などを入れておける「箱」みたいなものです。

取り出して表示したり、数字を足したり、中に入っているデータを比較したり。
箱の中身について、どう使うかは自由です。

JavaScriptでは、先頭にletをつけると変数になります。

ただ、他にも変数を定義する方法として、verやconstなども存在します。
var、let、constなどについては、また改めてご説明します。
ひとまず今は、letをつけておいてください。

let target = "123456";

上記であれば、targetという変数の中に、123456が格納されます。

ただ、今回は、123456ではなく、input要素の値を入れなければなりません。
どうやったら、inputの値を取得することができるのでしょう。

それは、下記のソースコードで取得できます。

$('.textbase').val();

input要素には.textbaseというclassがついています。
上記のソースコードで.textbaseの中に入ったテキストが取得されます。

変数に取得した値を入れるには、変数と合体させるだけです。

let target = $('.textbase').val();

これで、textbaseのテキストを、変数targetに入れることができました。
次は、いよいよ「if文」を使っていきます。

if文とは、AとBを比較し、条件分岐させるものです。
Aだったら「A」と処理し、Bだったら「B」と処理します。
「もし変数の中身がナントカだったら」という条件による分岐を実現できます。

難しく考える必要はありません。
まずはソースコードを見てみましょう。

if(target == "こんにちは"){
	//Helloとアラートを出します。
	alert("Hello");
//もしtargetの中身が「こんばんは」なら、、
}else if(target == "こんばんは"){
	//Good Afternoonとアラートを出します。
	alert("Good Afternoon");
//もしtargetの中身が「こんにちは」「こんばんは」どちらでもないなら、、
}else{
	//「こんにちは」もしくは「こんばんは」を入力してください。とアラートを出します。
	alert("「こんにちは」もしくは「こんばんは」を入力してください。");
};

変数targetが「こんにちは」であれは「Hello」が出力されます。
もし「こんばんは」だったら「Good Afternoon」が出力されます。
それ以外であれば

「こんにちは」もしくは「こんばんは」を入力してください。

と出力されます。

if文は、このif、else、else ifがセット、というわけでもありません。
elseが無くても使えますし、else ifがなくても使えます。
例えばこんな感じです。

//もしtargetの中身が「こんにちは」なら、、
if(target == "こんにちは"){
	//Helloとアラートを出します。
	alert("Hello");
}
//もしtargetの中身が「こんばんは」なら、、
if(target == "こんばんは"){
	//Good Afternooとアラートを出します。
	alert("Good Afternoon");
}

上記であれば「〜〜を入力してください」の文言は出ません。
しかし「こんにちは」と「こんばんは」を見分けることはできます。

//もしtargetの中身が「こんにちは」なら、、
if(target == "こんにちは"){
	//Helloとアラートを出します。
	alert("Hello");
//もしtargetの中身がそれ以外なら、、
}else{
	//Good Afternoonとアラートを出します。
	alert("Good Afternoon");
}

上記でも一緒です。
色々な使い方が出来ますので、状況によって使い分けてみてください。

なお「target == “こんにちは”」の「==」の部分を、比較演算子と言います。

比較演算子には様々な種類があります。

「==」は「同じだったら」という意味です。
「!==」であれば「左と右が同じでなければ」という意味になります。
「<」であれば「左の数字が右より少なければ」になります。

様々な比較の手段があるのです。

詳しくは、下記の情報を参考にしてみてください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Comparison_Operators

比較演算子とif文は、使わないことが無いくらい重要な書き方です。
何度か練習してマスターしてみましょう。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら