質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

91.23%

  • JavaScript

    11826questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    5080questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

webサイトを作るときにjQueryではなくjavascriptから書く必要がある要件ってどんな要件でしょうか。

受付中

回答 5

投稿

  • 評価
  • クリップ 0
  • VIEW 385

yamagata_user

score 31

jQueryはjavascriptで記述されていますが、javascriptがわからなくてもjQueryを使えばjavascriptを全く意識することなく簡単にいろいろな機能を実装できるというのがjQueryの特徴だと思っています。
jQueryを使えばスライダーもクリックしたときの様々な処理もハンバーガーメニューも簡単に実装できます。
webサイトを作るときにjQueryがあればjavascriptがいらないように思ったのですがjavascriptの知識がないと実現できない要件というのはあるのでしょうか。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 5

+7

まず整理しましょう. 

jQueryがあればjavascriptがいらない

完全な間違いです. 

jQueryはJavaScript言語で記述されたDOM操作ライブラリであり, 簡単に言うと開発便利キットです. 一方JavaScript言語はプログラム言語です. 

NOTE:当初jQueryをフレームワークとして記述していましたが, ライブラリのほうが適切との指摘があったため記述を修正しています.

一般にライブラリはプログラム言語を用いて作られています. そのため, 単純にjQueryとJavaScriptを比較することに意味はありません. (jQueryを操作するためにJavaScriptが必要となるのだからJavaScriptの知識が必要ない訳がない)

jQueryを使えばjavascriptを全く意識することなく簡単にいろいろな機能を実装できる

これはむしろ「DOMを意識することなく様々な機能を実装できる」の間違いでしょう. 因みにDOMはHTML文書を操作するためのAPIです.

まずはこの「API」「プログラム言語」「ライブラリ」の関係を意識して下さい.


さて, 「javascriptDOMから書く必要がある要件」とは概ね次の二つが考えられます.

  • jQueryだけでは実現できないDOM(WEBAPI)の機能を利用する場合
    あなたはjQuery万能説を唱えられていますが, 世の中にはjQueryだけでは実現できない仕組み(canvas/SVG/webgl/サウンドe.t.c.)はたくさんあります. そのため仕方なく別のライブラリやフレームワークを導入したり, フルスクラッチでコードを記述することはよくあります.
  • jQueryを導入するまでもない場合
    jQueryは高機能なものの, そこまでの機能を必要としないケース(機能が単純な場合)もあります. またjQueryを導入することによるWEBパフォーマンスの劣化を嫌って敢えて直接DOMを操作することもあります.

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/23 16:46

    jQuery って、ライブラリじゃないですか?

    キャンセル

  • 2017/12/23 16:53

    確かにフレームワーク(構造)よりもライブラリ(機能)っぽいですね. ご指摘ありがとうございます.

    キャンセル

  • 2017/12/24 11:18

    ありがとうございます。
    「jQueryだけでは実現できないDOM(WEBAPI)の機能を利用する場合」「jQueryだけでは実現できない仕組み」とは具体的にはどういったものでしょうか。
    canvas、SVG、webgl、サウンドは一つもわかりませんでした。
    svgというと画像ファイルの種類のsvgしか知らないですがそれじゃないですよね。
    jQueryは量が多く読みこみが遅くなってしまうのでjsで必要なものだけを書くというのは納得です。
    ただそうしたパフォーマンス向上という目的以外でjavascriptから書かないと実現不可能な実装ってあるの?と素朴に疑問に思ったんです。

    キャンセル

  • 2017/12/24 11:27

    >svgというと画像ファイルの種類のsvgしか知らないですがそれじゃないですよね。
    まさしくそのSVGです.
    またWEBブラウザで利用できるAPIの内, jQueryがサポートしているのは(HTML)DOMのごく一部の操作だけです. 以下にその一覧が載っています
    https://developer.mozilla.org/ja/docs/Web/API
    これらは必要に応じて自作のスクリプトで操作する必要があります.

    キャンセル

+5

 DOM

javascriptがわからなくてもjQueryを使えばjavascriptを全く意識することなく簡単にいろいろな機能を実装できるというのがjQueryの特徴だと思っています。

jQueryは、そのほとんどがDOM APIを代替するものなので、「JavaScript」を「DOM」に置き換えます。

 jQueryしか知らない人たち

私は逆にjQueryはDOM APIを理解しないと、使いこなせないと考えています。
jQueryしか知らない人は「理屈は分からないけど、このように書くと上手く動く」という知識で解決していくタイプです。

例えば、下記コードを書くと、「動的に挿入した要素でもclickイベントが働く」ということをその人は知っています。

jQuery.on('click', '.foo', function () {});

しかし、理屈は理解していないのです。
ですので、「.html() でノードを上書きすると、同じHTMLで書いているはずなのに内部で定義していたclickイベントが働かない!なぜ?」のように同じ原理で動かない不具合にも気が付くことが出来ません。
従って、その度に他人に質問をし、「このコードはこういう性質があるから、気を付けよう」とケース別に知識を増やしていく傾向があります。
私からすると、それはとても効率が悪い学習方法です。
DOMの基本さえ理解していれば、いくらでも応用が利くのですが、それを知らない故に「コード」と「コードが持つ性質」の対応関係を丸暗記しようとします。

また、jQueryしか知らない人は、jQueryで出来ることと出来ないことの境界線を知りません。
ですので、「~を実現するjQueryのコードを教えて下さい」と質問をします。
それがjQueryで出来ないことだった場合、回答不可能なわけですが、彼らはコードを欲しがります。
彼らは理屈を知らないので、「このコードを書くとこういう結果になる」という経過原理を無視したアプローチを求めます。
彼らはそのつもりがないのかも知れませんが、いわゆる丸投げ質問になりがちです。

 何故か上手くいったことをスルーすべきか

最近の質問スレッドですが、本件も近い問題を抱えていると考えています。

「jQueryしか知らない人たち」は、コードを書いても何故上手く動くのかを理解していません
彼らは上手く動いている部分だけを見て満足してしまい、上手く動かない部分(バグ)を見逃してしまう可能性があります。
通常はコードを書いてアルゴリズムを頭の中に構築して上手く動くように考えるものですが、彼らが理解している部分は表面上のものなので、深部(DOM)のアルゴリズムを考えることが出来ません。

 jQuery と DOM

jQueryはそのほとんどがDOM APIで動作するライブラリです。
DOMを理解することはjQueryの内部動作を理解することに繋がります。
私としては、jQueryの前にDOMを学ぶことをお勧めします。

Re: yamagata_user さん

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/23 18:28

    回答が空欄になっています

    キャンセル

  • 2017/12/24 09:45

    細い回線では編集時のプレビューが出来ず、空白バグが誘発されるようです。
    プレビューはJS単独では動作しない仕様なんですね…。
    安定した回線で再度、編集し直しました。

    キャンセル

  • 2017/12/24 11:32

    ありがとうございます。
    DOMは一応少しだけ学習して今も学習中ですがほとんど理解できていないです。
    「.html() でノードを上書き」とか「DOM API」とか「API」といった用語の意味もよくわかっていないレベルなのですが、なんとなくjavascriptのことがわかりました。
    jQuery自体がjavascriptがわからないプログラミングのできない人でもwebサイトでいろいろな機能を実現できることを売りにしているように私は感じているのですが、そうなると逆にjavascriptを学ぶ必要性がわからなくなっています。
    ただ、javascriptとかDOMを使うのを避け続けても、というか避けることすら意識しなくてもjQueryのライブラリさえ覚えるなり見つけるなりしてそれを少し書き換えるだけでwebサイトを作るだけならどんな要件でも満たせてしまうように思うのですがあえてjavascriptの知識がないと実現不可能という状況が思い当たりません。
    他人がjavascriptを使って作ったwebサイトを修正しろと言われたときとか、そういう特殊なケースということでしょうか。

    キャンセル

  • 2017/12/24 12:44

    > jQuery自体がjavascriptがわからないプログラミングのできない人でもwebサイトでいろいろな機能を実現できることを売りにしているように私は感じているのですが、
    私はこの見解に反対する趣旨の回答をかいています。
    「私は逆にjQueryはDOM APIを理解しないと、使いこなせないと考えています。」の部分ですね。

    親記事に追記しましたが、下記スレッドの問題に近い問題と考えています。
    https://teratail.com/questions/104067

    ---
    たとえ話をすると、こういうことです。

    Aさんがある社内業務を機械化する素晴らしいツールを開発しました。
    社内の人間は絶賛し、全員がそのツールを使い、手作業でやっていた時の業務フローは忘れ去られました。
    Aさんの退職後、Aさんの開発したツールに致命的な不具合が見つかり、社内業務が立ちゆかない状況まで追い込まれました。
    しかし、退職したAさんに連絡は出来ませんし、ツールを使う前の業務フローを誰も知らないので、その業務が出来なくなりました。

    ツールとはjQueryを指し、手作業の業務フローはDOMを指します。
    DOMを理解できる人間が社内に一人でもいれば、そうした細かなバグにも対応出来るでしょうが、誰もいなければ修正することすら出来ません。

    DOMを理解している人はコードを書く前のアルゴリズムを描いている時点でバグの存在に気が付くことが出来ます。
    しかし、jQueryの動作がブラックボックス化しているjQueryしか知らない人たちは、バグが再現されなければ気が付くことが出来ません。

    ---
    他に、発想力の差があります。
    jQueryしか知らない人たちは、jQueryで今までに書かれたサンプルコード内の発想しかする事が出来ません。
    DOMを理解している人は、DOMで出来てjQueryに出来ないことも含めて発想できます。

    キャンセル

+2

5年以上前の話かな…。
jQueryもJSなので知らなくていいということはない。

teratailで扱う話題としては一番変化が激しいのがJSなので5年前レベルとは常識が変わりすぎてて話が通じない。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/12/24 11:19

    ありがとうございます。
    例えばどのようなときにjavascriptで書くのでしょうか。

    キャンセル

+2

jQueryを使えばjavascriptを全く意識することなく簡単にいろいろな機能を実装できる

ある意味正解だと思います
ただしjavascriptは汎用的な言語であり、jQueryの得意分野は
主にオブジェクトの掴み方とUIの表現でしかなく
jQueryの関数群として用意されていないものはたくさんあります。
(算術関数なんかはとくにそう)
jQueryでもし必要になった場合はjavascriptの記述を利用して
実行する必要があります。
また当然構文についてはjQueryはjavascriptのルールにしたがって
実行していますので「javascriptがいらない」というのは意味が通りません

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+1

jqueryをダウンロードして、開発者ツールのステップ実行で動かしてみると、途中でjqueryのソースが動いてくれているのが分かります。
jqueryはUIやDOM操作など便利に実装できるツールですが、javascriptだけで表現することも可能です。

jqueryだけできればいいというのは間違いで、jqueryはサイトを重くしてしまう原因にもなりますし、jquery以外にもjavascriptのフレームワークはたくさんあります。どれを使うべきかを作るものによって考えて、その違いについて学んでいくというスタンスがベターかと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

ただいまの回答率

91.23%

関連した質問

  • 解決済

    JSの王道かつ効率的な勉強順番を教えてください

    JavaScriptをこれから勉強し始め、トレンドを一通り抑えたい場合。 どのようなサイト(または書籍)をどんな順番で見ていくのが最も効率的な最短ルートでしょうか? ・前提 JS

  • 解決済

    JavaScript/jQueryの実践サイトについて

    いつもお世話になっています。 今回は少し抽象的な質問で恐縮なのですが、 JavaScriptやjQueryの練習問題をご教示いただきたいです。 なんとなく、理屈は理解してきたの

  • 受付中

    複数ポイントのスクロール位置でcssを切り替えたい

    #hoge要素を1000px〜2000pxのスクロール位置で固定させています。 $(this).scroll(function () { var scrollTop = $(thi

  • 解決済

    Qiitaの円グラフのような動きつきの円グラフを作るには?

    Qiitaのマイページにある投稿タイプを表す円グラフのような動きつきの円グラフを作りたいと思います。 それを作るにはどのようなツールやプラグインを使えばいいでしょうか? 分かる

  • 解決済

    jQueryでトリミング

    jQueryで画像をトリミングしたいと考えています。見よう見真似でプログラムを作成したのですがトリミングした画像がどうしても出ないです。よろしければ、ご鞭撻のほどよろしくお願いしま

  • 解決済

    bxsliderが意図しない方向に動く(一部のブラウザのみ)

    macOS X10.11 safari9もしくは8で閲覧した際、ブラウザの拡大機能を二回か三回くらい押した状態で見たときにタイトルのような状態になります。 問題があるのはsa

  • 解決済

    特定エリアのみ印刷したい

    現在印刷ボタンの実装をしています。 ボタンをクリックすると印刷プレビュー画面が開き、対象の部分を印刷できるというものです。 質問があるのですが 結論から言うと 特定エリアのみ印

  • 解決済

    iframe heightの自動計測をjQueryでしたい

    MakeShopの会員制サイト作成の為、イントロページ(TOPや商品ページ等とは完全に独立した干渉出来ないページ)に下記htmlの内容を組み込んでいます。 左サイドをクリックし

同じタグがついた質問を見る

  • JavaScript

    11826questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    5080questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。