【JavaScript】JQuery UIのautocompleteとコールバックについて（1/2）

#はじめに
jQuery UI のウィジェット、オートコンプリートの中で行われている処理を把握したいと思い、オプションである`source`について調べたので、その記録。
コールバックについて調べる中で長くなっしまったので2つに分割した。

#ドキュメントの確認
JQueryの[Autocomplete Widget](https://api.jqueryui.com/autocomplete/#option-source)の中にあった、
<img width="726" alt="スクリーンショット 2020-05-09 17.47.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597926/d79809d0-d142-c6f1-6d8a-8816e095a3f4.png">

OptionsのSOURCEの中に、
<img width="597" alt="スクリーンショット 2020-05-09 17.48.35.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/597926/38866b1d-a14e-7db7-1975-2092ad035570.png">

Array, String, Functionがあり、今回自分が使っていて確認したいのは、
`Function`である。

#Function
順番に内容を確認していく。
> Function: The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete, including JSONP. The callback gets two arguments:

>3 番目のバリエーションであるコールバックは、最も柔軟性が高く、JSONP を含むあらゆるデータソースをオートコンプリートに接続するために使用できます。コールバックは 2 つの引数を取得します。

コールバック、、？
##コールバックについて
[JavaScriptの「コールバック関数」とは一体なんなのか](https://sbfl.net/blog/2019/02/08/javascript-callback-func/)
こちらを参考にさせて頂く。
前提として、
・JavaScriptにおいては「関数」を変数に突っ込める。
・JavaScriptでは「関数」も「値」
・JavaScriptにおいて関数は第1級オブジェクトであり、数値や文字列のような、変数に割り当てられたり、なんらかの計算処理ができたりといった、プログラミングの基本機能が使える対象のことを指す。
とあった。
（こちらの記事は分かりやすい上にすごく面白くて、一箇所ひとりで爆笑してしまいました。学びに笑いにありがとうございます。）

そして、これらのことを踏まえた上で、他の記事等も読んだ結果、コールバック関数は、
**ある関数にパラメータ（引数）として渡される関数**であることがわかった。

（例）

```javascript
var test = function( a ) { return(a + 1) };
function run( func ) {
 func( 9 );
}
run( test ); => 10)
```
① 一行目で関数を`test`という変数に代入。
rubyで同じ様に`test`という関数を定義すると。

```ruby
def test(a)
   return a+1
end
```
このような形になる。
② 2〜4行目は引数に関数を受けて、それを実行する。
③ 5行目で、関数が代入された`test`を実行、
④ 引数に9が渡されそれに1を足して、10が出力返される。


##変数化について
上の、

```javascript
var test = function( a ) { return(a + 1) };
```
の部分は関数を変数に代入しており、
**変数化**と言われる。

```javascript
run( function(a) { return(a + 1) } )
```
というふうに変数化しなくても書ける。

##無名関数式について
```javascript
var test = function( a ) { return(a + 1) };
```
更に基本的な所では、
上の式では、代入されている関数に名前が付いていない事から、
**無名（匿名）関数式**となる。

```javascript
var test = function plisOne( a ) { return(a + 1) };
```
このように、関数名をつけることもできる。

この機会に、Javascriptの関数の命名規則についてもこちらを参考に学んだ。
[関数の命名規則](http://alphasis.info/2013/02/javascript-user-defined-functions-name/)
> * JavaScriptの予約語（「var」「if」「for」「function」など）は、使えない。
>* 同一スコープの関数名や変数名と、同じ名前は使えない。
>* 関数名は、大文字と小文字を区別する。funcnameとFUNCNAMEは、別々 の関数であると判断される。
>* 関数名の一文字目は、半角の英字、アンダースコア_、ドル記号$のいづれかを使う。
>* 関数名の二文字目以降目は、半角の英数字、アンダースコア_、ドル>記号$を使える。
>* Unicodeの文字も使えるので、日本語も関数名に使えないことはないが、私なら使わない。

**特に注意すべき点は４つ。**
>* JavaScriptの予約語（「var」「if」「for」「function」など）は、使えない。
>* 同一スコープの関数名や変数名と、同じ名前は使えない。
>* アンダースコア_とドル記号$以外の記号は使えない。
>* 関数名の一文字目に、数字は使えない。


コールバックについて調べることで長くなったので、一旦ここまでにして、
本題である、jQuery UIのオートコンプリートのオプションである`source`については、続きを調べていく中で、またまとめて投稿したいと思う。

###他の参考にさせて頂いた記事
-[Autocomplete | jQuery UI 1.10 日本語リファレンス | js STUDIO](http://js.studio-kingdom.com/jqueryui/widgets/autocomplete)


#終わりに。
最後まで読んで頂きありがとうございます:bow_tone1:
転職の為、未経験の状態からRailsを学習しております。正しい知識を着実に身に着け、実力のあるエンジニアになりたいと考えています。継続して投稿していく中で、その為のインプットも必然的に増え、成長に繋がるかと考えています。
今現在、初心者だからといって言い訳はできないですが、投稿の内容に間違っているところや、付け加えるべきところが多々あるかと思いますので、ご指摘頂けると幸いです。この記事を読んで下さりありがとうございました。