JavaScript TypeScriptの基本的な記述方法をまとめました【JavaScript/React】 どうしてもTypeScriptの書き方に慣れません、、。React限定ですが、書き方の基本をまとめたのでメモしておきます!変なところに気づいたら直します、、、。 プリミティブ型 TypeScriptとは、ざっくりな認識ですが、... 2023.09.27 JavaScript
JavaScript TypeScriptのクラス構文について調べました【タイプスクリプト/JavaScript/Class】 なんとなく使っていたクラス構文について調べたのでメモ。今後、需要があって使いそうなTypeScriptについてまとめています。 クラス構文とは クラス構文とは、関連するデータとメソッドをまとめるための仕組みで、最終的にはこのク... 2023.05.25 JavaScript
JavaScript Next.jsのレンダリングについてまとめました【SSR/SSG/CSR/ISR/TypeScript】 Next.jsはページごとにレンダリング方法を設定することができます。レンダリングの種類と挙動について調べたのでメモしておきます。 勉強中なので変なところがあったら直します、、! Next.jsのレンダリングの種類 Ne... 2023.05.06 JavaScript
JavaScript ツールチップを表示する方法を調べました【jquery.balloon.js/フォーム/バリデーション/クリック】 jQueryは一時期に比べるとだいぶ下火になりましたが、まだまだ現役です!!便利なライブラリもたくさんあります。 今回、ツールチップを実装できるjquery.balloon.jsの使い方をメモしておきます。 jquery.ba... 2023.03.21 JavaScript
JavaScript Reduxでグローバルな状態を管理する【Redux Toolkit/カウンターアプリ】 Reduxは状態管理のライブラリです。今回Reduxを使ってカウンターアプリを作成しました。基本的な使い方になるのでメモしておきます! 用語や基本的な使い方はこちらの記事にまとめました。 サンプル:カウンターアプリ... 2023.02.12 JavaScript
JavaScript FirebaseとReactの連携についてまとめました【Cloud Firestore/v9/Todoアプリ/TypeScript】 今回、FirebaseとReactの連携の方法について、基本的な使い方をわかる範囲でまとめました。Firebaseのデータベース機能Cloud Firestoreを使って簡単なTodoアプリを作成します。 Firebaseとは ... 2023.02.11 JavaScript
JavaScript サーバーにある画像のサイズや更新日時を取得する【JavaScript/非同期/Promise】 サーバーの画像サイズや更新日を取得して表示する機会があったので、実装方法を調べました。忘れないようにメモしておきます! 画像のサイズを取得する 次のように、画像の下にサイズを表示することを想定しています。 実... 2023.01.28 JavaScript
JavaScript Reduxの用語と使い方についてまとめました【React/React-redux/Redux Toolkit】 Reduxは状態管理のライブラリです。Reactに標準で実装されてるReactHooksのContext、useContextと同じようにグローバルな状態を管理します。 Reduxは独特な用語も多いし、考え方が複雑なので参考書を読ん... 2023.01.16 JavaScript
JavaScript Excelのデータをセルごとに分割してフォームにコピペする【JavaScript】 タイトルそのままですが、Excelのデータをフォームにコピペしたら、セルごとに分割してペーストされる動きをJavaScriptで実装したのでメモ。 セルごとに分割してフォームにコピペする動作を確認する(デモ) 例えば、次のよう... 2022.12.18 JavaScript
JavaScript ストップウォッチを作成しました【JavaScript/Vanilla/React/useEffect】 JavaScriptでストップウォッチを作りました!普通のJavaScript(Vanilla)とReactバージョンを作ったのでメモしておきます。 ストップウォッチ(JavaScript版) まずは、普通のJavaScrip... 2022.09.18 JavaScript
JavaScript useReducerの使い方についてまとめました【React】 stateとは、コンポーネント内で状態を保持できる変数です。Reactには、stateを管理できるフックがいくつか用意されています。 stateの管理は、主にuseStateを使っていたので、useReducerを使う機会があまりあ... 2022.08.28 JavaScript
JavaScript Expressで外部データを取得する方法をまとめました【Express/axios/JSONPlaceholder】 ExpressはNode.jsでWebアプリを作成できるフレームワークです。今回、外部データを取得する方法としてaxiosの使い方についてまとめました。将来の自分がコピペできるようにメモしておきます! 外部データを取得したサンプル ... 2022.08.25 JavaScript
JavaScript Reactでモーダルウィンドウを作成しました【React/createPortal】 Reactの練習で簡単なモーダルウィンドウを作成しました。こういったモーダル関係の動きはChakra UIなどのコンポーネントライブラリを使うことが多いと思いますが、createPortalの使い方のサンプルとしてメモしておきます。 ... 2022.08.21 JavaScript
JavaScript Reactでフォームを扱う方法についてまとめました【React/Input/Radio/Select】 Reactでフォームの部品を扱う際、HTMLの感覚で書いているとうまく動作せずハマる時があります。Reactのお作法的な書き方もあるので、そのまま覚える型としてメモしておきます。 テキストフィールド<input type="t... 2022.08.16 JavaScript
JavaScript Expressでテンプレートエンジンを使う方法をまとめました【Node.js/Express/EJS】 ExpressはNode.jsでWebアプリを作成できるフレームワークです。今回、代表的なテンプレートエンジンであるEJSの使い方についてまとめました。将来の自分がコピペできるようにメモしておきます。 どんなシチュエーションでテンプ... 2022.08.03 JavaScript
JavaScript APIからデータを取得してブラウザに表示する方法を調べました【React/axios/useEffect/zipcloud】 ReactでAPIデータを取得して何かをする。という場面が多いので、今後の雛形としてメモしておきます。 住所検索アプリ(サンプル) サンプルとして、郵便番号から住所を検索できるアプリを作りました。ユーザーが入力した郵便番号をA... 2022.07.30 JavaScript
JavaScript Expressのインストールと基本的な使い方についてまとめました【Node.js/Express/nodemon/GET/POST】 ExpressはNode.jsでWebアプリを作成できるフレームワークです。今回、基本的な使い方についてまとめました。将来の自分がコピペできるようにメモしておきます。 Express導入に必要なパッケージをインストールする ... 2022.07.24 JavaScript
JavaScript Reactでグローバルな状態を管理する【Context/useContext】 グローバルな状態管理の方法は複数ありますが、Reactに標準で実装されてるReactHooksのContextとuseContextの使い方をまとめたのでメモ。 グローバルな状態管理とは コンポーネント間で値を渡すにはProp... JavaScript
JavaScript Reactのパフォーマンスを最適化する方法を調べました【React.memo/React.useCallback/React.useMemo】 Reactはコンポーネントを組み合わせて作っていきます。日頃あまり意識することはありませんが、一部に負荷の高いコンポーネントがあると、レンダリングの最適化を考える必要があります。Reactのレンダリングの仕組みと、パフォーマンスの最適化に... 2022.06.05 JavaScript
JavaScript useRefで値を更新したりDOMを参照する方法【React/useRef/useState/useEffect/TypeScript】 useRefは、主にDOMを参照したい時に使用しますが、改めて使い方を調べたのでメモしておきます! useRefとは useRefは、useStateと同じく値を保持できるフックです。useStateとの主な違いは、値を更新し... 2022.05.05 JavaScript