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

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

ただいまの
回答率

90.36%

  • React.js

    909questions

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

'xxx' is not defined のエラー

解決済

回答 1

投稿

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

reactsan

score 6

ERROR in ./src/index.js

/Users/xxx/jyanken/src/index.js
  45:54  error  'ix' is defined but never used  no-unused-vars
  45:74  error  'idx' is not defined            no-undef
  63:12  error  'propTypes' is not defined      no-undef

✖ 3 problems (3 errors, 0 warnings)

 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js

ERROR in ./src/index.js
Module not found: Error: Can't resolve './Jyanken' in '/Users/xxx/jyanken/src'
 @ ./src/index.js 35:15-35
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js
webpack: Failed to compile.


とエラーが出ました。index.jsには

import React,{Component} from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'
import RaisedButton from 'material-ui/RaisedButton'
import Paper from 'material-ui/Paper'
import './index.css'
import {Tabs,Tab} from 'material-ui/Tabs'
import {Table,TableBody,TableHeader,TableHeaderColumn,TableRow,TableRowColumn} from 'material-ui/Table';
import Jyanken from './Jyanken'

class JyankeGamePage extends Component {
  constructor(props){
    super(props)
    this.jyanken = new Jyanken()
    this.state = {scores:[],status:{},tabIndex:0}
  }

  componentDidMount(){
    this.getResult()
  }

  getResult(){
    this.setState({scores:this.jyanken.getScores()})
    this.setState({status:this.jyanken.getStatuses()})
  }

  pon(te){
    this.jyanken.pon(te)
    this.getResult()
  }

  render(){
    return(
      <MuiThemeProvider>
        <div style={{marginLeft:30}}>
        <Header>じゃんけんポン!</Header>
        <JyankenBox actionPon={(te) => this.pon(te)} />
        <Paper style={{width:400}} zDepth={2}>
        <Tabs value={this.state.tabIndex} onChange={(ix)=>this.tabChange(idx)}>
          <Tab label="対戦結果" value={0}>
            <ScoreList scores={this.state.scores} />
          </Tab>
          <Tab label="対戦成績" value={1}>
            <StatusBox status={this.state.status} />
          </Tab>
        </Tabs>
        </Paper>
        </div>  
      </MuiThemeProvider>

    )
  }
}

const Header =(props) =>(<h1>{props.children}</h1>)
Header.propTypes ={
  children:propTypes.string
}

const StatusBox =(props) =>{
  <Table>
    <TableBody displayRowCheckbox={false}>
      <TableRow displayBorder={false}>
        <TableHeaderColumn>勝ち</TableHeaderColumn><TableRowColumn style={judgmentStyle(1)}>{props.status.win}</TableRowColumn>
      </TableRow>
      <TableRow displayBorder={false}>
        <TableHeaderColumn>負け</TableHeaderColumn><TableRowColumn style={judgmentStyle(2)}>{props.status.lose}</TableRowColumn>
      </TableRow>
      <TableRow displayBorder={false}>
        <TableHeaderColumn>引き分け</TableHeaderColumn><TableRowColumn style={judgmentStyle(0)}>{props.status.draw}</TableRowColumn>
      </TableRow>
    </TableBody>
  </Table> 
 }

StatusBox.propTypes = {
  status:PropTypes.object
} 

const JyankenBox = (props) =>{
  const style = {marginLeft:20}
  return(
    <div style={{marginTop:40,marginBottom:30,marginLeft:30}}>
      <RaisedButton label="グー" onClick={() => props.actionPon(0)} style={style} />
      <RaisedButton label="チョキ" onClick={() => props.actionPon(1)} style={style} />
      <RaisedButton label="パー" onClick={() => props.actionPon(2)} style={style} />
    </div>      
  )
}

JyankenBox.propTypes ={
  actionPon:PropTypes.func
}

const ScoreList = (props) =>(
    <Table>
      <TableHeader adjustForCheckbox={false} displaySelectAll={false} >
      <TableRow>
        <TableRowColumn>時間</TableRowColumn><TableRowColumn>人間</TableRowColumn><TableRowColumn>コンピュータ</TableRowColumn><TableRowColumn>結果</TableRowColumn>
      </TableRow> 
      </TableHeader>
      <TableBody>
        {props.scores.map((score,ix) =><ScoreListItem key={ix} score={score} />)}
      </TableBody>  
    </Table>  
)

ScoreList.propTypes ={
  scores:PropTypes.array
}

const ScoreListItem = (props) =>{
  const teString = ["グー","チョキ","パー"]
  const judgmentString = ["引き分け","勝ち","負け"]
  const dateHHMMSS = (d) => d.toTimeString().substr(0,8)

  return(
      <TableRow style={judgmentStyle(props.score.judgment)}>
        <TableRowColumn>{dateHHMMSS[props.score.created_at]}</TableRowColumn>
        <TableRowColumn>{teString[props.score.human]}</TableRowColumn>
        <TableRowColumn>{teString[props.score.computer]}</TableRowColumn>
        <TableRowColumn>{judgmentString[props.score.judgment]}</TableRowColumn>
      </TableRow> 
  )
}

ScoreListItem.propTypes ={
  score:PropTypes.object
}

const judgmentStyle = (judgment) =>({color:["#000","#2979FF","#FF1744"][judgment]})


ReactDOM.render(
  <JyankeGamePage />,
  document.getElementById('root')
)


と書きました。propTypesは

import PropTypes from 'prop-types'


で定義しているはずなので、なぜエラーが出るのかわかりません。3つのエラーは何が問題でどう直せばいいのでしょうか?

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+2

思考停止せずに、Google翻訳でも良いので自分でエラーメッセージを読んで解決するようにしてください。

ix : 定義してるけど、どこでも使ってないよ。
idx : どこにも定義されてないから使えないよ。
propTypes : どこにも定義されてないから使えないよ。( PropTypes はあるけど)

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

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

  • React.js

    909questions

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