← クエスト一覧
クエスト3：コンポーネントの基本
スライド
1
/
3
とばして問題へ
💻 コード例
実行結果
← 戻る
次へ →
クエストを始める
← クエスト一覧
▲ Next.js基礎
/
Quest 3
/ 10
クエスト3：コンポーネントの基本
基礎
+10 XP
📖 説明を見る
🏠
📖 課題
💻 コード
結果
今回の課題
Greeting コンポーネントの
name
props を JSX に表示し、HomePage で使ってみよう！
📖 解説を見る
🧩 コンポーネントを組み合わせてUIを作ろう
Next.js のページは
React コンポーネント
として書きます。
コンポーネントを部品として作り、props でデータを渡すことで再利用できます。
Next.js では
export default
が必須です！
ヒントを見る
<code>{name}</code> のように {} で変数を展開しよう。<Greeting name="Next.js" /> と渡そう
🤖 AIに聞く
期待する出力
こんにちは、Next.js！
📄 見本
答えを見る
「答えを見る」を押すと、お手本のコードが出ます。クリックでコピーできます。
💻 コードエディタ
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <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> <style>body{font-family:sans-serif;padding:16px}</style> </head> <body> <div id="root"></div> <script type="text/babel"> // Next.jsスタイルのコンポーネントを完成させよう // default exportでページコンポーネントを定義します // ① Greeting コンポーネント（name props を受け取って表示） function Greeting({ name }) { return ( <p>こんにちは、{/* ここに name を表示しよう */}！</p> ); } // ② HomePage コンポーネント（ページ全体を表す） function HomePage() { return ( <div> <h1>Next.js コンポーネント基礎</h1> {/* Greeting に name="Next.js" を渡して使おう */} </div> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<HomePage />); </script> </body> </html>
コードを実行
さいしょから
あなたの出力
正解！ +10 XP
実行すると結果がここに表示されます
正解！見本と同じになりました。
練習問題へ進む →
クリアをXでシェア
ヒント
実行する
次へ →
🏠 ホームへ
れんしゅうもんだい
☑ 0 / 0 正解
レッスンに戻る
全問正解でクエストクリア！
次のクエスト →
コピーしました！
×
先にヒントを見ますか？
ヒントを読むと、自分の力で解けるかもしれません。
ヒントを見る
それでも答えを見る
