javascriptとjQueryの使い分け

このQ&Aのポイント
  • javascriptとjQueryの使い分けについて迷っています。統一性を持つべきか、柔軟性を持つべきか悩んでいます。
  • 自分が作った関数内で、javascriptとjQueryどちらを使うべきか迷っています。統一的な書き方をするべきか、柔軟に使い分けるべきか悩んでいます。
  • jQueryはjavascriptで書かれているため、jQueryで書く処理はjavascriptでも書けますが、統一性や柔軟性の観点から使い分けに悩んでいます。
回答を見る
  • ベストアンサー

javasc jQuery

javascript初心者です。 jsファイルに、javascriptやjQueryを書いていますが、混乱しています。 例えば、自分が作った関数内で、この処理は、javascriptとjQueryどちらで書けばいいのか? といつも迷っています。 jQuery自体javascriptで書かれているので、jQueryで書く処理はjavascriptでも書けるのは当然だと思いますが・・・。 ただ、javascriptで書かいたりjQueryで書いたり統一性がなくなっています。 思い切って、使い慣れたjavascirptを忘れて全部jQueryで書く練習をすべきでしょうか? それとも、柔軟性を持ってその場に応じて使い分けた方が良いのでしょうか? javascirt appendchild jQuery append などなど 趣味でやっているので、他人は読みません。

質問者が選んだベストアンサー

  • ベストアンサー
  • shockatz
  • ベストアンサー率80% (153/191)
回答No.2

DOM操作をネイティブのjavascriptでおやりに? もうそれはないでしょう。 クロスブラウザ対策、CSS3非対応ブラウザ対策など、どこをとってもjQueryを使用しないという選択肢はありません。自分は仕事で大量のjavascriptを打ちますが、DOM操作でjQueryを使わないことは考えられません。 逆に、クラスプログラミングについては、javascriptが使えないとないと手も足も出ません。 自分も以前はずいぶん悩みましたが、GUIやイベント、DOMの操作やAjaxなどは思い切ってjQueryに一本化しました。 最近、jsについても、TypeScript(javascriptのメタ言語)やKnockoutJS(UI自動更新ライブラリ)を覚え、記述の明確さ、デバッグの容易さなどの優位さに気づき、ロジック側も移行したため、「素のjavascript」はほとんど使わなくなりました。 jQueryを単なる合理化のための糖衣構文とみる人もいますが、新しいjavascriptフレームワークの一部として捉えると、新しい世界が見えますよ。

hp_win7
質問者

お礼

ご回答ありがとうございます。 お礼が遅くなり申し訳ありません。

その他の回答 (2)

回答No.3

jQueryに限らず、一般論として『ライブラリ』を使っていても組み込み関数(いわゆるJavaScript)を忘れる必要はありません。 ただ、両方を併用していると、「同じ事をやっているけど違う書き方」が点在する可能性が出てきて、 機能追加や変更などで何をやっているのかがわかりづらくなります。 そのため、同じ事をするのであれば同じ書き方にするという統一性を持たせた方が、後々作りやすくなっていきます。

hp_win7
質問者

お礼

ご回答ありがとうございます。

  • hitomura
  • ベストアンサー率48% (325/664)
回答No.1

逆に質問です。 「あなたはなぜ jQuery を使っているのですか?」 ただ単に流行りものだからためしに使ってみようという段階ならば、jQuery を使って楽になったかどうかを考えましょう。 上記の段階を過ぎてなお使っているならば、あなたなりに jQuery を使う理由があるはずです。逆に jQuery を使うことをためらう理由も。その 2 つを天秤にかけて jQuery を使い続けるか否かを考えましょう。 ただし、少なくても同一のソースファイルの中では jQuery を使うか素の JavaScript を使うかを統一すべきです。

hp_win7
質問者

お礼

度々、お世話になります。 >なぜ jQuery を使っているのですか jQueryのキャッチコピー「write less,do more」です。 ただ、自分は初心者なので、たいしたコード量は書きません。 なので、このメリットを感じる機会も少ないのですが、、、 (アニメーションやajaxではjQueryしか使いませんが。) DOM生成・スタイルのクラス設定・DOM追加など簡単なコードにおいて、jQueryのメリットがない(トホホな)状態で迷ってしまいます。 jQueryを使うことをためらう理由は、自分のjQueryに自信がないからだと思います。 情けないかぎりです。

関連するQ&A

  • jqueryのアニメーションが動かない!!

    $(".skinTitleArea").css("opacity","0"); $(function(){ $(".skinTitleArea").animate({"opacity","1"},500); }; って入れても動かない。 http://ameblo.jp/koko5666/ アメブロなのですが、append等はちゃんと反映されてるのでjquery本体は読み込まれてます。なのにアニメーションanimateが動かない。入れるとjqueryが読み込まなくなって、他の記述も反映されなくなる。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="https://dl.dropbox.com/u/63681173/loveinstagram/jquery.common.js"></script> アニメーションが入ってるjavascriptは現在消してます https://dl.dropbox.com/u/63681173/loveinstagram/jquery.common.js

  • JavascriptとJqueryを混在し記述

    JavascriptとJqueryが混在したスクリプトファイル(.js)の書き方について質問です。 Jquery自体がjavascriptで書かれており結局はjavascriptであるということは理解していますが 気になるので質問させてください。 通常、javascriptの書き方として、スクリプトやその関数定義を1つのjsファイルに書くと思いますが、 Jqueryが混在しても考えは一緒で、ただ、ページが全て読み込まれた後(要素を特定できるようにするため)に実行したい場合の スクリプトを $(function(){ //Jquryや通常のjavascript }); の中にこのように書けばいいって話ですよね? つまり1つのjsファイル内に以下のようにスクリプトを混在させた書き方でもいいのですよね? ===== script.js ====== //(1)Javaスクリプト ←jsファイルが読み込まれたら実行するスクリプト //関数定義 function test(){ //Javaスクリプト } //(2)Jquery ←ページが全て読み込まれた後で実行するスクリプト $(function(){ //Jqueryスクリプト //Javaスクリプト }); 初歩的なことかもしれませんがすいません。

  • JQUERYをはじめて導入したのですが、

    JQUERYをはじめて導入したのですが、 読込み部分の記述が間違っているのか 「$(document).ready(function(){」のところで一箇所エラーとなります。 「オブジェクトでサポートされてないプロパティまたはメソッドです」となります。 設定内容の、現状は下記です。 「validate」設定を実現したいためにjqueryを導入。 ・JQUERYは現在の最新版のものを入手。 ・読み込んだファイルは全く編集などはしてないもの。 ・パスなどの記述は間違っていないようです。確実にファイルは存在しております。 ・一応パーミッションも確認済みです。 ・id"form-host"もformタグに設定しております。 <script type="text/javascript" src="/common/js/jquery.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.pack.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.js"></script> <script type="text/javascript" src="/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.min.js"></script> <script type="text/javascript" src="/common/js/additional-methods.js"></script> <script type="text/javascript" src="/common/js/messages_ja.js"></script> <script type="text/javascript"> //入力チェック関数に対象フォームIDを指定 $(document).ready(function(){ $("#form-host").validate(); }); </script> jsファイルの読込みの順序が違うのでしょうか、 不必要なjsファイルを読み込んでしまっている?為なのか; validate関連を導入した事があるからいらっしゃれば、 ご教授願います。

  • jquery自体をJavaScriptで読み込む

    以下のようなものを想定して、jquery.js という中身がjqueryでないものから jqueryの実態を読み込みをさせようとしているのですが、うまくいきません。 ・jquery 2以降は、IE8以前をサポートしなくなるので、useragentで  読み込むjqueryを選択したい。 ・現在、CGIスクリプト上で、jqueryの読み込みを判断しているが、できれば  外部JavaScriptで巨大なjqueryの読み込みの判断をさせたい。 ・キャッシュされたとしても、ライブラリであることから、圧縮して70kバイトと  あまりにも巨大である ・(googleapiを利用すると、IE8以前では、プライバシーの警告が出る場合がある) 確かに、スマホにjqueryを普通に読み込ませても、何も問題なく動作しますが、 相当がんばって圧縮をしても70kバイト程度のライブラリを、使用しないのに 読み込むというのも気が引ける部分もあります。 何とか、動的に、かつ、何も問題なく、jqueryをJavaScriptで読み込む方法は あるでしょうか? このようなコードは、document.bodyがnullであるため、はじかれてしまいます。 var script = document.createElement('script'); script.src = 'http://hoge/jquery-1.js'; document.body.appendChild(script); var callee = arguments.callee; var interval = setInterval(function() { if (!document.evaluate) return; clearInterval(interval); interval = null; callee(); }, 100); このコードでも、jqueryを使用するものが、jQueryがないというエラーで、うまくいきません var scrptE = document.createElement("script"); scrptE.setAttribute("type", "text/javascript"); scrptE.setAttribute("language", "JavaScript"); scrptE.setAttribute("src", "http://hoge/jquery-1.js"); document.getElementsByTagName("head")[0].appendChild(scrptE); 以下のようなのは、googleapiのため、使わないものと考えます。 http://phpjavascriptroom.com/?t=ajax&p=jquery よろしくお願いします。

  • 【JQuery】iframeのリンク先変更、jquery_dump

    JQueryの勉強を始めたのですが、うまくいきません。2点ご質問させていただきます。もしわかる方がいらっしゃれば教えてください。 1.下記のように、javascriptで動的にiframeのリンク先を変更したいのですが、エラーが出て処理が成功しません。  javascript(jquery?)ではiframeのリンク先を変更することはできないのでしょうか。  (また、jqueryオブジェクトについての詳細なメソッドや使用方法など がのっているサイトなどあれば教えていただきたいです。)  ///////javascript////////// <script type="text/javascript" src="shared/js/jquery.js">  function test(url)  {   // urlにはhttp://yahoo.co.jpなど、urlが入る   $("#ifr").set("src",url);  } </script>  ///////html//////////  <iframe id="ifr" src="" height=768 width=512>  </iframe> 2.jquery_dumpというphpのvar_dumpのような便利な関数があるようなのですが、私がサイトからダウンロードしたものには入っていませんでした(not definedが出ます)。これは、プラグインなどJQuery本体と別のものを導入する必要があるのでしょうか。

  • Jqueryのajaxを用いてHTMLの読み込み

    こんにちは。 Jqueryのajaxで広告向けのJavaScriptが記述されたhtmlを取得し、関数【$("#ID").html(htmlソース);】を用いて、HTMLを読み込んだ際に、それに記述されているJavaScriptが動作してくれません。 読み込むHTMLに記述されているJavaScriptは以下です。 <script type="text/javascript" src="//xml.affiliate.rakuten.co.jp/widget/js/rakuten_widget.js"></script> ご存知の方がいらっしゃいましたら、教えて頂きたいです。

  • jqueryのバージョン違いの解決方法は?

    どうしてもわからないので、ご教授お願いいたします。 http://baby.caregoods.org/のサイトでjquery.treeview.js(http://bassistance.de/jquery-plugins/jquery-plugin-treeview/)のツリーメニューを使っています。 同梱されていたjquery1.4.3を使っていました。 ところが、このサイトの管理画面で画像のドラッグ&ドロップで入れ替えるという機能が使えなくなり、元のjquery1.6.2に戻したところjquery.treeview.jsのメニューが使えなくなってしまいました。(いろいろなpluginが入っているようです。) 複数のjqueryが使えないのはここで調べてわかったのですが、http://stacktrace.jp/jquery/with_other_lib.htmlのサイトを参考にして ----------------- // $ 関数および jQuery関数の上書きを元に戻します。 var $j = jQuery.noConflict(true); // $ は jQuery ver1.4.3を参照します。 alert($.fn.jquery); // => 1.4.3 // jQuery は jQuery ver1.4.3を参照します。 alert(jQuery.fn.jquery); // => 1.4.3 // $j は jQuery ver1.6.2を参照します。 alert($j.fn.jquery); // => 1.6.2 ---------------------------- と書いたjsファイルを読み込むのですが、1.6.2しか反映されず、1.4.3で使っているjquery.treeview.jsが使えません。 このjsファイルの前に、jquery-1.4.3.jsとjquery-1.6.2.jsは呼び出してあります。 firefoxで閲覧すると「1.6.2」「1.6.2 このページによる追加のダイアログ表示を抑止する」「1.4.3 このページによる追加のダイアログ表示を抑止する」と書いたポップアップが3度ほど出るようになりました。 こういう状況なのですがどうにか一緒に使える方法はないでしょうか? javascriptは初心者なので説明があまり上手くないので申し訳ありません。 うまく伝わるかわかりませんが、よろしくお願いいたします。

  • jqueryで画像を切り替えたい

    以下ソースがあります。 ●main.js $(function(){ jQuery.ajax({ url : "./news.txt", type : "get", success : function(data){ alert(data); } }); }); ●news.txt test と記述しています。 ●index.html <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>jQuery Sample</title> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="main.js"></script> </head> <body> <h1>jQueryサンプル</h1> <p>非同期通信の処理</p> </body> </html> この三つのファイルを同じ階層に置き、index.htmlで実行したところ 非同期通信(testのアラート)が表示されました。 そこで、 index.htmlファイルの左側にメニューを設けて、 メニューをクリックすると、画像のみが切り替わるという 内容で、jqueryによるajax実装を行いたいのです。 (左のメニュー1がクリックされれば、リンゴの画像。  メニュー2がクリックされれば、みかんの画像等) ulタグと、jquery関数にどういう仕掛けを入れると 果物画像の入れ替えが行えるでしょうか。 ご教授お願いします。

    • ベストアンサー
    • AJAX
  • JQUERY のEmpty()処理について

    JQUERY のEmpty()処理について 次のコードで$('#board').empty(); 後に追加作成した要素はクリックに反応しないのですが、対応の方法をお教えください。 <html><head><title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="subf/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function (){ $('#board').append('<div id="card1" class="card"'); $('#card1').html("Card1"); $('#board').append('<div id="card2" class="card"'); $('#card2').html("Card2"); $('.card').click(function(){ alert($(this).attr("id")); }); }); function removeObj(){ $('#board').empty(); $('#board').append('<div id="card3" class="card"'); $('#card3').html("Card3"); } </script> </head> <body> <form><input type='button' onclick='removeObj()' value='Reset'></form> <div id="board" style="WIDTH: 10%; TOP: 100px; HEIGHT: 100px; BACKGROUND-COLOR: #ccff33"></div> </body></html>

  • jQueryでDOM要素の関数を実行する方法?

    jQueryでDOM要素の関数を実行する方法? HTML5のメディア要素のplay()をjQueryで実行したいです。 最後の行のJavaScriptで書いてあるものをjQeuryで書き換えたいのですが、 どなたか分かる方はいらっしゃいますか? html側 <video id="myVideo"> js側 document.getElementById("myVideo").play();

専門家に質問してみよう