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

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

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

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

jQuery

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

Q&A

解決済

3回答

3502閲覧

条件を使いまわす方法

d__suke

総合スコア8

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2018/05/04 07:36

$(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");

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

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

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

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

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

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

guest

回答3

0

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

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

関数単位 (event.data)

JavaScript

1/** 2 * 関数単位 3 */ 4jQuery(element).on('touchstart touchmove touchend', {touch: false}, function handleTouch (event) { 5 var data = event.data; 6 7 switch (event.type) { 8 case 'touchstart': 9 data.touch = true; 10 return; 11 case 'touchmove': 12 data.touch = false; 13 return; 14 case 'touchend': 15 data.touch = true; 16 // 処理 17 } 18});

要素単位 (jQuery#data)

JavaScript

1/** 2 * 要素単位 3 */ 4jQuery(element).on('touchstart touchmove touchend', function handleTouch (event) { 5 var currentTarget = jQuery(event.currentTarget); 6 7 switch (event.type) { 8 case 'touchstart': 9 currentTarget.data('touch', true); 10 return; 11 case 'touchmove': 12 currentTarget.data('touch', false); 13 return; 14 case 'touchend': 15 currentTarget.data('touch', true); 16 // 処理 17 } 18});

まとめ

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

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

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

Re: d__suke さん

投稿2018/05/04 11:31

編集2018/05/04 11:41
think49

総合スコア18156

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

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

d__suke

2018/05/04 15:07

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

2018/05/04 15:48

> どちらかをはっきりさせた方が良いという事ですが、それすらもよくわからないので この状態でベストアンサーを選ぶのがあなたの答えですか。 ベストアンサーを選ぶ事を延期したのは「もう少し別の回答があれば」という気持ちからではなかったのですか。 関数単位か要素単位かも分からないということは、HayatoKamono さんの回答がとちらかも判断出来ないということになりますが、なぜ理解しようとせずにベストアンサーに選ぶのですか。 回答してくれている方に対して、誠意ある態度を望みます。
d__suke

2018/05/04 23:44 編集

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

2018/05/05 00:18 編集

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

2018/05/05 00:23

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

2018/05/05 00:25

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

2018/05/05 00:31

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

2018/05/05 00:31

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

2018/05/05 00:36 編集

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

2018/05/05 01:14

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

2018/05/05 02:08

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

退会済みユーザー

2018/05/05 02:18

> d__suke さん こういった知識共有するためにサイト利用するんであれば、回答をきちんと理解して評価してください。 あとから見る人にとって、すごく迷惑です。。。 最低限のマナーかと。
d__suke

2018/05/05 02:29 編集

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

2018/05/05 02:31

誤解があると思います。 think49 さんは自分の回答がベストアンサーに選ばれなかったことに腹を立てて d__suke さんに因縁をつけているわけではありません。 このサイトの使い方を新規参入者に教えているだけです。 ここは一対一のサポートセンターではありません。 質問と回答は全世界に公開され、その解決の過程は同じ問題を抱える人にとって解決方法を求めるための資料になります。 ですから、後で見る第三者のために「質問の意図」と「明確な解決法」をはっきりさせる必要があります。 どちらも不明瞭なままではこの質問は何の資料にもならないクズ質問です。 せっかくの質問がクズ質問に終わったのではもったいないのではありませんか? そこが改善されず、また d__suke さんが理解しようとせずクズ質問を量産するなら、あなたの質問は多くの回答者によって、最初からクズ質問として扱われることになります。
退会済みユーザー

退会済みユーザー

2018/05/05 02:32

私の思うマナーの押しつけになり微妙ですが、少なくとも一度ベストアンサーを外したのであれば、じっくり咀嚼して理解後に選択すべきだったかと。 少なくとも 関数単位でデータを使いまわしたい 要素単位でデータを使いまわしたい のどちらなのかもわからない状態で、ベストアンサーを選んでも、せっかくもらった回答群が「無駄になります」 きちんと理解を深めた後に、改めてコメントなりで理解度を示し、回答に対しての誠意を見せることが必要と思うので、そういった対応を期待しています。
d__suke

2018/05/05 02:39

ご返信ありがとうございます。 Zuishinさん クズ質問になってしまっているのは現状その通りだと思います。 この質問に関しては皆さんのお役に立てるものではないと思います。 これは大変申し訳なく思います。 te2jiさん >この先回答だけを募って特にベストアンサーを付けないようであるのならば解決済みにした方が良いかと思います。 とコメントをいただいのでベストアンサーを早く着けるのもマナー名の課と思ってしまいました。 ベストアンサーが解決済みのボタンなのかと思ってたんですが、違いそうですね。 もうちょっと子のサイトを勉強します。
退会済みユーザー

退会済みユーザー

2018/05/05 02:46

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

2018/05/05 04:42 編集

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

0

ベストアンサー

条件を使いまわす方法

というのは、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 09:44

HayatoKamono

総合スコア2415

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

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

d__suke

2018/05/04 10:38

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

2018/05/04 11:20 編集

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

2018/05/04 11:28 編集

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

2018/05/04 11:34

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

2018/05/04 11:38

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

2018/05/04 11:45

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

2018/05/04 11:49

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

2018/05/04 11:51 編集

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

2018/05/04 11:53 編集

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

2018/05/04 14:40 編集

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

退会済みユーザー

2018/05/04 13:45

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

2018/05/04 15:02

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

退会済みユーザー

2018/05/04 22:10

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

2018/05/04 23:41

色々足りないところがあって申し訳ありませんでした。 HayatoKamonoさんをベストアンサーにさせていただきます。 僕の疑問の趣旨を理解していただきとても丁寧に教えていただきました。 これをどう活用していいのかまだぼくではわからないので、引き続き勉強してまいります。 回答を心から感謝いたします。
think49

2018/05/05 00:22

To: easy_no_easy さん easy_no_easy さんに怒っているわけではありませんよ。 「HayatoKamonoさんとthink49さんのご回答はご理解しているでしょうか」と書いてくださっている事から、この現状が easy_no_easy さんの意図したものでない事は理解しています。 > 今後回答していただく方にも、質問文にベストアンサーを付けない理由も書くべきだと思った次第です。 私もそう思います。 To: HayatoKamono さん 横入で長々と申し訳ありませんでした。
guest

0

こういうことですか??

lang=javascript

1var $box = $('.box'); 2var $grid = $('.grid') 3 4function hoge (element) { 5 if (条件) { 6 element.addClass('active'); 7 } else { 8 element.removeClass('active'); 9 } 10} 11 12hoge($box); 13hoge($grid);

投稿2018/05/04 08:16

編集2018/05/04 08:18
退会済みユーザー

退会済みユーザー

総合スコア0

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

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

d__suke

2018/05/04 10:40

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問