読者です 読者をやめる 読者になる 読者になる

katsuyukikun’s diary

とある天パーエンジニアのblog

reactをまだマスターしていなかった件

「え?こんな書き方あるのか、知らなかったわ〜」と思ったのでメモる笑

 

まあまずはこれですな・・・

 


 

ループ処理

配列のループ処理!意識していなかったわけではないんですけどね、、反省。。

 

forEach

連想配列(object)だと使えないんですけどね、ただ指定のarrayを回すときに使う


[1, 2, 3].forEach( (element, index, array) => {
  console.log(index + ":" + element);
});

 

indexとarrayは省略可能ですー!

 

map

新しい配列を作成したいときに使う感じですな


const elementSquareArray = [1, 2, 3].map( (element, index, array) => {
  return element * element;
});

 こちらもindexとarrayは省略可能でっす!returnで返してあげましょ!

 

filter

条件にあうものだけを抽出したいときに使います


const evenNumberArray = [1, 2, 3].filter( (element, index, array) => {
  return (element % 2 === 0);
});

 

reduce

処理をして1つの値を取得。
previousValueは前の値というより、それまでの結果と考えるとわかりやすいかもです


const total = [1,2,3].reduce( (previousValue, currentValue, index, array) => {
  return previousValue+currentValue; 
}); 
### total=6になる

 

every、some 

これ使ったことないですけど・・・

everyは条件を全ての値が満たすか、someは条件を満たすものがあるかの判定。
結果はbooleanで返ってくるらしいです 


const everyEvenFlag = [2, 4, 6].every( (element, index, array) => {
  return (element % 2 === 0);
});

 


const someEvenFlag = [1, 2, 3].some( (element, index, array) => {
  return (element % 2 === 0);
});

 


 

render

なにを返すのか問題ですね、返す型はそろえましょ!

 

はい、すみません。僕は適当にやってました・・・

 

 

何も描画したくないときにnullまたはfalseを返すことでそれを実現することができます。実際には裏で<noscript>タグを描画します。 なんでそういうときは

return <noscript/>

とするとよいかもですね

 


 

JSXのif文

jsx内のrender部分でif文書くとき即時間数を使って書くことが多いと思いますが、いかんせん括弧が多くて見にくくなってしまいます。


{(() => {
  if (this.props.count >= 3) {
  return  (componentとかviewを返す);
  }
})()}

 

 

こんなときに使える書き方があります、それがrenderのときの理論です。falseやnullのときはなにも表示されないのでそれを使うと以下になります。


{(this.props.count >= 3) && (
  return (
    componentとかviewを返す
  )
)}

 

 

見やすい!!

 

わかると思いますが、最初のif文でtrueのときの処理しか使えません。なので最初からif~elseで分けるものに対しては即時間数で書くしかありません。

 

 

 

 

 

 

 

 

 

react使って3ヶ月くらいですが、まだまだ知らないことがありそうなので詰めていきたいものです。

 

 

終わり。