ハッシュタグ記事一覧

[React+Tailwind] Alert を TypeScript に書き直してみた 心を無にして始める React

準備 書き直すベースはこちらの Alert コンポーネントです。 JavaScript ベースの Alert.js です。 import { forwardRef } from ...

2022/09/12 13:34

[React+Tailwind] Flowbite で Accordion を表示してみる 心を無にして始める React

準備 Flowbite が使えるプロジェクトを準備します。 Accordion コンポーネントをつくる ./src/components 配下に Accordion.js を作り...

2022/09/12 08:20

[React+Tailwind] Alert を TypeScript に書き直してみた 心を無にして始める React

準備 書き直すベースはこちらの Alert コンポーネントです。 JavaScript ベースの Alert.js です。 import { forwardRef } from ...

2022/09/11 21:44

[React+Tailwind] Flowbite で Alert を表示してみる 心を無にして始める React

準備 Flowbite が使えるプロジェクトを準備します。 Alert コンポーネントをつくる ./src/components 配下に Alert.js を作ります。 impo...

2022/09/10 15:37

[React] Flowbite を使ってみる@準備回 心を無にして始める React

Flowbite Tailwind CSS ベースのライブラリ。 Build websites even faster with components on top of Tai...

2022/09/09 08:06

[React] Tailwind CSS を使ってみる@準備回 心を無にして始める React

TailWind CSS Rapidly build modern websites without ever leaving your HTML. Bootstrap とはまた...

2022/09/08 07:47

[React] ESLint の除外コメント [コピペ用のメモ]

公式 ルールの無効化 対象のソース import { useEffect, useState } from "react" const DebouncedInput = ({ v...

2022/09/07 07:52

[React] React Table で ソート をしてみる 心を無にして始める React

今回は、前回の ファジー検索 の機能を付けたものに ソート の機能を加えていきます。 準備 TanStack Table v8 で React Table を使うのはこちら (*...

2022/09/06 08:00

[React] Leader Line で要素同士を線でつないでみる 心を無にして始める React

準備 Leader Line Draw a leader line in your web page. こちらの React版 です。 LeaderLine のインストール np...

2022/09/03 09:05

[React] react highlight words で検索文字列をハイライトしてみる 心を無にして始める React

準備 react highlight word のインストール npm install react-highlight-words 使ってみる イメージ 入力フォームに入れた文字...

2022/09/02 07:55

[React] React Table で テーブル内のファジー（あいまい）検索 をしてみる 心を無にして始める React

準備 TanStack Table v8 で React Table を使うのはこちら (*'▽') バックエンドには、いつもの json-server を使います。 検索 イメ...

2022/09/01 08:36

[React] React 18 から setInterval などの非同期処理で気をつけること

React 18 での変化点（の1つ） コンポーネントがアンマウントされたあとに状態が更新されても、警告が出なくなりました。 でなくなった警告はこれです。 Warning: Ca...

2022/08/31 08:02

[React] TanStack Table v8 を React で使ってみる 心を無にして始める React

TanStask Table v8 準備 インストール npm install @tanstack/react-table react-table イメージ Table.js を...

2022/08/30 07:43

[React] Suspense(React 18 の新機能) を Axios と合わせてみる 心を無にして始める React

Suspense サスペンスにより、コンポーネントツリーの一部がまだ表示できない場合に、ロード中という状態を宣言的に記述できるようになります。 いままで state で isLo...

2022/08/29 11:44

今日から React 18 心を無にして始める React

React 18 の新機能をみたら、使いたくなったから今日から React 18 。 インストール 新しく npx create-react-app しましょう。React 18...

2022/08/27 09:29

[React] Axios で複数の通信を待ち合わせてみる 心を無にして始める React

準備 Axios のインストールと使い方はこちら。 バックエンド 今回も json-server です。 使う json はこちら。 { "cats": [ { "id": 1,...

2022/08/25 08:03

[React] Canvas で画像を拡大するとき、画像がぼけやるのを防ぐには

今回は React に限った話ではありませんが…、サンプルを React で書いています。HTMLやCSSを準備するよりReactで用意するほうがエコシステムがいろいろ揃えてくれ...

2022/08/24 07:49

[React] OpenCV で画像の HITMISS(Hit or Miss) をしてみる 心を無にして始める React

この記事は、たぶん優先度が低いです。物体検出なら別の関数使いそうだし…、にわかには使いどころが、思いつかない (。´･ω･) 準備 React で OpenCV.js を使えるよ...

2022/08/23 07:47

[React] OpenCV で画像のトップハット、ブラックハットをしてみる 心を無にして始める React

この記事は、たぶん優先度が低いです。にわかには使いどころが、思いつかない (。´･ω･) 準備 React で OpenCV.js を使えるようにしておきます。 今回も、形態を変...

2022/08/22 07:47

[React] OpenCV で画像からエッジ抽出してみる 心を無にして始める React

準備 React で OpenCV.js を使えるようにしておきます。 今回も、形態を変化させるモルフォロジー処理を使っていきます。 OpenCVで定義されるタイプは、膨張、収縮...

2022/08/21 07:25

[React] OpenCV で画像の簡単なノイズ除去をしてみる 心を無にして始める React

準備 React で OpenCV.js を使えるようにしておきます。 今回も、形態を変化させるモルフォロジー処理を使っていきます。 OpenCVで定義されるタイプは、膨張、収縮...

2022/08/18 07:55

[React] OpenCV で画像の膨張＆収縮をしてみる 心を無にして始める React

準備 React で OpenCV.js を使えるようにしておきます。 膨張や収縮は、形態を変化させるモルフォロジー処理の1つです。 OpenCVで定義されるタイプは、膨張、収縮...

2022/08/17 07:45

[React] OpenCV で画像を2値化してみる 心を無にして始める React

準備 React で OpenCV.js を使えるようにしておきます。 2値化する 簡単なしきい値処理 使うものはこちら。 簡単なしきい値処理では、しきい値を決めての2値化ができ...

2022/08/16 16:30

[React] OpenCV で画像をグレースケールにしてみる 心を無にして始める React

準備 React で OpenCV.js を使えるようにしておきます。 グレースケールにする 使うものはこちら。 cv.cvtColor(srcMat, dstMat, cv.C...

2022/08/16 10:30

[React+OpenCV] JavaScript で 画像処理をはじめてみる＠準備回 心を無にして始める React

準備 OpenCV.js を使っていきます。 OpenCV.js のインストール opencv.js をダウンロード いつもの npm ではなく、ダウンロードして使います。 op...

2022/08/16 07:49

React Query入門 導入から簡単な使い方までを解説

サンプルを例に、React Queryの使い方を解説します。入門レベルですが、参考になればと思います。今回作成するサンプルReact Queryとaxiosを使って、GETとPOSTのHTTP通信を行うサンプルを作成しました。GET：取得し

2022/08/16 00:03

[React] 画像ファイルをドラッグ＆ドロップで取得してみる 心を無にして始める React

準備 react-dropzone を使っていきます。 react-dropzone のインストール npm install react-dropzone ドラッグ&ドロ...

2022/08/13 10:45

[React] React Webcam のカメラ映像を canvas に表示してみる

前回は img タグに表示してみました。今回は canvas タグに表示してみます。img タグと比べると、少し工夫が必要になります。 準備 React Webcam のインスト...

2022/08/12 09:34

[React] React Webcam のカメラ映像をimgタグの画像に変換してみる

準備 React Webcam のインストールなどはこちら。 カメラ映像から画像を取得して表示する 写真を撮るようなイメージで、ボタンを押したときの映像を img タグ で表示し...

2022/08/11 14:52

[React] React Webcam でカメラ映像を表示してみる 心を無にして始める React

準備 React Webcam を使っていきます。 React Webcam のインストール npm install react-webcam カメラを表示する PCが認識してい...

2022/08/11 10:28

[Webpack] webpack-dev-server で CORS を回避する方法 [setupProxy]

はじめに Webサービスの開発で webpack-dev-server を使っていると、 CORS の問題が見つかることがあります。 回避の方法はいくつかありますが、今回は ht...

2022/08/08 07:46

【React】buttonがdisabledかチェックするテストを実装

Reactで、buttonがdisabledがチェックするテストを実装します。buttonがdisabledかチェックする方法使用するメソッドbuttonのdisabledをチェックするには、次の2つのメソッドが使えます。.toBeDisa

2022/08/07 23:12

[React] Axios で CRUD してみる 心を無にして始める React

CRUD CRUDとは、ほとんど全てのコンピュータソフトウェアが持つ永続性の4つの基本機能のイニシャルを並べた用語。その4つとは、Create、Read、Update、Delet...

2022/08/07 09:57

[Node.js] FileSaver でファイルを保存してみる 心を無にして始める React

準備 FileSaver を使っていきます。 FileSaver のインストール npm install file-saver ダウンロードする（URLなし） 画面に表示している...

2022/08/06 08:04

[React] Axios で通信してみる 心を無にして始める React

準備 今回は JSON Server を通信相手にします。 他にバックエンドを用意できる人は飛ばして大丈夫です。 （抜粋）Get a full fake REST API wit...

2022/08/05 07:47

buttonのclickイベントをテストする方法【React Testing Library】

Reactで、buttonをクリックしてonClickイベントを発生させるテストを実装します。buttonをクリックするテストを実装使用するメソッドbuttonをクリックするには、次の2つのメソッドが使えます。userEvent.click

2022/08/04 19:26

[React Bootstrap] Table を表示してみる 心を無にして始める React

今回は、Table コンポーネントを表示します。 準備 まだ components フォルダがなければ作ります。 src を右クリックして New Folder 。 compon...

2022/08/04 07:53

[React Bootstrap] Toasts を表示してみる 心を無にして始める React

今回は、Toast コンポーネントを表示します。 準備 まだ components フォルダがなければ作ります。 src を右クリックして New Folder 。 compon...

2022/08/03 08:28

Reactでテストを実行してみよう！React Testing Libraryの使い方

Reactコンポーネントは、JestとReact Testing Libraryを使ってテストを実施できます。Create React Appで作成したコードを参考に、テストを実行してみましょう。構成はReact+TypeScript+ya

2022/08/02 23:35

[React Bootstrap] Popovers を表示してみる 心を無にして始める React

今回は、Popover コンポーネントを表示します。 準備 まだ components フォルダがなければ作ります。 src を右クリックして New Folder 。 comp...

2022/08/02 13:23

[React Bootstrap] Tooltips を表示してみる 心を無にして始める React

今回は、Tooltip コンポーネントを表示します。 準備 まだ components フォルダがなければ作ります。 src を右クリックして New Folder 。 comp...

2022/08/01 11:07

[React Bootstrap] OverlayTrigger を表示してみる 心を無にして始める React

今回は、OverlayTrigger コンポーネントを表示します。 準備 まだ components フォルダがなければ作ります。 src を右クリックして New Folder...

2022/08/01 08:49

VSCodeにESLintとPrettierを設定してReact+TypeScriptのコードを自動整形

チーム開発をしていると、コーディングスタイルがバラバラで困ることがあります。インデントがずれているスペースの開け方が違う改行の位置がそろっていないということで、コードを自動整形してしまおうという試みです。エディターはVSCode、プロジェク

2022/07/31 02:55

[React Bootstrap] Overlays を表示してみる 心を無にして始める React

今回は、Overlay コンポーネントを表示します。 準備 まだ components フォルダがなければ作ります。 src を右クリックして New Folder 。 comp...

2022/07/30 09:43

[React Bootstrap] Tabs を表示してみる 心を無にして始める React

今回は、Tab コンポーネントを表示します。 準備 まだ components フォルダがなければ作ります。 src を右クリックして New Folder 。 componen...

2022/07/29 08:02

[React Bootstrap] Spinners を表示してみる 心を無にして始める React

今回は、Spinner コンポーネントを表示します。 準備 まだ components フォルダがなければ作ります。 src を右クリックして New Folder 。 comp...

2022/07/28 13:02

[React Bootstrap] Offcanvas を表示してみる 心を無にして始める React

今回は、Offcanvas コンポーネントを表示します。 準備 まだ components フォルダがなければ作ります。 src を右クリックして New Folder 。 co...

2022/07/27 06:19

[React] 簡単にできるシェアボタン サンプルコード付き

サイトを作るときにシェアボタンを付けたいけど、やったことがないとちょっと手が伸びないことが多いです。 Reactでやってみたら、かなり簡単にできてしまうライブラリがあったので、紹...

2022/07/27 06:19

[React Bootstrap] Placeholder を表示してみる 心を無にして始める React

今回は、Placeholder コンポーネントを表示します。 準備 まだ components フォルダがなければ作ります。 src を右クリックして New Folder 。 ...

2022/07/27 06:19

[React Bootstrap] Pagination を表示してみる 心を無にして始める React

今回は、Pagination コンポーネントを表示します。 準備 まだ components フォルダがなければ作ります。 src を右クリックして New Folder 。 c...

2022/07/27 06:18