ReactのJSX(TSX)の中で条件分岐を使うと、propsやstateの値に応じてレンダリング内容を変更できるようになります。
JSX内で条件分岐を行う際の注意点や方法について、備忘録として残しておこうと思います。
間違った点があればご指摘いただけますと幸いです。
JSX内にif文やswitch文を書くとエラーになる
条件分岐といえば、if文やswitch文等の命令文を記述したくなるが、JSX内は出力する値を記述する場所なので、値を返さないif文やswitch文等の命令文を記述するとエラーになってしまう。
使用したい場合は、後述で紹介するように即時関数や外部で定義した関数の中に処理を記述することで実行できる。
JSX内に複雑な処理はなるべく書かない
JSXは本来HTMLライクで画面に出力したい内容を記述する場所。
この中に条件分岐を含む複雑で長い処理を書き込んでしまうと、コードを見返した時にレンダリング内容が分かりにくくなってしまう。
短い処理であればJSXに直接書いても良いが、長い処理はなるべく外部で定義した関数内で処理を行うようにして、JSXからその関数を呼び出すのが良いと思う。
短い処理の場合
短い条件分岐の処理であれば、演算子を用いるとシンプルに記述することができる。
三項演算子「? :」
「条件 ? true時の処理 : false時の処理」
if...else文のような条件分岐を書くことができる。
let isCorrect = true;
return(
<div>
{ isCorrect ? '正解です。' : '不正解です。' }
</div>
)
論理積演算子「&&」
「条件 && true時の処理」
指定した条件がtrueの時だけ出力してfalseの時は出力しない。
let isApple = true;
return(
<div>
{ isApple && 'リンゴです。' }
</div>
)
Null合体演算子「??」
「A ?? B」
Aがnullかundefined以外の場合はAを出力し、AがnullかundefinedのときBを出力する。
正常な値を受け取れない可能性があることを想定した処理で使用される。
if文を使うと「if(A == null || A == undefined)...else...」となるため、Null合体演算子を使うとより短く記述できる。
let fruits = 'リンゴです。';
return(
<div>
{ fruits ?? '値がnullもしくはundefinedです。' }
</div>
)
長い処理の場合
if文やswitch文等を用いて更に複雑な条件分岐を行いたい場合、関数内に処理を定義して条件分岐を行う。
主に、関数は即時関数を用いてJSX内に直接記述する方法と外部に定義してJSX内から呼び出す方法の２通りがある。
即時関数を使う
即時関数を用いるとJSX内に直接記述することができる。
記述したロジックと反映される場所が近いので分かりやすいと思う。
ただし、即時関数はカッコの数が多く、最後にセミコロンを付けるとエラーになるため記述ミスも起きやすい。
また、処理が長くて複雑になるほどJSX内のコードが全体的に膨らんで読みにくくなる。
直感的には分かりやすいが、多用しすぎるのは良くないと思う。
return(
<div>
{(() => {
if(fruits === 'apple'){
return 'リンゴです';
}else{
return 'バナナです';
}
})()}
</div>
)
外部の関数を呼び出す
条件分岐の処理をJSXの外部で関数として定義して、JSX内から呼び出すこともできる。
即時関数を使用する方法と比較すると、JSX内のレンダリング位置と実際の処理を行う関数の位置が離れてしまうので人によっては少し読みにくいと感じるかもしれない。
しかし、JSX内がスッキリしてシンプルになり記述ミスも起きにくくなり、処理も関数ごとにまとめられるので管理しやすいと思う。
let fruits = 'apple';
// JSX外部で関数を定義
const isApple = () => {
if(fruits === 'apple'){
return 'リンゴです';
}else{
return 'バナナです';
}
}
return(
// JSX内
<div>{ isApple() }</div>
)
まとめ
・JSXの中に値を出力しないif文やswitch文などの命令文を書くとエラーになる。
・JSXの中に長くて複雑な条件分岐処理を書きすぎないようにする。
・短い処理の場合、演算子を用いてJSX内に直接記述する。
・長くて複雑な処理の場合、外部の関数内で条件分岐を行いJSX内で呼び出す。