React　メソッドはアロー関数で定義できませんか？

Reactを学習中です。ES6, JSX使ってます。
getImageUrl 辺りでエラーが出ます。
メソッドはアロー関数で定義できませんか？

また、エラーが発生した際にchrome上では何がどのように
誤っているのかエラーメッセージからは読み取れない？ので
効率的なデバッグ方法があれば教えてください

"react debug chrome"でググると、
React Developer Tools - Chrome Web Store
がヒットしますが、chromeプラグインはキーロガー等を含んでいる
怪しいプラグインがあったことを見たことがあるので、これの導入に
はあまり乗り気でないです。

html
1<!DOCTYPE html>
2<html>
3<head>
4	<meta charset="utf-8">
5	<script src="http://unpkg.com/react@15/dist/react.min.js"></script>
6	<script src="http://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
7	<!--<script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.38/browser.min.js"></script>-->
8	<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>
9</head>
10<body>
11	<div id="root"></div>
12	<script type="text/babel">
13		class PhotoText extends React.Component{
14			const  = getImageUrl = () => {
15				"img/" + this.props.image + ".jpeg"
16			}
17			render(){
18				const label = this.props.label				
19				//const url = getImageUrl
20				const url = "img/" + this.props.image + ".jpeg"
21				const boxStyle = {
22					border: "1px solid silver",
23					margin: "8px",
24					padding: "4px"
25				}
26				return <div style={boxStyle}>
27					<img src={url} width="128"/>
28					<span> {label} </span>
29					</div>
30			}
31		}
32	
33		const dom = <div>
34			<PhotoText image="pic1" label="南国の浜辺でゆったり" />
35			<PhotoText image="pic2" label="南国の海は開放的" />
36			<PhotoText image="pic3" label="海、海、海、青い海" />
37			</div>
38		ReactDOM.render(dom, document.getElementById('root'))
39	</script>
40</body>
41</html>
42
43

行動規範の内容に同意します

回答2件

Class Fieldとして提案はなされていますが、ブラウザの実装は進んでいません。

現状ではBabelが必要ですが、このような文法となります。

javascript
1class PhotoText extends React.Component{
2  getImageUrl = () => {
3    // 中括弧がある場合は、returnを明示しないと返り値はundefined
4    return "img/" + this.props.image + ".jpeg"
5  }
6}

投稿2018/09/16 13:53

maisumakun

総合スコア145184

otaks

2018/09/16 23:21

Class Fieldとはどの部分を指していますでしょうか？

maisumakun

2018/09/17 00:05

プロトタイプメソッドでないクラスのメンバーを宣言する機能のことです。そこにArrow Functionを代入すれば、thisの束縛されたメソッドが出来上がります。

otaks

2018/09/17 12:07

// 中括弧がある場合は、returnを明示しないと返り値はundefined ↑は有用でしたありがとうございました

行動規範の内容に同意します

ベストアンサー

こんにちは。

以下の３カ所を修正してみるといかがでしょうか？

(1) 読み込み対象の babel

修正前：

javascript
1<script src="https://unpkg.com/babel-core@5.8.38/browser.min.js"></script>

修正後：

javascript
1<script src="http://unpkg.com/babel-standalone@6/babel.min.js"></script>

(2)アロー関数の表記

修正前：

javascript
1const  = getImageUrl = () => {
2      "img/" + this.props.image + ".jpeg"
3}

修正後：

javascript
1getImageUrl = () => "img/" + this.props.image + ".jpeg"

(3) render() 内での画像URL取得部分

修正前：

javascript
1 //const url = getImageUrl
2 const url = "img/" + this.props.image + ".jpeg"

修正後：

javascript
1const url = this.getImageUrl()

修正後のHTML　　　　　　　

ご質問に挙げられているHTMLを、上記の３点(1)(2)(3)について修正し、適宜、空行を入れたものが以下です。

JSX
1<!DOCTYPE html>
2<html>
3<head>
4    <meta charset="utf-8">
5    <script src="http://unpkg.com/react@15/dist/react.min.js"></script>
6    <script src="http://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
7    <script src="http://unpkg.com/babel-standalone@6/babel.min.js"></script>
8</head>
9<body>
10<div id="root"></div>
11<script type="text/babel">
12
13  class PhotoText extends React.Component {
14
15    getImageUrl = () => "img/" + this.props.image + ".jpeg"
16
17    render(){
18      const label = this.props.label
19      const url = this.getImageUrl()
20      const boxStyle = {
21        border: "1px solid silver",
22        margin: "8px",
23        padding: "4px"
24      }
25      return <div style={boxStyle}>
26        <img src={url} width="128"/>
27        <span>{label}</span>
28      </div>
29    }
30  }
31
32  const dom = <div>
33    <PhotoText image="pic1" label="南国の浜辺でゆったり" />
34    <PhotoText image="pic2" label="南国の海は開放的" />
35    <PhotoText image="pic3" label="海、海、海、青い海" />
36  </div>
37
38  ReactDOM.render(dom, document.getElementById('root'))
39
40</script>
41</body>
42</html>
43

確認のため、上記をコピペしたHTMLを作成して、FireFox 62.0 で表示したところ、以下のキャプチャ画像

のようになり、各 <img /> の src属性に <PhotoText /> の props image から渡した文字列が反映されていたので、<PhotoText /> が意図通り render されたのではないかと思います。

参考になれば幸いです。

投稿2018/09/16 14:02

編集2018/09/17 03:58

jun68ykt

総合スコア9058

otaks

2018/09/16 23:17

丁寧な説明ありがとうございます。(1)(2)について後学のため回答の背景も教えてもらえないでしょうか？

jun68ykt

2018/09/17 03:47 編集

こんにちは。 class の中で getImageUrl = () => "img/" + this.props.image + ".jpeg" と書くことで、これまで constructor の中で行っていた this.getImageUrl = this.getImageUrl.bind(this) を書く必要がなくなるというのは最近の書き方ですので、babel も新しいものを使うほうがよいです。そこでブラウザの中で（新しめの）babel を動作させるには？という観点で調べると、すでにかなり昔の投稿になりますが、 How to install babel and using ES6 locally on Browser? https://stackoverflow.com/questions/33643967 の回答の中に、 > Since babel 6.2.0 browser.js has been removed. や、 > In-browser transpiling has been removed from Babel 6, however Daniel15 has created a standalone build for use in "non-Node.js environments including browsers" here: > https://github.com/Daniel15/babel-standalone と書いてあるとおりで、新しい babel では（browser.js が廃止になったので、） babel-standalone　を使いましょう、ということになっています。修正 (1) はこれに従ったものです。修正(2) については、修正前の書き方 const = getImageUrl = () => { "img/" + this.props.image + ".jpeg" } がまず文法エラーです。どう書くのが正しいのか？については、「アロー関数」の構文が基礎になります。以下をおさらいしておくとよいかと思います。アロー関数（developer.mozilla.org） https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions 以上参考になりましたら幸いです。

行動規範の内容に同意します

あなたの回答