実現したいこと
JavascriptのAjaxを使ったコードを理解できる様になりたい
前提
会社の研修カリキュラムでAjaxの課題に取り組んでいます。
国立情報学研究所(NII)が提供しているAPIを使用して、全国各地の大学図書館等約1200館が所有す
る、図書情報の検索する機能を実装するという課題です。
コードが複雑すぎて意味が分からないので助けて欲しいです。
大変お手数ですがアドバイスやヒントなどお願い致します。
1.解答コードを添付しますので
それぞれのコードがどういう仕組みで何をしているのか
解説して頂きたいです。
2.変数a~fまでありますが
どのような変数名を付けるべきなのか確認したいです。
3.c.title ? c.title : "\u30bf\u30a4\u30c8\u30eb\u4e0d\u660e"の部分など三項演算子で書かれている部分をif文に直すにはどうしたら良いか確認したいです。
該当のソースコード
var
1$jscomp.scope = {}; 2$jscomp.createTemplateTagFirstArg = function (a) { return a.raw = a }; 3$jscomp.createTemplateTagFirstArgWithRaw = function (a, d) { a.raw = d; 4 return a }; 5 6$(function () { 7 function a(e) { 8 $(".message").remove(); 9 let b; 10 let messageLength = 0; 11 12 if(null == (b = e[0].items)) { 13 messageLength = void 0; 14 console.log("0です"); 15 } else { 16 messageLength = b.length; 17 console.log("b.Lengthです"); 18 } 19 20 if(0 < messageLength) { 21 $.each(e[0].items, function (h, c) { 22 let g = '<li class="lists-item"><div class="list-inner"><p>\u30bf\u30a4\u30c8\u30eb\uff1a' + ((c.title ? c.title : "\u30bf\u30a4\u30c8\u30eb\u4e0d\u660e") + "</p><p>\u4f5c\u8005\uff1a") + ((c["dc:creator"] ? c["dc:creator"] : "\u4f5c\u8005\u4e0d\u660e") + "</p><p>\u51fa\u7248\u793e\uff1a") + ((c["dc:publisher"] ? c["dc:publisher"][0] : "\u51fa\u7248\u793e\u4e0d\u660e") + '</p><a href="') + (c.link["@id"] +'" target="_blank">\u66f8\u7c4d\u60c5\u5831</a></div></li>'); 23 $(".lists").prepend(g)}) 24 } else { 25 $(".lists").before('<div class="message">\u691c\u7d22\u7d50\u679c\u304c\u898b\u3064\u304b\u308a\u307e\u305b\u3093\u3067\u3057\u305f\u3002<br>\u5225\u306e\u30ad\u30fc\u30ef\u30fc\u30c9\u3067\u691c\u7d22\u3057\u3066\u4e0b\u3055\u3044\u3002</div>')} 26 } 27 28let d = 1, f = ""; 29 $(".search-btn").on("click", function () {var e = $("#search-input").val(); 30 31 if(e !== f) { 32 (d = 1, $(".lists").empty(), f = e) 33 } else { 34 d++; 35 } 36 37 $.ajax({url: "https://ci.nii.ac.jp/books/opensearch/search?title=" + e + "&format=json&p=" + d + "&count=20", method: "GET"}).done(function (b) { a(b["@graph"]) }).fail(function (b) {$(".lists").empty(); 38 39 $(".message").remove(); 40 0 === b.status ? $(".lists").before('<div class="message">\u6b63\u5e38\u306b\u901a\u4fe1\u3067\u304d\u307e\u305b\u3093\u3067\u3057\u305f\u3002<br>\u30a4\u30f3\u30bf\u30fc\u30cd\u30c3\u30c8\u306e\u63a5\u7d9a\u306e\u78ba\u8a8d\u3092\u3057\u3066\u304f\u3060\u3055\u3044\u3002</div>') : 400 === b.status ? $(".lists").before('<div class="message">\u691c\u7d22\u30ad\u30fc\u30ef\u30fc\u30c9\u304c\u6709\u52b9\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<br>1\u6587\u5b57\u4ee5\u4e0a\u3067\u691c\u7d22\u3057\u3066\u4e0b\u3055\u3044\u3002</div>') :$(".lists").before('<div class="message">\u4e88\u671f\u305b\u306c\u30a8\u30e9\u30fc\u304c\u8d77\u304d\u307e\u3057\u305f\u3002<br>\u518d\u8aad\u307f\u8fbc\u307f\u3092\u884c\u3063\u3066\u304f\u3060\u3055\u3044\u3002</div>') 41 }) 42 }); 43 44 $(".reset-btn").on("click", function () { d = 1; 45 f = ""; 46 $(".lists").empty(); 47 $(".message").remove(); 48 $("#search-input").val("") }) 49});
試したこと
Ajaxとは何か、Ajaxの基本構文を調べました
補足情報(HTML)
<html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./css/reset.css"> <link rel="stylesheet" href="./css/base.css"> <link rel="stylesheet" href="./css/style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <header class="header"> <p>Search CiNii Book</p> </header> <main class="main"> <section class="search-area"> <input id="search-input" type="text" placeholder="検索ワード"> <button class="search-btn btn">検索</button> <button class="reset-btn btn">リセット</button> </section> <section class="list-area"> <div class="inner"> <ul class="lists"></ul> </div> </section> <script src="./js/app.js"></script> </main> </body> </html>
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
下記のような質問は推奨されていません。
- 質問になっていない投稿
- スパムや攻撃的な表現を用いた投稿
適切な質問に修正を依頼しましょう。
こちらの質問が複数のユーザーから「調査したこと・試したことが記載されていない質問」という指摘を受けました。
回答2件
0
コメントにすべき内容ですが、マークダウンを使いたいので回答として投稿します。
関数の範囲は合っています。
もう一つ44行目から48行目にかけて関数がありますが、これは書き忘れということでよいでしょう。
元のソースでは読みにくいので、勝手ではありますが書き直しました。
・全体的に整形ツールを使って整形しました。
・Unicodeエスケープシーケンスは全角文字に置換しました。
・関数名と変数名は最初の回答の通りに変更しました。
・エラー修正のため1行目の記述を追加しました。
javascript
1$jscomp = {} 2$jscomp.scope = {} 3$jscomp.createTemplateTagFirstArg = function (a) { 4 return (a.raw = a) 5} 6$jscomp.createTemplateTagFirstArgWithRaw = function (a, d) { 7 a.raw = d 8 return a 9} 10 11$(function () { 12 function showResult(result) { 13 $('.message').remove() 14 let firstItem 15 let messageLength = 0 16 17 if (null == (firstItem = result[0].items)) { 18 messageLength = void 0 19 console.log('0です') 20 } else { 21 messageLength = firstItem.length 22 console.log('firstItem.Lengthです') 23 } 24 25 if (0 < messageLength) { 26 $.each(result[0].items, function (index, item) { 27 let html = 28 '<li class="lists-item"><div class="list-inner"><p>タイトル:' + 29 ((item.title ? item.title : 'タイトル不明') + '</p><p>作者:') + 30 ((item['dc:creator'] ? item['dc:creator'] : '作者不明') + 31 '</p><p>出版社:') + 32 ((item['dc:publisher'] ? item['dc:publisher'][0] : '出版社不明') + '</p><a href="') + 33 (item.link['@id'] + '" target="_blank">書籍情報</a></div></li>') 34 $('.lists').prepend(html) 35 }) 36 } else { 37 $('.lists').before( 38 '<div class="message">検索結果が見つかりませんでした。<br>別のキーワードで検索して下さい。</div>' 39 ) 40 } 41 } 42 43 let page = 1, 44 lastSearchInput = '' 45 $('.search-btn').on('click', function () { 46 var currentSearchInput = $('#search-input').val() 47 48 if (currentSearchInput !== lastSearchInput) { 49 ;(page = 1), $('.lists').empty(), (lastSearchInput = currentSearchInput) 50 } else { 51 page++ 52 } 53 54 $.ajax({ 55 url: 'https://ci.nii.ac.jp/books/opensearch/search?title=' + currentSearchInput + '&format=json&p=' + page + '&count=20', 56 method: 'GET', 57 }) 58 .done(function (data) { 59 showResult(data['@graph']) 60 }) 61 .fail(function (jqXHR) { 62 $('.lists').empty() 63 64 $('.message').remove() 65 0 === jqXHR.status 66 ? $('.lists').before( 67 '<div class="message">正常に通信できませんでした。<br>インターネットの接続の確認をしてください。</div>' 68 ) 69 : 400 === jqXHR.status 70 ? $('.lists').before( 71 '<div class="message">検索キーワードが有効ではありません。<br>1文字以上で検索して下さい。</div>' 72 ) 73 : $('.lists').before( 74 '<div class="message">予期せぬエラーが起きました。<br>再読み込みを行ってください。</div>' 75 ) 76 }) 77 }) 78 79 $('.reset-btn').on('click', function () { 80 page = 1 81 lastSearchInput = '' 82 $('.lists').empty() 83 $('.message').remove() 84 $('#search-input').val('') 85 }) 86})
これだけでもだいぶ見通しが良くなると思います。
以後、整形済みソースの行番号で話したいと思います。
>・search-btnのクリックイベント、通信成功処理、通信失敗処理、リセット処理の
順番に並べて下さい
→それぞれ何行目から始まる関数かはわかりますか?
並べ替えをするには新たに関数として切り分ける必要のある処理がありますが、どれかわかりますか?
改行についてはさすがに自力でやってほしいです。
なお、このプログラムのエッセンスは次のようになります。
javascript
1$(function () { 2 function showResult(result) { 3 $.each(result[0].items, function (index, item) { 4 let html = 'タイトル:' + item.title + '<br />' 5 $('.lists').prepend(html) 6 }) 7 } 8 9 $.ajax({ 10 url: 'https://ci.nii.ac.jp/books/opensearch/search?title=あ&format=json&p=1&count=20', 11 method: 'GET', 12 }) 13 .done(function (data) { 14 showResult(data['@graph']) 15 }) 16})
このエッセンスはどのくらい理解できるでしょうか。
投稿2023/02/24 01:44
総合スコア22
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
回答へのコメント
0
ベストアンサー
4行目まで : $jscomp はIEに対応するためのものらしいですが、詳細は分かりません。
7行目の a : 検索結果を表示する関数です。名前は showResult など。
7行目の e : 検索結果を受け取る引数です。名前は result など。
9行目の b : 検索結果の最初の項目を代入する変数です。名前は firstItem など。
21行目の h : 検索結果の各項目の位置を受け取る引数です。名前は index など。
21行目の c : 検索結果の各項目を受け取る引数です。名前は item など。
22行目の g : c を元に生成した HTML を代入する変数です。名前は html など。
28行目の d : 同じ検索ワードで検索した回数を数える変数です。API のページパラメータとして使用されます。名前は page など。
28行目の f : 最後に検索したときの検索ワードを保存する変数です。名前は lastSearchInput など。
29行目の e : 現在の検索ワードを代入する変数です。名前は currentSearchInput など。
37行目の done 内の b : API で取得したデータを受け取る引数です。名前は data など。
37行目の fail 内の b : API がエラーになった場合にエラーの内容などを受け取る引数です。名前は jqXHR など。
3項演算子を if 文に書き換えるのは次のようにします。
JavaScript
1let g = '<li class="lists-item"><div class="list-inner"><p>\u30bf\u30a4\u30c8\u30eb\uff1a'; 2if (c.title) { 3 g += c.title; 4} else { 5 g += "\u30bf\u30a4\u30c8\u30eb\u4e0d\u660e"; 6} 7g += "</p><p>\u4f5c\u8005\uff1a"; 8if (c['dc:creator']) { 9...
他にわからないところがあればどうぞ。
気が向いたら回答するかもしれません。
投稿2023/02/21 05:58
総合スコア22
下記のような回答は推奨されていません。
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
このような回答には修正を依頼しましょう。
回答へのコメント
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
関連した質問
Q&A
解決済
RubyでAPIを叩いた結果がUTF-8の文字コードになってしまう
回答2
クリップ1
更新
2015/10/04
Q&A
解決済
EXCEL VBAからWordPressのRESTAPIを使用して投稿したい
回答1
クリップ0
更新
2020/09/03
Q&A
解決済
web apiの使い方の説明がcurlコマンドのみで、それをlaravelで実装したいがやり方がわからない。
回答2
クリップ0
更新
2020/11/07
Q&A
受付中
Angularでサーバーからデータを取得してくる処理。No overload matches this call.
回答1
クリップ0
更新
2022/01/12
Q&A
受付中
チェックボックスにチェックしても送信ボタンがグレーのまま押せない
回答1
クリップ0
更新
2022/01/12
Q&A
解決済
【お問い合わせフォーム】未入力の項目を確認画面で非表示にしたい
回答1
クリップ1
更新
2021/11/16
Q&A
解決済
Javascript(jQuery)のAjaxを使った課題についてサポートお願い致します。
回答2
クリップ2
更新
2023/04/14
Q&A
解決済
HTTPレスポンス内に含まれる日本語がUnicode文字になる。
回答1
クリップ0
更新
2022/05/06
同じタグがついた質問を見る
JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。
jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。
Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。