JavaScript

JavaScript

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

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

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

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

Expressで外部データを取得する方法をまとめました【Express/axios/JSONPlaceholder】

ExpressはNode.jsでWebアプリを作成できるフレームワークです。今回、外部データを取得する方法としてaxiosの使い方についてまとめました。将来の自分がコピペできるようにメモしておきます! 外部データを取得したサンプル ...
スポンサーリンク
JavaScript

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

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

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

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

Expressでテンプレートエンジンを使う方法をまとめました【Node.js/Express/EJS】

ExpressはNode.jsでWebアプリを作成できるフレームワークです。今回、代表的なテンプレートエンジンであるEJSの使い方についてまとめました。将来の自分がコピペできるようにメモしておきます。 どんなシチュエーションでテンプ...
2022.08.03
JavaScript

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

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

Expressのインストールと基本的な使い方についてまとめました【Node.js/Express/nodemon/GET/POST】

ExpressはNode.jsでWebアプリを作成できるフレームワークです。今回、基本的な使い方についてまとめました。将来の自分がコピペできるようにメモしておきます。 Express導入に必要なパッケージをインストールする ...
2022.07.24
JavaScript

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

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

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

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