はじめに Reactで個人的に色々作ったり勉強することが多く、「テストまで回す癖つけた方がいいよ！」というアドバイスをいただいたので、初めてのReactでのテストの備忘録として書いてます。なので初…
useEffectの第二引数の役割とは 簡単にいうと、[]に記述された変数が変更されると、改めてuseEffectの中身が実行される。 下記はクリックイベントのコードだが、そこで使用した変数fooを…
とりあえずやってみよう！ とりあえずクリックしたらfooが１ずつ増える関数を書いてみる。 export default function Home() { let foo = 1; const ha…
useState これはReactの機能の一つで、画面上に表示する値（例えば、ユーザーが入力したテキストや選択したオプション）を管理する。 メリット：値が変わると自動で画面が更新される。なので、ユー…
groupとpeerの主な違いは、スタイルを適用する対象がどの要素との相互作用に基づいているか。 group 親要素に適用され、親要素に対する操作（ホバーやクリックなど）により子要素のスタイルが変化…
Rails ＋ React で教材を参考にSPA化構成のアプリを開発中、以下のエラーに遭遇しました。 Uncaught runtime errors: ERROR Network Error Axi…
イベントの種類 イベントの種類は大きく分けて2つある。 ①ユーザーアクションによるイベント 一つ前の記事で扱ったuseCallbackは①に当てはまるもの。 ②何かしらのタイミングによるイベント…
クリックイベント 指定の仕方は３つある。 ①下記のようにonClickの中に関数を記述してあげればクリックイベントが適用される。 //関数宣言 <button onClick={function (…
JavaScriptのスプレッド演算子 スプレッド演算子は配列やオブジェクトの要素を個々に分割し、新たなコンテキストに展開するための便利な道具です。 配列とスプレッド演算子 まず、配列と一緒にスプレ…
配列の .map メソッドについて 配列はプログラミングの世界で頻繁に使用される概念で、複数の値を一つの変数に格納します。そして、JavaScript ではその配列に対して行いたい操作を簡単に実装で…
配列の .map メソッドについて .map メソッドは配列の全ての要素に対して指定した関数を実行し、その結果から新しい配列を作成します。このメソッドの基本的な構文は以下のようになります： let …
mapを使って繰り返すメリット mapを使うことによって、配列の中身を繰り返してくれる。 ※詳しい使い方は以前作成したmapについての投稿をチェック ①見やすい ②変更箇所があったときに、一箇所の修…
