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

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

ただいまの
回答率

90.76%

  • JavaScript

    15309questions

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

  • jQuery

    6326questions

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

条件を使いまわす方法

解決済

回答 3

投稿

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

d__suke

score 2

$(elm).on({
    "touchstart":function(){
        this.touch = true;
    },
    "touchmove":function(){
        this.touch = false;
    },
    "touchend":function(){
        if(this.touch == true)
        {
            //処理
        }
    }
});


セレクターと処理が違う場合でも条件が同じ場合上記のようなのを毎回書くのは効率的ではないと思いまして、

function moge(elm){
    if(条件)
    {
        $(elm).addClass("active");
    }
    else
    {
        $(elm).removeClass("active");
    }
}
moge(".box");


このように使い回したいのですがやり方がわかりません。
どのような方法がありますか?
よろしくお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 3

checkベストアンサー

+2

条件を使いまわす方法

というのは、if(条件){}条件の部分を色んな関数の中で使いまわしたいということでしょうか?

そういう趣旨の質問であるという前提で以下、回答いたします。

JavaScriptでは関数を他の関数の引数に渡すことも出来るし、他の関数の返り値とすることも出来ます。

条件式の使いまわしということなので、ここでは、そのお題と相性の良いArray.prototype.filter()メソッドを用いたコードで説明してみます。

const fruits = ['apple', 'peach', 'banana', 'grape', 'watermelon'];

const result = fruits.filter(function(fruit) {
    return fruit.includes('p'); //条件(return fruit === 'apple'とかでも良い)
});

console.log(result) // [ 'apple', 'peach', 'grape' ]

まずは、Array.prototype.filter()の使い方のおさらいということで、上記のコードを置いておきます。

filterメソッドではtruefalseを返す関数をfilterメソッドの引数に渡す必要があるので、上記のコードでは、各フルーツ名の中にpという文字が含まれているかどうかを判定する無名関数を渡しています。

ですが、無名関数だと使い回せないので、次のコードではこの関数を変数に入れて使っています。

const fruits = ['apple', 'peach', 'banana', 'grape', 'watermelon'];

const doesContainP = function(fruit) {
    return fruit.includes('p');
}

const result = fruits.filter(doesContainP);

console.log(result) // [ 'apple', 'peach', 'grape' ]

条件判定をしてboolean値を返す関数をこのように変数に入れたことによって、他の関数の引数にもこの条件判定をする関数を渡して使いまわす事が出来るようになりました。

ということで、今回の質問の場合も、条件判定をしてboolean値を返す関数を作ってあげて、それを他の関数の引数に渡してあげることで、「条件を使いまわしたい」という要件を満たすことが出来ると思います。

 おまけ

この回答の冒頭で、「JavaScriptでは関数を他の関数の返り値とすることも出来る」と言っていましたが、この特徴を活かすと以下のように、より条件の使いまわしがしやすくなります。

const fruits = ['apple', 'peach', 'banana', 'grape', 'watermelon'];

// 関数を返す関数
const doesContainLetterOf = function(character) {
    return function(word) {
        return word.includes(character);
    }
}

// filterメソッドの引数に渡しているのは関数オブジェクト
const result = fruits.filter(doesContainLetterOf('p')); 

// 以下のように比較させる文字を変えることも可能になる
// const result = fruits.filter(doesContainLetterOf('g'));
// const result = fruits.filter(doesContainLetterOf('e'));


console.log(result) // [ 'apple', 'peach', 'grape' ]

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/05/04 19:38

    ありがとうございます!
    認識はそれであってます。
    JAVASCRIPTはあまり経験がなく、ご提示いただいた内容を理解するのに時間がかかりそうです。
    しっかり勉強させていただきます。

    キャンセル

  • 2018/05/04 20:19 編集

    あれ、解決済みになってませんでしたか?無言でベストアンサー取り消しはマナー違反な気はしますが、取り消したのであれば取り消した理由を書くなり、質問の意図がより伝わるように質問を修正するなりした下さいませ。

    キャンセル

  • 2018/05/04 20:27 編集

    申し訳ありません。
    まだビギナーでルールなどが良くわかっていませんでした。
    ベストアンサーにするともう回答が受けられないとベストアンサーした後に気づいたので外しました。
    もうしばらく回答を待ちたいと思います。
    不快な思いをさせてしまい申し訳ありませんでした。
    以後気をつけます。

    キャンセル

  • 2018/05/04 20:34

    To: d__suke さん
    一応、ベストアンサーを選んでも回答する事は可能です。
    が、無言でベストアンサーを付け外しするのは私も良くないと思います。
    現在、出ている回答で何が問題なのか、をはっきり書くことが重要でしょう。

    キャンセル

  • 2018/05/04 20:38

    はい、その点は上で謝罪をしております。
    外した理由も述べさせていただきました。

    キャンセル

  • 2018/05/04 20:45

    理由はどの部分でしょうか。
    「もうしばらく回答を待つ理由」が書かれていないと思ったのですが…。

    キャンセル

  • 2018/05/04 20:49

    かしこまりました。ありがとうございます。特に気にはしてなかったですが、今後の参考として理由は何でも良いと思うので、一言先にあると良かったと思います。

    キャンセル

  • 2018/05/04 20:50 編集

    think49さん

    それをあなたに言う必要はありますか?

    キャンセル

  • 2018/05/04 20:51 編集

    HayatoKamonoさん
    教えていただいたのにご無礼をしてしまいました。
    これからはそうさせていただきます。
    ルールも教えていただきありがとうございました。

    キャンセル

  • 2018/05/04 21:01 編集

    To: d__suke さん
    d__suke さんの認識は「ベストアンサーを選んだ質問には回答できない」「ベストアンサーを外した理由を書いた」と理解しています。
    認識に齟齬があるようなので、横入ですが、指摘しました。
    それ以上の意図はありません。

    キャンセル

  • 2018/05/04 22:45

    terateilはスクールではありません。Javascriptの経験がないとのことですが、HayatoKamonoさんとthink49さんのご回答はご理解しているでしょうか。回答者の方々は時間を作って回答していただいています。この先回答だけを募って特にベストアンサーを付けないようであるのならば解決済みにした方が良いかと思います。
    To: d__suke さん

    キャンセル

  • 2018/05/05 00:02

    easy_no_easyさん
    スクールじゃないことなんてよくわかってます。
    教えてもらって感謝もしています。
    ベストアンサーを付けないなんて言ってません。
    何を根拠にベストアンサーを付けないって言ってるんですか?
    もう少し別の回答があればと思った次第です。
    それは普通の事じゃないですか?

    キャンセル

  • 2018/05/05 07:10

    think49 さん
    HayatoKamono さん のいう通り、ベストアンサーを付けないのならば質問を修正すべきです。
    今後回答していただく方にも、質問文にベストアンサーを付けない理由も書くべきだと思った次第です。ただそれだけです。不快な思いをさせてしまったら申し訳ございません。

    キャンセル

  • 2018/05/05 08:41

    色々足りないところがあって申し訳ありませんでした。

    HayatoKamonoさんをベストアンサーにさせていただきます。
    僕の疑問の趣旨を理解していただきとても丁寧に教えていただきました。
    これをどう活用していいのかまだぼくではわからないので、引き続き勉強してまいります。

    回答を心から感謝いたします。

    キャンセル

  • 2018/05/05 09:22

    To: easy_no_easy さん
    easy_no_easy さんに怒っているわけではありませんよ。
    「HayatoKamonoさんとthink49さんのご回答はご理解しているでしょうか」と書いてくださっている事から、この現状が easy_no_easy さんの意図したものでない事は理解しています。

    > 今後回答していただく方にも、質問文にベストアンサーを付けない理由も書くべきだと思った次第です。
    私もそう思います。

    To: HayatoKamono さん
    横入で長々と申し訳ありませんでした。

    キャンセル

+2

次のどちらなのか、をはっきりさせた方が良いと思います。

  • 関数単位でデータを使いまわしたい
  • 要素単位でデータを使いまわしたい

 関数単位 (event.data)

/**
 * 関数単位
 */
jQuery(element).on('touchstart touchmove touchend', {touch: false}, function handleTouch (event) {
  var data = event.data;

  switch (event.type) {
    case 'touchstart':
      data.touch = true;
      return;
    case 'touchmove':
      data.touch = false;
      return;
    case 'touchend':
      data.touch = true;
      // 処理
  }
});

 要素単位 (jQuery#data)

/**
 * 要素単位
 */
jQuery(element).on('touchstart touchmove touchend', function handleTouch (event) {
  var currentTarget = jQuery(event.currentTarget);

  switch (event.type) {
    case 'touchstart':
      currentTarget.data('touch', true);
      return;
    case 'touchmove':
      currentTarget.data('touch', false);
      return;
    case 'touchend':
      currentTarget.data('touch', true);
      // 処理
  }
});

 まとめ

簡略化する為に関数を一つにまとめましたが、独立していても構いません。
重要なのは、jQueryの次の機能を使っている事です。

  • jQuery#data で要素にデータを紐づける
  • event.data で関数をデータを紐づける

jQuery をお使いのようなので、上記2つを提案しましたが、他にも選択肢があります。

Re: d__suke さん

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/05/05 00:07

    ご回答ありがとうございます。
    どちらかをはっきりさせた方が良いという事ですが、それすらもよくわからないので時間をかけて参考にさせていただきます。

    キャンセル

  • 2018/05/05 00:48

    > どちらかをはっきりさせた方が良いという事ですが、それすらもよくわからないので
    この状態でベストアンサーを選ぶのがあなたの答えですか。
    ベストアンサーを選ぶ事を延期したのは「もう少し別の回答があれば」という気持ちからではなかったのですか。

    関数単位か要素単位かも分からないということは、HayatoKamono さんの回答がとちらかも判断出来ないということになりますが、なぜ理解しようとせずにベストアンサーに選ぶのですか。
    回答してくれている方に対して、誠意ある態度を望みます。

    キャンセル

  • 2018/05/05 08:43 編集

    強いて言えばこちらの回答は僕の知りたいことではないからです。
    HayatoKamonoさんは僕の拙い文から趣旨をくみ取ってくれたように思います。
    それくらいはわかります。
    なのであなたの回答をベストアンサーにはしませんでした。

    キャンセル

  • 2018/05/05 09:06 編集

    > 強いて言えばこちらの回答は僕の知りたいことではないからです。
    結局、「知りたいこと」が何だったのか分かりませんし、「理解しなくていい理由」になっていませんし、いろいろと疑問が残りますね。

    この質問、「条件を使いまわす」とありますが、質問文にあるコードの this.touch なる条件は要素に結びつけられた条件に読めました。要素に独自プロパティを拡張するとは、かなり強引な手法です。
    だから、要素に対応する条件(Boolean値)を埋め込む方法を提案しましたが、あなたはHayatoKamonoさんの回答で満足する趣旨のことを書きました。
    少なくとも、私には理解しているようには読めません。

    キャンセル

  • 2018/05/05 09:23

    したいことが何なのかわからなかったそうですが、HayatoKamonoさんは理解してくださいました。
    理解しなくていい理由とは何をおっしゃりたいのかわかりません。
    満足なんて一言も言ってないですし、僕の理解が追い付いてない事も認めています。
    曲解するのはやめていただけませんか。

    キャンセル

  • 2018/05/05 09:25

    といいますか、「それすらもよくわからない」のに「僕の知りたいことではないから」と断言できる理由が分かりません。

    キャンセル

  • 2018/05/05 09:31

    > 理解しなくていい理由とは何をおっしゃりたいのかわかりません。
    「それすらもよくわからない」の部分です。

    キャンセル

  • 2018/05/05 09:31

    あなたが理由が分からないのは知りません。
    ぼくの少ない経験でそう思いました。
    自分が選ぶんですからそこの基準は僕が決めます。

    キャンセル

  • 2018/05/05 09:35 編集

    なんとなくそう思ったからあなたをベストアンサーにしなかったのは理由になりませんか?
    あなたがベストアンサーではなかった厳密な理由が必要ですか?
    そもそも厳密な理由なんてありません。
    理解できないか中でもベストアンサーを付けるとしたらHayatoKamonoさんです。
    あれだけ丁寧に書いていただいてこれからの糧にしようと思っています。

    キャンセル

  • 2018/05/05 10:14

    > あなたが理由が分からないのは知りません。
    あなたは説明する気がないようなので、もう返信は結構です。

    > なんとなくそう思ったからあなたをベストアンサーにしなかったのは理由になりませんか?
    そんな答えが返ってくるとは想定していませんでした。

    なんとなく、「それすらもよくわからない」
    なんとなく、「僕の知りたいことではない」
    なんとなく、「あなたをベストアンサーにしなかった」

    私がベストアンサーに選ばれなかったことはどうでもよくて、今後の回答方針を決める為に理由をはっきりさせたいと思っていました。
    望む回答ではなかったのなら、無駄な回答をしない為に質問内容を明確化させるべきですが、ここまで自分の内面が分かっていないようですと、補足要求しても明確な答えが得られそうにないですね。

    キャンセル

  • 2018/05/05 11:08

    全然細く要求じゃないですよね?
    あなたの質問でそう答えるしかなかったんじゃないですか?
    自分の言い方がおかしかったとかそういう事は思わないわけですか?

    キャンセル

  • 2018/05/05 11:18

    > d__suke さん
    こういった知識共有するためにサイト利用するんであれば、回答をきちんと理解して評価してください。

    あとから見る人にとって、すごく迷惑です。。。
    最低限のマナーかと。

    キャンセル

  • 2018/05/05 11:25 編集

    回答をきちんと理解したいのですが、理解ができず時間をかけてこれから勉強していこうと思ってますが、それでもその回答の中から選ばせていただきました。
    ぼくにとって質問と齟齬があるかなと思ったのでこのように評価をしています。
    適当にベストアンサーを付けたわけではありません。
    読んでいただければわかると思いますが。
    最初にマナーとしてベストアンサーを取り下げてしまった事は過ちと理解しこれから気を付けたいと思います。

    キャンセル

  • 2018/05/05 11:31

    誤解があると思います。
    think49 さんは自分の回答がベストアンサーに選ばれなかったことに腹を立てて d__suke さんに因縁をつけているわけではありません。
    このサイトの使い方を新規参入者に教えているだけです。

    ここは一対一のサポートセンターではありません。
    質問と回答は全世界に公開され、その解決の過程は同じ問題を抱える人にとって解決方法を求めるための資料になります。
    ですから、後で見る第三者のために「質問の意図」と「明確な解決法」をはっきりさせる必要があります。

    どちらも不明瞭なままではこの質問は何の資料にもならないクズ質問です。
    せっかくの質問がクズ質問に終わったのではもったいないのではありませんか?

    そこが改善されず、また d__suke さんが理解しようとせずクズ質問を量産するなら、あなたの質問は多くの回答者によって、最初からクズ質問として扱われることになります。

    キャンセル

  • 2018/05/05 11:32

    私の思うマナーの押しつけになり微妙ですが、少なくとも一度ベストアンサーを外したのであれば、じっくり咀嚼して理解後に選択すべきだったかと。

    少なくとも

    関数単位でデータを使いまわしたい
    要素単位でデータを使いまわしたい

    のどちらなのかもわからない状態で、ベストアンサーを選んでも、せっかくもらった回答群が「無駄になります」

    きちんと理解を深めた後に、改めてコメントなりで理解度を示し、回答に対しての誠意を見せることが必要と思うので、そういった対応を期待しています。

    キャンセル

  • 2018/05/05 11:39

    ご返信ありがとうございます。

    Zuishinさん
    クズ質問になってしまっているのは現状その通りだと思います。
    この質問に関しては皆さんのお役に立てるものではないと思います。
    これは大変申し訳なく思います。

    te2jiさん
    >この先回答だけを募って特にベストアンサーを付けないようであるのならば解決済みにした方が良いかと思います。
    とコメントをいただいのでベストアンサーを早く着けるのもマナー名の課と思ってしまいました。
    ベストアンサーが解決済みのボタンなのかと思ってたんですが、違いそうですね。
    もうちょっと子のサイトを勉強します。

    キャンセル

  • 2018/05/05 11:46

    だから、そういった「理解しない状態」でもさっさと終わらせようって態度が質問者として誠実ではないですよ。って言ってるんですけど^^;

    キャンセル

  • 2018/05/05 13:41 編集

    To: Zuishin さん、te2ji さん
    フォローありがとうございます。

    To: d__suke さん
    > ベストアンサーが解決済みのボタンなのかと思ってたんですが、違いそうですね。
    「解決済み」の認識に齟齬があります。
    Zuishinさんがいわれたように、後で見る第三者のために「質問の意図」と「明確な解決法」をはっきりさせる必要がありますので、現段階では「解決済みではない」のです。
    ちなみに、補足要求はte2jiさんがフォローして下さったように、関数単位/要素単位の部分で、あなたは「それすらもよくわからない」と答えましたので、「質問の意図」が不明瞭です。
    「質問の意図」が不明瞭なら、それに対応する「解決法」も不明瞭となります。

    キャンセル

+1

こういうことですか??

var $box = $('.box');
var $grid = $('.grid')

function hoge (element) {
 if (条件) {
  element.addClass('active');
 } else {
  element.removeClass('active');
 }
}

hoge($box);
hoge($grid);

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/05/04 19:40

    回答ありがとうございます!
    そのような感じで条件も再利用できないかなと思った次第です。

    キャンセル

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

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

関連した質問

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

  • JavaScript

    15309questions

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

  • jQuery

    6326questions

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