missing semicolon の解決方法

Question

missing semicolon の解決

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

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

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

該当のソースコード

import React, { useState } from 'react'


// FullCalendarコンポーネント。
import FullCalendar from '@fullcalendar/react'

// で週表示を可能にするモジュール。
import timeGridPlugin from '@fullcalendar/timegrid'

// で月表示を可能にするモジュール。
import dayGridPlugin from '@fullcalendar/daygrid'

// で日付や時間が選択できるようになるモジュール。
import interactionPlugin from '@fullcalendar/interaction'

import DatePicker, { registerLocale } from "react-datepicker";

import ja from 'date-fns/locale/ja'

import { createStyles, makeStyles } from "@material-ui/core/styles";

// import "@fullcalendar/core/main.css";
import "@fullcalendar/daygrid/main.css";
import "@fullcalendar/timegrid/main.css";

<FullCalendar
  locale="ja"
  defaultView="timeGridWeek" 
  slotDuration="00:30:00" 
  selectable={true} 
  allDaySlot={false} 
  titleFormat={{
    year: "numeric",
    month: "short",
    day: "numeric",
  }} 
  header={{
    left: "prev,next,today",
    center: "title",
    right: "dayGridMonth,timeGridWeek",
  }}
  businessHours={{
    daysOfWeek: [1, 2, 3, 4, 5],
    startTime: "0:00",
    endTime: "24:00",
  }}
  plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
  ref={this.ref}
  weekends={true} 
  events={this.myEvents} 
  select={this.handleSelect} 
  eventClick={this.handleClick} 
/>
this.myEvents = [
  {
    id: 0,
    title: "event 1",
    start: "2020-05-22 10:00:00",
    end: "2020-05-22 11:00:00",
    memo: "memo1",
  },
  {
    id: 1,
    title: "event 2",
    start: "2020-05-23 10:00:00",
    end: "2020-05-23 11:00:00",
    memo: "memo2",
  },
];
renderForm() {
    return (
      <div
        className={
          this.state.formInview ? "container__form inview" : "container__form"
        }
      >
        <form>
          {this.state.isChange  ? (
            <div className="container__form__header">予定を変更</div>
          ) : (
            <div className="container__form__header">予定を入力</div>
          )}
          <div>{this.renderTitle()}</div>
          <div>{this.renderStartTime()}</div>
          <div>{this.renderEndTime()}</div>
          <div>{this.renderMemo()}</div>
          <div>{this.renderBtn()}</div>
        </form>
      </div>
    );
  }

試したこと

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

補足情報

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

Answer 1

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

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

Comments

[maisumakun]

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

[syobon_gun]

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

[maisumakun]

> jsとして意味を成り立たせるなら<FullCalendarの記法はだめってことですか？

違います。JSXは「値」なので、何らかの形で値として使わないと（ほぼ）意味をなさないということです。

JavaScriptの文法上、「1;」のような文も成立はしますが、この1はただ読み捨てられるだけで何の意味もなさないです。JSXだけ書くのは、それと同じことです。

[syobon_gun]

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

[maisumakun]

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

[syobon_gun]

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