← クエスト一覧
クエスト6：条件レンダリング
スライド
1
/
1
とばして問題へ
💻 コード例
実行結果
← 戻る
次へ →
クエストを始める
← クエスト一覧
⚛️ React基礎
/
Quest 6
/ 10
クエスト6：条件レンダリング
応用
+10 XP
📖 説明を見る
🏠
📖 課題
💻 コード
結果
今回の課題
isLoggedIn が true のとき「ようこそ！ログイン中です」、false のとき「ログインしてください」と表示し、ボタンでトグルできるようにしよう！
📖 解説を見る
🔀 条件によって表示を切り替える
React では
三項演算子
や
&& 演算子
を使って JSX を条件分岐できます。
ヒントを見る
<p>ログインしてください</p> を追記しよう。三項演算子 condition ? A : B の B の部分。
🤖 AIに聞く
📄 見本
答えを見る
「答えを見る」を押すと、お手本のプレビューとコードが出ます。
💻 コードエディタ
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>React</title> <script src="https://unpkg.com/react@18/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <div id="root"></div> <script type="text/babel"> const { useState } = React; function App() { const [isLoggedIn, setIsLoggedIn] = useState(false); return ( <div> {isLoggedIn ? <p>ようこそ！ログイン中です</p> : <p>{/* ここを書こう */}</p> } <button onClick={() => setIsLoggedIn(!isLoggedIn)}> {isLoggedIn ? 'ログアウト' : 'ログイン'} </button> </div> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />); </script> </body> </html>
コードを実行
さいしょから
あなたの出力
正解！ +10 XP
正解！見本と同じになりました。
練習問題へ進む →
クリアをXでシェア
ヒント
実行する
次へ →
🏠 ホームへ
れんしゅうもんだい
☑ 0 / 0 正解
レッスンに戻る
全問正解でクエストクリア！
次のクエスト →
コピーしました！
×
先にヒントを見ますか？
ヒントを読むと、自分の力で解けるかもしれません。
ヒントを見る
それでも答えを見る
