Javascript（jQuery）のAjaxを使った課題についてサポートお願い致します。

実現したいこと

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>

int32_t

2023/02/20 22:03 編集

> 解説して頂きたいです。けっこう過大な要求です。質問者さんの理解度が不明なので、どこまで解説すべきか不明です。すべてがわからないならすべてを解説する必要があり、そのような状態なら解説しても理解できない危惧があります。聞きたいことが3つある場合、質問を3つ作るほうがおすすめです。回答しやすくなります。

m.ts10806

2023/02/20 22:10

課題であれば出題者に確認すべきで、出題者の意図を考慮しない赤の他人の解説を受けたところで課題の達成にはなり得ないかと。

yambejp

2023/02/21 00:30

$jscompが宣言されてないようなので動作しないのでは？

行動規範の内容に同意します

回答2件

コメントにすべき内容ですが、マークダウンを使いたいので回答として投稿します。

関数の範囲は合っています。
もう一つ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

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

実現したいこと

前提

該当のソースコード

試したこと

補足情報（HTML）

関連した質問