React
【React】ローディングアニメーション(スピナー)を表示する方法
Reactでローディングアニメーション(スピナー)を表示する方法です。useStateで読み込み中の状態を持ち、trueの間だけCSSの@keyframesで動くスピナーを表示します。fetchと組み合わせてfinallyで消す書き方、React Iconsを使う方法も紹介します。
ARCHIVE
月: 2022年12月
React
【React】useContextをいつ使う？別ファイルとデータ共有や再レンダリングについて
ReactのuseContextをいつ使うか、createContext・Provider・useContextの3ステップの使い方、別ファイルとのstate共有、再レンダリングの注意点をコード付きで解説します。
React
【React】ページネーションを自作する方法
Reactで外部API(JSON)のデータを「前へ」「次へ」で切り替えるページネーションを自作する方法です。next・previousのURLをuseStateで持ち、ボタンで取得し直す流れを、ポケモンAPIを例に説明します。
React
【React】useImperativeHandleを使ってrefへのアクセスを制限する方法
ReactのuseImperativeHandleで、親に公開するrefのメソッドを限定する方法を解説します。forwardRefとの組み合わせ、React 19でrefをpropsとして受け取る書き方、依存配列、inputのフォーカスとvideoの再生・停止の実例を紹介します。
React
【React】React Iconsの使い方-react-icons
ReactでReact Icons(react-icons)を使う手順です。npm install react-iconsでインストールし、react-icons/aiのようなセット別パスから使うアイコンだけをimportしてJSXに置きます。size・colorの指定とIconContextでのまとめ指定も紹介します。
PHP
VS Code「PHP Not Found」の直し方｜PHP ServerのphpPath設定
VS Code拡張機能PHP Serverで「PHP Not Found」と表示される原因と直し方を解説します。PHPのインストール確認、macOS・Windows・Linuxで実行ファイルを探す方法、phpserver.phpPathの設定、PATHやRemote環境の切り分けまで順番に確認できます。
React
【React】useReducerを使って四則演算の結果を表示するアプリ作成方法
ReactのuseReducerを使って四則演算の結果を表示するアプリの作り方を紹介します。 数字を変更したときも、四則演算のタイプを変更したときもリアルタイムで計算結果が変わる簡単なアプリです。 ReactのuseRe…
React
【React】useStateとuseReducerの違いとuseReducerの使い方と使い所
ReactのuseStateとuseReducerの違いとuseReducerの使い方を紹介します。 useStateとuseReducerの違い まずは簡単なボタンを作成して、数字をカウントアップするときの書き方の違い…
React
【React】他のコンポーネントのDOMを操作できるforwardRefの使い方
Reactで他のコンポーネントのDOMを操作できるforwardRefの使い方を紹介します。 Reactで他のコンポーネントのDOMを操作できるforwardRefの使い方 コンポーネントをまたいでDOM操作したいことケ…
React
【React】でDOMを直接操作するuseRefの使い方とrefとstateの違い
ReactでDOMを直接操作するuseRefの使い方を紹介します。 useRefの使いどころ useRefをいつ使うかですが、DOMのメソッドを使いたいときです。 たとえば、よくあるユースケースとしては、input要素に…
GULP
gulp-plumberを使ってもSassのエラーでGulpが止まってしまう場合の対処方法
gulp-plumberを使ってもSassのエラーでGulpが止まってしまう場合の対処方法を紹介します。 gulp-plumberを使ってもSassのエラーでGulpが止まってしまう場合の対処方法 const sass …
React
【React】SASSを使う方法
ReactでSASS(SCSS)を使う方法を紹介します。 手順1:node-sassをインストールする npm install node-sass 手順2:css拡張子をscss拡張子に変更する css拡張子をscss拡…
React
【React】Firebaseの使い方
ReactとFirebaseを使う方法を紹介します。 ReactとFirebaseを使う方法 手順1:firebaseでプロジェクト作成 firebaseにログインして、プロジェクトを作成します。 Firebaseのプロ…
React
【React】ログイン・ログアウト後にリダイレクトを設定する方法
Reactでリダイレクトを設定する方法を紹介します。 以下の例ではログイン・ログアウト後にリダイレクトさせています。 Reactでログイン・ログアウト後にリダイレクトを設定する方法 手順1:react-router-do…
React
【React】ルーティングをシンプルに設定する方法(react-router-dom)
Reactでルーティングをシンプルに設定する方法を紹介します。 Reactでルーティングをシンプルに設定する方法 手順1:react-router-domをインストール #npmの場合 npm i react-route…
React
【React】Font Awesomeの使い方-react-fontawesome
ReactでFont Awesomeを使う方法を紹介します。 【React】Font Awesomeの使い方 公式ドキュメントの場所は、こちらです。 手順1:必須ファイルをインストール #npmの場合 npm i --s…
React
【React】外部API(JSON)を取得して表示する方法
Reactで外部API(JSON)を取得して表示する方法を紹介します。 今回は、ポケモンAPIで実際に取得して表示します。 Reactで外部API(JSON)を取得して表示する方法 ファイル構成 src ∟App.js …
React
【React】ドラッグアンドドロップのやり方
Reactでドラッグアンドドロップする方法を紹介します。 Reactでドラッグアンドドロップする方法 ライブラリを使用します。 いくつかありますが、見た目がリッチになって使いやすいreact-beautiful-dndと…
React
【React】V18でreact-beautiful-dnd(ドラッグアンドドロップライブラリ)を使う方法
ReactのV18でreact-beautiful-dnd(ドラッグアンドドロップライブラリ)を使う方法を紹介します。 【React】V18でreact-beautiful-dnd(ドラッグアンドドロップライブラリ)を使…
VSCode
【VSCode】任意のキーボードショートカットを割り当てる方法(例：新しいフォルダを作成)
VSCodeで任意のショートカットを割り当てる方法を紹介します。 今回は、新しいフォルダを作成を例にしています。 ショートカット変更全般に使えるので、試してみてください。 VSCodeで新しいフォルダを作成に任意のキーボ…
React
【React】でDOMを操作するcreatePortalの使い方と使い所と注意点
ReactでDOMを操作するcreatePortalの使い方と使い所と注意点を紹介します。 ReactでDOMを操作するcreatePortalとは createPortalというメソッドを使うことで、本来React要素…