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


はじめに

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

ドキュメントの確認

JQueryのAutocomplete Widgetの中にあった、

OptionsのSOURCEの中に、

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

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

(例)

var test = function( a ) { return(a + 1) };
function run( func ) {
 func( 9 );
}
run( test ); => 10)

① 一行目で関数をtestという変数に代入。
rubyで同じ様にtestという関数を定義すると。

def test(a)
   return a+1
end

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

変数化について

上の、

var test = function( a ) { return(a + 1) };

の部分は関数を変数に代入しており、
変数化と言われる。

run( function(a) { return(a + 1) } )

というふうに変数化しなくても書ける。

無名関数式について

var test = function( a ) { return(a + 1) };

更に基本的な所では、
上の式では、代入されている関数に名前が付いていない事から、
無名(匿名)関数式となる。

var test = function plisOne( a ) { return(a + 1) };

このように、関数名をつけることもできる。

この機会に、Javascriptの関数の命名規則についてもこちらを参考に学んだ。
関数の命名規則

  • JavaScriptの予約語(「var」「if」「for」「function」など)は、使えない。
  • 同一スコープの関数名や変数名と、同じ名前は使えない。
  • 関数名は、大文字と小文字を区別する。funcnameとFUNCNAMEは、別々 の関数であると判断される。
  • 関数名の一文字目は、半角の英字、アンダースコア_、ドル記号$のいづれかを使う。
  • 関数名の二文字目以降目は、半角の英数字、アンダースコア_、ドル>記号$を使える。
  • Unicodeの文字も使えるので、日本語も関数名に使えないことはないが、私なら使わない。

特に注意すべき点は4つ。

  • JavaScriptの予約語(「var」「if」「for」「function」など)は、使えない。
  • 同一スコープの関数名や変数名と、同じ名前は使えない。
  • アンダースコア_とドル記号$以外の記号は使えない。
  • 関数名の一文字目に、数字は使えない。

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

他の参考にさせて頂いた記事

-Autocomplete | jQuery UI 1.10 日本語リファレンス | js STUDIO

終わりに。

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