【jQeury】「お仕事診断」をするプログラムを書いてみた　※配列、Mathオブジェクト

2016年5月7日

名前を入力して、「診断する」ボタンを押すとお仕事診断ができるプログラムを書いたので、内容を整理する為に記事を書いてみた。
今回主に、配列、Mathオブジェクト（floor、random）を使用した。
以下がそのsampleコードとなります。

【html】

<body>
<h1>お仕事</h1>
<p><input type="text" id="name" value=""></p>
<p><input type="button" id="button" value="診断する"></p>
<h2>診断結果</h2>
<p id="result">こちらに結果が表示されます。</p>
</body>

<body>

<p id="result">こちらに結果が表示されます。</p>

</body>

【js】

$(function(){
$('#button').click(function(){
var name = $('#name').val();
if(name == ''){
alert('名前を入力してください');
return;
};		
var kind = ["みんなに優しい","性格がわるい","温厚な","怠け者の","仕事のできる","足が臭い"];
var type = ["泥棒","警察官","公務員","プログラマー","営業職","キャリアウーマン"];
var kinds = kind[Math.floor(Math.random() * kind.length)];
var types = type[Math.floor(Math.random() * type.length)];
$('#result').text(name + 'さんは「' + kinds + types + '」です！');
});
});

$(function(){

$('#button').click(function(){

var name = $('#name').val();

if(name == ''){

alert('名前を入力してください');

return;

};

var kind = ["みんなに優しい","性格がわるい","温厚な","怠け者の","仕事のできる","足が臭い"];

var type = ["泥棒","警察官","公務員","プログラマー","営業職","キャリアウーマン"];

var kinds = kind[Math.floor(Math.random() * kind.length)];

var types = type[Math.floor(Math.random() * type.length)];

$('#result').text(name + 'さんは「' + kinds + types + '」です！');

});

上記のプログラムを日本語にしたら、以下のようなロジックとなる。

#buttonをクリックしたら実行
#nameのvalを取得する変数「name」を作成
次に診断結果となる「お仕事」の配列(kind、type)を作成
作成した配列をランダムで取得する変数(kinds、types)を作成
#resultに入っている文字を入力された名前とお仕事に書き換わるようにする
ボックスの中が空だったら「名前を入力してください」というアラートを出すようにする

今回、Math.random() が最初しっくりこなかったが、これは0~1未満の数字をランダムに返す(0~0.99)ので、kind.length（今回6コ ※type.lengthも同様）と乗算してあげることで配列に格納されている（0~5の数字）を返してくれることになる！
例えば、乗算の結果がそれぞれkind[2]、type[0]の場合は、「温厚な泥棒」という結果になる。
※Math.floorは小数点以下を切り捨てる処理

ちなみに僕の診断結果は、
yabikuさんは「怠け者のプログラマー」です！
とのこと、、、そんなに怠け者じゃないけどな〜

【デモ】
http://341552227d92946d.main.jp/20160507sample/sample.html

【参考サイト】
http://dotinstall.com/lessons/shindan_js_v2/50103