75422


reactのfunction App()内でconstructor(props)を記述したところ

> Syntax error: Missing semicolon

とエラーが出ました。  
コードは下記のとおりです。

[code]

    import logo from "./logo.svg";
    import "./App.css";
    import Service from "./service";
    
    const http = new Service();
    
    function App() {
    
      constructor(props){
        super(props);
        http.getList();
      }
      
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <h1>Welcome to Swag Shop</h1>
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
          </header>
        </div>
      );
    }
    
    export default App;
    
    
[/code]

service.jsの内容は次の通りです。

[code]

    import "whatwg-fetch";
    
    class Service {
      getList = () => {
        fetch("http://localhost:3000/List").then((res) => {
          console.log(res.json());
        });
      };
    }
    
    export default Service;
    
    
[/code]

特にセミコロンが抜けているとは思えないのですが、function内でも外でもconstructor(props)を記述するとエラーが発生します。どのようにすればよいでしょうか。

追記

[code]

      constructor(props){
        super(props);
        http.getList();
      }
    
[/code]

を

[code]

    http.getList();
    
[/code]

とすることで解決しましたが、なぜこのようにすることで解決するのでしょうか。constructorとの違いはあるのでしょうか。


CC BY-SA 4.0
2021-04-21T07:04:38.210
75421
2021-04-21T18:47:31.620
2021-04-21T07:34:48.527
30396
30396
question
javascript reactjs
reactのfunction App()内でのconstructorに関するエラー


大前提として、`constructor`はメソッドの一種であり、`class` (クラス)内でしか記述することができません。

コンストラクター - JavaScript | MDN  
<https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Classes/constructor>

> `constructor` メソッドは、 `class` で作成されたオブジェクトの生成と初期化のための特殊なメソッドです。

そのため、`function` (関数)で記述する Functional Component で `constructor` を使用することはできません。

修正後のコードは単純に `function` (関数)内で処理を1回呼び出してるだけのコードになるので、 **JavaScript文法上は**
特にエラーになりません。

[code]

    const http = new Service();
    
    function App() {
        // ...
    
        http.getList();
    
        // ...
    }
    
[/code]

* * *

> とすることで解決しましたが、なぜこのようにすることで解決するのでしょうか。

「解決しました」が「エラーが出なくなった」ことを意味しているのであれば合っていますが、コードを見る限りREST
APIで取得したJSONデータを画面に表示したりしたい、ということだと思いますので、おそらく何も解決していません。

Functional Componentで何かしらの「状態の保持や更新」、「副作用を伴う処理」を行う場合、Hooks(`useState()`,
`useEffect()`)を使ってください。

Reactにおける「副作用」の定義は以下の様になっています。

> データの取得、購読 (subscription) の設定、あるいは React コンポーネント内の DOM
> の手動での変更、といったものはすべて副作用の例です。これらを “副作用 (side-effect)“（あるいは単に “作用
> (effect)“）と呼ぶことに慣れているかどうかはともかくとしても、これらのようなことをコンポーネントの中で行ったことはあるでしょう。

詳細については公式ドキュメントをご参照ください。  
(リンク先をご覧頂ければわかりますが、Hooks自体の解説はこの質問の回答に収まりきりません)

フック早わかり – React  
<https://ja.reactjs.org/docs/hooks-overview.html>

副作用フックの利用法 – React  
<https://ja.reactjs.org/docs/hooks-effect.html>

例えば以下の様にすれば、東京都の週間天気予報が取得/表示できます。

[code]

    import React, { useState, useEffect } from 'react';
    import logo from "./logo.svg";
    import "./App.css";
    import Service from "./Service";
    
    const http = new Service();
    
    function App() {
      const [weather, setWeather] = useState({});
    
      useEffect(() => {
        http.getOverviewWeek().then(setWeather);
      }, []);
    
      return (
        <div className="App">
          <header className="App-header">
            <img src={logo} className="App-logo" alt="logo" />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>
            <a
              className="App-link"
              href="https://reactjs.org"
              target="_blank"
              rel="noopener noreferrer"
            >
              Learn React
            </a>
          </header>
          <div>{JSON.stringify(weather)}</div>
        </div>
      );
    }
    
    export default App;
    
[/code]

[code]

    import "whatwg-fetch";
    
    class Service {
        // 東京都の週間天気予報を取得
        getOverviewWeek = () =>
            fetch("https://www.jma.go.jp/bosai/forecast/data/overview_week/130000.json").then((res) => {
                return res.json()
            });
    }
    
    export default Service;
    
[/code]

**スクリーンショット**

[![画像の説明をここに入力](https://i.stack.imgur.com/yNSOW.png)](https://i.stack.imgur.com/yNSOW.png)


CC BY-SA 4.0
2021-04-21T08:44:29.547
75422
2021-04-21T18:47:31.620
2021-04-21T18:47:31.620
3068
3068
75421
answer