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

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

ただいまの
回答率

91.35%

  • JavaScript

    11205questions

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

  • React.js

    376questions

    A JavaScript library for building user interfaces

React.jsをアロー記法で書くとcomponentDidMount()などのコールバックがundefindになる

解決済

回答 1

投稿 2017/12/02 12:15 ・編集 2017/12/02 13:29

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

drizzing20

score 346

やりたいこと

Reactのアロー記法の中でcomponentDidMount()とか使いたい

環境

  • JavaScript ES6(ES6では使えないみたいなことないですよね...
  • React.js

↓にcomponentDidMountとか入れたい

//Sample.jsx

import * as React from 'react';

const Sample = () => {
    return (
        <div className='Sample'>
            <h2>Sample</h2>
        </div>
    );
};

export default Sample;
//Sample.jsx

import * as React from 'react';

const Sample = () => {
    componentDidMount() {              //←エラーになる
        console.log('hello');
    },
    return (
        <div className='Sample'>
            <h2>Sample</h2>
        </div>
    );
};

export default Sample;

試したこと

↓とかに書き換えてみたけどやはりundefind

componentDidMount: () => {
        console.log('hello');
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • HayatoKamono

    2017/12/02 15:05

    > Reactのアロー記法の中でcomponentDidMount()とか使いたい それは何の為にでしょうか? 何らかの目的があって、そういった方法をその目的の為に取りたいのだと思いますが、目的がなんであれ、他に好ましいやり方があるはずです。

    キャンセル

  • drizzing20

    2017/12/02 20:49

    Reactの参考書読んでて、出てきた関数をアロー記法で使おうと思ったけど、やり方が載ってなかったので質問してます。 そもそも、componentDidMount等を使うのは推奨されてないということでしょうか?

    キャンセル

回答 1

checkベストアンサー

+3

できません。

Reactでコンポーネントを作成する場合は三つの方法があります。

  1. createReactClass()を使って作成する。
    初期バージョンからあるやり方。他の方法ができない場合を除き使うべきでは無い。最新バージョンではこの関数自体が別モジュールであるcreate-react-classに分離されている。
  2. ES6 Classを使って作成する。
    ES6から追加されたclass構文を使用するやり方。TypeScriptやCoffeeScriptのクラスでも作成は可能。
  3. 関数として作成する。(関数コンポーネント)
    関数がそのままコンポーネントになるやり方。render()メソッドしかないES6 Classのようなもの。状態(state)は持てないし、ほかのコンポーネントの機能も使えない。

質問で書いているコードは3.になります。なお、アロー関数である必要は無く、functionを使った関数宣言や関数式でもかまいません。上でも述べてますが、この3.の方法は機能が制限された方法です。ですが、この方法が便利であるとして、追加されました。

本来、ReactはViewにのみを目的としたライブラリです。状態変化やコントロールなどはViewの部分と分離すべきと言う考えがあり、究極的には、純粋関数で収まるべきとの考えがあります。それを究極的に勧めていくと、もはやコンポーネントにはrender()のみしか必要ではありません。それなら、初めから一つの関数で十分じゃ無いかということで作られたのが、3.の関数コンポーネントです。

もし、どうしてもcomponentDidMount()を使いたいというのであれば、関数コンポーネントを使うこと自体が間違っています。2.のES6 Classを使用してください(ES6が使用できないと言うことが無い限り、1.は使用しない方が良いです)。関数コンポーネントの思想、つまりは、純粋関数としてコンポーネントを使いたいというのであれば、状態遷移などを管理するところの設計が間違っています。コンポーネントが状態を持ったり、コンポーネントの遷移で何かが変わったりすべきではありません。コンポーネントがすることは、ボタン押下などのイベントの発行によるコールバックのみに収まるべきです。表示と状態が分離されていれば、componentDidMount()のような機能がReactのコンポーネントに必要になることはありません。

投稿 2017/12/02 21:12

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/12/02 21:51

    詳しい説明ありがとうございました!

    キャンセル

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

ただいまの回答率

91.35%

関連した質問

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

  • JavaScript

    11205questions

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

  • React.js

    376questions

    A JavaScript library for building user interfaces