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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

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

jQuery

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

Q&A

解決済

1回答

845閲覧

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

stuff

総合スコア13

JavaScript

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

jQuery

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

0グッド

1クリップ

投稿2018/11/25 14:47

編集2018/11/25 14:52

実現したいこと

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/ツールのバージョンなど)

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

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

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

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

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

投稿2018/11/25 16:03

NozomuIkuta

総合スコア1260

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

stuff

2018/11/26 15:14

NozomuIkutaさん 素早い回答ありがとうございます。 「場合によりけり」なんですね。各場合を見極めることがまだできない為、いただいた回答をすぐ実コードで活用できないのが残念ですが、もやもやとしていたことが解消されました!ありがとうございます。 また、今後の指針まで記載していただきさらにありがとうございました。オブジェクト指向、コンポーネント調べてみます。
NozomuIkuta

2018/11/26 23:43

参考になったようで、幸いです。 場面の見極めは難しいですが、この先プログラミングを続けるなら、簡単なものからオブジェクト指向で(再)実装してみるのをおすすめします。 サイトでもアプリでも、将来「やっぱりこうしたい」といった考えや需要の変化は、自分であれ顧客であれほぼ必ず起こります。その変化に対応可能なソースコードになっているかどうかは大変重要です。 ちなみに、最近はやりのAngular, React, Vue.jsは、コンポーネントを基本の考え方として採用していますよ。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問