JavaScript Reactで連動するプルダウンメニューをつくりました【React/Next.js/Form/セレクト/TypeScript】
選択した項目によって、次の選択内容が連動するプルダウンメニューをReactで作成したのでメモ。 作成したサンプル 結論から書くと、こちらのGitHubのコードを参考にすればOKです。 それだけだと説明が不足しているので、もう少し詳しくメモし...
JavaScript
JavaScript 
JavaScript TypeScriptのクラス構文について調べました【タイプスクリプト/JavaScript/Class】
なんとなく使っていたクラス構文について調べたのでメモ。今後、需要があって使いそうなTypeScriptについてまとめています。 クラス構文とは クラス構文とは、関連するデータとメソッドをまとめるための仕組みで、最終的にはこのクラスをベースに...
css コンテンツを開閉できる『もっと見るボタン』をつくりました【javascript/jQuery】
ウェブページで、途中まで文章が表示されていて『もっと見る』ボタンをクリックすると、残りのコンテンツが表示される動きがあります。 今回、リストなどの長いコンテンツを開閉できるボタンをjavascriptで実装したのでメモ。 2024年1月1日...
css コンテンツを開閉できる『もっと見るボタン』をつくりました【JavaScript/複数/jQueryなし】
ウェブページでリストなどの長いコンテンツを開閉できるボタンをJavaScriptで実装しました。 具体的には、コンテンツが途中まで表示されていて『もっと見る』ボタンをクリックすると、続きのコンテンツが表示される動きです。 以前jQueryで...
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 ツールチップを表示する方法を調べました【jquery.balloon.js/フォーム/バリデーション/クリック】
jQueryは一時期に比べるとだいぶ下火になりましたが、まだまだ現役です！！便利なライブラリもたくさんあります。 今回、ツールチップを実装できるjquery.balloon.jsの使い方をメモしておきます。 jquery.balloon.j...
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/非同期/Promise】
サーバーの画像サイズや更新日を取得して表示する機会があったので、実装方法を調べました。忘れないようにメモしておきます！ 画像のサイズを取得する 次のように、画像の下にサイズを表示することを想定しています。 実際の表示はこちらで確認できます！...
JavaScript Reduxの用語と使い方についてまとめました【React/React-redux/Redux Toolkit】
Reduxは状態管理のライブラリです。Reactに標準で実装されてるReactHooksのContext、useContextと同じようにグローバルな状態を管理します。 Reduxは独特な用語も多いし、考え方が複雑なので参考書を読んでもイマ...
JavaScript Excelのデータをセルごとに分割してフォームにコピペする【JavaScript】
タイトルそのままですが、Excelのデータをフォームにコピペしたら、セルごとに分割してペーストされる動きをJavaScriptで実装したのでメモ。 セルごとに分割してフォームにコピペする動作を確認する（デモ） 例えば、次のようなエクセルのデ...
JavaScript ストップウォッチを作成しました【JavaScript/Vanilla/React/useEffect】
JavaScriptでストップウォッチを作りました！普通のJavaScript（Vanilla）とReactバージョンを作ったのでメモしておきます。 ストップウォッチ（JavaScript版） まずは、普通のJavaScriptでつくるスト...
JavaScript useReducerの使い方についてまとめました【React】
stateとは、コンポーネント内で状態を保持できる変数です。Reactには、stateを管理できるフックがいくつか用意されています。 stateの管理は、主にuseStateを使っていたので、useReducerを使う機会があまりありません...
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="text"> i...
JavaScript Expressでテンプレートエンジンを使う方法をまとめました【Node.js/Express/EJS】
ExpressはNode.jsでWebアプリを作成できるフレームワークです。今回、代表的なテンプレートエンジンであるEJSの使い方についてまとめました。将来の自分がコピペできるようにメモしておきます。 どんなシチュエーションでテンプレートエ...
JavaScript APIからデータを取得してブラウザに表示する方法を調べました【React/axios/useEffect/zipcloud】
ReactでAPIデータを取得して何かをする。という場面が多いので、今後の雛形としてメモしておきます。 住所検索アプリ（サンプル） サンプルとして、郵便番号から住所を検索できるアプリを作りました。ユーザーが入力した郵便番号をAPIに送信して...