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

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

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

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

React.js

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

Q&A

解決済

1回答

4770閲覧

missing semicolon の解決方法

syobon_gun

総合スコア1

JavaScript

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

React.js

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

0グッド

0クリップ

投稿2021/12/20 01:23

missing semicolon の解決

create react app でカレンダーに関するコードを書いています。サイトを参考にしながらやっているのですが、missing semicolon エラーが発生してしまいます。他のサイトも見てみたり、エラーに関することも調べたのですが解決できません。エラーが発生するのrenderFormの{ の所です

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

SyntaxError: /calendar_app/src/App.js: Missing semicolon. (71:12)

該当のソースコード

JavaScript

1 2import React, { useState } from 'react' 3 4 5// FullCalendarコンポーネント。 6import FullCalendar from '@fullcalendar/react' 7 8// で週表示を可能にするモジュール。 9import timeGridPlugin from '@fullcalendar/timegrid' 10 11// で月表示を可能にするモジュール。 12import dayGridPlugin from '@fullcalendar/daygrid' 13 14// で日付や時間が選択できるようになるモジュール。 15import interactionPlugin from '@fullcalendar/interaction' 16 17import DatePicker, { registerLocale } from "react-datepicker"; 18 19import ja from 'date-fns/locale/ja' 20 21import { createStyles, makeStyles } from "@material-ui/core/styles"; 22 23// import "@fullcalendar/core/main.css"; 24import "@fullcalendar/daygrid/main.css"; 25import "@fullcalendar/timegrid/main.css"; 26 27<FullCalendar 28 locale="ja" 29 defaultView="timeGridWeek" 30 slotDuration="00:30:00" 31 selectable={true} 32 allDaySlot={false} 33 titleFormat={{ 34 year: "numeric", 35 month: "short", 36 day: "numeric", 37 }} 38 header={{ 39 left: "prev,next,today", 40 center: "title", 41 right: "dayGridMonth,timeGridWeek", 42 }} 43 businessHours={{ 44 daysOfWeek: [1, 2, 3, 4, 5], 45 startTime: "0:00", 46 endTime: "24:00", 47 }} 48 plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]} 49 ref={this.ref} 50 weekends={true} 51 events={this.myEvents} 52 select={this.handleSelect} 53 eventClick={this.handleClick} 54/> 55this.myEvents = [ 56 { 57 id: 0, 58 title: "event 1", 59 start: "2020-05-22 10:00:00", 60 end: "2020-05-22 11:00:00", 61 memo: "memo1", 62 }, 63 { 64 id: 1, 65 title: "event 2", 66 start: "2020-05-23 10:00:00", 67 end: "2020-05-23 11:00:00", 68 memo: "memo2", 69 }, 70]; 71renderForm() { 72 return ( 73 <div 74 className={ 75 this.state.formInview ? "container__form inview" : "container__form" 76 } 77 > 78 <form> 79 {this.state.isChange ? ( 80 <div className="container__form__header">予定を変更</div> 81 ) : ( 82 <div className="container__form__header">予定を入力</div> 83 )} 84 <div>{this.renderTitle()}</div> 85 <div>{this.renderStartTime()}</div> 86 <div>{this.renderEndTime()}</div> 87 <div>{this.renderMemo()}</div> 88 <div>{this.renderBtn()}</div> 89 </form> 90 </div> 91 ); 92 }

試したこと

参考サイト以外にも書いて有りそうな記事は探しましたが見つかりませんでした。初心者なのでわからないだけかもしれません。

補足情報

コードはVSCodeで書いています。

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

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

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

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

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

guest

回答1

0

ベストアンサー

何を参考にしたのでしょうか。いろいろ文法的・意味的に通っていません。

  • 変数への代入や返り値としてでなく<FullCalendarのようなJSXを書くことは、文法的には成り立ちますが、ただ無視されるので、実用上はほぼ意味がありません。
  • this.myEventsが指すべきthisが何なのかわかりません。
  • renderForm() {のような形は、コードのトップレベルには書けません。

投稿2021/12/20 02:00

maisumakun

総合スコア145121

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

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

maisumakun

2021/12/20 02:12

もとの資料で断片的に書かれていたコードを、そのまま(意味的妥当性を考慮せずに)並べただけ、というような印象も受けます。
syobon_gun

2021/12/20 03:18

jsとして意味を成り立たせるなら<FullCalendarの記法はだめってことですか?この場合、書き換えるべきかjsxで書いてコンパイルすべきでしょうか。
maisumakun

2021/12/20 03:24

> jsとして意味を成り立たせるなら<FullCalendarの記法はだめってことですか? 違います。JSXは「値」なので、何らかの形で値として使わないと(ほぼ)意味をなさないということです。 JavaScriptの文法上、「1;」のような文も成立はしますが、この1はただ読み捨てられるだけで何の意味もなさないです。JSXだけ書くのは、それと同じことです。
syobon_gun

2021/12/20 03:37

じゃあ<FullCalendarを使うjsを書いてその中に<FullCalendarの値を設定することで動くでしょうか
maisumakun

2021/12/20 03:45

そうですね、適切な形で使わないとJSXは描画されません。
syobon_gun

2021/12/20 03:52

わかりました。ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問