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

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

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

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

jQuery

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

Q&A

解決済

1回答

3731閲覧

メソッドチェーンのような記述で配列をフィルタリングしたいが、そもそもメソッドチェーンの作り方が分からない。試しに作っても配列が返ってこない

asagao

総合スコア15

JavaScript

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

jQuery

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

0グッド

0クリップ

投稿2017/07/28 16:37

#前提・実現したいこと

  • まず興味をもって開いていただきましてありがとう
  • 自分はプログラム初心者というより素人です
  • JavaScriptというより簡単な記述でDOM操作ができたJQueryのおかげでこの分野に興味をもった人間です。今まではWebの読み手側でした
  • 変数sampledataにオブジェクトが連続で規則正しく入った配列があります(最下部参照)。

例えば「 日本人 且つ 女性 且つ 二十歳未満」にすべて合致するオブジェクトを抽出・フィルタリングしたいのですが、
これをどうにかこうにかして以下のようなメソッドチェーンライクな記述法で、オリジナルの配列から条件フィルタリングして新たな配列を作成し返り値にしたいのです。

JavaScript

1var sampledata = [{},{},{},,,]; 2var newarray = sampledata.kokusekiis("Japanese").seibetsuis("female").nenreiislower(20);

JavaScript

1var sampledata = [{},{},{},,,]; 2var newarray = sampledata.itchi("nationality","Japanese").itchi("sex","female").miman("age",20);
  • どうしてこうしたいかというと自分が何度も絞り込みをやるからと、

自分以外の人のページ視聴者にもF12から簡単に絞り込み作業をコマンド風にやってみてほしいからです

  • JQueryも好きなのでJQueryを使ったものと、依存しないネイティブなものの2パターン実現可能なのでしょうか?

できれば勉強のために2パターンあれば教えてもらえると助かります。

  • もうすでにこの世にこれを実現できるプラグインが存在してるよって場合は教えていただけるとすごく助かります。
  • もし土俵にもたってないちんぷんかんぷんな質問になってましたら、正直に叱ってもらって構いません。

#自力で試したこと

まだつまみ食いレベルの自分で思いついたのは以下の2つの方法なんですが、 再利用しにくかったり、
関数の引数にその前の関数での戻り値を入れたり、 読みにくいです

その1) 単発ならこれでいいのだけど・・・使い回しが効かない上に、視聴者はこんなの書けない

JavaScript

1var japanesefemale1 = sampledata.filter(function(input) { 2 if (input["nationality"] === "Japanese" && input["sex"] === "female" && input["age"] < 20) { 3 return true 4 } 5}); 6console.log(japanesefemale1); //ちゃんと思い通りにフィルタリングした新たな配列が入っている
その2) 予め関数作成し、繰り返して絞り込む

JavaScript

1function itchi(input, key, value) { 2 return input.filter(function(input) { 3 if (input[key] === value) { 4 return true 5 } 6 }); 7} 8function miman(input, key, value) { 9 return input.filter(function(input) { 10 if (input[key] < value) { 11 return true 12 } 13 }); 14} 15var japanesefemale2 = miman(itchi(itchi(sampledata, "nationality", "Japanese"), "sex", "female"),"age", 20);// 16console.log(japanesefemale2); //ちゃんと思い通りにフィルタリングした新たな配列が入っている
その3)JQuery 拡張メソッドをネット上の資料をもとに見よう見まねで作ってみた

なお、鎖のようにメソッドチェーンさせるにはJQueryオブジェクトの状態で都度返さないとチェーンが途切れることはネット上の資料を読んで学びました。

JavaScript

1(function($) { 2 $.fn.extend({ 3 hitoshii: function(key, value) { //失敗。これを使っても空っぽの配列しか返ってこない 4 return (this.filter(function(item, index, input) { 5 if (item[key] === value) return true 6 })); 7 }, 8 getfirst: function() { //成功。思い通りの結果が返ってきた 9 return this[0]; 10 }, 11 getlast: function() { //成功。思い通りの結果が返ってきた 12 return this[this.length - 1]; 13 }, 14 getvar: function(num) { //成功。思い通りの結果が返ってきた 15 if (0 <= num && num < this.length) return this[num]; 16 } 17 }); 18})(jQuery);

JavaScript

1$(sampledata).hitoshii("nationality", "Japanese"); //失敗。空っぽの配列[]が返ってきた 2$(sampledata).getfirst(); //成功。 3$(sampledata).getlast(); //成功。 4$(sampledata).getvar(3); //成功。

#最後に

  • Webkit系ブラウザのデベロッパーツールのコンソールで操作
  • JQueryのバージョンは3.1.1を使用

最後までお読み頂きありがとうございました

JavaScript

1var sampledata = [{ 2 "age": 21, 3 "sex": "male", 4 "id": 1001, 5 "single": true, 6 "nationality": "Japanese" 7}, { 8 "age": 10, 9 "sex": "female", 10 "id": 1002, 11 "single": true, 12 "nationality": "Japanese" 13}, { 14 "age": 18, 15 "sex": "male", 16 "id": 1003, 17 "single": true, 18 "nationality": "Chinese" 19}, { 20 "age": 23, 21 "sex": "female", 22 "id": 1004, 23 "single": true, 24 "nationality": "Japanese" 25}, { 26 "age": 15, 27 "sex": "male", 28 "id": 1005, 29 "single": true, 30 "nationality": "Japanese" 31}, { 32 "age": 29, 33 "sex": "female", 34 "id": 1006, 35 "single": false, 36 "nationality": "Chinese" 37}, { 38 "age": 36, 39 "sex": "female", 40 "id": 1007, 41 "single": false, 42 "nationality": "Korean" 43}]; 44

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

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

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

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

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

guest

回答1

0

ベストアンサー

「メソッドチェーンの作り方」を探して試してみてはいかがでしょうか。

【メソッドチェーンの作り方 - あと味】
http://taiju.hatenablog.com/entry/20100307/1267962826

【JavaScriptでメソッドチェーンを作る - Qiita】
http://qiita.com/sawapi/items/279531c88709700d0ff1

【jQueryのメソッドチェーンのつなぎ方(2) [Javascript] All About】
https://allabout.co.jp/gm/gc/24166/

投稿2017/07/28 17:02

kei344

総合スコア69364

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

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

asagao

2017/07/28 17:28

回答ありがとうございます! 結論を先に申し上げますと、やりたかったことがズバリできました!感謝感激です! 1番上の「あと味」さんのページが非常にわかりやすかったうえに私にピンポイントな内容でした。 さっそく見よう見まねで自分の書いた関数の中身(上述)をコピペして ```JavaScript Array.prototype.itchi = function(key, value) { return (this.filter(function(item, index, input) { if (item[key] === value) return true })); }; Array.prototype.miman = function(key, value) { return (this.filter(function(item, index, input) { if (item[key] < value) return true })); }; var sampledata = [{略},{略},{略},,,]; sampledata.miman("age",20).itchi("nationality","Japanese");//成功! ``` としたところ、うまくチェーンして絞り込んだ配列が返ってきました! うまくいきましたので、もう少し関数名を洒落たものにしますね。 この度は短時間で解決に至るズバリの回答ありがとうございました!
kei344

2017/07/28 17:33

Arrayのように元々有るオブジェクトを拡張するのは避けたほうが良いです。そのページ内で「ちょっとお行儀が悪いですが」と書かれているのはそういうことです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問