【ReaSemi３回目〜かのさん先生やるってよ！編〜】
2024.08.09 22:00~
今回はなんと6期生のかのさんが先生をしてくれました✨
【本日の内容】
①ViteでLiveShareをするには(前回うまくいかなかった部分が解決✨)
②props、関数、引数について
③お悩み相談コーナー
①ViteでLive Shareをするには
前回のReaSemiでライブシェアするとサーバーの立ち上げが共有されなかった問題を解消
config.js、package.jsonの記述を変更することで解消できる。
import {defineConfig} from "vite";
import react from "@vitejs/plugin-react";
<!--https://vitejs.dev/config/ -->
export default defineConfig({
server:{
host:true, //追加
},
plugins:[react()],
});
{
"name":"vite-project",
"private":true,
"version":"0.0.0",
"type":"module",
"scripts":{
"dev":"vite --host --port 5173", //hostを追加
"build":"vite preview",
"lint":"eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
},
"dependencies":{
"react":"^18.3.1",
"react-dom":"^18.3.1"
},
"devDependencies":{
"@types/react":"^18.3.3",
"@types/react-dom":"^18.3.0",
"@vitejs/plugin-react":"^4.3",
"eslint":"^8.57.0",
"eslint-plugin-react":"^7.34",
"eslint-plugin-react-hooks":"^4.6.2",
"eslint-plugin-react-refresh":"^0.4.7",
"vite":"^5.3.4"
}
}
みんなサーバーを立ち上げれたね！やったぁ👾
②-1propsについて学ぼう
propsとはなにか
親コンポーネントから子コンポーネントへと値を渡せる仕組みのこと。
再利用しやすく、見やすく、管理が楽になるなど…とっても便利な仕組みなのでしっかりと学んでいこう！
通常のコンポーネントの呼び出し
まずは通常のコンポーネントの呼び出しを見ていこう。
以下の親コンポーネントと子コンポーネントがあります。
【親コンポーネント(基本)】
const App =()=>{
return
<Title/>
};
export default App;
【子コンポーネント(基本)】
const Title =()=>{
return(
<>
<div>
<h1>タイトル</h1>
</div>
</>
)
};
export default Title;
この状態でも問題はありませんが、子コンポーネントは特定のタイトルにしか使えない。(再利用性がない)
他のタイトルを作るために新しくコンポーネントを作るのは手間…
ここでpropsを使ってみよう！
【親コンポーネント(props)】
const App =()=>{
return
<Title title="propsとは"> //親コンポーネントでタイトルを指定する
};
export default App;
【子コンポーネント(props)】
const Title =(props)=>{ //propsという引数を渡す
return(
<>
<div>
<h1>{props.title}</h1> //書き換える
</div>
</>
)
};
export default Title;
では、ここで何が行われているかをひとつひとつ見ていこう。
①親コンポーネントに記述した「<Title title="propsとは">」を子コンポーネントのpropsで受け取る。
②propsには{title:"propsとは"}というオブジェクトが渡される。
③「props.title」という形でpropsオブジェクトのtitleプロパティにアクセスする。
④「<h1>{props.title}</h1>」という記述をすることで、「<h1>"propsとは"</h1>」として表示される。
この仕組みを作ることで、タイトルのコンポーネントをいちいち作らなくてもTitle.jsxを使い回すことができる。
styleを渡してみよう
propsにインラインスタイルを渡して装飾をすることもできる。
今回は文字の色を渡してみよう。
【親コンポーネント(props/インラインスタイル)】
const App =()=>{
return(
<Title title="propsとは" style={{color:"blue"}}/> //スタイルを指定
);
};
export default App;
【子コンポーネント(props/インラインスタイル)】
const Title =(props)=>{
return(
<>
<div>
<h1 style={props.style}> //スタイルを追記
{props.title}
</h1>
</div>
</>
)
};
export default Title;
文字が青色になりました！
イベントハンドラを渡してみよう
【親コンポーネント(props/イベントハンドラ)】
const App =()=>{
const [number,setNumber] = useState(0);
const numberChange =()=>{
setNumber((number) => number + 1);
};
return(
<Title title={number} onClick = {numberChange}/>
);
};
export default App;
【子コンポーネント(props/イベントハンドラ)】
const Title =(props)=>{
return(
<>
<div>
<h1 onClick = {props.onClick}>
{props.title}
</h1>
</div>
</>
)
};
これで数字をクリックするたび1ずつカウントアップする動作の完成です✨
props.childrenを使ってみよう
ここまで文字列やイベント処理を渡してきましたが、実はJSX自体を子要素に渡すことも可能。
これを使えば「あのコンポーネントを使いたいけど、ちょっと追加したいものがあるなぁ」といった悩みを解決できるなど1つのコンポーネントで柔軟な対応が行える。
【親コンポーネント(props.children)】
const App =()=>{
return (
<>
<Title title='propsとは'>
<h1>これはprops.childrenを使って表示させるよ</h1>
</Title> //Titleで囲む
</>
);
};
export default App;
これまでと違って</Title>でh1タグを囲んでいる。
この囲んだ箇所が、props.childrenとして扱われ、子コンポーネントに渡される。
【子コンポーネント(props.children】
const Title =(props)=>{
return(
<>
<div>
<h1>
{props.title}
{props.children} //追記
</h1>
</div>
</>
);
};
export default Title;
子コンポーネントでprops.childrenを表示させるには{props.children}を追加する。
こうすることで親コンポーネントの<Title></Title>で囲った要素を子コンポーネントで表示できる。
JSX自体を渡しているので一部をspanタグで囲んでstyleで色をつけるなども可能。
②-2関数と引数について学ぼう
関数ってなーに？
簡単にいうと「処理をまとめて名前をつけて管理できるもの。」
使いまわせて呼び出せる…Reactの関数コンポーネントと同じ仕組みですね！
関数式、関数宣言、アロー関数、コンストラクタ…など作り方は色々あるのでぜひ調べてみてください。
引数ってなーに？
引数は関数に渡す値のこと。よく()の中に入っているね！
②-1で紹介したコードだと const Title =(props)=>{ のpropsが引数。
場合によっては第１引数、第２引数…と複数の値を渡すことも可能。
ZeloPlusの[演習]propsでコンポーネントにデータを渡そうのコードで見てみましょう！
const UserList = () => {
const users = [
{ userName: "Jack", email: "jack@eras.jp" },
{ userName: "Betty", email: "betty@eras.jp" },
];
return (
<div>
<table>
<thead>
<tr>
<th>ユーザー名</th>
<th>メールアドレス</th>
</tr>
</thead>
<tbody>
{users.map((row, index) => { //rowが第１引数、indexが第２引数
return (
<UserRow key={index} userName={row.userName} email={row.email} />
);
})}
</tbody>
</table>
</div>
);
};
ここではmapメソッドを利用して、stateのusersをループさせて配列内のオブジェクトとindex(配列の何番目の要素であるか。※０からカウント)を取り出している。
map関数は配列の各要素に対して一度ずつコールバック関数を実行する。そして、このコールバック関数の最初>の引数として、その要素自体が渡される。この引数に付ける名前は自由ですが、rowという名前が使われること>が多い。(要素がユーザー情報やデータの行（row）を表す場合、row という名前は直感的で理解しやすいため)
+α useStateについて
useStateは、コンポーネントにstate変数を追加するためのReactフックです。
例えば…
ゲームのスコアを記録するノートがあるとする。
ゲームを進めていくとスコアが変わっていくので、都度スコアを更新していきたい。
⇩
実際にコードにすると…
const [score, setScore] = useState(0);
・useState:ノートにあたる部分。(記録したい情報を保存する場所。これを「状態(State)」と呼ぶ。)
・score：ノートに書かれている今のスコア。
・setScore：スコアを更新するためのペンみたいなもの。
・useState(0)：スコアの初期値を設定している。
⇩
実際にこのコードを使ってみると…
import React, { useState } from 'react'; //importが必要
function ScoreCounter() {
// スコアの状態と更新関数を準備
const [score, setScore] = useState(0); //初期値は0
// スコアを1増やす関数
const increaseScore = () => {
setScore(score + 1); //スコアを更新
};
//以下省略
このような形で値の初期値の設定と、更新を行うことができます。
感想
ReaSemi第３回〜かのさん先生やるってよ！編〜
ということで、今回も楽しく議事録を書かせていただきました！
１期上の先輩が先生をやるということで…改めて先輩方はすごいなあと思いました。
いつも明るく面白く励ましてくれるかのさんですが、授業の内容はとってもわかりやすくて勉強になりました。
そして、かのさんの人柄あってか途中からみんなチャットでコメントをするラジオ形式になってとても楽しく学ぶことがきました☺️
ReaSemi盛り上げるためにも、自分の勉強のためにも今後も積極的に発言や質問をしていきたいです！
いつか私も人に教えられるくらいの知識をつけて後輩に繋げていけるように頑張ります。
ReaSemi第４回目も、かのラジオ２回目も楽しみにしております！
(7期生:RURI)
Discussion
今回も議事録ありがとうございます！！！
Reactの勉強と同時にJavaScriptも勉強できちゃう
ReaSemi有り難すぎます🥲考案してくれて感謝です。
関数と引数の記事もリンク貼ってもらえたので、復習します♡
とんでもないです☺️
私もとても勉強になるし楽しくてReaSemiができてとても嬉しいです！
やまぴー先生に感謝ですね！