はじめに
Reactは、ユーザーインターフェースを構成するためのJavaScriptライブラリです。昨今では、ウェブアプリケーションやモバイルアプリケーションのインターフェースを作成するために、多くの開発現場で使用されています。Reactを学ぶことで、モダンなウェブ開発のスキルを身につけることができるため、フロントエンドエンジニアを目指す上で、必須のスキルと言っても過言ではありません。
フロントエンドエンジニアになりたい、初めてReactを学ぶ方に向けて、この記事ではReactの基本であるpropsについて解説します。propsはReactアプリケーションを構成する上で、必須の知識です。propsの基本を押さえておくことで、これからのReact学習の理解度が深まります。基本を学び、フロントエンドエンジニアへの道を進んでいきましょう!
この記事について
目的
- propsについて知る
- propsを使用したコンポーネントを扱えるようにする
対象者
- 初学者の方
- Reactの勉強を最近始めた方
- propsに苦手意識のある方
Reactの基本について
Reactの基本の説明はこの記事では省略しています。基本や環境構築方法などを知りたい方は、下記のページをご覧ください。
https://envader.plus/article/341
Reactコンポーネントとは
propsの解説に入る前に、コンポーネントについて少し説明します。
Reactにおけるコンポーネントとは、UIを構成する際の再利用可能な要素(部品)です。Reactアプリケーションは、複数のコンポーネントをさまざまな場所で再利用し、コンポーネントを組み合わせてUIを構成します。コンポーネントは、JSXを戻り値として返すJavaScript関数です。
以下は、1つのButtonコンポーネントをCardとFormコンポーネント内で再利用した例です。このように同じコンポーネントを異なるUI構成でも使用することができるため、コードの記述量を削減し、メンテナンスを容易にします。
propsはReactコンポーネントと密接な関連があります。コンポーネントについてより理解したい方は、以下の記事をご覧ください。コンポーネントの基本を一通り解説しています。
https://envader.plus/article/421
propsとは
Reactコンポーネントはpropsを使用することで、コンポーネント間のデータの受け渡しをすることができます。propsで渡せるデータの型に制限はなく、文字列、数値、オブジェクト、配列など、さまざまなデータを扱えます。
コンポーネントは再利用が可能ですが、そのままでは同じ内容のコンポーネントを利用する形となります。例えば、あるButtonコンポーネントをベースに、ボタンの中のテキストを違うものにしたい、ボタンの色を変えたいという場面では、propsが利用されます。親コンポーネントから子コンポーネントへ、テキストデータやCSSのclass属性を渡すことで、ボタンのテキスト内容や見た目を変更しつつ、Buttonコンポーネントの再利用が可能となります。このように、propsを使用することで、コンポーネントのさらなる再利用性が高まります。
propsを使用し、親コンポーネントから子コンポーネントへボタン内のテキストを渡すことで、その場面に合わせたボタンを実装することが可能になります。(以下の場面ではButtonコンポーネントが子コンポーネントです)
親コンポーネントと子コンポーネントとは
ここで親コンポーネントと子コンポーネントについてもう少し理解を深めておきましょう。
親コンポーネントとは、他のコンポーネントを含むコンポーネントのことを指します。子コンポーネントは親から渡されるデータを元に、動的に形を変えてコンポーネントを表示します。子コンポーネントは、propsで親から渡されたデータを受け取り、それを使用して表示や処理を行います。
以下の例では、Appコンポーネントが親コンポーネントにあたり、その関数内のreturn
内にあるButtonコンポーネントが子コンポーネントとなります。
コンポーネントを呼び出す側と呼び出される側とは
親と子のコンポーネントの説明の際は、「呼び出す側」「呼び出される側」という表現がよく用いられます。
以下の例では、AppコンポーネントがButtonコンポーネントを含むため、Appコンポーネントが呼び出す側(親コンポーネント)、Buttonコンポーネントが呼び出される側(子コンポーネント)となります。
App.js内にButton.jsがインポートされ、Appコンポーネント内にButtonコンポーネントが配置されています。このコードがレンダリングされる際は、Appコンポーネントの内部に配置されているButtonコンポーネントが呼び出されて画面に表示されます。
Propsでの値の渡し方
propsについて学んだところで、実際にpropsで値を渡す方法を確認していきましょう。このセクションでは、propsを使用して以下のUIを構成します。
ハンズオンでコードの記述を試したい方には、以下のサイトがおすすめです。Reactの環境構築が不要で、ブラウザ上でコードの記述を手軽に試すことができます。
-
Codesandbox
-
StackBlitz
propsを使用したコンポーネントの作成
今回は以下の3つのファイルを作成し、UIを構成していきます。
- App.js
- Greeting.js
- Button.js
まず初めにApp.jsを以下のように記述します。
// ファイル名:App.js
import Greeting from './Greeting';
import Button from './Button';
export default function App() {
return (
<>
<Greeting message='Hello, World!' />
<Greeting subMessage='React × エンベーダー' />
<Button label='OK' />
<Button label='Cancel' />
</>
);
}
次に、子コンポーネントとなるGreeting.jsとButton.jsを作成し、以下のように記述します。
// ファイル名:Greeting.js
export default function Greeting(props) {
return (
<>
<h1>{props.message}</h1>
<h2>{props.subMessage}</h2>
</>
);
}
// ファイル名:Button.js
export default function Button (props) {
return <button>{props.label}</button>;
}
これらのコードを記述すると、このセクションの最初にご覧いただいたUIが構成できているかと思います。コード内容の解説は次のセクションで行います。
作成したコンポーネントについて
記述したコードの説明の前に、もう少しpropsについて深掘りします。propsはコンポーネントが受け取るデータを格納するためのJavaScriptオブジェクトです。このオブジェクトには、親コンポーネントから渡されたプロパティがキーと値のペアとして含まれています。今回の作成したAppコンポーネント内の子コンポーネントにpropsとして渡しているオブジェクトは、以下のような属性となります。
構文 | キー | 値 |
---|---|---|
<Greeting message='Hello, World!' /> | message | 'Hello, World!' |
<Greeting subMessage='React × エンベーダ―' /> | subMessage | 'React × エンベーダ―' |
<Button label='OK' /> | label | 'OK' |
<Button label='Cancel' /> | label | 'Cancel' |
親コンポーネントが子コンポーネントを呼び出す際に、属性を指定してデータを渡します。この属性がpropsオブジェクトのプロパティとして子コンポーネントに渡されます。子のGreetingコンポーネントでは、親のAppコンポーネントから渡されたpropsオブジェクトを受け取り、その中のmessage
とsubMessage
プロパティを使って値をそれぞれ表示します。
このことを踏まえて、作成したコンポーネントのコードの説明をしていきます。
Appコンポーネント内のそれぞれの子コンポーネントに、propsのキーと値を指定しています。<Greeting message='Hello, World!' />
では、Greetingコンポーネントへキー:message
、値:'Hello, World!'
をpropsのオブジェクトとして渡しています。<Button label='OK' />
はButtonコンポーネントへキー:label
、値:'OK'
をpropsのオブジェクトとして渡している、ということになります。
// ファイル名:App.js
export default function App() {
return (
<>
<Greeting message='Hello, World!' />
<Button label='OK' />
....
</>
);
}
次にそれぞれの子コンポーネントを確認しましょう。function Greeting(props)
のように(props)
と記述することで、親のAppコンポーネントからpropsのオブジェクトを受け取ることができます。
// ファイル名:Greeting.js
export default function Greeting(props) {
return ...
}
propsで受け取った値はreturn
内で{props.キー値}
と記述することで、使用することができます。propsのデータはJavaScriptオブジェクトのため、JSX内でJavaScript構文を使用する際は{}
を付ける必要があります。{props.message}
は「props内のmessageキーの値を使用する」という指定になります。
// ファイル名:Greeting.js
export default function Greeting(props) {
return (
<>
<h1>{props.message}</h1>
<h2>{props.subMessage}</h2>
</>
);
}
以下のように親から子コンポーネントへ指定したオブジェクトをpropsとして渡し、それを受け取った子から親コンポーネントへ構文が返されます。
propsの分割代入について
分割代入とはJavaScriptの機能の一つで、オブジェクトや配列から個々の要素を簡単に取り出すための構文です。Reactでpropsを使用する際にも、この分割代入を使うことでコードをより簡潔に書くことができます。
分割代入の使用例
「Propsでの値の渡し方」セクションで作成したコードを分割代入を使用して記述します。
// ファイル名:Greeting.js
export default function Greeting({ message, subMessage }) {
return (
<>
<h1>{message}</h1>
<h2>{subMessage}</h2>
</>
);
}
function Greeting({ message, subMessage })
という構文で、propsオブジェクトの中から直接 message
とsubMessage
を取り出しています。{ message, subMessage }
の部分が分割代入の構文です。
分割代入を使うと、propsオブジェクトから必要なプロパティを直接取り出すことができるため、return
内の記述はpropsオブジェクトのキー値のみ記述することで値を取得できます。(props)
でオブジェクトを受け取っていた際は、{props.キー値}
と記述していましたが、分割代入をした場合は、{キー値}
を記述するだけで済みます。また、propsとして親コンポーネントから何を受け取っているかが明確になるため、コードの可読性と簡潔さが向上します。
この記事で学んだこと
-
propsとは
Reactコンポーネントはpropsを使用することで、コンポーネント間のデータの受け渡しをすることができます。親コンポーネントから子コンポーネントへ、テキストデータなど、さまざまなデータを渡すことで、コンポーネントを再利用しながら動的に変更することが可能です。
-
propsの使用方法
propsはコンポーネントが受け取るデータを格納するためのJavaScriptオブジェクトです。このオブジェクトには、親コンポーネントから渡されたプロパティがキーと値のペアとして含まれています。子コンポーネントにpropsのキー値を記述することで、キーに紐づく値を使用することができます。
-
propsの分割代入
分割代入とはJavaScriptの機能の一つで、オブジェクトや配列から個々の要素を簡単に取り出すための構文です。分割代入を使うと、propsオブジェクトから必要なプロパティを直接取り出すことができるため、コードの可読性と簡潔さが向上します。
参考資料
以下のリンクは、この記事で説明した手順や概念に関連する参考資料です。より詳しく学びたい方は、ぜひご参照ください。
【番外編】USBも知らなかった私が独学でプログラミングを勉強してGAFAに入社するまでの話
![IT未経験者必見 USBも知らなかった私が独学でプログラミングを勉強してGAFAに入社するまでの話](/_next/image?url=%2Fcommons%2Fbanners%2Fbanner-note01.jpg&w=3840&q=75)
プログラミング塾に半年通えば、一人前になれると思っているあなた。それ、勘違いですよ。「なぜ間違いなの?」「正しい勉強法とは何なの?」ITを学び始める全ての人に知って欲しい。そう思って書きました。是非読んでみてください。
「フリーランスエンジニア」
近年やっと世間に浸透した言葉だ。ひと昔まえ、終身雇用は当たり前で、大企業に就職することは一種のステータスだった。しかし、そんな時代も終わり「優秀な人材は転職する」ことが当たり前の時代となる。フリーランスエンジニアに高価値が付く現在、ネットを見ると「未経験でも年収400万以上」などと書いてある。これに釣られて、多くの人がフリーランスになろうとITの世界に入ってきている。私もその中の1人だ。数年前、USBも知らない状態からITの世界に没入し、そこから約2年間、毎日勉学を行なった。他人の何十倍も努力した。そして、企業研修やIT塾で数多くの受講生の指導経験も得た。そこで私は、伸びるエンジニアとそうでないエンジニアをたくさん見てきた。そして、稼げるエンジニア、稼げないエンジニアを見てきた。
「成功する人とそうでない人の違いは何か?」
私が出した答えは、「量産型エンジニアか否か」である。今のエンジニア市場には、量産型エンジニアが溢れている!!ここでの量産型エンジニアの定義は以下の通りである。
比較的簡単に学習可能なWebフレームワーク(WordPress, Rails)やPython等の知識はあるが、ITの基本概念を理解していないため、単調な作業しかこなすことができないエンジニアのこと。
多くの人がフリーランスエンジニアを目指す時代に中途半端な知識や技術力でこの世界に飛び込むと返って過酷な労働条件で働くことになる。そこで、エンジニアを目指すあなたがどう学習していくべきかを私の経験を交えて書こうと思った。続きはこちらから、、、、
エンベーダー編集部
エンベーダーは、ITスクールRareTECHのインフラ学習教材として誕生しました。 「遊びながらインフラエンジニアへ」をコンセプトに、インフラへの学習ハードルを下げるツールとして運営されています。
![RareTECH 無料体験授業開催中! オンラインにて実施中! Top10%のエンジニアになる秘訣を伝授します! RareTECH講師への質疑応答可](/_next/image?url=%2Fcommons%2Fbanners%2Fbanner-raretech-trial-lesson01.jpg&w=3840&q=75)
関連記事
![](/_next/image?url=%2Fcommons%2Fimages%2Fthumbnail-note.jpg&w=3840&q=75)
2020.02.25
完全未経験からエンジニアを目指す爆速勉強法
USBも知らなかった私が独学でプログラミングを勉強してGAFAに入社するまでの話
- キャリア・学習法
- エンジニア
![](/_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Fenvader-article-images%2Freact-begginer%2F001.png&w=3840&q=75)
2024.03.31
【超入門】Reactの基礎を30分で学べる!インストールから基本コンポーネントまで
この記事は、フロントエンドエンジニアを目指したいけど何をすればいいかわからないといった人に、とりあえずReactという技術を用いて雰囲気を知ってもらうために作成しました。
- エンジニア
- フロントエンド
- ハンズオン
- React
- JavaScript
![](/_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Fenvader-article-images%2Freact-use-effect%2Freact-useEffect-001.png&w=3840&q=75)
2024.08.17
Reactの基本、useEffectを理解しよう
フロントエンドエンジニアを目指す方や、初めてReactを学ぶ方に向けて、この記事ではReact HooksのuseEffectについて解説します。useEffectの仕組みは少し複雑で初学者の方にとって難しく感じるかもしれませんが、Reactでの開発では必須の技術となります。useEffectの基本を押さえておくことで、これからのReact学習の理解度が深まります。基本を学び、フロントエンドエンジニアへの道を進んでいきましょう!
- プログラミング
- React
- フロントエンド
![](/_next/image?url=https%3A%2F%2Fstorage.googleapis.com%2Fenvader-article-images%2Freact-dom%2Fdom-001.png&w=3840&q=75)
2024.07.16
Webの基本、DOMの仕組みを理解する
DOMはHTMLに含まれる要素(エレメント)を、ノードとオブジェクトで表現します。
- フロントエンド