react

JavaScript

Reactで連動するプルダウンメニューをつくりました【React/Next.js/Form/セレクト/TypeScript】

選択した項目によって、次の選択内容が連動するプルダウンメニューをReactで作成したのでメモ。 作成したサンプル 結論から書くと、こちらのGitHubのコードを参考にすればOKです。 それだけだと説明が不足しているので、もう少し詳しくメモし...
JavaScript

Next.jsでToDoリストを作りました【CRUD/クラッド/json-server】

Next.jsでTodoアプリを作ったのでメモ。今更ながらCRUD(クラッド)について再認識しています。 アプリではReactでフォームを簡単に作成できるReact Hook Formというライブラリを使っています。そのなかでもフィールドを...
JavaScript

TypeScriptの基本的な記述方法をまとめました【JavaScript/React】

どうしてもTypeScriptの書き方に慣れません、、。React限定ですが、書き方の基本をまとめたのでメモしておきます!変なところに気づいたら直します、、、。 プリミティブ型 TypeScriptとは、ざっくりな認識ですが、JavaScr...
JavaScript

Next.jsのレンダリングについてまとめました【SSR/SSG/CSR/ISR/TypeScript】

Next.jsはページごとにレンダリング方法を設定することができます。レンダリングの種類と挙動について調べたのでメモしておきます。 勉強中なので変なところがあったら直します、、! Next.jsのレンダリングの種類 Next.jsには、主に...
JavaScript

Reduxでグローバルな状態を管理する【Redux Toolkit/カウンターアプリ】

Reduxは状態管理のライブラリです。今回Reduxを使ってカウンターアプリを作成しました。基本的な使い方になるのでメモしておきます! 用語や基本的な使い方はこちらの記事にまとめました。 サンプル:カウンターアプリ(JavaScript) ...
JavaScript

FirebaseとReactの連携についてまとめました【Cloud Firestore/v9/Todoアプリ/TypeScript】

今回、FirebaseとReactの連携の方法について、基本的な使い方をわかる範囲でまとめました。Firebaseのデータベース機能Cloud Firestoreを使って簡単なTodoアプリを作成します。 Firebaseとは まずFire...
JavaScript

ストップウォッチを作成しました【JavaScript/Vanilla/React/useEffect】

JavaScriptでストップウォッチを作りました!普通のJavaScript(Vanilla)とReactバージョンを作ったのでメモしておきます。 ストップウォッチ(JavaScript版) まずは、普通のJavaScriptでつくるスト...
JavaScript

useReducerの使い方についてまとめました【React】

stateとは、コンポーネント内で状態を保持できる変数です。Reactには、stateを管理できるフックがいくつか用意されています。 stateの管理は、主にuseStateを使っていたので、useReducerを使う機会があまりありません...
JavaScript

Reactでモーダルウィンドウを作成しました【React/createPortal】

Reactの練習で簡単なモーダルウィンドウを作成しました。こういったモーダル関係の動きはChakra UIなどのコンポーネントライブラリを使うことが多いと思いますが、createPortalの使い方のサンプルとしてメモしておきます。 モーダ...
JavaScript

Reactでフォームを扱う方法についてまとめました【React/Input/Radio/Select】

Reactでフォームの部品を扱う際、HTMLの感覚で書いているとうまく動作せずハマる時があります。Reactのお作法的な書き方もあるので、そのまま覚える型としてメモしておきます。 テキストフィールド<input type="text"> i...
JavaScript

APIからデータを取得してブラウザに表示する方法を調べました【React/axios/useEffect/zipcloud】

ReactでAPIデータを取得して何かをする。という場面が多いので、今後の雛形としてメモしておきます。 住所検索アプリ(サンプル) サンプルとして、郵便番号から住所を検索できるアプリを作りました。ユーザーが入力した郵便番号をAPIに送信して...
JavaScript

Reactでグローバルな状態を管理する【Context/useContext】

グローバルな状態管理の方法は複数ありますが、Reactに標準で実装されてるReactHooksのContextとuseContextの使い方をまとめたのでメモ。 グローバルな状態管理とは コンポーネント間で値を渡すにはPropsを使いますが...
JavaScript

Reactのパフォーマンスを最適化する方法を調べました【React.memo/React.useCallback/React.useMemo】

Reactはコンポーネントを組み合わせて作っていきます。日頃あまり意識することはありませんが、一部に負荷の高いコンポーネントがあると、レンダリングの最適化を考える必要があります。Reactのレンダリングの仕組みと、パフォーマンスの最適化につ...
JavaScript

useRefで値を更新したりDOMを参照する方法【React/useRef/useState/useEffect/TypeScript】

useRefは、主にDOMを参照したい時に使用しますが、改めて使い方を調べたのでメモしておきます! useRefとは useRefは、useStateと同じく値を保持できるフックです。useStateとの主な違いは、値を更新しても再レンダリ...
JavaScript

Reactの開発環境をコマンドで構築する方法【JavaScript/TypeScript】

開発環境の構築方法は忘れやすいのでメモするようにしています。今回はReactの開発環境について調べたのでメモ。 Reactの環境構築はコマンド1つで完了動して、以下コマンドを実 結論から言うと、プロジェクトを作成するディレクトリに移動して、...
JavaScript

Reactでページ遷移する方法を調べました【React/React Router/react-router-dom/v5】

Reactでページ遷移する方法を調べました。忘れそうなのでメモしておきます。TypeScriptで記述していますが、設定の方法は普通のJavaScriptとあまり変わらないと思います。 react-router-domとは ReactでSi...
JavaScript

useStateを理解するためにサンプルを作って確認しました【React/useState】

ReactのuseStateがいまいち理解できなかったので、サンプルをいくつか作成して動きを確認しました。主にリアルタイムの動きに使えそうです。 useStateとは Reactにはコンポーネントに状態を保管、更新できるuseStateとい...