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

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

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

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

JavaScript

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

React.js

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

Q&A

2回答

2045閲覧

JSの高階関数が理解できません

van-0215

総合スコア89

React Native

React Nativeは、ネイティブモバイルアプリ(iOS/Android)を作成できるJavaScriptフレームワークです。Reactと同じ設計のため、宣言的なコンポーネントでリッチなUIを開発することが可能です。

JavaScript

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

React.js

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

0グッド

2クリップ

投稿2018/07/08 18:11

現在JavaScriptを必死に勉強しています。
アロー関数についてある程度理解をした矢先、このような表記に出くわしました。

Javascript

1_done = (index) => () => { 2 const list = [].concat(this.state.list); 3 list[index].done = !list[index].done; 4 5 this.setState({ 6 list, 7 }); 8 }

上記のコードを丁寧に書いたら以下のようになるのかなと思いました。

Javascript

1_done = function(index){ 2 function(){ 3 const list = [].concat(this.state.list); 4 list[index].done = !list[index].done; 5 6 this.setState({ 7 list, 8 }); 9 } 10 }

ですが、エラーを生んでしまいました。

もしも1番目のコードを丁寧に書いたらどのようになるのでしょうか。教えて欲しいです!

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

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

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

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

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

og24715

2018/07/09 15:00

質問とは直接関係ありませんが、高階関数はコールバック関数を取る関数であり、上の例は関数を返す関数なのでカリー化が正しい表現ではないでしょうか
guest

回答2

0

前提

エラーを生んでしまいました。

質問に掲載されているコードをベースに回答すると、
掲載されている情報とコードが限られているため、
どんなエラーが具体的に起きていて、それが何によって起きているのか特定しづらいので、
質問に掲載されているコードは脇に置いた上で回答致します。

以下、単純に「アロー関数を用いて書かれた関数を返す関数を、
アロー関数を用いずに書き直したらどうなるか?」
という質問であると解釈した上での回答となります。

回答

const outerA = () => () => 'something' function outerB() { // returnする! return function innerB() { return 'something'; } } console.log(outerA()()) // 'something' console.log(outerB()()) // 'something'

アロー関数を用いて書かれた「関数を返す関数」を、
アロー関数を用いずに書き直したらどうなるかという質問であれば、
上記のように書き直すことが出来ます。

質問文に掲載されているコードですと、関数を関数の中でreturnし忘れていますので、そこを確認してください。

投稿2018/07/08 22:11

HayatoKamono

総合スコア2415

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

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

0

丁寧に、というよりES5で書いたらってことでしょうか?そういうときはBabelを使って変換した結果をみるといいです。

Babelで変換

関数で囲っているのはthisがちゃんと使われるようにするためです(トップレベルだとundefinedに変換されちゃう)。

投稿2018/07/08 21:47

raccy

総合スコア21733

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

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

og24715

2018/07/09 13:04

> 関数で囲っているのはthisがちゃんと使われるようにするためです(トップレベルだとundefinedに変換されちゃう)。 浅学で申し訳ないんですがこれどういう事ですか?
raccy

2018/07/09 13:31

そのままの意味です。変換前のコードから関数での囲みを外してみてください。 コードから察するに、全体はもっと大きなものなのでしょう。thisは場所によって意味が異なる場合があるため、全体を変換しないと正しい情報がわからない場合があります。コード全部を貼り付けて確認してみてください。
og24715

2018/07/09 14:55

あーなるほど。このミニマムコード上の話ですね。 this.state がいるので react のプライベートメソッドと解釈していました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問