kuguru[クグル]kuguru[クグル]|人が、ITの世界をくぐり抜けるためのアイデアを。menuTOPビジネスプログラミングキャリアライフガジェットTOPプログラミングQueryの使い方!初心者にわかりやすく解説Queryの使い方!初心者にわかりやすく解説JavaScriptのライブラリの一種であるjQueryですが、使いこなす事ができれば便利ではあるものの、難しい部分が多く、挫折してしまう方も多いのではないでしょうか。ここでは、そんな方のために、jQueryの利点や使い方をサンプルコードを交えて解説いたします。動作環境の違いを吸収jQueryを使用する事による利点の一つとして、動作環境の違いを吸収してくれる点が挙げられるでしょう。Webサイトを製作するに当たっては、ユーザー側の動作環境の違いにより、必ずしも製作側の意図した表示通りにならないという問題が常につきまとってきます。そのため、製作側はできる限り多くの閲覧環境を想定してサイトを作る必要があるのですが、jQueryは最初から主要ブラウザに対応するよう設計されていますので、その手間を省く事が可能です。アクセスが簡単jQueryでは、セレクタと呼ばれる機能を用いる事で、WEBサイト内の様々な要素に簡単にアクセスする事が可能です。セレクタの指定方法として、HTMLのタグやCLASS、IDを使用する事ができますので、CSSに馴染みのある方にとっては理解しやすい仕組みになっています。要素指定の際に特定の親要素の中の子要素、という指定方法や、特定のタグの中で特定の条件に該当しないもの、といった複雑な指定方法もできます。jQueryの使い方jQueryを使用する際は、jQueryライブラリ本体をHTMLファイル等に読み込ませる必要がりますが、その方法は下記の二通りが存在します。一つ目は、jQueryライブラリをインターネットからダウンロードし、それを自分のサーバーに設置して使用するやり方になります。jQuery」というボタンを押すことでダウンロードページに飛ぶ事ができます。jQuery」と記載されている圧縮版を選べば良いでしょう。ダウンロードが終了したらファイルを解凍し、HTMLの部分に下記のコードを記載する事でjQueryライブラリの使用が可能となります。src=""jquery-3.2.1.min.js""></script>google上にあるjQueryを利用する方法あるいは、既にgoogleによってホストされているjQueryライブラリを読み込む方法も有効でしょう。上記同様HTMLファイルのに下記コードを記述するだけです。src=""https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js""></script>こちらの方法はjQueryライブラリをダウンロードして自分のサーバーにアップロードする必要がありませんので、ファイル管理が楽になるというメリットがあります。jQueryを使ってみるコードを書く場所jQueryのコードは、HTMLのタグを閉じる直前に記述する事になりますので、該当箇所に<script>タグで囲ってコードを書きましょう。コードをの最後に書くべき理由としては、ページの表示速度を早くするためです。軽い処理の場合はそれほど問題はないかもしれませんが、重たい処理を最初の方に記述してしまうと、ページの表示速度が遅くなり、ユーザーにストレスを与える事になります。別途jsファイルを用意して、そちらにコードを記述してHTMLで読み込むという方法もありますが、この場合は内で読み込まなければいけないため、上述した問題が発生します。その場合は、ready()メソッドを使ってページの読み込みが終わった後にスクリプトを実行する、といった処理を施す事により、問題の解決をはかる事が可能です。});」という書き方をします。});」と省略する事もできますので、どちらか好きな方を使えば良いでしょう。);」のような形になります。これは、「containerクラスを持つdiv要素内のfont-sizeを12pxにせよ」という命令になり、CSSでお馴染みの命令をjQueryでも行う事ができます。jQueryのサンプルそれでは、もう少し複雑なコードサンプルを見ていきましょう。$("".btn1"").click(function(){$(this).css(""background-color"",""blue"");});上記のコードは、「btn1クラスを持つ要素がclickされた時、同要素のbackground-colorをblueにせよ」という意味になります。jQueryでは、このようにユーザーによって指定されたアクションが実行された時に命令を実行するといった記述ができます。変数も使用可能となっています。$(this);$btn.css(""background-color"",""blue"");});といった記述も可能であり、長い処理の場合は$(this)を変数に入れた方が書きやすくなるケースもあるでしょう。まとめ簡単にではありますが、jQueryの記述方式やサンプルコードを記載させて頂きました。jQueryで記述する事により、ネイティブなJavaScriptで書くよりもコードを単純化する事ができますので、是非有効に活用してみて下さい。