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

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

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

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

Q&A

3回答

1305閲覧

Reactでどうして countUp = () =>{} という書き方ができるのですか?

退会済みユーザー

退会済みユーザー

総合スコア0

React.js

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

0グッド

0クリップ

投稿2018/06/29 02:15

React初心者です。

Color.jsで下記コードが登場しますが、どうしてこのような関数の書き方ができるのですか?
関数だとconstletをつけないといけないと思っていたのですが...。
また、このような関数の書き方に名称がありましたら教えて頂きたいです。

countUp = () => { alert("count up!"); }

Color.js

import React from 'react'; import './Color.css'; class Color extends React.Component { constructor(props) { super(props); this.state = { count: 10 }; } countUp = () => { alert("count up!"); } return ( <li className="color-list" style={{backgroundColor: props.color}} onClick={this.countUp}> {this.state.count} </li> ); } export default Color

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

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

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

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

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

guest

回答3

0

「Class Fields」という今後、JavaScriptに取り込まれることがほぼ確定の新しいシンタックスです。
https://github.com/tc39/proposal-class-fields

class Foo { state = { message: 'hello' } greeting = () => { console.log(this.state.message) } }

Reactでどうして countUp = () =>{} という書き方ができるのですか?

ご自身でwebpackbabelの設定をせずに、create react appを使ってreactのアプリ作成を開始したのであれば、create react appがその辺りの設定を勝手に内部でやってくれているので、まだ、現在のJavaScriptに取り込まれていない機能も全てではないですが、使える状態になっているからです。

投稿2018/06/29 02:34

編集2018/06/29 02:37
HayatoKamono

総合スコア2415

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

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

退会済みユーザー

退会済みユーザー

2018/06/29 03:12

つまりReactではクラス内でメソッドを使うのにletやcountをつける必要はないということでしょうか?
HayatoKamono

2018/06/29 04:47

Reactに限らずですが、JavaScriptのclass構文でインスタンスメソッド、クラスメソッドを定義する時は、letやconstをメソッド名の前につけることは文法的にできません。
guest

0

これは、現在EcmaScriptへ追加提案中のフィールド定義によるものです(GitHub)。

インスタンスのメンバーになるので、constletvarも関係ありません。

投稿2018/06/29 02:33

maisumakun

総合スコア145121

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

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

退会済みユーザー

退会済みユーザー

2018/06/29 03:12

フィールド定義というものについて調べて見ます!
guest

0

関数の書き方に名称

↑アロー関数、またはアロー式

アロー関数 - MDN

関数だとconstやletをつけないといけない

↑strictモードでなければ、「var」も「let」も「const」も不要。

追記

Color.jsのソース見てなないまま回答してましたが、

class Color extends React.Component { constructor(props) { super(props); this.state = { count: 10 }; } countUp = () => {

↑これ、クラスのメソッド定義ですね。
こういう場合は「let」等は不要です。

クラス式 - MDN

投稿2018/06/29 02:26

編集2018/06/29 02:35
tkturbo

総合スコア5572

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

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

退会済みユーザー

退会済みユーザー

2018/06/29 02:30

ドットインストール でReactの動画を見ても`strict`をつけていないのですが、Reactだと自動的にstrictモードになるとかでしょうか?
maisumakun

2018/06/29 02:34

別に回答したように、これは単体の変数として定義されているものではありません。 あと、classの内部は強制的にstrictモードで解釈されます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問