);セレクタ内のdd要素にはコロン:で指定が続いています。)は「カッコ内以外」を意味しています。カッコ内を見てみましょう。//セレクタ$("dd:not(:first)")カッコ内の:farstは「一番最初」という意味。全体で「一番最初以外のdd要素」という意味になります。)メソッドのカッコの中はこんな書式。第2引数);カッコの中には引数が2つあり「CSSの第1引数(プロパティ)を第2引数(値)にする」を意味する。実際の内容はこうです。)メソッド.css("display","none");「CSSのdisplayプロパティの値をnoneにする」という意味になります。全て合わせるとこうなる。$("dd:not(:first)").css("display","none");「一番最初以外のdd要素のCSSのdisplayプロパティの値をnoneにする」という意味になります。)メソッドは「クリックした時にカッコ内の処理をする」というイベントです。「dl要素内のdt要素をクリックした時にカッコ内の処理を実行する」という意味になります。カッコの中には無名関数が入っています。//処理});次に無名関数の中を見ていきます。外側は「JSの基本-後編」で触れた「if文」です。//if文if(条件式){ブロック文}if文の条件式の中を見ていきましょう。セレクタは下記のような書式。メソッドの中に引数が2つある。第1引数はセレクタ名の前に「+」がついており、これは「次の」という意味。dt)自体を意味します。「(クリックしたセレクタの)次のセレクタ」という意味になります。)メソッドを見てみましょう。)メソッドのカッコの中にはプロパティが入り、カッコの後ろで値を比較演算子==が繋いでいます。「CSSのプロパティが値と等しければ」という意味になる。)メソッドを合わせるとこうなる。this).css("プロパティ")=="値"「(クリックしたセレクタの)次のセレクタのCSSのプロパティが値と等しければ」という意味。具体的な内容を入れるとこうなります。dtの)次にあるdd要素のCSSのdisplayプロパティの値がnoneならば」という意味。if文の条件式の中に入れるとこうなる。dtの)次にあるdd要素のCSSのdisplayプロパティの値がnoneならばブロック文を処理する」という意味になります。次にif文のブロック文の中身を見ていきます。//ブロック文:1行目$("dd").slideUp("slow");「dd要素はslowのスピードでスライドして閉じる(slideUp)」という意味。次の行を見ていきます。dtの)次のdd要素はslowのスピードでスライドして開く(slideDown)」という意味になります。if文全体ではこうです。dtの次の)dd要素はslowのスピードでスライドして開く」という意味になります。});});「(ページを読み込んだ直後に)一番最初以外のdd要素のCSSのdisplayプロパティの値をnoneにする。dtの次のdd要素はslowのスピードでスライドして開く」という意味になります。このように一見すると生JSとは違う書式に見えたjQueryも、実は生JSと同じ書式で書かれていたことがわかります。jQueryも他のライブラリ、フレームワークも生JSも同じ仲間に見えてくる!まとめjQueryは2006年に誕生し10年以上経ちます。当時の先人たちはきっとjQueryの糖衣構文によってJSが「楽」になった!と感じたと思います。10年の時を経て生JSを知らない子供達(jQuerer)が現れました。jQueryerにとってjQuery以外のライブラリ、フレームワーク、そして元となる生JSは「壁」に感じてしまいます。jQueryerが「次」のステップに進むためには、生JSの理解はやはり必須と思います。これまで自分が書いてきたjQueryのコードを生JSの書式で読み解いてみるのはいかがでしょうか。「自分はすでに生JSを書いてきた」と実感できることで「次」のステップに進みやすくなると思います。jQueryerの皆さん、「卒jQuery」はjQueryを捨てる!捨てない!の二元論ではありません。単純に「次」に進む、できることを増やす、幅を広げることです。共に「壁」を乗り越えていきませう!そこにはjQueryと出会ったあの時(「こいつ、動くぞ!」)と同じような喜びが待っていると信じて。idr-zz.hatenablog.com*1:ガ○ダム大地に立つ!!*2:「脱」には「脱会」「脱退」のような暗いイメージがあるが、jQueryに少なからず「こいつ、動くぞ!」的な喜びを体験させてもらった身としては、「卒業」の「卒」の字を付けたく思います!*3:ガンダムの第1作目を「ファーストガンダム」と呼ぶようなもので、他との区別のためです。*4:標準オブジェクトの中には「ビルトインオブジェクト」「ブラウザオブジェクト」「DOMオブジェクト」の3種類があります。*5:ただし、機能が結構充実しているライブラリがフレームワークと紹介されることもあり、境界は必ずしも明確ではないようです。*6:行末がセミコロンじゃなくてカンマ、そして一番最後の行末にはカンマがないのがCSSとの違い*7:しかしながら、他のライブラリ、フレームワークも便利なメソッドが定義されており、そのメソッドで「再利用」や「拡張」を実現します。WebGLをthree.JSを使わずに生JSだけで書こうとしたら、やはり膨大なコード量になってしまいます!*8:JSのwindowオブジェクトが省略されるのと似た考え方*9:そしておそらくプログラム言語を1つ習得できれば2つ目以降のプログラミング言語も習得しやすくなると思っています。JSフレームワークReact、はじめました。今回は初回...2018-10-18【HTML、CSS、JSの書式】これを読めばコードが読める!書ける!まとめ!(基本5+応用1記事)以前、「書ける前に読む!HTML、CSS、JSの書式」*1という連載記...2018-07-05CSS変数でドット絵マリオをルイージにしたった!「CSSドット絵マリオ」の続きです。はてなブログProフロントエンドエンジニア。神奈川に住まう四十路のオジキ。DTP→Webデザイナーから転向し今に至る。引き続きコツコツの日々。(24)リンクTwitterInstagramYoutubeCodePenGitHubPinterestQuolaFacebooknoteQiitaはてなブログをはじめよう!idr_zzさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。