Clever Geek Handbook

JavaScriptプログラマー向けのjQuery

注：以下は記事「JavaScriptプログラマー向けのjQuery」の翻訳です。著者はこのライブラリーについて、主に上級プログラマーに焦点を当てて意見を述べ、その使用の数十の例を提供します。



2006年1月にjQueryがリリースされたとき、「もう1つの美しいおもちゃ」と思いました。 もちろん、CSSセレクターを選択することはエレガントなアイデアでした（詳細については、私の投稿のgetElementsBySelectorを参照してください）が、変換チェーンの使用は少し複雑に見え、ライブラリ自体がすべての可能なケースをカバーしているようには見えませんでした。 私は、jQueryを一時的な通過ソリューションとしてのみ見なしていました。



ほんの数ヵ月後、私は彼女と私がいかに間違っているかを認識しました。 jQueryは単なるエンジニアリングの一部です。 日常的な機能のかなり広い範囲を巧みにカバーすると同時に、他の機能を追加できる拡張機能のための便利なAPIを提供します。 抽象性はカーネルレベルで組み込まれています（DOM要素の選択について話している）から、そこから最大の利益を引き出します。 そして最も重要なことは、このライブラリを使用することは、優れたプログラミングスタイルに従うことを意味し、JavaScriptコードの他の部分とうまく調和します。



最新のjQueryレビューのほとんどは、デザイナーと経験の浅い開発者に焦点を当てています。 経験豊富なプログラマーにも必要な理由を説明しようと思います。







名前空間（ namespacing ）





将来の参照用に適切なJavaScriptコードを作成するための鍵は、名前空間を慎重に管理することです。 JavaScriptには単一のグローバル名前空間（ window



オブジェクト）があり、多くのプログラマー（および一部のライブラリー）が不必要にそれを詰まらせます。 グローバル変数は悪です！ より慎重な開発者は、 モジュラーモデルなどのいくつかの方法を使用して、このスペースへの侵入を最小限に抑えます。



jQueryは、1つのオブジェクトをグローバル名前空間に導入します-jQuery関数/オブジェクト。 それ以外は、直接jQueryプロパティか、jQuery関数呼び出しによって返されるオブジェクトのメソッドです。



言語の改善はどうですか？ ほとんどのライブラリは、表示、フィルタリング、およびトリミングの機能を提供しますが、残念ながら、ほとんどのブラウザに含まれているJavaScriptエンジンでは使用できません。 一部のライブラリは、組み込みのJavaScriptクラスStringおよびArrayを直接拡張しますが、完全に安全ではありません。 String.prototypeとArray.prototypeは個別のグローバル名前空間であり、プロパティを追加すると、異なるコンテキストで同じ変数名を使用することに伴う衝突のリスクが伴います。



JQueryにはJavaScriptを拡張する多数の関数がありますが、それぞれはjQueryオブジェクトのプロパティとしてのみ使用できます： jQuery.each



、 jQuery.extend



、 jQuery.grep



、 jQuery.map



、 jQuery.merge



、およびjQuery.trim



。 定義上、これらは他のコードと競合しません。



悪名高い関数$







jQueryがグローバルネームスペースに1文字しか入力していないと述べたとき、私は完全に正直ではありませんでした。実際には$



もあります。これはjQueryの省略形として使用されます。 これは非常にソフトに行われます。古い$



関数が再び必要な場合（たとえば、Prototypeに基づいたコードがある場合）、 jQuery.noConflict()



を呼び出して古い$



関数を返すことができます。



グローバルな$



関数の他の使用のために衝突を恐れずに$



関数の使用をjQueryに制限する必要がある場合、jQueryのドキュメントには次のメソッドがあります。 



 （関数（$）{
     //このブロック内で、<code> $ </ code>はjQueryを参照します
     //エレガントですよね？
 }）（jQuery）;




最初は、jQueryでの$



の広範な使用は、トリッキーなトリックにすぎないと見ていました。 しかし、jQueryのコンテキストでのみ考慮すると、このソリューションは非常に柔軟に見えるので、自分のコードで簡単に$



を使用します。



アイテムを選択





各jQueryステートメントは、1つ以上のDOMノードを選択することから始まります。 jQuery セレクターの構文 （このライブラリの内部言語）は、CSS 1、2仕様、CSS 3のビット、小さなXPath、および他のいくつかの拡張機能の興味深いハイブリッドです。 詳細には触れませんが、いくつかの有用な例を示します。





jQuery('table.orders tr:odd')





class="orders"



テーブルのすべての偶数行

jQuery('a[@href^="http://"]')





すべての外部リンク（ http://



始まるものhttp://



）

jQuery('p[a]')





少なくとも1つのリンクを持つすべての段落





上記の中で最も興味深いのは:visible



および:odd



です。これらはjQueryに固有です。 属性選択では@



記号を使用することにも注意してください。 @



記号はCSS 2よりもXPathです。



セレクターの言語は非常に豊富で、正規表現に非常に似ているため、セレクターの学習に費やす時間は完全に報われます。



彼らと一緒に何かをする





jQueryセレクターが返すオブジェクトは、非常に興味深い獣です。 これはDOM要素のセットであり、配列のように動作します。 length



プロパティを持ち、要素はインデックスでアクセスでき、 Firebugはコンソールに表示されるときに配列と見なします。 これは美しい幻想に過ぎません。要素のコレクションは、実際には、既存のコレクションを選択、変更、または拡張するための多数のメソッドを持つjQueryオブジェクトです。



jQueryには3つの異なるカテゴリのメソッドがあります。前者はテンプレートに一致するすべての要素を操作し、後者は最初に見つかった要素から値を返し、3番目は選択自体を変更します。



利用可能なすべてのメソッドをリストするわけではありません（これはvisualjquery.comでも確認できます）が、いくつか例を挙げたいと思います。 Firebugがある場合は、自分で試すことができます。「jQueryの挿入」タブ（ javascript:void(function(){var s=document.createElement('script');s.src='http://code.jquery.com/jquery-1.1.2.js'; document.getElementsByTagName('head')[0].appendChild(s);}())



）任意のページのライブラリ自体をロードし、コード例を貼り付けますFirebugコンソールへ（ 注：Firebugなしでも可能です：指定されたリンクを使用してjQueryをダウンロードし、 javascript:



および最後のalert



を忘れずにブラウザーのアドレスバーの例を呼び出すだけです（戻り値がページに表示されないように） e） ）。







以下は、パターンから最初に見つかった要素から値を返すメソッドのいくつかの例です。







このようなメソッドの便利な対称性に注意してください：属性の設定（2つの引数を取る場合、または転送されるオブジェクトに複数のプロパティがある場合）と、これらの属性の値の読み取り（1つの引数のみが渡される場合）の両方に使用されます。 この対称性はjQueryライブラリ全体で使用されるため、APIを簡単に覚えることができます。



最後に、見つかった要素のセット全体を変更するいくつかのメソッドがあります。 それらの多くは、DOMツリーを介したナビゲーションも提供します。







コールチェーン





jQuery開発チームは、多くの場合、このライブラリの呼び出しチェーンのサポートについて自慢し、メインページで「jQueryはJavaScriptプログラミングスタイルを変更するように設計されています」などのステートメントに到達します。 正直なところ、個人的にはこの手法は将来への道ではなく、側枝であると感じていますが、jQueryを使用して呼び出しの長いチェーンを回避できることをお知らせできることを嬉しく思います。



要するに、チェーンはいくつかの興味深いトリックに使用できます。 DOM選択セットの使用に加えて、jQuery end()



メソッドを使用して、オブジェクトのスタック内を移動し、現在のコンテキストを終了できます。 これを説明するのは少し難しいですが、現在の（オブジェクト）コンテキストを変更するメソッド（例： children()



またはfilter()



）を使用する場合end()



少し後でend()



使用して前の選択に戻ることができます。 Jesse Skinnerは彼のチュートリアルでこの機能を使用する良い例を示しています。 



 $（「フォーム＃ログイン」）
     //フォーム内ですべての<code>ラベル</ code>をクラス<code>オプション</ code>で非表示にします
     .find（ 'label.optional'）。hide（）。end（）
     //フォームの<code> password </ code>タイプのすべてのフィールドに赤い境界線を追加します
     .find（ 'input：password'）。css（ 'border'、 '1px solid red'）。end（）
     //フォームの<code> submit </ code>イベントにハンドラーを追加します
     .submit（関数（）{
         return confirm（「本当にデータを送信しますか？」）;
     }）;




このすばらしい変換はすべて1行で完了します。 フォームを見つけ、その中のいくつかの要素を見つけ、それらに変更を適用し、フォームに戻り、 submit()



イベントハンドラーを追加します。



これは素晴らしいコンセプトですが、必要ない場合に強制的に使用することはありません。 いくつかのかなり雄弁な変数名を使用してコードを視覚的に壊すことができてうれしかったです。



DOMで操作する





JQueryには、DOMの一括操作のためのいくつかのメソッドがあります。 1つ目はやや予想外です。jQuery関数は、DOM要素に変換されるHTMLコードの一部を引数として取ることができます（実際には単なる文字列です）。 



 var div = jQuery（ '<div> Some text </ div>'）;




呼び出しチェーンを使用して、作成されたdiv



属性を追加できます。 



 var div = jQuery（ '<div> Some text </ div>'）.addClass（ 'inserted'）。attr（ 'id'、 'foo'）;




それをbody



タグに追加します： 



 div.appendTo（document.body）




または、セレクタを使用して既存のコードに挿入します。 



 div.prependTo（ 'div＃primary'）




イベントをキャッチ





すべてのJavaScriptライブラリには、イベントを処理するメソッドが必要です。jQueryも例外ではありません。 attr()



およびcss()



の場合のように、イベントのメソッドは2つの目的に使用できます。関数を引数として呼び出すとイベントハンドラーが割り当てられ、引数なしで呼び出すとこのイベントの発生がエミュレートされます。







同様の機能が他のブラウザイベントに使用されます： mouseover



、 keyup



など。 イベントハンドラが呼び出されると、 this



はこのイベントが発生させた要素を参照することに注意してください。 jQuery(this)



を使用することは、この要素のjQueryメソッドを呼び出す一般的な手法です。



いくつかのイベント関連の機能に特に言及する価値があります。 



 jQuery（ 'a'）。hover（function（）{
     jQuery（this）.css（ 'background-color'、 'orange'）;
 }、関数（）{
     jQuery（this）.css（ 'background-color'、 'white'）;
 }）;




hover()



は、2つのイベントonmouseover



およびonmouseout



略語です。 



 jQuery（ 'p'）。one（ 'click'、function（）{alert（jQuery（this）.html（））;}）;




one()



は、最初の呼び出し後に削除されるイベントハンドラを設定します。 上記の例では、段落は最初にクリックした後、その内容を全員に通知する必要があります。



jQueryは、 bind()



およびtrigger()



メソッド（ click()



などbind()



によるネイティブイベントもサポートしclick()



。 カスタムイベントは、 trigger()



呼び出しで配列を介して渡される引数を取ることができます。 



 jQuery（ドキュメント）.bind（ 'stuffHappened'、function（event、msg）{
     alert（「何が起こったのか」：+ msg）;
 }）;
 jQuery（ドキュメント）.trigger（ 'stuffHappened'、['Hello！']）;




控えめなプログラミング





このトピックは私にとても近いです。 私はまだ、スクリプトが無効になっている場合でも機能できるウェブアプリケーションが最適であり、これを達成するための最善の方法は控えめなJavaScriptであると考えています。ユーザーが起動します（詳細については、 目立たないプログラミングとHijaxを見つけることができます）。



JQueryはこのアプローチを強力にサポートしています。 最初に、ノードを選択するためのセレクターのパラダイムは、jQueryと控えめなプログラミングの両方の基本です。 第二に、jQueryは、さまざまなブラウザーの「DOMロード」イベントの操作に関するDean Edwardsの調査に基づいて、 window.onload問題のソリューションを提供します（ 注：この問題の詳細については、以前に公開した翻訳で確認できます ）。 DOMの準備ができたら、ハンドラー関数を設定できます。 



 jQuery（ドキュメント）.ready（関数（）{
    アラート（「DOMの準備ができました！」）;
 }）;




さらに、関数をjQuery（）に直接割り当てることにより、このエントリを短縮できます。 



 jQuery（関数（）{
    警告（「DOMの準備ができました！」）;
 }）;




jQueryとAJAX





JQueryには、大規模なライブラリで見た中で最高のAJAX APIがあります。 AJAX呼び出しの最も単純な形式は次のとおりです。 



 jQuery（ 'div＃intro'）。load（ '/ some / fragment.html'）;




/some/fragment.html



に対してGETリクエストを実行し、受け取ったdiv#intro



HTMLコードを/some/fragment.html



ます。



これを初めて見たとき、私はあまり感銘を受けませんでした。 ちょうどいいカットですが、たとえば、もっと複雑なものが必要な場合は、AJAXダウンロードインジケーターを表示しますか？ jQueryは、必要に応じて使用するための一連のネイティブイベント（ ajaxStart



、 ajaxComplete



、 ajaxError



など）を提供します。 このライブラリには、複雑なAJAX相互作用のためのより高度な低レベルAPIもあります。 



 jQuery.get（ '/ some / script.php'、{'name'： 'Simon'}、function（data）{
    アラート（「サーバーの応答：」+データ）;
 }）;  // /some/script.php?name=SimonへのGETリクエスト

 jQuery.post（ '/ some / script.php'、{'name'： 'Simon'}、function（data）{
    アラート（「サーバーの応答：」+データ）;
 }）;  // /some/script.phpへのPOSTリクエスト

 jQuery.getJSON（ '/ some.json'、function（json）{
     alert（ 'JSON発行：' + json.foo + '' + json.bar）;
 }）;  // /some.jsonからの応答をJSONとして返し、変換します

 jQuery.getScript（ '/ script.js'）;  // /script.jsおよびeval（）へのリクエストを取得




拡張機能





標準パッケージのこの一連の関数全体を考慮すると、jQueryの縮小版は20 KBしか必要とせず、アーカイブ（ .gz



）を使用する場合はさらに少ないことに注意してください。 この配信を超える追加機能は、既存のjQueryオブジェクトに新しいメソッドを追加（および実行）できる拡張機能を使用して編成できます。 必要に応じて、次のようなことができます。 



 jQuery（ 'p'）。bounceAroundTheScreenAndTurnGreen（）;




jQueryの拡張エンジンは、それらをシステムに追加するための文書化されたメソッドを提供します。 それらの使用の単純さと使いやすさは、そのような拡張の作者の大きなコミュニティを引き付けました。 拡張ディレクトリには、100以上の例があります。



もう1つの優れた機能は、独自のメソッドと同じ方法で独自のセレクターを追加できることです。 moreSelectors拡張機能は、 div:color(red)



などのメソッドを追加します。これは、たとえば、赤いテキストを持つすべてのdiv:color(red)



を選択します。



穴について一言





敬意を払ってjQueryを勉強したところ、1つの哲学的な問題に出会いました。 過去数年にわたり、ソースコードを解析して実際にどのように機能するかを確認する場合にのみ、JavaScriptライブラリを使用するように友人にアドバイスしてきました。 私の立場は、Joel Spolsky- The General of Generalized Holesの古典的な記事に基づいていました。 その中で、著者は、APIが複雑であればあるほど、その中に穴が見つかった場合に状況を修正することがより困難になるという事実に基づいています。 ブラウザは最も信頼性の低いアプリケーションの1つであるため、すべてが依存するアプリケーションで同様の状況が発生した場合、髪を引き裂く準備をしてください。



特定の場合、jQueryは真にユニークなメソッドを使用してこの機能またはその機能を実現します。このライブラリの一部（セレクターのソースコードなど）は威圧的に見えます。 ライブラリの仕組みを本当に理解する必要がある場合は、ほとんどの開発者向けのjQueryがこのタスクにほとんど役立ちません。 ただし、jQueryの絶大な人気は、それについての悪いレビューの特定の欠如と相まって、jQueryの好意でのみ語られているようです。



最初のアドバイスを再考する必要があると思います。 ライブラリが実際にどのように機能するかはそれほど重要ではありません。 これを理解するには、いくつかの基本的な概念、ブラウザ間の違い、およびライブラリがそれらを回避するために使用する一連のメソッドを知る必要があります。 100％のケースでブラウザーの理解できない動作を防止できるライブラリーはありませんが、標準や基本概念について知識があればあるほど、コード、使用されているライブラリー、または組み込まれている実装機能で問題が発生したかどうかを簡単に確認できますコアで。



結論として





jQueryについて肯定的な結論を出すのに十分な事実を表明したことを願っています。jQueryは別のライブラリではありません。 かなり経験豊富なJavaScriptプログラマーを驚かせ、新しい何かを教えることができる興味深いアイデアがたくさん含まれています。 作業で使用しない場合でも、時間をかけてjQueryの「エコシステム」を調査することは価値があります。



記事を読んでくれたみんなに感謝します。 このトピックに関するコメントに感謝します。



Web Optimizator：サイトの読み込み速度の確認



More articles:


All Articles