すべてのカテゴリ

React でイベント処理を行うReact のチュートリアルの第４回目は、Vue の公式チュートリアル（英語版）と同じで、「ボタン」をクリックしたイベントを検出して処理を行う例です。この例では、ボタンをクリックする度にカウンターを１づつ増やして行く処理を行うやり方を紹介しています。React と Vue では少し考え方が違う！Vue の公式チュートリアル（英語版）で同じような課題を紹介していますが、Vue の場合は、単に Javascript の部分で変数を宣言して、その変数に対する処理を実装するだけでしたが、React の場合は少し考え方が違います。React の場合には、「特別な変数」を作って、その変数に対する処理を行います。これが大きな違いです。 このように実装しないと、変数の値が更新されても表示が更新されないような仕組みになっています。特別な変数は、「useState()」を使って宣言する！React の場合には、この特別な変数は、 *useState()*という関数を使って宣言します。 今回は、クリックされた回数を数える変数「_count_」を使いますが、変数の宣言は以下のように行います。const [count, setCount] = useState(0); ＊　count: クリックされた回数を示す変数の名前＊　setCount: 変数を更新する関数の名前　これで、指定された関数で変数を更新するような形で実装します。 変数の宣言もこの二つをペアにする形で行います。さらに、「useState(0)」で変数の初期値を設定します。以下が今回の課題を実装した例です。i

Firebase のイベント機能Firebase にはイベントを検出して処理する機能がサポートされています。上手く利用すると便利です。 よく利用されるのは、Cloud Firestore の「onSnapshot()」などがあります。ユーザー認証機能（Authentication）の「onAuthStateChange()」などもよく利用されます。この記事では、簡単にイベント検出機能の利用例を紹介します。イベントの検出機能Firebase の「onXXX」機能は基本的にイベントを検出する機能です。 この機能をどう使うかというと、簡単に説明すると「イベントの検出」と「イベントの処理」をペアで実装します。＊　Firebase はイベントを検出＊　そのイベントに対応した処理を行う　という感じで利用します。 イベントの処理の多くはアプリケーションの機能によって実装します。例えば、Cloud Firestore の「onSnapshot()」の場合は、指定したデータベースのデータが更新されると、この処理が呼ばれる仕組みです。Web サイトのあるページで Firebase のデータのリストを表示している場合、データが更新された場合、表示するデータも更新するような用途で利用します。こうすることで、表示しているデータは常に最新のデータにすることができます。onSnapShot の利用具体的な実装例です。Cloud Firestore の「users」のドキュメントのデータが更新されると Firebase のデータベースからデータを読み込んで React のステートのデータを更新します。データが