最下段までスクロールすると追加でコンテンツを読み込んで表示する感じの挙動の実装

します。

laravel5.5、php7系を利用しています。

# やりたいことは
ajaxでapiを叩いてjson（配列）を取得し、その情報を利用してdomを追加していきます。

# 実装
## api
**json形式の文字列をreturnする関数と、その関数を呼ぶルーティングを作るだけ**です。

web.phpでルーティングして、Controllerに関数を追加します。
ルーティングはこれを参考にしました。

- [WEB APIのURL設計のトレンドはこれだ！WEB APIのURL設計まとめ | 三度の飯とエレクトロン](http://blog.katty.in/2992)

最後の特殊なやつ？　で実装しました。

```php:web.php
Route::get('api/v1/hoges/find/{page}', 'HogeController@getHoge');

```

コントローラーの方はこんな感じ。

```php:処理イメージ
public function getHoge($page) {
  $count = getenv('HOGE_COUNT');
  $hoge = HOGE::OrderByDesc('id')
    ->skip(($page - 1) * $count)
    ->take($count)
    ->get(['id', 'Hoge', 'Fuga']);

  // json形式の文字列に変換してreturn
  return json_encode($hoge);
}
```

ルーティングからpageを受け取って、一度に取得する行をcountに設定します。
で、ページ数ぶんの行を読み飛ばして、対応する行だけを返します。

page=1, count=5 なら 1 ~ 5 行目
page=2, count=5 なら 6 ~ 10 行目
page=2, count=10 なら 11 ~ 20 行目

みたいな。
もっとスマートなやり方があるような気しかしません。

ともあれ意外に簡単に実装できました。
作成したurlにブラウザでアクセスすると、確かにただの文字列が表示されます。


## ajax
- [画面スクロールでコンテンツを追加読込するjavascript -knockout編- - kikki's tech note](http://kikki.hatenablog.com/entry/2015/06/26/105156)
- [JSON.parse 関数 (JavaScript)](https://msdn.microsoft.com/ja-jp/library/cc836466(v=vs.94).aspx)

こちらを参考にしました。
ajaxのtypeをGETにして、urlは上記apiを指定します。
dataはPOSTのときのパラメータっぽいので外しました。

主な変更点はdoneの中身ですね。

```javascript:doneの中身
          result = JSON.parse(result);
          $(result).each(function (index, element) {
            $('.hoge').append(
                    '<div>' + element.Hoge + '</div>' +
                    '<div>' + element.Fuga + '</div>' +
                    '<div><a href="hoges/"' + element.id + '"><img src="/img/img.jpg" /></a></div>'
            );
          });
          loadPage++;
          skipFlg = true;

```

jsonが返ってくるので、`JSON.Parse`でオブジェクトに変換してループさせます。



### ついでにローディングを表示
apiを呼んで表示するまでに微妙に時間がかかるので、ローディングしていることがわかる何かを表示します。
（秒単位で時間がかかるので、まず処理速度をなんとかすべきか……とも思いつつ）

- [jQuery samples - Ajax時にローディングを表示 - to-R](http://blog.webcreativepark.net/2015/12/21-204123.html)

`<div class="loading is-hide">〜〜</div>`の`is-hide`を外したり付けなおしたりします。
div要素とcssを追加したところ、すんなりと動いてくれました。

```javascript:処理イメージ
        $.ajax({
          type: "GET",
          contentType: "application/json",
          // コンテンツ読み込み先URL
          url: "/api/v1/hoges/find/" + loadPage,
          beforeSend: function(){
            $('.loading').removeClass("is-hide"); //ローディングを表示
          },
        }).done(function (result) {
          result = JSON.parse(result);
          $(result).each(function (index, element) {
            $('.hoge').append(
                    '<div>' + element.Hoge + '</div>' +
                    '<div>' + element.Fuga + '</div>' +
                    '<div><a href="hoges/"' + element.id + '"><img src="/img/img.jpg" /></a></div>'
            );
          });
          $('.loading').addClass("is-hide"); //ローディングを非表示
          loadPage++;
          skipFlg = false;
        }).fail(function (ex) {

        ...

```

遅延させる方法については、もともと重いので不要かなと思い実施していません。


# 挫折ポイント
## api
### コントローラーとか関数名ってどうすれば……？
挫折はしてないんですが数秒ほど悩みました。

別途コントローラーを作成すべきなんですかね。
あと関数名ってどうすれば。

わからーないーわからーないーままでー

## ajax
### おそらくif文の条件が間違ってる
skipFlgがfalseから始まるので、`! skipFlg`にしないと動きません。


### $.ajaxがないとか言われた
jQueryのライブラリがスリム版だとajaxが入ってないそうです。

スリム版ではない短縮版を入れたら動きました。

## ローディング
### $loadingってなんだよ！ってなった
よく見たら最初に`var $loading = $(".loading");`とかやってました。

目と頭が悪かったです……。


# まとめ
ajaxでapi叩いてページ遷移なしにローディングを実現できました。

わーい。

今回使ったパラメータ以外にもいろいろ使えるようなので、何があるのか知りたい……POSTとかちょっと何するかイメージできてないレベル……。
といいつつ必要ないので勉強は後回しですが。

ajaxという技術が使われてたサイトの保守とかいままでけっこうやってたんですけど、こうして触ったのは初めて、へーこいつがあの噂に名高いアレかーってなってました。

そもそもjQueryに入ってるライブラリってことを今回初めて知ったという……。

知識が貧弱すぎてちょいちょいこいつ大丈夫かなって我ながら心配になります。