Chromeでプラグインなしで画面全体のスクリーンショットを取得する方法

Google Chromeでプラグインを使用せずに画面全体のスクリーンショットを取得する方法です。 プラグイン使ったほうが楽ですが、セキュリティの関係でプラグイン使用不可の場合もあると思うので、そんなときに使えます。 ま ...

【React】「React has detected a change in the order of Hooks called by〜」の対処法

エラー概要 Reactで「React has detected a change in the order of Hooks called by〜」が発生した場合の対処法です。 上記エラーは、useStateなどのHoo ...

Chromeのデベロッパーツールの便利な使い方

フロントエンド開発をしていると、ブラウザのデベロッパーツールをよく使います。 Chromeのデベロッパーツールで知っておくと便利な使い方をご紹介します。 日本語化 デベロッパーツールを開き、右上の歯車 > 言語 で ...

iPhoneのSafariの開発者ツールを使用する方法

iPhoneのSafariで開発者ツールを使用する方法です。PcのMacが必要になります。 やり方 1. MacでSafariを起動する 2. iPhoneとMacを接続する 3. iPhoneでSafariを一度終了し ...

SWRで取得したdataをReact Hook FormのdefaultValuesにセットする

SWRで取得したdataを、React Hook Form（以降はRHF）のdefaultValuesにセットしたいことがあると思います。以下のような感じです。 しかし、このやり方だとdefaultValuesにうまくセ ...

【React】RHKのresetで勘違いしていたこと

React Hook Formのresetは「Formを空にする」という理解でいましたが勘違いしていました。 上記は、defaultValuesでhogeの初期値に「test」を設定しています。hogeの値を変更後、リセ ...

【React】SWRで定期的に再検証する方法

SWRで定期的に再検証する方法です。 refreshIntervalを使用すると実現できます。 上記の例では、5秒おき(5000ミリ秒)に再検証するようにしています。 refreshIntervalは0を指定すると自動再 ...

【React】React Hook Formのregisterをコンポーネントのpropsに渡す

Controllerを使用せずにコンポーネントに対してReact Hook Formのregisterを渡したいことがあったのでメモ。

【React】React×TailwindCSSでアニメーションを実装する

ReactとTailwindCSSでアニメーションを実装しようとして少し詰まったのでメモ。 「ボタンが押されたら1秒かけて文字の不透明度を0から1にする」というアニメーションは下記のようにすれば実現できます。 「サンプル ...

分割代入と残余引数でオブジェクトの特定のプロパティ以外を全て取り出す

分割代入と残余引数を使えば、オブジェクトから「特定のプロパティ以外」を全て取り出すことができます。 上の例では、オブジェクトprofileからidを分割代入で取り出し、それ以外のプロパティは残余引数を使ってnewProf ...

オブジェクトのundefinedのプロパティを削除する

やりたいこと ↑↑のようなオブジェクトがあった場合に、undefinedのプロパティを削除して↓↓のようなオブジェクトにしたい 解決策 こんな感じでできました！ 解説 Object.entriesでオブジェクトを配列に変 ...

【Next.js】swrをReact Testing Libraryでmock化する

useSWRを使用しているコンポーネントのテストコードをReact Testing Libraryで書く際に、useSWRをmock化する必要がありました。 下記のようにしてuseSWRをmock化できました。

【Next.js】React Testing LibraryでFormの入力値のテスト

React Testing LibraryでFormの入力値が正しいかテストする方法です。 toBeやtoHaveValueで値が取得できると思っていましたができなかったので備忘録です。 ※React Hook Form ...

React Testing LibraryでqueryByTextとgetByTextの違い

React Testing LibraryでqueryByTextとgetByTextの違いがわかっていなかったのでメモ。 queryByTextの場合は対象の文字列がなかった場合はテストが失敗するだけですが、getBy ...

個人的によく使うVSCodeショートカット

Alt + ↑↓ Altキー + 上下の矢印キー(方向キー)でカーソルの行を上下に移動できます。 Alt + Shift + ↑↓ Alt + Shift + 上下の矢印キー(方向キー)でカーソルの行をコピーできます。 ...

【Next.js】Contextを使用しているコンポーネントのテスト

下記のようなSampleContextというContextと、SampleContextを使用しているSampleというコンポーネントがあるとします。 上記Sampleコンポーネントで「0です」と表示されるケースと「0以 ...

VSCodeでF2で関数名やコンポーネント名を一括で変更する

「関数やReactのコンポーネント名を変更したいけど色々な箇所で使用しているから変更が面倒」という場合はF2キーを使用すると一括で変更できて便利です。 例えば、「関数hogeをButtonコンポーネントで使用していて、関 ...

【Next.js】React Testing Libraryでrouter.push()でエラーになる

Next.jsでnext/navigationをインポートしているコンポーネントをReact Testing Libraryでテストを実行したらエラーになりました。 コンポーネント テストコード エラー内容 Jestはサ ...

Next.jsでReact Testing Libraryを導入する

Next.js13にJest、React Testing Libraryを導入する手順です。 Jest、React Testing Libraryのインストール 下記コマンドを実行してJestをインストールします。 Je ...

【React】FormでEnterキーが押されてSubmitするのを防ぐ

formタグにonKeyDownを追加し、Enterキーが押されたらevent.preventDefault()でsubmitをキャンセルしている。 eslintでonKeyDownのエラーが表示されたら// eslin ...

【Recoil】Recoilでstateをデフォルト値にリセットする

Recoilでstateをデフォルト値にリセットするにはuseResetRecoilStateを使用します。 Test.tsxでテキストを入力するとstateが更新されます。 その後、App.tsxで「stateをリセッ ...

【React】離脱したページを再表示したときに保存していないデータを復元する

Formで入力中に他のページに遷移したりタブを閉じたりしてページを離脱し、再度同じページを表示したときに入力途中だった内容を復元する方法です。Backlogとかであるやつですね。 onChangeでテキストボックスの値が ...

【JS】オブジェクトの配列同士の比較

JavaScriptでオブジェクトの配列Aと配列Bがあり、「配列Bに存在する配列Aだけを抽出したい」ということがあったのでメモ。

react-dropzoneの使い方

react-dropzoneはローカルのファイルを選択したりドラッグ&ドロップするためのライブラリです。 インストール方法 最低限の使い方 もう少し実用的にしてみます コードの解説 maxSize：ドラッグ&am ...

react-hook-formで動的フォームを作る

SWRの使い方

任意のタイミングでフェッチする mutateを使用すると、任意のタイミングでフェッチできます。 下記の例だとボタンをクリックしたときにフェッチします。 初期表示時はフェッチしない 初期表示時はフェッチせず、何かアクション ...

Reactのライブラリの公式サイトまとめ

ライブラリのドキュメントを読みたいときに「ライブラリの名前 公式」みたいな感じでググっても出てこないので、私がよく使っているライブラリの公式サイトをまとめてみました。 「ブックマークしておけばいいじゃん」って話ですが^^ ...

Reactのライブラリの公式サイトまとめ

ライブラリのドキュメントを読みたいときに「ライブラリの名前 公式」みたいな感じでググっても出てこないので、私がよく使っているライブラリの公式サイトをまとめてみました。 「ブックマークしておけばいいじゃん」って話ですが^^ ...

yupのバリデーションまとめ

必須チェック：required 文字列の最小の長さ：min 文字列の最大の長さ：max 正規表現：matches 指定した値のみ許可：oneOf ラジオボタンやセレクトボックスなどで指定した値のみ許可したい場合などに使用 ...

オブジェクトから特定のプロパティを除外する

上記profileからidを除外したい場合、下記のようにすればできます。 分割代入と残余引数を使うことで、profileNoIdにはid以外のプロパティが格納されます。

【Next.js】Next.jsのプロジェクトにJestを導入する

Next.js13のプロジェクトにJestを導入する方法です。 Next.jsの公式サイトを参考にしています(というかほぼ公式サイトそのままです) Jestのインストール 下記コマンドを実行してJestをインストールしま ...

GitHubの登録メールアドレスを変更したらリポジトリにプッシュしてもVercelに反映されなくなった

VercelはGitHubのリポジトリにプッシュすると自動でデプロイされますが、突然デプロイがされなくなりました。 一緒に開発をしている同僚はデプロイされるのに私だけデプロイされない状態でした。 なんでかなと思ったら、G ...

映画『THE FIRST SLAM DUNK』が最高だった件

映画『THE FIRST SLAM DUNK』を観てきました。 控えめに言って最高。 観にいくか迷っている人は絶対行くべし。 感想など色々書いていきます。 ※以下ガッツリネタバレ含みます 試合のシーンが最高！ まずはなん ...

MINATOシティハーフマラソン2022の感想など

11/20(日)に行われたMINATOシティハーフマラソン2022に参加してきました。 感想や結果など書いていきます。 MINATOシティハーフマラソン2022とは 公式サイト：https://minato-half.j ...

退職を申し出たら「辞めたら会社が潰れる」と言われた話

※どこから関係者に伝わるのかわからないのでところどころフェイクを入れています 今の会社を退職することになりました。退職の理由は、今の職場ではエンジニアとしてこれ以上の成長が難しいこと、給与も昇給があまり見込めないことが理 ...

【React】react-hook-formでcheckboxがsubmitされないことがあった

Safariのみ、react-hook-formでcheckboxのvaluteがsubmitされないケースがありました。 reactやSafariのバージョンは下記になります。 react：18.2.0react-ho ...

【React】react-hook-formでプルダウンの入力チェックを行う

react-hook-formを使ってプルダウンで選択された値（value）が不正かどうかをチェックする方法です。 プルダウンの選択肢となるオブジェクトの配列を用意しておき、mapでループしてプルダウンを生成しています。 ...

【React】react-hook-formでプルダウンの入力チェックを行う

react-hook-formを使ってプルダウンで選択された値（value）が不正かどうかをチェックする方法です。 プルダウンの選択肢となるオブジェクトの配列を用意しておき、mapでループしてプルダウンを生成しています。 ...

【Algolia】Algoliaでフィルターを使う

Algoliaはキーワードに対して近いレコードが検索対象となりますが、RDSのWhereのようにキーワードに一致したレコードのみ抽出したい場合があると思います。 例えば、Amazonとか楽天で「家電」のジャンルの商品を検 ...

【Algolia】検索にヒットする属性を制限する

Algoliaはインデックスを作成した初期の状態だと、全ての属性が検索にヒットします。 例えば、usersというインデックスが存在し下記のレコードが存在するとします。 { objectID:1, id: 1, nickN ...

【React】Algoliaを使用する

React（Next.js）でAlgoliaを使用する方法です。 Algoliaのドキュメントを参考にしています。 ライブラリのインストール 下記コマンドでAlgoliaをライブラリをインストールします。 npm ins ...

Firestoreに変更があったら自動でAlgoliaに反映する

Firestoreのドキュメントにcreate、update、deleteがされたときに自動でAlgoliaに反映する方法です。 前提 Algoliaにusersというインデックスが存在し、Firestoreのusers ...

【React】react-hook-formで全てのチェックボックスのチェックする方法

React（Next.js）のreact-hook-formで全てのチェックボックスをチェックする方法です。 下記のようにしたらできました。 ネストされた項目ってどうやってsetValueするんだ？って思いましたが、公式 ...

react-hook-formでフォームに初期値を設定する方法

react-hook-fromで初期値を設定する方法を3つご紹介します。 defaultValuesを使う 1つ目はdefaultValuesを使う方法です。 setValueを使う 2つ目の方法はsetValueを使い ...

北海道マラソン2022の振り返り

2022年8月28日に開催された北海道マラソンに参加してきました。 フルマラソンの参加は2019年のさいたま国際マラソン以来、2年8ヶ月ぶりの参加です。 北海道マラソンは2019年にも参加しましたが、このときは直前に怪我 ...

【Firestore】Firestoreを手動でバックアップする

https://firebase.google.com/docs/firestore/manage-data/export-import?hl=ja 事前準備 Google Cloud プロジェクトに対する課金を有効にす ...

【Next.js】Next.js × microCMSでブログっぽいものを作る

タイトルの通りですが、Next.jsとmicroCMSでブログっぽいものを作る方法です。 細かいところかなり省略していますが、何かの参考にしていただけたら幸いです。 参考サイトmicroCMS公式microcms-js- ...

Next.js × microCMSでブログっぽいものを作る

タイトルの通りですが、Next.jsとmicroCMSでブログっぽいものを作る方法です。 細かいところかなり省略していますが、何かの参考にしていただけたら幸いです。 参考サイトmicroCMS公式microcms-js- ...

【React】文字列内のURLをリンク(aタグアンカータグ)にしたい

【マラソン】2022年上半期の戦績、下半期の予定など

早いもので2022年も半分が終わってしまったので（7月も後半ですが）、2022年上半期のマラソン大会の戦績を書いていきます。 5000m まずは5000mです。 これは「オトナのタイムトライアル（OTT）」という市民ラン ...

【Next.js】Vercelでの環境変数について

VercelのPreview環境では、.env.developmentではなく.env.productionが読み込まれるようです。 実際に実験してみました。 まずはNext.jsで下記3つの環境変数を用意します。 .e ...

【Next.js】Next.js 12.2.0でBasic認証を実装する

Next.jsはMiddlewareを使用すればBasic認証を実装できます。 ただ、Next.js 12.2.0からMiddlewareが安定版になり、仕様が大きく変わりました。 Middleware Upgrade ...

ヘテムルでmas_input_varsを1000以上に設定する方法

ヘテムル（heteml）のコントロールパネル上でPHPの設定を色々変更できますが、mas_input_varsのMAXが1000までしか設定できませんでした。 レンタルサーバーなのでroot権限になってサーバー上で直接変 ...

ヘテムルでSPFレコードが自動で付与される件について

ヘテムル（heteml）のレンタルサーバー上に構築したWordPressに問い合わせフォームを実装し、問い合わせした人に対して「お問い合わせありがとうございました」の自動返信メールを送りたかったのでSPFレコードを設定す ...

マラソン大会に出場するときに注意すること（初心者向け）

マラソン初心者の私がアドバイスするのはおこがましいですが、マラソン初心者の方がマラソン大会に参加するときのアドバイスです。 マラソンの走り方とかトレーニング方法とかは書いていません（そんなアドバイスができる実力も知識もな ...

社会人が仕事で使用するカバンはリュックがおすすめ

こんにちは。 皆さんは仕事で通勤用にどんなカバンを使っていますか？ 手に持つタイプ、肩にかけるタイプ、ショルダーバッグなど色々種類はありますが、私はリュックをお勧めします。 リュックタイプのメリット・デメリットを書いてい ...

GA4で開発環境のアクセスを除外する

ユニバーサルアナリティクス（UA）でフィルタで除外したいドメインを指定することで開発環境・テスト環境のアクセスを除外することができましたが、Googleアナリティクス4（GA4）では2022年5月8日現在、フィルタでドメ ...

2022年10月〜12月の関東近辺のマラソン大会まとめ

今シーズン出たいと思っている関東近辺のマラソン大会をまとめてみました。 東京レガシーハーフマラソン2022 公式サイト 開催日：10/16(日) エントリー期間：5/26(木)〜6/9(水) 一般ランナー エントリー料金 ...

第2回東京豊洲ハーフマラソン2022に参加してきました

2022年4月30日(土)に豊洲ぐるり公園で開催された第2回東京豊洲ハーフマラソン2022に参加してきました。 豊洲ぐるり公園でのマラソン大会は過去にも開催されていてずっと参加したいと思っていましたがなかなか予定が合わず ...

JavaScriptやTypeScriptで出てくる記述の意味や名称など

初めてES2015のJavaScriptやTypeScriptのコードを読んだときに「この記述の意味と読み方はなんだ？」と思ったことが多かったのでまとめました。 ??（Null合体演算子） クエスチョン（はてなマーク）が ...

立川シティハーフマラソン2022に参加しました

2022年3月12日に行われた立川シティハーフマラソンに参加してきました。 3年ぶり2回目の参加です。 前回参加したときは仕事が忙しくて疲れており、練習もできていなかったので自己ワーストを更新する結果でした。 今回は練習 ...

【Firestore】firestore.rulesの正規表現のエスケープで詰まった

firestore.rulesのmatchesは正規表現が書ける。 例えば、下記のように書けばnameが「ダボハゼ」か「半魚人」にマッチした場合のみuserコレクションに書き込まれる。 「 」はメタ文字なので、もしnam ...

【Firestore】firestore.rulesの正規表現のエスケープで詰まった

firestore.rulesのmatchesは正規表現が書ける。 例えば、下記のように書けばnameが「ダボハゼ」か「半魚人」にマッチした場合のみuserコレクションに書き込まれる。 「 」はメタ文字なので、もしnam ...

コロナ禍での体調不良が地獄だった件

4年前にインフルとカンピロバクターに立て続けにかかって以来、久しぶりに大きく体調を崩しましたのでその辺りのこと書いていきます。 地獄の始まり 症状① 2/9(水)の17時ぐらいに体のダルさを感じるが「いつも最近仕事が忙し ...

【GA4】特定IPアドレスからのアクセスを除外する

gcloudでよく使うコマンドまとめ

プロジェクトを切り替える gcloud config set project プロジェクトID プロジェクト一覧表示 gcloud projects list 現在のプロジェクト表示 gcloud config list ...

【GCP】google cloud functionsにローカル環境からデプロイする

google cloud functionsにローカル環境からデプロイする方法です。 Cloud SDKがインストールされていることが前提なので、インストールされていない方は公式サイトを参考にインストールをお願いします。 ...

【Next.js】Imageコンポーネントでbackground-imageを実現する

素直に「background-image」を使った方がいいかもしれませんが、background-imageだと画像の遅延読み込みや最適化ができないので。 Google PageSpeed Insightsでも怒られるの ...

【Next.js】Imageコンポーネントにstyleを適用する方法

Imageコンポーネントにstyleを適用する方法です。 TailwindCSS、styled-jsxではImageコンポーネントにstyleが適用されず、CSS-in-JSはImageコンポーネントには使用できないので ...

Next.jsでURLの直打ちとページリロードを防ぐ方法

Next.jsで同じサイト内のボタンとかリンクを押して遷移するのはOKでもURLを直打ちやページのリロードは防ぎたいことがあったのでその方法です。 ちょっと強引です。 before.tsx import { useRou ...

React Hook FormとFirestoreで更新フォームを作る

React Hook Formで登録フォームを作る方法はサンプルがたくさんありますが、更新フォームは少なかったので作ってみました。 import { initializeApp } from "firebase/app" ...

Cloud Functionsのリージョンを変更する（ウェブバージョン9）

Cloud Functionsのリージョンはデフォルトではus-central1で実行される。 下記のようにregionパラメータでリージョンを設定すれば、関数が実行されるリージョンを変更できる。 constfuncti ...

Chromeの拡張機能をChromeウェブストアで公開する

自分で作成したChromeの拡張機能をChromeウェブストアで公開する方法です。 デベロッパー登録 Chromeウェブストアで公開するにはまずChromeウェブストアのデベロッパー登録が必要です。 こちらよりデベロッパ ...

Chromeの拡張機能の作り方

Google Chromeの拡張機能を作り方の概要です。 「とりあえず作ってとりあえず動かす」を目的としているので、詳細を知りたい方はChrome Developers のページをご覧ください。 Chromeの拡張機能は ...

https://dabohaze.site/ga4-how-to/

GA4になってからアナリティクスの使い方が変わったのでメモします。 ページごとのユーザー数、PV数を調べる方法 左サイドメニューからエンゲージメント>ページとスクリーン と進み、「ページ タイトルとスクリーン クラ ...

ReactでCSVをアップロードしてFirestoreに保存する

ReactでCSVをアップロードしてFirestoreに一括で保存する機能を作りました。 事前準備 CSVのアップロード、取り込みにはreact-dropzoneとreact-papaparseを使いました。 react ...

Verceで独自ドメイン

Verceで独自ドメインを使用する方法です。 ※独自ドメインを利用するためには有料プランに入っている必要があります。 まず独自ドメインを使用したいプロジェクトの「Settings」をクリックします。   左サイ ...

SendGrid

SendGridでメールが届かないことがあったのでログに下記のように書かれていました。 554 5.7.1 Service unavailable; Client host [xxx.xx.xxx.xxx] blocke ...

「Firebase App named ‘[DEFAULT]’ already exists」エラーの解消法

React × Firebaseを使っていたら「Firebase App named ‘[DEFAULT]’ already exists with different options or co ...

「Firebase App named ‘[DEFAULT]’ already exists」エラーの解消法

React × Firebaseを使っていたら「Firebase App named ‘[DEFAULT]’ already exists」というエラーが発生しました。 ちょっと前でしたら「Fir ...

Reactで環境変数を使う

Reactで環境変数を使う方法です。 一番簡単に使うだけなら、Reactのルートディレクトリに「.env」ファイルを作成して、「REACT_APP_XXXXX=”xxxxx”」と定義するだけで使え ...

2022年の祝日・連休情報

2022年の祝日、連休情報です。 2022年は祝日が16日あります。 1/1(土) 元日 1/10(月) 成人の日 1/8(土)〜1/10(月)で三連休になります。 2/11(金) 建国記念の日 2/11(金)〜2/13 ...

漫画のキャラってガリガリの人が多い気がする

漫画に登場するキャラクターは身長が高くて痩せててスタイルがいい…もといガリガリな人が多い気がするので調べてみました。 身長、体重(身長に対する適正体重)、BMIも出していきます。 身長と体重は主にwikipediaを参考 ...

FirebaseのFunctionsを使う

FirebaseのFunctionsを使用する方法です。 この記事はFirebaseの下記ドキュメントを参考にしています。 はじめに: 最初の関数の記述、テスト、デプロイ アプリから関数を呼び出す Blazeプランへのア ...

今後のマラソン大会予定

このブログを書いているのが2021年9月18日で、本来ならこれから先はマラソンシーズンなのですが、コロナウイルスのせいでまたしばらく大会には出られなさそうです。 関東近辺で出ようと思っていた大会、開催の可能性のある大会な ...

21年10月の東京マラソンは22年3月に延期、22年大会は中止

2021年10月17日に開催予定だった東京マラソンが2022年3月に延期し、22年3月の大会は中止になることが9月17日に発表されました。 07年に東京マラソンが始まって以降、中止は初とのことです。 東京マラソン 10月 ...

21年10月の東京マラソンは22年3月に延期、22年大会は中止

2021年10月17日に開催予定だった東京マラソンが2022年3月に延期し、22年3月の大会は中止になることが9月17日に発表されました。 07年に東京マラソンが始まって以降、中止は初とのことです。 東京マラソン 10月 ...

cronでLet’s EncryptのSSL証明書を自動更新する

私は下記のようにしました！ rootユーザーになったあとcronを編集。 sudo su - crontab -e cronに下記を追記。 0 0 1 */3 * /usr/bin/certbot renew & ...

Nuxt.jsをVercelに自動でデプロイする

Next.jsのアプリをGitHubのリポジトリにプッシュしたら自動的にVercelにデプロイされるように設定します。 GitHubのアカウントは事前にGitHubのアカウントを作成しておきます。 また、事前にGitHu ...

Nuxt.jsをVercelに自動でデプロイする

Next.jsのアプリをGitHubのリポジトリにプッシュしたら自動的にVercelにデプロイされるように設定します。 GitHubのアカウントは事前にGitHubのアカウントを作成しておきます。 また、事前にGitHu ...

Nuxt.jsをVercelに自動でデプロイする

Next.jsのアプリをGitHubのリポジトリにプッシュしたら自動的にVercelにデプロイされるように設定します。 GitHubのアカウントは事前にGitHubのアカウントを作成しておきます。 また、事前にGitHu ...

大阪府のBMI30以上の人へのワクチン優先接種について

大阪府がBMI30以上の肥満の人に新型コロナウイルスのワクチンを優先接種するとのことです。 肥満の人は重症化リスクが高いからとのこと。 大阪府、肥満の人に優先接種 重症化リスク高いBMI30以上対象   正直に ...

大阪府のBMI30以上の人へのワクチン優先接種について

大阪府がBMI30以上の肥満の人に新型コロナウイルスのワクチンを優先接種するとのことです。 肥満の人は重症化リスクが高いからとのこと。 大阪府、肥満の人に優先接種 重症化リスク高いBMI30以上対象   正直に ...

ReactでFirestoreへデータを追加する

ReactでFIrestoreへデータをデータを追加、更新、削除、取得するまでの手順です。 Firestoreのプロジェクトが作成済み、ローカルでReactが動かせることを前提にしているのでその辺りはこちらの記事をご覧く ...

ReactでFirestoreへデータを追加する

ReactでFIrestoreへデータをデータを追加、更新、削除、取得するまでの手順です。 Firestoreのプロジェクトが作成済み、ローカルでReactが動かせることを前提にしているのでその辺りはこちらの記事をご覧く ...

日常生活で無理なく節約をする方法

日常生活で無理なくできる節約方法を考えてみました。 小さなペットボトルは買わない 会社に勤めている方は缶コーヒーや500mlのペットボトルを買う人が多いと思いますが、それをやめましょう。 その代わり、2Lのペットボトル、 ...

日常生活で無理なく節約をする方法

日常生活で無理なくできる節約方法を考えてみました。 小さなペットボトルは買わない 会社に勤めている方は缶コーヒーや500mlのペットボトルを買う人が多いと思いますが、それをやめましょう。 その代わり、2Lのペットボトル、 ...

ReactでYouTubeの動画を埋め込む

ReactでYouTubeの動画を埋め込むには「react-youtube」を使用します。 npmのコマンドでreact-youtubeをインストールします。 npm i react-youtube 単純に埋め込むだけな ...

ReactをFirebase Hostingへデプロイしてみる

Firebaseのプロジェクトを作成して、ReactのプロジェクトをFirebase Hostingへデプロイするまでの手順です。 「Firebaseとは何か」「Firebaseの特徴」とかは書きませんので、他のサイトを ...

ReactをFirebase Hostingへデプロイしてみる

とりあえず、Firebaseのプロジェクトを作成して、ReactのプロジェクトをFirebase Hostingへデプロイするまでの手順です。 「Firebaseとは何か」「Firebaseの特徴」とかは書きませんので、 ...