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

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

ただいまの
回答率

90.32%

  • JavaScript

    17566questions

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

  • React.js

    915questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Javascript React.js <Uncaught TypeError: filter.match is not a function>になるのは何故でしょうか

解決済

回答 1

投稿

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

hitominjar

score 13

 前提・実現したいこと

React.js Javascriptの初心者です。
検索した文字をフィルターファンクションで、配列関数とマッチするもを、フィルタリングさせたいと思っています。

別のコンポーネントにある、配列から、nameと、inputからゲットしたvalueがマッチする場合に、そのマッチするコンポーネントを呼び出す、ファンクションを作りたいと思っております。
しかし、Uncaught TypeError: filter.match is not a functionのエラーが発生し、原因がわからずに途方に暮れています。

return filter.match(elem.name)の部分が何か間違えているのか、タイプミスではないと思うのですが、何が原因なのか教えていただけませんでしょうか。よろしくお願いいたします。

 発生している問題・エラーメッセージ

Uncaught TypeError: filter.match is not a function

 該当のソースコード

import React, { Component } from 'react';
import { render } from 'react-dom';

import StyleguideModal from './StyleguideModal';

/* Styleguide Application */

class Search extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      textLists: props.textLists,
      search:"",
      elements:[]
    };
  }

  handleSearch(e) {
      var filter = new RegExp(e.target.value);
      var newState = {};
      newState.search = e.target.value;
      newState.elements = this.props.textLists.filter(function(elem) {
          return filter.match(elem.name)
      });
      this.setState(newState);
    }

  componentDidMount() {
          $(document).foundation();
  }

  renderItem(text) {
      return (
        <div className="margin-bottom-4 small-6 medium-4 large-2 columns card-wrap">
          <a className="itemLink" data-open="Style-Modal">
            <div className="radius bordered shadow card">
              <img className="style-tmb-s" src={text.thumbnail} />
              <div className="card-section">
                <p>{text.name}</p>
              </div>
            </div>
          </a>
        </div>
      )
  }

  renderImges(text) {
      return (
        <div>
          <img src={text.image} />
        </div>
      )
  }


render() {

        return (
          <div  className="wrap">
            <SearchFilter options={this.props.textLists.map(function(elem) {
              return elem.name } ) } search={this.state.search} onChange={this.handleSearch.bind(this)} />
          <div className="main-wrap">
            <div className="result-wrap">
              <div className="large-12.columns">

                  <div className="small-9 large-10 columns padding-top-3 result-wrap">


                    <StyleguideOverlay textLists={this.props.textLists} />

                    <div className="row">
                      <div className="margin-bottom-1 small-12 medium-12 large-12 columns title-wrap">
                        <i className="fi-magnifying-glass"></i>
                        <h3 className="title">Icons</h3>
                      </div>
                    </div>



                    <div className="row items-wrap">
                      { this.state.elements.map(function(elem) { return this.renderImages(elem) }) }
                      { this.state.elements.map(function(elem) { return this.renderItems(elem) }) }
                    </div>
                  </div>
              </div>
            </div>
          </div>


          </div>

          );
    }
}

class StyleguideOverlay extends React.Component {

    renderText(text) {
      return (
          <div>
          <div className="tabs-panel is-active" id="panel1">
            <pre>
              <code>
                {text.sourceTypeA}
              </code>
            </pre>
          </div>
          <div className="tabs-panel" id="panel2">
            <pre>
              <code>
                {text.sourceTypeB}
              </code>
            </pre>
          </div>
        </div>
      )
  }

    render() {
        return (
            <div className="reveal row" id="Style-Modal" data-reveal>
                    <div className="Style-Modal-inner columns small-12">

                      <ul className="tabs" data-tabs id="example-tabs">
                        <li className="tabs-title is-active">
                          <a href="#panel1" aria-selected="true">HTML</a></li>
                        <li className="tabs-title"><a data-tabs-target="panel2" href="#panel2">source B</a></li>
                      </ul>

                      <div className="tabs-content" data-tabs-content="example-tabs">
                        {this.props.textLists.map(this.renderText)}
                      </div>

                      <button className="close-button" data-close aria-label="Close modal" type="button">
                      </button>
                    </div>
                  </div>
        )

      }
}

class SearchFilter extends React.Component {

    render() {
        return (
            <div className="large-12.columns header">
        <div className="row head-nav" id="responsive-menu">
          <div className="small-7 large-7 columns search-rap">
            <div className="small-12 large-12 columns" id="header">

              <div className="input-group search-from-wrap">
                <input type="text" className="padding-lest-3 form-control _keyword border-radius-s" onChange={this.props.onChange}
                  value={this.props.search}
                  name="search"
                  placeholder="what are you searching?"
                  autoComplete="on" list="stylesuggest" />
                  <datalist id="stylesuggest">
                    { this.props.options.map(function(option) {
                        return (<option value={option} />)
                    }) }
                    </datalist>
                <div className="search-icon-rap" >
                  <i className="fi-magnifying-glass"></i>
                </div>

              </div>
            </div>
          </div>
        </div>
      </div>

        )
    }

}

export default Search;
  constructor(props) {
    super(props);
    this.state = {
       textLists: [
        { thumbnail: 'images/styleguide/style-guide-thumbnail-list_icon-add-project.png', name:'Cancel Button', sourceTypeA:'<i class="fi-heart"></i>', sourceTypeB:'sourceB'},
        { thumbnail: 'images/styleguide/style-guide-thumbnail-list_icon-already-checked.png', name:'Already checked', sourceTypeA:'<i class="fi-heart"></i>', sourceTypeB:'sourceB'},
        { thumbnail: 'images/styleguide/style-guide-thumbnail-list_icon-calendar.png', name:'Calendar', sourceTypeA:'<i class="fi-heart"></i>', sourceTypeB:'sourceB'},
        { thumbnail: 'images/styleguide/style-guide-thumbnail-list_icon-cause-effect.png', name:'Cause & effect', sourceTypeA:'<i class="fi-heart"></i>', sourceTypeB:'sourceB'},
      ]
    };
  }
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+3

 原因

const target = { name: 'Cancel Button' };

const pattern = new RegExp('Cancel');

// TypeError: filter.match is not a function
pattern.match(target.name)

まず、掲載されているコードの問題箇所を簡易的なコードに書き直すと上記のようになります。
filter.match is not a functionというエラーの意味はそのままで、「filter.matchは関数ではない」、別の言い方をすると「filter.matchという関数は存在しない」ということです。

このようなエラーを見た場合、とりあえず確認しておきたいのが、「new RegExp()によって生成されるオブジェクトには、どのようなメソッドが実際はあるのか?」というところになるかと思います。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/RegExp

上記リンク先の「メソッド」のセクション以下を見ると、matchというメソッドは用意されていないことがわかります。

exec
その文字列のパラメータでのマッチのための検索を実行します。
test
その文字列のパラメータでのマッチのためのテストをします。
toSource 
特定のオブジェクトを表すオブジェクトリテラルを返します。 この値は新しいオブジェクトを生成するために使うことができます。Object.prototype.toSource メソッドを上書きします。
toString

では、matchメソッドというのはJavaScriptに存在しないのかというと、そういうわけでもなく、matchメソッドはString型のオブジェクトのメソッドとして存在しています。

str.match(regexp)
正規表現に対する文字列 のマッチングの際に、そのマッチ結果を得るために使われます。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/String/match

ということで、原因は以上です。

 解決策の一例

const target = { name: 'Cancel Button' };

const pattern = new RegExp('Cancel');

// [ 'Cancel', index: 0, input: 'Cancel Button' ]
console.log(target.name.match(pattern))

// false
console.log(pattern.test(target.name)) 

// [ 'Cancel', index: 0, input: 'Cancel Button' ]
console.log(pattern.exec(target.name))

 追記

const pattern = new RegExp('a');
const str = 'a';

console.log(typeof pattern) // object
console.log(typeof str) // string

console.log(pattern.match) // undefined
console.log(str.match) // [Function: match]

// TypeError: pattern.match is not a function
// console.log(pattern.match(str)); 

// [ 'a', index: 0, input: 'a' ]
console.log(str.match(pattern)); 

この追加のコードと、元の回答にある説明を読んで、何が原因でエラーが起きているのかが分かると良いのですが。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/06/22 17:13

    ご回答ありがとうございます><
    まだ完全に理解できていないのですが、私の理解できていないポイントは下記です><

    > matchメソッドはString型のオブジェクトのメソッドとして存在しています。
    配列の内容も、valueも「String型のオブジェクト」だと思うのですが、違うのでしょうか。。。
    文字列になっていないから、エラーになっているという事でしょうか?

    キャンセル

  • 2018/06/22 18:36

    私が掲載した原因版と解決策版と のコードの方は実行して動作確認はされましたか?また、リンク先の各URLの内容は読まれましたでしょうか?そこを踏まえて必要であれば改めてより具体的に質問頂ければと思います。

    キャンセル

  • 2018/06/22 18:43

    もちろん、動作確認してリンク先の内容も読みました。多分私の理解力が低すぎるのでイマイチ、今回のポイントが掴めていないのだと思います。。。ご丁寧にご回答いただいてありがとうございます。もう少し熟読して、わかるまでトライしてみます。ありがとうございます。

    キャンセル

  • 2018/06/22 18:49 編集

    原因を示した3行のコードとそれ以下の説明から、何が原因で該当のエラーが発生するかが、まだ尚理解出来ていないということですか?その場合、コメント欄で頂いていた追加の質問をより具体的に頂ければ、何が分からないかが伝わってくるかとは思います。

    キャンセル

  • 2018/06/22 19:26

    追記ありがとうございます><
    こういう解釈であってますでしょうか><

    const pattern = new RegExp('a');
    const str = 'a';

    console.log(typeof pattern) // object
    // means pattern の data型 = object

    console.log(typeof str) // string
    // means str の data型 = string(文字列)

    console.log(pattern.match) // undefined
    // object だから undefined
    // should be string

    console.log(str.match) // [Function: match]
    // TypeError: pattern.match is not a function
    // console.log(pattern.match(str));
    // 何とマッチするのか書いてないからエラー?

    // [ 'a', index: 0, input: 'a' ]
    console.log(str.match(pattern));
    //means strとpatternがマッチすればコンソールログに出力

    キャンセル

  • 2018/06/22 20:14

    今わかりました!!
    <string>.match(<RegExp>) にしないといけないところを、 <RegExp>.match(<string>)になっていたからなんですね!

    キャンセル

  • 2018/06/23 07:40

    お、良かったです!そういうことです!!!

    キャンセル

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

  • JavaScript

    17566questions

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

  • React.js

    915questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。