読者です 読者をやめる 読者になる 読者になる

まちいろエンジニアブログ

南池袋のWebサービス開発会社、株式会社まちいろのエンジニアブログです。

jQueryのセレクタをまとめてみました

こんにちは、まちいろの井上です。
jQuery で何かしたいときに、これってどうやって書くんだったかなと調べたりすることってありませんか? よく使うものを度忘れしてしまったり、使用頻度が低いものであったり、知っているけどどのように使うんだろう、などあるかと思います。

そこで今回は備忘録もかねて、jQueryの代表的なセレクタについてまとめてみました。

基本セレクタ

 htmlの要素名を設定することで、指定した要素をすべて選択します。

 $('div')  // 全てのdivタグが対象


 #の後にid名を付けると、指定したid属性を持つ要素を選択します。

  $('#formId')  // id名が「formId」の要素が対象


 .の後にクラス名を付けると、指定したクラス名を持つ要素を選択します。

  $('.testClass')  // クラス名が「testClass」の要素が対象

階層指定

 要素の配下にある全ての子孫要素を選択します。

 $('form button') // formタグ配下にある全てのbuttonタグが対象


 親要素の直下にある全ての子要素を選択します。

 $('.testClass button') // testClassクラス直下にある全てのbuttonタグが対象


  • 隣接セレクタ $(‘直前の要素 + 隣接する要素’)

 直前の要素の直後にある隣接する要素を選択します。

 $('div + input') // divタグの直後にあるinputタグが対象

  この場合、divタグの直後にinputタグがない場合は選択されませんので注意してください。

属性フィルタ

  • $(‘[属性名]’)

  属性名をもつ要素を選択します。

  $('input[class]')// class属性を持つすべてのinputタグが対象


  • $(‘[属性名 = 値]’)

  属性名と一致する要素を選択します。

  $('input[class=test]') // class属性の値が「test」のinputタグが対象


  • $(‘[属性名 != 値]’)

    属性名と異なる要素を選択します。

  $('input[class!=test]') // class属性が「test」以外のinputタグが対象


  • $(‘[属性名 ^= 値]’)

  属性名で始まる要素を選択します。

  $('input[name^=sample_]') // name属性が「sample_」で始まるinputタグが対象


  • $(‘[属性名 $= 値]’)

  属性名で終わる要素を選択します。

   $('input[name$=_test]') // name属性が「_test」で終わるinputタグが対象


  • $(‘[属性名 *= 値]’)

  属性名を含む要素を選択します。

   $('input[name*=_t]') // name属性に「_t」が含まれるinputタグが対象

フォームフィルタ

  • $(‘:checked’)

  チェックボックスや、ラジオボタンで選択されている要素を選択します。

   $('[name="radio"]:checked')  // name属性が「radio」でチェックが選択されている要素が対象


  • $(‘:selected’)

    select要素で選択されている要素を選択します。

   $('select[name="selectTest"] > option:selected')  // name属性が「selectTest」のプルダウンで、選択されている要素が対象

可視性フィルタ

  • $(‘要素名:visible’)

  表示状態の要素を選択します。

   $('input:visible')  // 表示状態のinputタグが対象


  • $(‘要素名:hidden’)

  非表示状態の要素を選択します。

   $('div:hidden')  // 非表示状態のdivタグが対象

子要素フィルタ

  親要素内にある最初の子要素を選択します。
  指定したセレクタが最初の子要素でない場合は選択されません。

   $('h2:first-child')  // 親要素内にある最初の子要素がh2タグの場合に選択される


  親要素内にある最後の子要素を選択します。
  指定したセレクタが最後の子要素でない場合は選択されません。

   $('p:last-child')  // 親要素内にある最後の子要素がpタグの場合に選択される


  親要素内に1つだけ子要素を持つ場合に、指定された要素を選択します。

   $('p:only-child') // 親要素内に一つだけ子要素を持ち、その子要素がpタグの場合に選択される


  親要素内にあるセレクタで、引数に指定した要素を選択します。
  引数にはodd(奇数番目)、even(偶数番目)、数値n(数値の倍数番目の子要素)を指定することができます。

   $('p:nth-child(odd)')   // 親要素内で偶数番目の要素がpタグの場合に選択される
   $('p:nth-child(3)')     // 親要素内で3番目の要素がpタグの場合に選択される
   $('p:nth-child(3n)')    // 親要素内で3の倍数の要素がpタグの場合に選択される

最後に

今回は代表的なセレクタを紹介しましたが、他にも色々なセレクタがあります。
ここでは紹介できなかった他のセレクタについては、jQueryAPI ドキュメントのSelectorsを参照いただければと思います。

便利なSQLを紹介します~MySQL版~

こんにちは!まちいろの森です! これまでデータ抽出の際に、様々なSQLを利用してきました。そのうち、使える!便利だ!というSQLをこちらでいくつか紹介したいと思います!

複数テーブルの件数をまとめてみたい

複数テーブルのそれぞれの件数を知りたい場合にテーブル分SQLを実行するのは面倒ですよね? その場合 UNION ALL を利用すれば複数テーブルの件数を1回で抽出することが可能です。

SELECT 'テーブルA', COUNT(*) FROM テーブルAのテーブル名 UNION ALL 
SELECT 'テーブルB', COUNT(*) FROM テーブルBのテーブル名 UNION ALL 
SELECT 'テーブルC', COUNT(*) FROM テーブルCのテーブル名

結果は以下の通り、3テーブルまとめて件数を取得することができました! 条件が複雑な場合、結合を複数テーブルとしている場合等は検索結果が返ってくるのが遅い場合があるので、 注意が必要です。

f:id:e_mori:20170321175805p:plain

実行計画を見たい

SQLの実行結果が遅いとき、indexが正しくはられており、それが利用されているのかを確認したいとき、ありませんか? その場合は以下SQLを実行するとindexがはられているか、利用されているか否かがわかります。

explain 確認したいSQL

結果は以下の通りとなりました。

  • possible_keys … 利用できるindexを表す(nullの場合は、利用できるindexが存在しない)

  • key … 実際に利用したindexを表す

上記より、1行目はindexが利用されずにSQLが実行されたことを示し、 2行目は、作成したindexを利用してSQLが実行されたことがわかります。

f:id:e_mori:20170322111343p:plain

ソート項目がNULLの場合にNULLデータを一番最後に表示する

ソート項目がNULLのデータが含まれている場合、NULLデータ以外をorderByでソートし、NULLデータは最後にまとめて表示したいことはありませんか? order by ソート項目を条件につけるだけでは最初にNULLデータが表示されてしまいます。最後に表示したい場合は、order byを以下の通りに記載すると 実行結果で最後にNULLデータを表示することが可能です。

order by ソート項目 is not NULL ASC ,ソート項目 ASC

結果は以下の通りとなりました。NULLのデータを一番最後に表示することができています。

f:id:e_mori:20170322142935p:plain

最後に

MySQLにてデータ抽出を行う際に私が使って便利なSQLをご紹介しました! みなさんもぜひ活用してみてください!

MySQL WorbenchでAWS上のDBへ接続する

こんにちは、まちいろの井上です。

みなさんは開発を行っている中で、普段使用している管理ツールから開発環境のDBへ接続したいなと感じることはありませんか?
私は普段「MySQL Workbench」を使用しているので、MySQL Workbenchから開発環境に接続できたら便利だなと思っていました。

そこで今日は、MySQLの管理ツールであるMySQL WorkbenchでAWS上のDBへSSHを経由して接続する方法をご紹介します。

AWSのセキュリティグループを設定する

まちいろではサーバーにAWSを利用しているので、まず初めに開発環境となるAWSへローカル環境から
接続するためには、AWS側に設定を行う必要がありました。
以下のように、AWSのセキュリティグループで社内からアクセスが可能となるように設定を行います。

f:id:yu_inoue:20170124150235p:plain

MySQL Workbenchの設定画面を開く

MySQL Workbenchを起動すると以下のような画面が開きます。
MySQL Connnectionsのボタンを押下して、新規の接続を作成します。

f:id:yu_inoue:20170123172906p:plain

接続設定名、接続方法を設定する

接続設定画面を開くと以下の画面が表示されます。
まず初めに、接続設定名・接続方法を設定します。

f:id:yu_inoue:20170123174141p:plain

  • Connection Name

    DB接続設定の名前を設定します。
     ここで設定した名前は、MySQL Workbenchを立ち上げたときの最初の画面に表示されるものとなります。

  • Connection Method

 今回はSSHを経由して接続するので、プルダウンメニューからStandatd TCP/IP over SSHを選択します。

接続したいサーバーのDB情報を設定する

次にParametersタブ内のサーバー、DB情報を入力していきます。

f:id:yu_inoue:20170123175515p:plain

 接続先サーバーのホスト情報(ホスト名、IPアドレス)、ポート番号を設定します。
 [ホスト情報(ホスト名、IPアドレス):ポート番号]のように入力します。

 SSH接続に使用するユーザー名を設定します。

 SSH接続に使用するパスワードを設定します。
 「Stire in Vault…」を押下するとパスワード入力の画面が表示されます。

 SSH接続に使用する秘密鍵ファイル(*.pem)を選択します。

 接続先サーバー上のMySQLのホスト名またはIPアドレスを設定します。

 接続先サーバー上のMySQLで使用するポートを設定します。

  • Username

 接続先サーバー上のMySQLにログインするためのユーザー名を設定します。

  • Password

 上記Usernameで設定したユーザーでMySQLにログインするためのパスワードを設定します。

  • Default Schema

 接続時に開いておきたいDB名を設定します。  

接続を確認する

「Test Connection」ボタンを押下し、接続確認を行います。

 f:id:yu_inoue:20170123181258p:plain

 上記のように接続成功のメッセージ画面が表示されれば設定の完了となります。
 「OK」ボタンで上記画面を閉じ、接続設定画面に戻り設定を保存してください。

最後に

以上で、MySQL WorkbenchからSSH経由でAWS上のDBへの接続設定は完了となります。
一度設定してしまえば、あとはクリックするだけでAWS上のDBへ接続できてとても便利ですので、開発環境への接続時に利用してみてはいかがでしょうか。