JavaScript Reactでグローバルな状態を管理する【Context/useContext】
グローバルな状態管理の方法は複数ありますが、Reactに標準で実装されてるReactHooksのContextとuseContextの使い方をまとめたのでメモ。 グローバルな状態管理とは コンポーネント間で値を渡すにはPropsを使いますが...
JavaScript
JavaScript 
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 getRangeメソッドでセルの範囲を取得する【GAS/JavaScript】
Google Apps Script（GAS）は、Googleが提供しているプログラミング言語です。自分は主にGoogleスプレッドシートを操作する為に使いますが、GmailやGoogleカレンダー、Googleフォームなど、Googleサ...
JavaScript Reactの開発環境をコマンドで構築する方法【JavaScript/TypeScript】
開発環境の構築方法は忘れやすいのでメモするようにしています。今回はReactの開発環境について調べたのでメモ。 Reactの環境構築はコマンド１つで完了動して、以下コマンドを実 結論から言うと、プロジェクトを作成するディレクトリに移動して、...
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とい...
JavaScript 論理演算子「論理積（＆＆）」と「論理和（||）」「論理否定(！)」「Null 合体演算子（??）」について調べました【JavaScript】
JavaScriptの論理演算子について、分かっているようで分からなかったのでメモ。 論理演算子とは そもそも論理演算子とはなんぞや？ですが、主にif文で使います。下記のように「&&」「||」「!」を使って条件を判定します。 // True...
JavaScript プラグインを使わずにTODOリストを作成しました【JavaScript】
JavaScriptの練習でTODOリストを作成しました。一応形になったので、作り方をメモしておきます。 TODOリストのサンプル こちらがサンプルです。完了したタスクはTODOリストから「完了」の領域に移動します。また、一度完了にしたタス...
JavaScript reduceを使って文字をアニメーションさせる方法【Javascript】
今回、javascriptのreduceについてまとめたのでメモ。reduceを使って文字のアニメーションを実装するサンプルも作成しました。 reduceはどんなことができるか reduceは配列の値を順番に処理するメソッドです。ちなみにr...
css プラグインを使わずにモーダルウィンドウを作成しました【JavaScript/CSS】
JavaScriptの練習で簡単なモーダルウィンドウを作成しました。表示する要素にテキストや画像を指定できますが動画には対応しておりません、、。プラグインを使うほどではない時の実装に使えそうなのでメモ。 完成したモーダルウィンドウを確認する...
css プラグインを使わずにLightbox（ライトボックス）風ギャラリーを作りました【JavaScript】
Javascriptの練習でライトボックス風のギャラリーを作成しました。スマホでスワイプできると思いますが、Androidでは確認しておりません。。プラグインを使うほどではない！CDNを読み込みたくない！jQueryを使いたくない！場合に使...
JavaScript 配列の要素を順番に繰り返し取り出す方法【JavaScript】
ボタンを押すたびに配列の中身が表示されるサンプルを作りました。値をすべて取り出したら最初に戻ります。繰り返し処理させるのがポイントです。配列でこういった処理をすることは多いので、コピペできるようにメモしておきます。 配列の要素を順番に繰り返...
JavaScript TypeScriptをインストールして自動的にコンパイル＋実行できるようにする（開発環境構築）【JavaScript】
TypeScriptを使う機会があったので開発環境を構築しました。忘れそうなのでメモしておきます。なお、パソコンはMacを使っています。 Node.jsをインストールする まずはNode.jsをインストールします。以下のサイトから最新のLT...
JavaScript 商品の色をボタンで選択できるカートボタンを作成しました【Javascript】
アパレル系ショップで、色やサイズをボタンで選択できるカートをちらほら見かけます。ユニ●ロやH&●の有名サイトでも採用されているようです。 今回、商品の色をボタンで選択できるカートを作成したのでメモ。 商品の色をボタンで選択できるカートを確認...
JavaScript Javascriptのクラスで足し算と引き算ができる計算機を作成しました【JavaScript/Class】
Javascriptのクラス構文の練習で色々な計算機を作成しました。 足し算できる計算機のサンプル クラスの構文は次の通りです。まずは足し算をする機能をもったクラスを作成します。 // クラス名、最初は大文字 class Sample { ...
JavaScript DOMを監視して、要素の追加や削除を検知する方法【Javascript/MutationObserver】
Javascriptで動的に追加した要素にイベントを設定したい！または追加した要素が存在すればこういった処理をしたい。ってことが時々あります。 その場合、どうやって実装すれば良いか調べたのでメモ。DOMの変更を監視する「MutationOb...
css ページのローディング中にPACEプラグインでプログレスバーを表示する【Javascript/CSS】
表示に時間がかかるような重いページを開く時、プログレスバーなどで読み込み状況を表示させるとページ離脱防止になります。今回、お手軽にプラグインで実装したのでメモ。 PACEプラグインでプログレスバーを表示 設置は簡単で、以下コードをheadタ...
css ブラウザのスクロールに応じてアニメーションを実行する方法【Javascript/Intersection Observer】
ブラウザをスクロールすると、文字や画像がふわっと表示されるサイトがあります。こういったスクロールの量によって発火するイベントはjQueryのプラグインを使っていました。今回、jQueryを使用しない実装方法を調べたのでメモ。 Interse...
css PhotoSwipeをオプションとCSSだけでカスタマイズしました【JavaScript/CSS】
PhotoSwipeは、拡大画像をポップアップ表示するライトボックス系のプラグインです。少し古いプラグインですが、最近では新しいバージョンも開発中らしいです。こちらが本家のサイトです。 カスタマイズの内容（デモ） 設置方法はいろいろなブログ...