React
【React】useImperativeHandleを使ってrefへのアクセスを制限する方法
ReactでuseImperativeHandleを使ってrefへのアクセスを制限する方法を紹介します。 forwardRefで他のコンポーネントにrefを渡すことが可能になりますが、 DOM操作を通してなんでもできてし…
CATEGORY
JavaScript
JavaScriptに関する基礎、実装例、トラブル解決の記事をまとめています。
111ARTICLES
React
【React】他のコンポーネントのDOMを操作できるforwardRefの使い方
Reactで他のコンポーネントのDOMを操作できるforwardRefの使い方を紹介します。 Reactで他のコンポーネントのDOMを操作できるforwardRefの使い方 コンポーネントをまたいでDOM操作したいことケ…
React
【React】でDOMを直接操作するuseRefの使い方とrefとstateの違い
ReactでDOMを直接操作するuseRefの使い方を紹介します。 useRefの使いどころ useRefをいつ使うかですが、DOMのメソッドを使いたいときです。 たとえば、よくあるユースケースとしては、input要素に…
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】React Iconsの使い方-react-icons
ReactでReact Iconsを使う方法を紹介します。 【React】React Iconsの使い方 公式ドキュメントの場所は、こちらです。 手順1:必須ファイルをインストール #npmの場合 npm install…
React
【React】Font Awesomeの使い方-react-fontawesome
ReactでFont Awesomeを使う方法を紹介します。 【React】Font Awesomeの使い方 公式ドキュメントの場所は、こちらです。 手順1:必須ファイルをインストール #npmの場合 npm i --s…
React
【React】ページネーションを自作する方法
Reactで外部API(JSON)から取得したデータで、次のデータと前のデータを表示するために、ページネーションを自作する方法を紹介します。 今回は、ポケモンAPIで実際に取得して表示します。 Reactでページネーショ…
React
【React】外部API(JSON)を取得して表示する方法
Reactで外部API(JSON)を取得して表示する方法を紹介します。 今回は、ポケモンAPIで実際に取得して表示します。 Reactで外部API(JSON)を取得して表示する方法 ファイル構成 src ∟App.js …
React
【React】ローディング(スピナー)を表示する方法
Reactでローディング(スピナー)を表示する方法を紹介します。 Reactでローディング(スピナー)を表示する方法 ファイル構成 src ∟App.css ∟App.js ∟index.js index.js impo…
React
【React】ドラッグアンドドロップのやり方
Reactでドラッグアンドドロップする方法を紹介します。 Reactでドラッグアンドドロップする方法 ライブラリを使用します。 いくつかありますが、見た目がリッチになって使いやすいreact-beautiful-dndと…
React
【React】V18でreact-beautiful-dnd(ドラッグアンドドロップライブラリ)を使う方法
ReactのV18でreact-beautiful-dnd(ドラッグアンドドロップライブラリ)を使う方法を紹介します。 【React】V18でreact-beautiful-dnd(ドラッグアンドドロップライブラリ)を使…
React
【React】でDOMを操作するcreatePortalの使い方と使い所と注意点
ReactでDOMを操作するcreatePortalの使い方と使い所と注意点を紹介します。 ReactでDOMを操作するcreatePortalとは createPortalというメソッドを使うことで、本来React要素…
React
【React】スタイリング方法まとめ
Reactでhtmlをスタイリングする方法をまとめました。 Reactでhtmlをスタイリングする方法 大きく以下の4つの方法があります。 CSSファイルを読み込む インラインスタイル CSS Modules CSS i…
React
【React】フォームでよく使う記述(input,textarea,ラジオボタン,チェックボックス,select)
Reactでフォーム作成のときによく使う記述(input,textarea,ラジオボタン,チェックボックス)を紹介します。 inputとtextarea import { useState } from "re…
JavaScript
JavaScriptのfind()とfindIndex()メソッドの使い方と具体例
JavaScriptの配列やオブジェクトから見つけ出すfind()メソッドとfindIndex()メソッドを紹介します。 JavaScriptのfind()メソッド find()メソッドは、コールバック関数を引数に持ちま…
React
【React】でよく使う条件分岐の記述方法(&&, ??(Null合体演算子),三項演算子)
Reactでよく使う条件分岐の記述方法(&&, ??(Null合体演算子),三項演算子)を紹介します。 普通のif文で書いた場合 配列がabcという文字列の場合は、◎をつけて表示するという条件の場合、…
React
【React】useStateの使い方と注意点まとめ
ReactのuseStateの使い方を紹介します。 ReactのuseStateとは？ useStateを使うことで、リアルタイムで画面更新が可能になります。 Reactにコンポーネントの再実行(再レンダリング)を依頼し…
React
【React】イベントを登録する方法
Reactでイベントを登録する方法を紹介します。 【React】イベントを登録する方法(クリックイベント) const Sample = () => { const clickAction = () => {…
React
【React】propsの使い方とと大事な2つのルール
Reactでpropsを使う方法と大事な2つのルールを紹介します。 propsを使うことで、似ているコンポーネントで少しだけ変化させたい要素がある場合でも 簡単にコンポーネントを使いまわしつつそれぞれに違いをもたせること…
React
【React】JSX内にJavaScriptの式を埋め込む方法と式と文の違い
ReactのJSX内にJavaScriptの式を埋め込む方法を紹介します。 JSX内にJavaScriptの式を埋め込む方法 const Func = () => { const str = "文字列&q…
React
【React】不要タグを出力させないFragmentの使い方
JSX(htmlみたいなもの)のルールで、returnで返されるJSXのルートは一つで束ねられている必要があります。 そのために、divタグなどで囲うことで束ねることができますが、 不要なタグを書きたくない場合があります…
React
【React】npmでプロジェクトを作成する方法
npmでReactのプロジェクトを作成する方法を紹介します。 npmでReactプロジェクトを作成する方法 # PC全体でインストール (windows) npm i -g create-react-app (Mac) …
React
【React】コンポーネントとは-意味と定義方法
Reactのコンポーネントの意味や定義方法について紹介します。 Reactのコンポーネントとは Reactのコンポーネントとは、Reactで定義した画面の各構成要素のことです。 ・再利用性が高まる ・疎結合になる(バグが…
React
【ReactV18】CDNでまずは簡単に触ってみる方法
ReactのV18をCDNでまずは簡単に触ってみる方法を紹介します。 【ReactV18】のCDN <script crossorigin src="https://unpkg.com/react@18/umd/r…