AjaxとJSONついて - Computer programming and health

AjaxとJSONついて | Here, Ajax and JSON are explained.

ジャイアンツ　VS　タイガース

空席状況を確認 | Check availability
ヤクルト　VS　ドラゴンズ

空席状況を確認 | Check availability
ベイスターズ　VS　カープ

空席状況を確認 | Check availability

HTML <section>
<ul class=”list”>
<li class=”game” id=”gt”>
<h2>ジャイアンツ　VS　タイガース</h2>
<p class=”check”>空席状況を確認 | Check availability</p>
</li>
<li class=”game” id=”yd”>
<h2>ヤクルト　VS　ドラゴンズ</h2>
<p class=”check”>空席状況を確認 | Check availability</p>
</li>
<li class=”game” id=”bc”>
<h2>ベイスターズ　VS　カープ</h2>
<p class=”check”>空席状況を確認 | Check availability</p>
</li>
</ul>
</section>

CSS .list {
overflow: hidden;
margin: 0;
padding: 0;
list-style-type: none;
}
.list h2 {
margin: 0 0 2em 0;
font-size: 16px;
text-align: center;
}
.game {
float: left;
margin: 10px 10px 10px 0;
border: 1px solid #23628f;
padding: 4px;
width:40%;
}
.check {
margin: 0;
padding: 8px;
font-size: 12px;
color:#ffffff ;
background-color: #23628f;
text-align: center;
cursor: pointer;
}
.red {
background-color: red;
}
.green {
background-color: green;
}

JavaScript <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js”></script>
<script>
$(document).ready(function(){
$.ajax({url:’data.json’,dataType:’json’})
.done(function(data){
$(data).each(function(){
if(this.crowded === ‘yes’){
var idName = ‘#’ + this.id;
$(idName).find(‘.check’).addClass(‘crowded’);
}
})
})
.fail(function(){
window.alert(‘読み込みエラー | Read error’)
});
// クリックされたら空き状況を表示
$(‘.check’).on(‘click’,function(){
if($(this).hasClass(‘crowded’)){
$(this).text(‘残席わずか | Only a few left’).addClass(‘red’);
}else {
$(this).text(‘お席あります | There are seats’).addClass(‘green’)
}
});
});
</script>

data.json [
{“id”:”gt”,”crowded”:”yes”},
{“id”:”yd”,”crowded”:”no”},
{“id”:”bc”,”crowded”:”no”}
]

解説

Ajaxでのデータファイルの読み込みにおいて、ブラウザによってはローカル環境で動作しない場合があります。私もGoogle Chromeを使いましたがうまくいきませんでした。そんな時は作成したデータをwebサーバーにアップロードして確認してみてください。私もアップロードしたらうまくいきました。

Ajaxの基本の形 | Basic form of Ajax $.ajax({url: ‘data.json, dataType: ‘json’})
.done(function(data){
データがダウンロードできたときの処理
})
.fail(function(){
データがダウンロードできなかったときの処理
});

「$.ajax({url: ‘data.json, dataType: ‘json’})」→ urlにはダウンロードしたいデータのURLを指定します。今回のサンプルでは「data.json」としています。dataTypeプロパティにはダウンロードするデータの形式を指定します。今回はjson形式なので’json’としてます。

「.done(function(data){～」 → このファンクションには、パラメータとしてダウンロードされたデータが渡されるので、これを「data」に代入しています。

「$(data).each(function(){ → eachメソッドは$()で取得したHTML要素や配列の項目１つひとつに対して()内のファンクションをくり返し実行します。

「 if(this.crowded === ‘yes’){ 」 →　thisはJsonファイルでの配列の項目を示しています。crowdedプロパティの値がyesのとき｛～｝の処理が実行されます。

「 var idName = ‘#’ + this.id;」 → 変数idNameを定義して、そこに「#」とidプロパティの値を文字連結したものを代入します。たとえば最初の繰り返しなら、 {“id”:”gt”,”crowded”:”yes”},なので変数idNameには「#gt」という文字列が代入されます。

「 $(idName).find(‘.check’).addClass(‘crowded’);」 → findメソッドは$()で取得した要素に含まれる子孫要素のうち、()内のセレクタに当てはまる要素を取得します。(.check)の要素を取得して、クラス「crowded」を追加してます。ということで、 $(idName)は最初ならば「 <li class=”game” id=”gt”>」でのgtを取得します。そして.find(‘.check’)では「 <p class=”check”>空席状況を確認</p>」にて’.check’になっているので取得されています。.addClass(‘crowded’)では「 <p class=”check crowded”>空席状況を確認</p>」とクラスを追加することになります。

クリックされたときのボタンの色を変化させる処理

「<p class=”check”>空席状況を確認</p>」がクリックされたときの処理については、「$(‘.check’).on(‘click’,function(){～」が示してます。

「 if($(this).hasClass(‘crowded’)){～」 → この<p>のclassに「crowded」が含まれていたらということを示しています

「 $(this).text(‘残席わずか’).addClass(‘red’);」 → テキストを「残席わずか」と変更し、また.addClass(‘red’)としておりCSSでの「.red {background-color: red; }」にて赤色に変更してます

この本から引用、参考にして学び、完成させることができました。しかし、ここではプログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT）
その点、この本では丁寧な解説が載っていますので、解説とともにコードを書き、完成させればより深く学ぶことができます(^.^)、実際、初心者の私でもわかりやすかったです。身に付け消えないスキルが3,000円弱ならコスパよく、買っておいてよかったと満足してます。

わからないことはプロフェッショナルから学ぶのが一番

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。