＜#4 React Native＞ 〜コンポーネントとpropsの概念〜
わくばです！
だいぶブログを放置してしまいました笑
決して勉強をサボっていたわけではなく、UdemyでしばらくReact Nativeの講座を受けていたんです。
ちなみにシリーズのタイトルが「AIアプリを作りたい」から「自作アプリを作りたい」に変わっているのは、本当に作りたいアプリが決まったからです。もともとAIアプリとしていたのは、AIの勉強とモチベーションを無理やりくっつけるためだったので特に作りたいもののイメージはありませんでしたし。実際に作るアプリの技術的な設計は今度作ろうと思っています。
そんなことは良いとして、以下にUdemyで受けた講座のリンクを張っておきます。まだすべて終わっていませんが、どれもやりがいのある良い講座です！
受講した講座
React Native入門：ニュースアプリを作りながら覚えよう/Hooks対応 2020年版
https://www.udemy.com/course/react-native-first-step/learn/lecture/18327180#overview
https://www.udemy.com/course/react-native-firebase/learn/lecture/21271370?start=375#content
かなりのボリュームだったのと、Webアプリ開発すら勉強していない人間がやるにはかなり重く、記事にするには噛み砕くのにかなり時間がかかりました。
今回から少しずつ学んだことを記事にしていこうと思います。
本題
React Nativeの重要な概念として以下の４つがあります
- コンポーネント
- JSX
- props
- state
この内最重要はコンポーネントとJSXの２つ、残りのpropsとstateはコンポーネントの挙動や状態に関わる要素です。
コンポーネントというのはクラスや函数を用いて作られた本質的な単位で、この構造体を組み合わせて様々なUIを作っています。JSXは以前以下の記事で登場したと思いますが画面を描画する際のHTMLみたいなやつです(正確にはXML)。
propsの使い方 (カスタムコンポーネントによる説明)
本題のpropsですが、これは親コンポーネントから子コンポーネントへ渡すパラメタのことです。親が子コンポーネントを用いる際にパラメタを指定することで、そのパラメタを反映した子コンポーネントを描画することができます。親の言葉ひとつで、子供は全く違う人間になってしまうんですよね(重い)
以下に公式チュートリアル*1から引用したコードに自分なりの解説を加えてみました。
propsは仮引数のような理解で良いと思います。というかJavaScriptの文法上は完全にCatという関数の引数として用いられています(クラスでコンポーネントを定義する方法もあるのでイコールではないです)。親コンポーネント内で子コンポーネントを用いる際に実引数としてMaru、Jellylorum、Spot などを入れて、子コンポーネントのreturnが描画されます。
こうすることでCatというコンポーネントをいろんな場面で再利用できることが理解できると思います。
複数のpropsを指定
また、子コンポーネント内で{props.name}というふうに書かれているということは、親の方で複数のpropsを指定できるということになります。例えば以下のように新たにsexというpropsを追加すれば子コンポーネントで{props.sex}として用いることができます。
React Nativeはそもそも全部コンポーネント
今まで説明に用いていたものはカスタムコンポーネントと言ってエンジニアがソースコード内で定義して用いるものです。そのほうがpropsの説明がわかりやすいのでカスタムコンポーネントが最初に登場するはめになりました笑 が、React Nativeで構成するUIは全部コンポーネントであると行ったとおり<View>はViewコンポーネントだし、,<Text>はTextコンポーネントという予め作成されたコンポーネントです。これをコアコンポーネントといいます。そう考えると、上のCatという子コンポーネントが親コンポーネントにおいて<Cat>という形で用いられていたのも、自ずと納得できると思います。
まとめ
以上です。いやー正直Webアプリ開発をちゃんと勉強してから突入すべきでした笑 本ブログでは可能な限り、前提知識のない方でも理解できるようにするつもりですが、React Nativeに興味のある初学者の方はぜひWeb開発から入ることをおすすめします。もしくはSwiftやKotolinといったネイティブ言語。
まぁでも、冷たい水に入るときは飛び込んじゃった方が楽だったりしますし、基礎をスキップしていきなりやりたいものにダイレクトアタックするのもアリだと思います。キツイけど笑
暑さも少しずつやわらいできましたが、熱中症にはぜひお気をつけください。
では。
