シリコンバレースーパーウエア

夏休みで２週間ほどお休みを頂きます。 June 29, 2022 夏休みで２週間ほどお休みを頂きます。 明日（2022 年 6 月 30 日）から２週間、夏休みで投稿をお休みします。 7 月中旬から再開予定です。

ホーム ブログ Firebase情報 Reduxのデータ処理に値を渡すには？ 2022年6月28日 Redux のデータ処理に値を渡すには？ 前回の記事では、Redux Toolkit を利用して、Redux を React で利用する簡単な事例を紹介しました。今回は、Redux のデータの処理をする際に値を渡す例を紹介します。 Redux のデータ処理は、「slice reducer」 前回の記事で紹介した通り、Redux Toolkit を利用して、Redux で管理しているデータを処理するのは「slice reducer」です。 前回の例では、Redux で管理するデータはカウンタの値でサポートする処理は二つでした。 カウンタを１づつ増やす カウンタをリセットする（「０」に戻す） この処理は、データを処理する際にデータを渡す必要はありませんでした。 今回の記事は、カウンタに特定の値をセットするという処理を追加します。この処理をするためには、セットする値を指定する必要があります。 まずは、前回紹介した「slice reducer」に「 init 」という処理を追加した例です。 追加した処理は、指定された値をカウンタの値（ value ）にセットする処理を行なっています。 import { ActionReducerMapBuilder, createSlice, } from "@reduxjs/toolkit"; interface SampelState { value: number; } interface Action { type: string; payload: any; } const initialState: SampelState = { value: 0, }; export const sampleSlice = createSlice({ name: "counter", initialState, reducers: { clear: (state: Sampel

ホーム ブログ Firebase情報 Redux Toolkitを使ったRedux活用法 2022年6月26日 Redux Toolkit を使った Redux 活用法 Redux Toolkit を使うと Redux の設定が簡素化されます。この連載では、何回かに分けて Redux Toolkit を使った Redux の活用事例を紹介していきます。 Redux Toolkit を利用する利点 React などで Redux を利用する際のハードルになるのは、Redux を利用する為の細かい設定が初心者には面倒という点がありました。Vue などでよく利用される、Vuex や Pinia などの場合は、Redux に比べると設定の部分が大幅に簡素化されていて、初心者でも扱いやすいというのが大きな利点になっています。 Redux Toolkit を利用すると、この設定の部分を大きく簡素化する事ができます。 Redux Toolkit をする場合に必要な設定は： ストアの作成 React への組み込み Slice Reducer の作成とストアへの登録 この三点です。 ストア(store)は、データを一括管理するための、Redux の仕組みと考えてください。 このストアには、後から説明する、「slice reducer」と呼ばれる、実際に一括管理するデータの定義と、そのデータの処理方法を記述するモジュールを登録する必要がありますが、最初はまずその「型」を作ります。「slice reducer」は作成後に追加で登録すれば OK です。 その後で、作成したストア（store）を React に組み込んで、あとは、実際のデータとその処理方法を記述した、「slice reducer」を作成して、最初に作成したストア（store）に登録します。 Redux Toolkit を利用しない場合には、「Slice Reducer」の部分に相当する部分でさらに細かい設定が必要になります。Reducer とは別に、必要になる「アクション（action）」と呼ばれる、データ処理を予め決めた上で、Reduce

ホーム ブログ Firebase情報 少し簡単になったRedux 2022年6月23日 少し簡単になった Redux React でデータを一括管理したい場合には、Redux を利用するのが一般的です。Redux は React 専用のデータ管理モジュールというわけではなく、Vue などでも利用可能な仕組みです。しかし、Vue の場合には、VUEX や Pinia などの使いやすいモジュールを利用するのが一般的です。VUEX や Pinia に比べると、Redux の設定は面倒で、初心者が躓くポイントの一つです。しかし、Redux Toolkit を活用すると、必要な設定も少なく、以前に比べると使いやすくなっています。React の基本の紹介が一通り終わったので、Redux Toolkit を利用した、Redux の活用法を何回かに分けてお届けします！ React で Redux を利用するための設定 Vue の場合は、Vue のプロジェクトを作成する際に、VUEX や Pinia を利用する設定を選択すると、必要な設定をやってくれる為、あとはデータと、その処理を記述すれば利用可能で、比較的簡単にデータを一括管理できます。 一方で、React の場合、多くの場合は、自分自身でモジュールをインストールして必要な設定を行う必要があります。慣れてしまえば、それほど難しい物ではありませんが、初心者には何をやっているのか分かりにくいです部分も多く、Vue で利用する、VUEX や Pinia に比べるとハードルが高いと言われていました。 実際に必要な設定は大きく分けて以下の三つの設定です： ストア（store)の作成 アクション(action)の定義 各アクションに対応した、ストアの更新処理（reducer） を行う必要がありました。 ストア（store）は、一括管理するデータを管理する仕組みで、後で説明する「reducer」を登録したりする必要があります。アクション（action）は、一括管理しているデータを更新する処理の定義です。処理の名前と、処理に必要なデータなどを定義します。最後が「

ホーム ブログ Firebase情報 Reactのスロット機能 2022年6月21日 React のスロット機能 Vue では、スロットを使って「親」の部品から、「子」の部品にデータを渡す事ができます。React でも似た様な機能を使うことができます。この記事では、React のスロット機能の使い方を紹介します。 スロットとは？ HTML のタグで囲まれた部分です。 <h1>スロット</h1> この例では、「h1」のタグで囲まれた「スロット」の部分です。 この部分のデータを呼び出している「部品」（子）に渡す事ができます。 Vue の場合には、呼び出される側の部品（子）の方で、 <template> <slot>子で設定したデータ</slot> </template> の様に「slot」のタグで囲んでおくだけで利用できます。 この場合、「子で設定したデータ」は、親でスロットのデータを設定している場合には上書きされる仕組みです。親側でスロットのデータを設定していない場合には、この「子で設定したデータ」が表示される仕組みです。 React の場合はどうなっているか？ React でも同じ様な機能を利用できます。 React の場合は、このスロットのデータも「プロパティ」の一部として、呼び出される部品（子）に渡されます。 React の呼び出される側（子）の「部品」の例です。 import React from "react"; interface IProps { children: string | undefined; } export default function Step14Child(props: IProps): JSX.Element { return ( <React.Fragment> <div> <p>{props.children ? props.children : "Fall

ホーム ブログ Firebase情報 Reactで呼び出し元の部品にデータを渡すには？ 2022年6月19日 React で呼び出し元の部品にデータを渡すには？ Veu の場合、呼び出し元（親）の部品に、呼び出される（子）の部品からデータを渡す機能があります。React の場合にも似たような機能を実装できますが、考え方が少し違っています。この記事では、React で「子」から「親」にデータを渡す例を紹介します。 Vue の場合は？ Vue の場合は、公式チュートリアル（英語版）の ステップ１３ で紹介されているように、「 emit 」を使うと、「子」の部品から「親」の部品にデータを送る事ができます。 <script> export default { emits: ["response"], created() { this.$emit("response", "hello from child"); }, }; </script> この場合、「 emits 」で定義している、「 response 」という名前で、「 this.$emit('response', 'XXXX') 」を使うと、データを「親」の部品に送る事ができます。 この例では、「hello from child」というデータを「親」に送っています。 「親」の部品では、最初は「No child msg yet」というデータをセットしておいて、データが送られてきた場合には、送られてきたデータに更新するという処理を行なっています。 React ではどうするか？ 実は、React の場合、基本的な考えとして、「子」の部品から「親」の部品にデータを送るような Vue の機能はサポートされていません。基本的に、データのやり取りは「親」の部品から「子」の部品への一方通行になっています。 そう考えると、Vue の方が機能が多く、優れているように思いがちですが、同じ様な機能は React でも実現可

ホーム ブログ Firebase情報 Reactで「部品」にデータを渡すには？ 2022年6月16日 React で「部品」にデータを渡すには？ React の「部品」に呼び出し元（親）からデータを渡すやり方は、Vue と殆ど同じです。プロパティ（property）と呼ばれるアトリビュートを呼び出すモジュールの HTML に相当する部分（JSX）で指定して渡します。 プロパティを使って渡す React でも Vue でも呼び出し元（親）からデータを渡す場合、プロパティ（property）と呼ばれるアトリビュートで指定します。記述方法も似ています。 今回は、呼び出される部品（子）では、相当するプロパティ(property)が指定され中たあ場合には、「No props passed yet」を表示して、プロパティ(property)が指定されている場合には、指定されたプロパティの値を表示するようにします。 まずは、呼び出される部品（子）の記述です。 import React from "react"; interface IProps { msg: string | undefined; } export default function Step12Child(props: IProps): JSX.Element { return ( <React.Fragment> <div> <h2>{props.msg ? props.msg : "No props passed yet"}</h2> </div> </React.Fragment> ); } 今回は、Typescript を利用しているので、渡されるプロパティの型をきちんと宣言する必要があります。 export default function Step12Child(props: any): JSX.Element { ..... }