JavaScript関連のことを調べてみた2020年05月16日

【Rails】remote:true形式でAjax通信を行う(ブックマーク機能のajax化)

## Ajaxとは
**Ajax**とは、Webブラウザ上で`非同期通信`を行い、ページ全体の再読み込み無しにページを更新する方法のことです。

`同期通信`だと、クライアントはwebページ全体の情報(HTMLとそれに紐づくcss,js,imageなどのアセット)をサーバーから受け取って、ページを一から作り直します。
例えばページの一部を変更するだけなのに、他の部分も組み立て直すってことはその分ページの表示に時間がかかっちゃいます。(サーバー側の処理を待つことになる)

しかも、この**リクエスト〜レスポンス**の処理を行っている間は、他の処理を行わずに**サーバーからレスポンスが返ってくるのを待ち続ける**必要があります(よくあるのが画面が真っ白になって何もできない状態)。

そこでAjaxのような非同期通信を使用すれば、**ページ遷移無しに、高速で更新処理**を行い、尚且つ、**リクエスト〜レスポンスの処理を行っている間も他の処理が行えます**。

この便利なAjaxによる非同期通信を行う方法としては、
**①remote:true形式
②ajax関数を使った形式**
の2パタ

高階関数とコールバック関数

この記事はコールバック関数の以下の内容について解説します。

+ 高階関数とは
+ コールバック関数とは
+ コールバック関数の例
+ forEachメソッドをコールバック関数で実装してみる
+ まとめ

#高階関数
コールバック関数に入る前に、高階関数について説明します。
高階関数とは、関数を引数にとる関数の事を指します。
以下が例です。

“`javascript:sample
function hello(){
console.log(‘hello’);
}

function hai(callback){
callback();
}

hi(hello);
“`
hi関数はhello関数を引数としているので、高階関数となります。

上の例がどのような流れなのかについて説明します。

1. hi(hello);により、hi関数が実行
2. hi関数内のcallback();より、hello関数が実行
3. hello関数内のconsole.log(‘hello’);が実行
4. hi関数に戻るが何も処理がないのでそのまま終了

次にコールバック関数について説明します。

JavaScript 学習記録　＃1　Dateオブジェクト

わかりやすく日時を表示する方法:point_up:コードの書き方

①プログラムを書く準備

“`javascript:date.js

最終アクセス日時：

“`
最終アクセス日時：

②「年/月/日　時：分」のかたちで表示
　そのためには「年、月、日、時、日、分」を個別に取得する必要がある。

“`javascript:date.js