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

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

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

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

React.js

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

Q&A

解決済

2回答

3746閲覧

SyntaxError: Unexpected token , の原因がわかりません。

Tsukumo_Aoi

総合スコア21

JavaScript

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

React.js

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

0グッド

0クリップ

投稿2018/12/07 00:16

前提・実現したいこと

Reactを用いて簡単なブラウザゲームを作っています。
以下のようなコードを書いているのですが、エラーが解決せず途中で作業が止まってしまいました。
チェス盤のようなマス目が5×5で並ぶように書いているつもりなのですが、そこで36行目
(class Board extends React.Component { の行)にて以下のようなエラーメッセージが
表示されました。

よろしくお願い致します。

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

SyntaxError: Unexpected token ,(36,1)

該当のソースコード

JavaScript

1import React, { Component } from 'react' 2import logo from './Ostle.png' 3import './App.css'; 4import { BrowserRouter, Route, Link } from 'react-router-dom' 5 6 7const Top = () => ( 8 <BrowserRouter> 9 <div className="App"> 10 <header className="App-header"> 11 <img src={logo} className="App-logo" alt="logo" /> 12 13 <p> 14 オス、オトス、トル。 15 </p> 16 17 <Link to = '/game'>Game Start</Link> 18 19 <Route path = '/game' Component = {Game} /> 20 21 </header> 22 </div> 23 </BrowserRouter> 24) 25 26const Game = () =>( 27 28function Square(props) { 29 return ( 30 <buttun className= "square" onClick={props.onclick}> 31 {props.value} 32 </buttun> 33 ) 34} 35 36class Board extends React.Component { 37 renderSquare(i) { 38 return ( 39 <Square 40 value={this.props.squares[i]} 41 onClick={() => this.props.onClick(i)} 42 /> 43 ) 44 } 45 render() { 46 return ( 47 <div className="Game-board"> 48 <div className="board-row"> 49 {this.renderSquare(0)} 50 {this.renderSquare(1)} 51 {this.renderSquare(2)} 52 {this.renderSquare(3)} 53 {this.renderSquare(4)} 54 </div> 55 <div className="board-row"> 56 {this.renderSquare(5)} 57 {this.renderSquare(6)} 58 {this.renderSquare(7)} 59 {this.renderSquare(8)} 60 {this.renderSquare(9)} 61 </div> 62 <div className="board-row"> 63 {this.renderSquare(10)} 64 {this.renderSquare(11)} 65 {this.renderSquare(12)} 66 {this.renderSquare(13)} 67 {this.renderSquare(14)} 68 </div> 69 <div className="board-row"> 70 {this.renderSquare(15)} 71 {this.renderSquare(16)} 72 {this.renderSquare(17)} 73 {this.renderSquare(18)} 74 {this.renderSquare(19)} 75 </div> 76 <div className="board-row"> 77 {this.renderSquare(20)} 78 {this.renderSquare(21)} 79 {this.renderSquare(22)} 80 {this.renderSquare(23)} 81 {this.renderSquare(24)} 82 </div> 83 </div> 84 ) 85 } 86} 87) 88 89 90export default Top;

試したこと

括弧の数や種類があってないという凡ミスかと思いましたが
確認してみたところそれらは問題ありませんでした。

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

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

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

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

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

guest

回答2

0

ベストアンサー

javascript

1const Game = () =>( 2 3function Square(props) { 4 return ( 5 <buttun className= "square" onClick={props.onclick}> 6 {props.value} 7 </buttun> 8 ) 9} 10 11class Board extends React.Component {

(で始まっている以上、中身はとみなされますが、式の中に複数のfunctionclassを直接並べることはできません。

投稿2018/12/07 00:24

maisumakun

総合スコア145121

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

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

Tsukumo_Aoi

2018/12/07 01:08

ありがとうございます。 JavaScriptもReactも初学者レベルなのでとても助かりました。
guest

0

js

1function Square(props) { 2 return ( 3 <buttun className= "square" onClick={props.onclick}> 4 {props.value} 5 </buttun> 6 ) ←ここに全角スペースが入ってるようですけどこれは問題ないですか?他にも同様のものがないか確認してみてください。 7}

投稿2018/12/07 00:21

m.ts10806

総合スコア80765

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

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

maisumakun

2018/12/07 00:28

(JSXの中は違う可能性もありますが)JavaScriptの文法的には、全角スペースもスペースとして認められてはいます。もっとも、「書いていいことはない」のも間違いはないですが。 https://www.softel.co.jp/blogs/tech/archives/5280
m.ts10806

2018/12/07 00:29

ご指摘、ご指導ありがとうございます。 エラー行数直前にそこだけ全角スペースがあって気になったので突っ込んでみた次第です。
Tsukumo_Aoi

2018/12/07 01:10

全角SPに気づいてませんでした。 いつの間に入ったのか… お二方ともありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問