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

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

ただいまの
回答率

88.58%

jqueryでのイベント登録(click等)について

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 390

stuff

score 13

 実現したいこと

jqueryでのイベント登時録のベターな書き方

 発生している問題・エラーメッセージ

現在jqueryにて簡単なコードを書いているのですが、以下について疑問があり、自分なりに検索し、調べたものの疑問に対する回答が得られなかった為質問をさせていただきます。

疑問例
jqueryでclickイベントを登録する場合を例にあげますと

$("セレクタ").on("click",function(){
    console.log("hoge");//例
};


といった記載を多く見かけるものの実際のサイト(個人サイトを除く)ではほとんど使われておらず、以下のような初心者、初級者から見るとわかりずらいコードが多く使われているような気がします。

//このメソッド自体は読み込み時にinit()が実行されているようでした。
$.testFunc = {
    self : $("セレクタ"),//書かれているもののどこにも適用されてないようでした。
    trigger : $("発火セレクタ"),
    init : function(){
        this.trigger.on("click",function(){
            console.log("hoge");//例
        });
    }
};


※上記コードは一般サイトのコードから転記しているものです。

上のようなコード(単純なものではないコード)になっているのは、そうしないと問題が発生するものなのでしょうか。
それとも管理がしやすい等の理由なのでしょうか。

まとまりの無い質問で申し訳ありませんが、上記のような複雑なコードになる理由をご存知の方がおりましたら回答をぜひよろしくお願いします。

 補足情報(FW/ツールのバージョンなど)

必要なものがあれば追記します。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+5

結論だけ言うと「場合によりけり」です。

サイトの仕様を問題なく満たせているのであれば、どんな実装でも全く問題ありません。
ですから、stuffさんが最初に書いているコードでも全く問題ありません。

一部のサイトで一見して複雑な書き方がされているのは、開発上の便宜のためです。

サイトの規模が大きければ大きいほど、また機能が複雑になればなるほど、ソースコードも複雑になります。
もし、処理すべてを一連の流れ(「手続き」)として記述すると、コードが複雑になり、大抵の人には処理が追えなくなります。また、処理の一部を変更したくなった場合、毎回全体が壊れないように注意しなければなりません。

そこで、データやそのデータに関する処理をグループ(オブジェクト)にまとめておき、
必要に応じて(外部から)処理を呼び出すようにすることで、全体の見通しがよくなります。
また、処理がグループにまとめられていれば、一部の機能を変更したい場合、該当部分のみを修正するだけで大丈夫になります。

ただ、「まとめ方(=設計)」をしくじるとまとめるメリットがなくなってしまう場合もあります。

「データとその処理をまとめる」といった考え方は、今後どこかで必ず出くわすと思いますので、「オブジェクト指向」や「コンポーネント」といったキーワードで調べてみてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/11/27 00:14

    NozomuIkutaさん
    素早い回答ありがとうございます。
    「場合によりけり」なんですね。各場合を見極めることがまだできない為、いただいた回答をすぐ実コードで活用できないのが残念ですが、もやもやとしていたことが解消されました!ありがとうございます。

    また、今後の指針まで記載していただきさらにありがとうございました。オブジェクト指向、コンポーネント調べてみます。

    キャンセル

  • 2018/11/27 08:43

    参考になったようで、幸いです。

    場面の見極めは難しいですが、この先プログラミングを続けるなら、簡単なものからオブジェクト指向で(再)実装してみるのをおすすめします。

    サイトでもアプリでも、将来「やっぱりこうしたい」といった考えや需要の変化は、自分であれ顧客であれほぼ必ず起こります。その変化に対応可能なソースコードになっているかどうかは大変重要です。

    ちなみに、最近はやりのAngular, React, Vue.jsは、コンポーネントを基本の考え方として採用していますよ。

    キャンセル

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

  • ただいまの回答率 88.58%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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