目的別厳選記事絶対的におすすめする神フリーランスエージェントランキング【2018年最新版】-エージェントで年収は変わる!情報処理で留年しかけてした男が入社3年未満で独立するまでプロフィール-じゃけぇ-




Reactハンズオンその2です。

1から順番にやるのをオススメします。

Reactハンズオン全体像

React初心者のためのハンズオン その1[勉強方法とReactの基本]
React初心者のためのハンズオン その2[Propsとコンポーネント化]
React初心者のためのハンズオン その3[Stateでの状態管理]
   coming soon…




さて前回までで、タイトルと説明文を表示するところまでできましたね。



今回はズバリ「Props」「コンポーネント化」というReactの根幹とも言える機能について学びます。


じゃけぇじゃけぇ

独学だとここで「???」ってなるけどこのハンズオンをやればきっと理解できるから安心するんだ~

Reactの世界へようこそ!ニーハオ React!!

文字にスタイルをあててみよう

では前回の続きからやります。

JSXでCSSを適用させるやり方の1つが以下のようなものです。書いてみましょう。

[index.js]



何やら{{が2つ書かれていますね。JSXではHTMLタグ内であっても{}で囲むことでその内部でJavaScriptのコードを書くことができます。

なのでここでは

外側の{
 JavaScriptを書くためのJSX記法

内側の{
 JavaScriptのオブジェクト定義のための{

styleという属性にJavaScriptのオブジェクトで定義したCSSをあてはめることでスタイリングできるということですね。

なので以下のようにも書けます。

[index.js]



考える人考える人

CSSまでもJavaScriptで書くんじゃの~

じゃけぇじゃけぇ

勿論CSSファイルに書くこともできるけどね!Reactはコンポーネントごとに独立しているのが望ましいから、jsファイルごとにCSSも独立しているほうが都合が良いことが多いかな。

ここでは最初の書き方で進めていきましょう!

コンポーネント化してみよう

ではReactの真骨頂とも言えるコンポーネント化をしていきましょう!

画面の要素を大小様々なコンポーネントに分割して別々のファイルにしておくことで、色々な画面で使い回せたりコンポーネントごとのテストが容易になるというメリットがあります。

まずは、コンポーネントを入れるフォルダを作りましょう。
srcの部分にマウスオーバーして、右から2番目のNew Directoryを押して、「components」という名前をつけます。


同様にcomponentsフォルダにマウスオーバーして、右から3番目のNew Fileを押して、「Msg.js」という名前でファイルをつくります。


今のディレクトリ構造はこんな感じ


ではこれから、pタグで「Reactは難しくないよー」と表示していた部分をコンポーネント化していきたいと思います。

Msg.jsを開いて、いつも通りReactを使えるようにしましょう。
(※これはコンポーネントを返すだけで直接HTMLにレンダリングするわけではないのでreact-domは不要です)

[Msg.js]


次にこれまでの要領で、pタグのメッセージだけを持った関数コンポーネントを作成します。
名前はMsgとしておきましょう。

[Msg.js]


最後に、この関数コンポーネントを他のファイルで使えるようにexportしてあげる必要があります。
基本的に「default」をつけておけばOKです。

[Msg.js]


さぁ、これでメッセージのみを持ったコンポーネントが作成できました!

あとはこいつを呼び出して使うだけです。

ではindex.jsを開いて、先程exportしたMsgを使えるようにimportしましょう。

[index.js]


このように、相対パスでファイルを指定して名前(Msg)をつけることでそのファイルで対象のコンポーネントが使えるようになります!たったのこれだけ!

では最後に、index.jsのpタグの部分をimportしたMsgコンポーネントに差し替えてみましょう。

[index.js]


これでエラーなく、表示もそのままならコンポーネント化大成功です!やったぜ。

Propsを渡してみる

コンポーネント化をしたことによって、上記<Msg />コンポーネントは他の画面でも使い回せるようになりましたが、今のままだと

『青色』で、『Reactは難しくないよー』



という文字を表示する固定のコンポーネントになっちゃってます。

この『』で囲まれているような要素って動的に変更できたら便利そうじゃないですか?

例えば、ある画面では『赤色』にしたり、ある画面では『Vueは簡単だよー』という文言にしたり、といった感じですね。

そこで登場するのがPropsというものです。

図でイメージすると分かり易いですが、以下のようにPropsとはコンポーネントに渡す引数のようなものです。


ええ、何も難しくありません。実際に書いてみましょう。

Msg.jsを作った時の要領で、componentsフォルダ配下に「ColorfulMsg.js」というファイルを新規作成しましょう。

フォルダ構成はこんな感じ。


Msg.jsの内容を全てコピーして、ColorfulMsg.jsにペーストし、以下のようにコンポーネント名のみ「ColorfulMsg」に修正します。

[ColorfulMsg.js]


呼び出し側のコンポーネント名とimport先も修正しましょう。

[index.js]


さて、とりあえずここまでで、エラーなく表示も変わってなければOKです。


じゃけぇじゃけぇ

じゃあお待ちかねPropsを渡していこーう!

Propsは、HTMLのidやnameの要領でコンポーネントタグ内に好きな名前を設定して渡すことができます。

例えば以下の例では、「color」という名前で「blue」という値のPropsを渡しています。
書いてみましょう。

[index.js]


この時点ではエラーにはならないはずです。(Propsを渡すだけ渡して使っていない状態)

ではColorfulMsg側で渡されたPropsを使っていきたいと思います。

引数にpropsを設定することで、その中にPropsに設定した値が入ってきます。
(※アローファンクションでは引数が1つの場合、()を省略できます)

[ColorfulMsg.js]


さぁどうでしょうか?エラーなく表示もそのままであれば大成功です。

Propsとしてcolorを渡したので、上記のようにprops.colorとすることで使用することができます。


考える人考える人

おおー!でも別に変数名は「props」じゃなくても良いんじゃろ??

じゃけぇじゃけぇ

まぁそうだね。でも通例としてpropsにするのが一般的だから他の人の可読性も考えるとpropsにしておくことをオススメするよ

では同じ要領で表示するメッセージ(message)もPropsとして渡してみましょう。もう慣れたものでしょう。

[index.js]


ColorfulMsg側も修正します。JSX記法ではタグ内でJavaScriptの変数を使う場合は{}で囲むのでしたね。

[ColorfulMsg.js]


できましたね!このようにPropsはいくつでも渡すことが可能です。


考える人考える人

これでワシもPropsマスターじゃの~!!

じゃけぇじゃけぇ

ちょっと気が早い!あと少し!!

Propsで良く使う概念として「children」というものがあります。

props.childrenとすることで値を扱えるのですが、ここに入ってくる値は何かと言うと

コンポーネントタグに囲まれた要素



です。

実際に例を見たほうが早いので先ほどのファイルを以下のように修正してみてください。

[index.js]


[ColorfulMsg.js]


上記のようにしても表示は同じままだと思います。

このようにコンポーネントタグを開始タグと終了タグに分離し、その間に何か設定することで自動的に「props.children」として扱うことができます。

このほうが、

文字として「Reactは難しくないよー」と表示して、オプションとして色は「blue」なんだな



というのが直感的に分かり易いと思います。

childrenは良くでてくるので覚えておきましょう!

コンポーネントの使い回しを体感してみよう

では最後におまけ的に。

ここまでの流れであなたは

「色」と「文章」を受け取ることで、「色でスタイリングされた文章を返す」



というコンポーネントの作成に成功しています。

こういった風にコンポーネントのINとOUTを考えることをコンポーネント設計と言ったりします。

いかに効率よく使い回せるコンポーネント設計ができるかが大事ですね。

それではColorfulMsgも使い回してみましょう。
index.jsを以下のように修正します。

[index.js]


以下のように、スタイリングされた文字が表示されたら完璧です!

さいごに

さてさてReactの世界にはだいぶ慣れてきたでしょうか?(゚∀゚)

コンポーネント化Propsはマスターできましたね。順番にやっていけばさほど難しくないと思います。

尚、このハンズオンのソースはGitHubで公開しています。
https://github.com/freelance-jak/react-handson_2_props


さぁさぁ次はReactで最も重要な概念とも言えるStateについて紹介します。

その名の通りコンポーネントの「状態」を表す値で、画面の動きやアクションは全てこのStateで管理していきます。

PropsとStateが分かればReactで画面が作れるようになるので、もう少し頑張っていきましょう!

もし「分かり易い!」と感じたら是非のボタンからシェアしてReactの輪を拡げて頂けたらと思います!

それでは!また!!

最後まで読んで頂きありがとうございます!
人気の記事だけ集めたので是非覗いていってください^^
 厳選!目的別にオススメ記事を紹介-あなたの欲しい情報がここに-