React.js 【React hooks】useEffectの使い方 – 第二引数の活用例もご紹介! React hooksの一つであるuseEffectについてご紹介をしてます。主な内容としては、基本的な記述方法(コードの書き方)から依存配列(第二引数)の使い方までサンプルコードを用いて、まとめてます。 2023.06.22 React.js
React.js react has no exported member { hooksの関数名 } と表示された時の対処法 React × TypeScript × Next.jsで開発を行う上で、発生したエラー(react has no exported member { hooksの関数名 })の対処法についてご紹介しています。必要なライブラリを導入することで解決できる可能性が高いです。 2023.06.06 React.js
React.js [ @react-google-maps/api ] Google Mapの表示やマーカーの表示/カスタマイズを行う方法 React, Next.jsを用いたプロジェクトでGoogle Map APIを使用したGoogle Mapの表示/カスタマイズを行いたい時に便利なパッケージ(@react-google-maps/api)をご紹介してます。 本記事では、Google Mapの表示からマーカーの配置及びカスタマイズ方法についてまとめています。 2023.05.29 React.js
React.js [ React ] react-cookieを使用し、cookieでデータの保存/取得/削除を行う方法 今回は、Reactを使用したフロントエンド開発において、データをcookieへ保存するだけでなく、画面上でcookie上に保存したデータを取得したり、cookie上のデータを削除する方法についてサンプルコードを用いて解説しています。また本記事は、react-cookieを使用した方法になります。 2023.05.07 React.js
React.js [ React hooks ] useRefの使い方・サンプルコード (useStateとの違いも解説!) 本記事では、React hooksの一つである「useRef」についての使い方からuseState・useReducerとの違いまで解説しております。また、「カウンター機能」と「ref属性の活用」の2本立てでサンプルコードを掲載しておりますので、学習の参考にしてもらえたらと思います。 2023.02.01 React.js
React.js [React] Marerial UI – Material Iconsを導入する方法 + 使い方 本記事では、Marerial UIで用意されているMaterial IconsをReactの環境で導入する手順についてご紹介してます。使い方についてもサンプルコードを用いて併せて解説してますので、参考になれば嬉しいです。TypeScriptを使用されている場合でも同様のやり方で導入可能です。 2022.12.21 React.js
React.js [React] Sass(.scss)を導入する方法 (検証用のサンプルコードあり) 本記事では、Reactの環境へSassを導入する方法についてご紹介してます。 これからReactを学んでいかれる方やReactのバージョンを更新するうえで、Sassを適切に使っていきたい方にオススメの内容になっておりますので参考になれば嬉しいです。 2022.12.20 React.js
React.js React + JavaScript – 開発環境構築方法(Windows & Mac) これからReactの学習を始めていかれる方必見!本記事では、WindowsもしくはMacのPC上にReact + JavaScriptの開発環境構築をする方法についてご紹介しております。Node.jsの準備から動作の確認までまとめてますので参考になれば嬉しいです。 2022.12.14 React.js
React.js 【React hooks】useContextの基礎を習得 – カウンターアプリ useContextを使うことで異なる階層であってもデータの共有が出来るようになるため、コンポーネント間で同じデータ(State)を共有したい場合や機能や用途に応じてデータの管理をしたい時にとても便利です。また、propsの受け渡しも最小限に抑えることが出来る点に加え、useReducerとあわせて使用されることが多い関数になります。 2022.11.16 React.js
React.js 【React hooks】useReducerの基礎を習得 – カウンターアプリ 本記事では、React hooksで提供されている関数であるuseReducerの使い方やuseStateの主な違いなどを解説しております。実際にuseStateを用いて作成したカウンターアプリをuseReducerで書き換えますので、処理の流れや具体的なコードの書き方を理解するきっかけになればと思います。 2022.10.31 React.js