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

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

ただいまの
回答率

90.48%

  • JavaScript

    17072questions

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

  • jQuery

    6949questions

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

JQueryを使って一つのイベントハンドラで複数の関数を実行したい。

解決済

回答 2

投稿 編集

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

SaganoKei

score 5

 発生している問題

幾つかのテキストボックスの入力内容を、入力時と送信ボタン押下時の2パターンで検査したいとき、
送信ボタンを押したときに4つの関数を一つのイベントハンドラで呼び出すにはどうすればよいでしょうか。

 該当のソースコード

const checkNo = function(){// 処理}
const checkName = function(){// 処理}
const checkSex = function(){// 処理}
const checkMail = function(){// 処理}

$(function () {    
 $("#No").on('blur keypress', checkNo);
 $("#Name").on('blur keypress', checkName);
 $("#Sex").on('blur keypress', checkSex);
 $("#Mail").on('blur keypress', checkMail);

  $("#btn").on(
    'click', checkNo, checkName, checkSex, checkMail
  );
});

 試したこと

送信ボタン4つ分の同じclickイベントハンドラを書いてそこに各々の関数呼び出しを記述すれば機能自体は満たせるのですが、すごい冗長でスマートでないなぁと・・・
一つのイベントハンドラに纏める方法があれば教えて欲しいです。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • jun68ykt

    2018/06/24 09:24 編集

    こんにちは。回答を考えてコードを書きました。https://jsfiddle.net/jun68ykt/enxzrfq1/70/ これは4つのテキストと1つのボタンの計5個の <input /> の click イベントを一つのイベントハンドラで処理します。 ですが、実現されたいことは、ボタンのクリックハンドラで4つの関数をまとめたいということだったのですね。質問の趣旨を勘違いしていたようです。

    キャンセル

  • SaganoKei

    2018/06/24 09:54

    いえ、ソースコード見せていただきましたが、自分の引き出しにない書き方ばかりですごく勉強になりました! もしよければ先のソースコードの書き方を学ぶのに参考になるサイトとかあれば教えていただきたいです。

    キャンセル

  • jun68ykt

    2018/06/24 22:38 編集

    「自分の引き出しにない書き方ばかりですごく勉強になりました!」とのことでよかったです!「もしよければ先のソースコードの書き方を学ぶのに参考になるサイトとかあれば教えていただきたいです。」との件については、長くなりそうだったので回答欄のほうに返答を書きました。

    キャンセル

回答 2

checkベストアンサー

+2

  $("#btn").on(
    'click', function() {
       checkNo();
       checkName();
       checkSex();
       checkMail();
    }
  );

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/06/24 02:35

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

    その方法で書いてみたこともあったんですけど、なぜかその時は失敗したんですよね・・・なんでだろう
    ともかく書き直したらちゃんと動いたので助かりました!

    キャンセル

+1

こんにちは。

「質問への追記・修正、ベストアンサー選択の依頼」欄のほうで

もしよければ先のソースコードの書き方を学ぶのに参考になるサイトとかあれば教えていただきたいです。

とのご要望を頂きましたので、以下にて5点ほどピックアップして回答します。

 (1) Shorthand method names (ES2015)

オブジェクトのプロパティで、関数であるもの

const checkers = {
    Mail: function() { return 'OK'; }
};


const checkers = {
    Mail() { return 'OK'; }
};

と詰めて(=shorthand)書けます。これは MDN: オブジェクト初期化子 の中のShorthand method names (ES2015) です。

 (2) first-class object

元のご質問にあるコード

const checkNo = function(){// 処理}
const checkName = function(){// 処理}
const checkSex = function(){// 処理}
const checkMail = function(){// 処理}


だったり、

const checkers = {
    Mail() { return 'OK'; }
};


のように関数を、const checkNo に代入したり、オブジェクトcheckers のプロパティとして書けます。
これは JavaScript の関数が第一級オブジェクトであるからです。

JavaScript において、関数は第一級オブジェクトです。すなわち、関数はオブジェクトであり、他のあらゆるオブジェクトと同じように操作したり渡したりする事ができます。具体的には、関数は Function オブジェクトです。

以上、MDN: 関数と関数スコープ より引用

 (3) Object.entries()

      const result = 
        Object.entries(checkers)
              .reduce((r,e) => { r[e[0]] = e[1](); return r; } ,{});


と書いているところで、 Object.entries() を使っています。これはES2017で標準になっています。

 (4) Array.prototype.reduce()

上記 (3) のコードで Array.prototype.reduce() を使っています。使いこなせると便利な関数です。

 (5) ES2016, 17, 18 で導入された新しい関数、書き方等について

私は、

を、一通り読んで、動かして確認できるものは簡単なコードを書いてみたうえで、
ブックマークに入れていますが、日本語だとYuta Yamamotoさん@qiita の

が分かりやすいです。

 
 
さて、以上(1)から(5)までトピックを挙げましたが、「質問への追記・修正、ベストアンサー選択の依頼」欄で頂戴した、

もしよければ先のソースコードの書き方を学ぶのに参考になるサイトとかあれば教えていただきたいです。

とのご要望に、個々の点では回答できているけれども、より本質的に求められていることの
回答には全くなっていない気もしています。

というのは、そもそも元のご質問の「該当のソースコード」を見たときに、「質問への追記・修正、
ベストアンサー選択の依頼」に挙げましたコード (※これがベストなリファクタ案とは思っていませんが。)にリファクタできる、または、コードを書き始める以前に、「こういう風に書ける or 書き直せるはず。やってみよう」と着想できるようになるためにはどうしたらいいか? 
という問いこそが、

もしよければ先のソースコードの書き方を学ぶのに参考になるサイトとかあれば教えていただきたいです。

というご要望の真意であるとすれば、上記5点に並べた個々の、言ってしまえば、断片的な知識を
「ふ〜ん。そうなんだ。」みたいな感じで知っていても、(物知りにはなれるでしょうけれど、)

先のソースコードの書き方を学ぶ

こと (の、必要条件ではあるかもしれないが、十分条件)には、多分なっていないからです。

上記の懸念はありますが、とりあえず以上を一次回答とさせていただき、
さらなる疑問点などありましたら、ご質問頂ければと思います。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • JavaScript

    17072questions

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

  • jQuery

    6949questions

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