2022.7.22引き続き今回もReactとVue.jsでコードの比較をしていきたいと思います。第5回目になります本記事では、コンポーネント間で値の受け渡し方について注目してみます。いわゆるPorpsと呼ばれるもので、コンポーネントを扱う際には必ずと言って良いほど登場します。値を受け渡すことで、コンポーネント間での動的な処理ができるようになりますが、ReactとVue.jsでは少しコードの書き方も異なります。前回同様、これまでに引き続きサンプルとしてあげているアプリケーションのコードになります。ここではスタイルに関する記述は割愛しています。テンプレートと処理の部分だけを抜粋しています。}}</script>Reactも同じくサンプルのアプリケーションのソースコードを確認しておきます。テンプレートや処理の書き方などの差異は過去記事でもまとめています。)};今回はコンポーネント間の値の受け渡し部分を見ていきますので、親子間のコンポーネントでどのような処理が行われているかに注目ですね。props(親コンポーネントから子コンポーネントへの値受け渡し)Vue.jsでは、親コンポーネントから子コンポーネントに値を受け渡す場合、「props」というオプションを使用します。親コンポーネント内のテンプレート上にある子コンポーネントへ、props名の属性を指定し、その値に受け渡すデータを指定します。この時、属性であるprops名はハイフン区切りのケバブケースで指定する必要があります。(参考記事:命名規則「キャメルケース」「スネークケース」「ケバブケース」についてまとめてみました)そして、子コンポーネント側ではpropsとして受け取ります。この時に受け渡された値の型や初期値、必須かどうかなどをオプションで指定することができます。子コンポーネント側ではprops名はキャメルケースで扱う点に注意します。受け渡された値はテンプレート上で展開したり、引数の値などに使えます。}</script>Reactでは、関数コンポーネントの場合に親要素では同じように子コンポーネントにpropsとして値を受け渡します。Vue.jsとは異なりキャメルケースでの指定になります。子コンポーネント側では、コンポーネントの関数の引数でpropsを受け取ることができます。その引数内で、親コンポーネントで設定したprops名をキーにすることで受け渡された値を取得できます。Vue.jsと比べるとこちらの方がシンプルですね。$emit(子コンポーネントから親コンポーネントへの値受け渡し)続いて、先ほどのpropsとは逆に子コンポーネントから親コンポーネントへ値を受け渡す場合にはpropsではなく、「$emit」によって子コンポーネント側でカスタムイベントを作成し、そのイベントで親コンポーネント側のメソッドを発火させるようにします。その際に、引数で値を受け取ることができるので、これを利用することで子コンポーネントから親コンポーネントへ値を受け渡すことができます。(参考記事:Vue.jsで親から孫まで多重階層になっているコンポーネント間で値を受け渡す)つまり、子コンポーネントでのカスタムイベントを使って値を受け取る形になります。子から親への値の受け渡しには、$emit用のメソッドが必要になるのでやや複雑な印象を受けます。}</script>Reactの場合には、Vue.jsのような$emitというのは存在せず、propsで値と同じように、親コンポーネントで定義したメソッドも子コンポーネントへ受け渡すことができます。子コンポーネント側で受け取ったメソッドを実行することで、親コンポーネント側の値を更新することができます。こちらの方がスマートでわかりやすい印象がありますね。)};コンポーネント間の値の受け渡しについては、このようにVue.jsとReactで少し違いが見られるようですね。API)の方が独自の書き方となるので、初めてのケースですとやや学習コストが高いのかなと思いました。両方扱う場合にはしっかりと違いを把握しておきたいですね。topこのウェブサイトはCookieを使用します当ウェブサイトではCookieを使用してアクセス解析や広告を行なっており、ウェブサイトの運用やコンテンツ制作に役立てています。サイトの利用を続けることで、Cookie使用に同意したことになります。