JavaScript よくわかる「switch文」の基本

シェアする

  • このエントリーをはてなブックマークに追加
  • 0

あーりーです。

JavaScriptで遊んでいます。

突然ですが…

あなたはファンタジーの世界の「勇者」です。

悪者にさらわれた「お姫様」を助けに行こうとしています。

前回手に入れた伝説の剣をたずさえて、いよいよ冒険の旅がはじまります。

目指すは、お姫様がとらわれている悪者の城です。

が。

ここで一つ問題が。

悪者の城がどこにあるのか、わかりません。

ファンタジーの世界は広いです。

この広い世界のどこかに、お姫様はとらわれています。

スポンサーリンク

お姫様を探す

あなたはとりあえず、町の周辺をウロウロしてみることにしました。

といっても、この辺の地理にくわしくないので(そういう設定)どっちに行けば何があるのか、よくわかりません。

そこで…

あなたは、町の人にたずねました。

「旅の者です。町を出てウロウロしたいんですが、周辺の地理はどんな感じですか?」

町の人は言いました。

「東西南北、どの方角に行くつもり?」

さて。

あなたは何と答えますか?

東、西、南、北、どれかを答えると、それに応じて町の人が情報をくれます。

東西南北 どこに向かう?

仮に…

あなたが「東」と答えれば、町の人は「海があるよ」という情報をくれるとします。

あなたが「西」と答えれば、町の人は「山があるよ」という情報をくれるとします。

あなたが「南」と答えれば、町の人は「砂漠があるよ」という情報をくれるとします。

あなたが「北」と答えれば、町の人は「草原があるよ」という情報をくれるとします。

JavaScriptでやってみよう

これをJavaScriptでやってみますね。

実現したいのは以下の内容です。

  • 「どの方角に行く?」という質問とともに入力欄が出てくる。
  • 入力欄に「東」「西」「南」「北」のいずれかを入力すると、それに応じた情報が表示される。
  • 「東」「西」「南」「北」以外の文字を入力すると、「もう1回言って」と聞き返される。

switch

今回は、switchを使って分岐処理を行います。

switchを使えば、変数の中身に応じて処理を変えることができます。

構造

switchの構造は、以下のとおりです。

switch(変数){
case 値1:
変数が値1のときの処理
break;

case 値2:
変数が値2のときの処理
break;

default:
どれにも一致しないときの処理
}

変数の中身が「値1」なら、値1のときの処理が行われます。

変数の中身が「値2」なら、値2のときの処理が行われます。

上の例では「値2」までですが、「値3」「値4」と、どんどん処理を増やすことができます。

最終的に、変数の中身がどの値にも一致しないときは、一番最後の「どれにも一致しないときの処理」が行われます。

スクリプト

switchを組み込んだスクリプトがこちらです。

<html>
<head>
</head>
<body>

<script>
var x;
x=prompt("どの方角に行く?","");

switch(x){
case "東":
document.write("海があるよ");
break;

case "西":
document.write("山があるよ");
break;

case "南":
document.write("砂漠があるよ");
break;

case "北":
document.write("草原があるよ");
break;

default:
document.write("もう1回言って");
}
</script>

</body>
</html>

緑色の部分がJavaScriptです。

それ以外の部分は究極にあっさりと書いています。

実行すると?

上の内容をメモ帳などのエディタにコピペしてHTML形式で保存し、そのファイルを開くと…

「どの方角に行く?」という質問とともに、入力ダイアログが表示されます。

入力ダイアログの欄に「東」「西」「南」「北」のいずれかの文字を入力してOKをクリックすると、入力した方角の情報が表示されます。

解説

では、どんな仕組みか確認しておきますね。

変数「x」の準備

まずこの行をご覧ください。

var x;

ここで、変数「x」を使う宣言をしています。

入力ダイアログの表示

つぎの行です。

x=prompt("どの方角に行く?","");

この行によって、「どの方角に行く?」という入力ダイアログが表示されます。

入力ダイアログに入力された情報は、変数「x」に代入されます。

変数「x」の中身が「東」の場合

つぎをご覧ください。

switch(x){
case "東":
document.write("海があるよ");
break;

ここでswitchが登場します。

switchのうしろのカッコ内に、変数「x」がありますね。

わかりやすく赤くします。

switch(x){
case "東":
document.write("海があるよ");
break;

この変数「x」の中身が「東」なら、画面に「海があるよ」と表示されます。

breakで処理から脱出

よく見ると、breakと書かれています。

わかりやすく赤くします。

switch(x){
case "東":
document.write("海があるよ");
break;

breakは、処理からの脱出を意味します。

つまり…

画面に「海があるよ」と表示されたあとは、switchの処理から脱出します。

脱出するので、それ以降の「山があるよ」「砂漠があるよ」「草原があるよ」「もう1回言って」などは表示されません。

「西」「南」「北」の場合

変数「x」の中身が「西」「南」「北」の場合も同じです。

それぞれ「山があるよ」「砂漠があるよ」「草原があるよ」という文字が、画面に表示されます。

どれにも一致しない場合

最後がこちら。

default:
document.write("もう1回言って");
}

変数「x」の中身が「東」「西」「南」「北」のどれにも一致しない場合は、「もう1回言って」と表示されます。

以上が、switchを使った分岐処理でした~。

今回はこれでおしまいです。

JavaScriptの記事は、この記事も含めて「初心者のための超わかりやすいJavaScript入門」にまとめてあります。よろしければご覧ください。