JavaScript APIからデータを取得してブラウザに表示する方法を調べました【React/axios/useEffect/zipcloud】
ReactでAPIデータを取得して何かをする。という場面が多いので、今後の雛形としてメモしておきます。 住所検索アプリ（サンプル） サンプルとして、郵便番号から住所を検索できるアプリを作りました。ユーザーが入力した郵便番号をAPIに送信して...
どんぐり
JavaScript 
JavaScript Expressのインストールと基本的な使い方についてまとめました【Node.js/Express/nodemon/GET/POST】
ExpressはNode.jsでWebアプリを作成できるフレームワークです。今回、基本的な使い方についてまとめました。将来の自分がコピペできるようにメモしておきます。 Express導入に必要なパッケージをインストールする Expressは...
Excel VLOOKUP関数と同じ動きをVBAで処理して複数該当の値を取得する【Excel/VBA】
ExcelといえばVLOOKUP！っていうくらいこの関数をよく使います。というか関数はVLOOKUPとSUMくらいしかまともに使えません、、。勉強しなきゃ、、 今回は、VLOOKUP関数ではなくVBAで複数該当の値を取得したので、コピペでき...
JavaScript Reactでグローバルな状態を管理する【Context/useContext】
グローバルな状態管理の方法は複数ありますが、Reactに標準で実装されてるReactHooksのContextとuseContextの使い方をまとめたのでメモ。 グローバルな状態管理とは コンポーネント間で値を渡すにはPropsを使いますが...
css 要素を上下左右中央に配置してフッターを下に固定する【CSS】
要素を上下左右中央に配置して、コンテンツ量が少ない時もフッターを画面の下に固定したい！ってことはよくあります。方法は色々ありますが、最近よく使っている手法をメモ。 実装したいレイアウトを確認する 実装したいレイアウトはこちらです！ 要素は上...
JavaScript Reactのパフォーマンスを最適化する方法を調べました【React.memo/React.useCallback/React.useMemo】
Reactはコンポーネントを組み合わせて作っていきます。日頃あまり意識することはありませんが、一部に負荷の高いコンポーネントがあると、レンダリングの最適化を考える必要があります。Reactのレンダリングの仕組みと、パフォーマンスの最適化につ...
JavaScript useRefで値を更新したりDOMを参照する方法【React/useRef/useState/useEffect/TypeScript】
useRefは、主にDOMを参照したい時に使用しますが、改めて使い方を調べたのでメモしておきます！ useRefとは useRefは、useStateと同じく値を保持できるフックです。useStateとの主な違いは、値を更新しても再レンダリ...
css gridレイアウトについて調べました【CSS/grid-template/auto-fit/auto-fill】
最近CSSのgridを使う機会がありました。最低限の仕組みを知っておく必要があると思い、基本的な並べ方を実装する方法をまとめました。 gridの基本的な使い方 gridは要素の表示形式を設定するdisplayプロパティの値になります。 di...
WordPress WordPressで記事一覧を固定ページに表示する【ショートコード/ページネーション】
WordPressで、記事一覧を特定の場所に表示したい！ってことがあると思います。そんな時に使えそうなショートコードを作成したのでメモ。 ページネーション付きで表示できるので、デフォルトで出力されるカテゴリーのURLを変えたい！って時に使え...
WordPress WordPressテーマCocoonでカスタム投稿タイプとカスタム分類を作成して一覧を表示させる【WordPress/PHP】
カスタム投稿タイプやカスタム分類を追加する際、今までプラグインを使っていましたが、コードで実装しました。将来の自分がコピペできるようにメモしておきます。 なお、使用しているテーマは無料で使えるCocoonというテーマです。テーマの機能も使用...
JavaScript getRangeメソッドでセルの範囲を取得する【GAS/JavaScript】
Google Apps Script（GAS）は、Googleが提供しているプログラミング言語です。自分は主にGoogleスプレッドシートを操作する為に使いますが、GmailやGoogleカレンダー、Googleフォームなど、Googleサ...
WordPress Cocoonのヘッダーメニューをおしゃれにカスタマイズする【WordPress/Cocoon/PHP/Google Fonts】
WordPressのテーマ「Cocoon」。高機能なのに無料で使えるありがたいテーマです。今回、ヘッダーメニューをカスタマイズしたのでメモ。頑張ってオシャレにしました。 カスタマイズ内容 カスタマイズしたメニューはこんな感じに仕上がりました...
Linux PHPのバージョンをアップする手順をまとめました【WordPress/さくらVPS/CentOS7】
WordPressのサイトヘルスで、PHPのバージョンアップをすすめられました。さくらのVPSを使っているので、バージョンアップは毎回手動で作業しています、、。毎回調べながらやっているので、今後の為に手順をメモしておきます。 WordPre...
WordPress WordPressのお引っ越し（データ移行）する手順をまとめました【ワードプレス/プラグイン】
WordPressのお引っ越し（データ移行）の方法を調べてまとめました。 今回試したのは、プラグインを使用して、かつ無料でお引っ越しできる方法です。プラグインでうまく移行できない場合、最終的には手動でやることになると思います、、。 お引っ越...
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...