What’s jQuery? #0
みなさんこんにちは。
すこーしづつ暑くなってきたので、扇風機を探していたら、去年どこにしまったかいまいち覚えていないT.S.P.のJavaScript担当、木村です。
今回から、「jQuery」について連載していきたいと思います。第一回目は「What’s jQuery?」と題しまして、簡単にjQueryとは何かを本家のサイトを参考にしながら解説していきます。HTML と CSSはわかったけどさ、jQueryって何？という方を対象に Let’s move on!!
1. jQueryって何？
さて、本家公式サイト https://jquery.com/ にアクセスすると、一番最初にこんな文章が載っています。
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
簡単に翻訳すると、
jQueryは機能満載の処理が早くてコンパクトなJavaScriptの進化版です。HTMLドキュメントの操作や、アニメーションの追加、Ajaxを簡単に使う事ができて、現在の多様なブラウザーに対応しています。jQueryは多くの人が使うJavaScriptの書き方を一新するものです。
となりますね。これは何かすごい予感がする。。。僕が初めてjQueryに出会ったときそんな風に思ったことを覚えています。と言ってもこれだけ読んでもいまいちピンと来ないですよね。もっとざーっくり僕なりに書いてみると、例えばカレーライスを作るときに野菜を買ってきて皮をむいて、ざく切りにして茹でてルーを入れて。。えーっとそのあとは。。。わー！！！むいた皮を捨てて。。。とやることが満載になります。そこでカレーライスをjQueryで創るとどうなるでしょう！？ そう、ちょうど、もう皮もむかれているカレーライス用の野菜セットを買って茹でるだけ、最初から”用意されている”んですね。具材が。そこにルーをいれるだけ。簡単ですよね、ゴミもあまりでない。下手をするとレトルトカレー並みに、便利なプラグインもあります。 なんとなくイメージできたでしょうか？
そうです！最初からいろんな機能が用意されているJavaScriptの親切版です！ 事項でちょっと例を紹介します。
2. 同じ事をjQueryとJavaScriptで書いてみる
例）idが#kimchanの<div>要素内を書き換える
<div id=”kimchan”>
I love Kimchan
</div>
上記コードのI love KimchanをI hate Kimchanに書き換えてみましょう。
・JavaScript編
<script>
document.getElementById(“kimchan”).innerHTML = “I hate Kimchan”;
</script>
・jQuery編
<script>
$(‘#kimchan”).text(“I hate Kimchan”);
</script>
jQueryの方が短いですね。短いんです。ここがポイントですjQueryのほうが短いコードで同じことができるんです。これがカレーでのレシピで言えばいちいち皮をむかない野菜セットってことです！ すばらしいですねーjQuery!! 今回は簡単な例なのでそこまで差はないんですが、これが複雑なコードになってくるとその差は歴然。。
最後に
というわけで、とってもざっくりjQueryに触れました。次回から本格的にいろんな例を取り入れながらとっても楽しいjQuery World を探検しましょう！
