回答編集履歴

4 a

HayatoKamono

HayatoKamono score 2293

2018/05/30 10:34  投稿
```
bundle.js:27372 Uncaught Error: Module build failed: SyntaxError: Unexpected token (10:8)
  8 | class Search extends React.Component {
  9 |
> 10 |  const StyleguideFrom = this.props.textList.filter((item) => (
    |        ^
 11 |    item.name.toLowerCase().indexOf(val) >= 0
 12 |  ));
 13 |  this.setState({
```
エラーメッセージの通り、該当箇所で構文エラー(Syntax Error)が起きています。
一旦、既存のReactのコードからは離れて、まずはJavaScriptのClass定義の方法を復習し、Class定義の方法を理解した上で、Reactのコードに戻ることをお勧めします。
[jsbin.com](https://jsbin.com)のようなサイトを使うと直ぐにコードを書いて試せるのでお勧めです。
ちなみに、今回生じている構文エラーをReactを使わない簡易コードで再現すると、以下のようになります。
ちなみに、今回生じている構文エラーをReactを使わない簡易コードで再現すると、以下のようになります。JavaScriptもReact.jsもよく分かっていない状態で誰かの記事を参考にし、それをカスタマイズしようとしていると何がエラーの原因なのかも分からないかもしれませんが、実際のエラーはたったこれだけのコードの中で起きている訳です。
```
class Animal {
   // Syntax Error
   const id = 1;
}
class User {
   // Syntax Error
   this.name = 'foo';
}
```
[https://jsbin.com/puyujupuku/1/edit?js,console](https://jsbin.com/puyujupuku/1/edit?js,console)
> React.js、Javascript.js初心者です。
検索して、検索したキーワードを取得して、検索結果を返す。処理をしたいと思っております。
こちらの記事を参考に取り組んでいるのですが、うまく動きません。
https://mae.chab.in/archives/2860
これは仕事の一環でしょうか？それとも私的な学習でしょうか？
後者であれば、まずはJavaScriptの基本的な部分を抑えた上で、React.jsの学習に移行することをお勧め致します。前者であればJavaScript初心者の状態でReact.jsに挑むのは非効率だと思いますので、プロジェクトチームの人に相談した方が良さそうな気がします。
# 参考
- [クラス(MDN)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes)
- [class 式](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/class)
※ その他、必要に応じてJavaScriptのclass定義について検索するなどして調べてみて下さい。
3 a

HayatoKamono

HayatoKamono score 2293

2018/05/30 10:03  投稿
```
bundle.js:27372 Uncaught Error: Module build failed: SyntaxError: Unexpected token (10:8)
  8 | class Search extends React.Component {
  9 |
> 10 |  const StyleguideFrom = this.props.textList.filter((item) => (
    |        ^
 11 |    item.name.toLowerCase().indexOf(val) >= 0
 12 |  ));
 13 |  this.setState({
```
エラーメッセージの通り、該当箇所で構文エラー(Syntax Error)が起きています。
一旦、既存のReactのコードからは離れて、まずはJavaScriptのClass定義の方法を復習し、Class定義の方法を理解した上で、Reactのコードに戻ることをお勧めします。
Class定義の方法を確認する際には実際の簡易的なコードを書いて実行し、動作確認をしながら理解を深めるようにすると良いかと思います。
[jsbin.com](https://jsbin.com)のようなサイトを使うと直ぐにコードを書いて試せるのでお勧めです。
ちなみに、今回生じている構文エラーをReactを使わない簡易コードで再現すると、以下のようになります。  
 
```  
class Animal {  
   // Syntax Error  
   const id = 1;  
}  
 
class User {  
   // Syntax Error  
   this.name = 'foo';  
}  
```  
[https://jsbin.com/puyujupuku/1/edit?js,console](https://jsbin.com/puyujupuku/1/edit?js,console)  
 
> React.js、Javascript.js初心者です。
検索して、検索したキーワードを取得して、検索結果を返す。処理をしたいと思っております。
こちらの記事を参考に取り組んでいるのですが、うまく動きません。
https://mae.chab.in/archives/2860
これは仕事の一環でしょうか？それとも私的な学習でしょうか？
後者であれば、まずはJavaScriptの基本的な部分を抑えた上で、React.jsの学習に移行することをお勧め致します。前者であればJavaScript初心者の状態でReact.jsに挑むのは非効率だと思いますので、プロジェクトチームの人に相談した方が良さそうな気がします。
# 参考
- [クラス(MDN)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes)
- [class 式](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/class)
※ その他、必要に応じてJavaScriptのclass定義について検索するなどして調べてみて下さい。
2 a

HayatoKamono

HayatoKamono score 2293

2018/05/30 09:58  投稿
```
bundle.js:27372 Uncaught Error: Module build failed: SyntaxError: Unexpected token (10:8)
  8 | class Search extends React.Component {
  9 |
> 10 |  const StyleguideFrom = this.props.textList.filter((item) => (
    |        ^
 11 |    item.name.toLowerCase().indexOf(val) >= 0
 12 |  ));
 13 |  this.setState({
```
エラーメッセージの通り、該当箇所で構文エラー(Syntax Error)が起きています。
一旦、既存のReactのコードからは離れて、まずはJavaScriptのClass定義の方法を復習し、Class定義の方法を理解した上で、Reactのコードに戻ることをお勧めします。
Class定義の方法を確認する際には実際の簡易的なコードを書いて実行し、動作確認をしながら理解を深めるようにすると良いかと思います。  
 
[jsbin.com](https://jsbin.com)のようなサイトを使うと直ぐにコードを書いて試せるのでお勧めです。  
 
 
> React.js、Javascript.js初心者です。
検索して、検索したキーワードを取得して、検索結果を返す。処理をしたいと思っております。
こちらの記事を参考に取り組んでいるのですが、うまく動きません。
https://mae.chab.in/archives/2860
これは仕事の一環でしょうか？それとも私的な学習でしょうか？
後者であれば、まずはJavaScriptの基本的な部分を抑えた上で、React.jsの学習に移行することをお勧め致します。前者であればJavaScript初心者の状態でReact.jsに挑むのは非効率だと思いますので、プロジェクトチームの人に相談した方が良さそうな気がします。
# 参考
- [クラス(MDN)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes)
- [class 式](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/class)
※ その他、必要に応じてJavaScriptのclass定義について検索するなどして調べてみて下さい。
1 a

HayatoKamono

HayatoKamono score 2293

2018/05/30 09:11  投稿
```
bundle.js:27372 Uncaught Error: Module build failed: SyntaxError: Unexpected token (10:8)
  8 | class Search extends React.Component {
  9 |
> 10 |  const StyleguideFrom = this.props.textList.filter((item) => (
    |        ^
 11 |    item.name.toLowerCase().indexOf(val) >= 0
 12 |  ));
 13 |  this.setState({
```
エラーメッセージの通り、該当箇所で構文エラー(Syntax Error)が起きています。
一旦、既存のReactのコードからは離れて、まずはJavaScriptのClass定義の方法を復習し、Class定義の方法を理解した上で、Reactのコードに戻ることをお勧めします。
> React.js、Javascript.js初心者です。  
検索して、検索したキーワードを取得して、検索結果を返す。処理をしたいと思っております。  
こちらの記事を参考に取り組んでいるのですが、うまく動きません。  
https://mae.chab.in/archives/2860  
 
これは仕事の一環でしょうか？それとも私的な学習でしょうか？  
後者であれば、まずはJavaScriptの基本的な部分を抑えた上で、React.jsの学習に移行することをお勧め致します。前者であればJavaScript初心者の状態でReact.jsに挑むのは非効率だと思いますので、プロジェクトチームの人に相談した方が良さそうな気がします。  
# 参考
- [クラス(MDN)](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes)
- [class 式](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/class)
※ その他、必要に応じてJavaScriptのclass定義について検索するなどして調べてみて下さい。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る