はてなブックマーク

2021年11月14日時点のWindows10での情報です。 前回 「WindowsでNode.jsバージョン管理ツールをどれにするか」で、WindowsでNode.jsバージョン管理ツールについて調べてみました。 今回は Windows10にVoltaをインストールしていきます。 Voltaとは 公式サイト Node.jsバージョン管理ツール Rust製で高速に動作する package.jsonの内容から、自動でNodeのバージョンを切り替える クロスプラットフォームに対応 安定バージョンのNode.jsをインストールしてくれる npm、yarnなどのパッケージマネージャーをサポート Voltaをインストールする前に 以前にNodeバージョン管理ツールやNodeをインストールしている場合は、完全にアンインストールしておきます。 以前はバージョン管理ツールにNodistを使用していました。

2022年01月27日時点のWindows11での情報です。 この記事の目的 今年からReact（TypeScript）でのサービス開発になりました。 VSCodeでタイプスクリプト(ts)ファイル、コンポーネント(tsx)ファイルのインデントが、スペース4文字になっていたので、これを2文字に設定する手順です。 インデントは何文字が適切なのか そもそもインデントは何文字にするのが適切なのか？ ソースコードの場合、インデントは「スペース4文字」にすることが多いです。 バックエンドのC#で開発するときは、インデントはスペース4文字に設定しています。 Angularの場合、コンポーネントファイルとソースコードファイルは完全に分離しているので、コンポーネント(Htmlファイル)はスペース2文字、ソースコード(tsファイル)はスペース4文字にしていました。 Reactの場合、コンポーネント(tsxフ

Reactで MUI(v5) + React-hook-form + yup で入力フォームを作成しています。 今回は 3桁区切りや小数点以下の入力をサポートした数値入力用のコンポーネントと、マスク入力用のコンポーネントが必要になったのですが、MUI には 数値入力用のコンポーネントやマスク入力コンポーネントがありません。 そこで react-number-format ライブラリを試してみたのですが、かなりオススメだったので紹介したいと思います。 数値入力用、マスク入力用のコンポーネントを扱うライブラリ 数値入力用のコンポーネント、マスク入力用のコンポーネント を扱っているライブラリとして、react-number-format のほかに react-imask があります。 たぶん他にもいいライブラリがあると思いますが、今回はこの2つから選びました。 react-imask npm t

create-react-appで作成したアプリの場合、デフォルトで svg ファイルをコンポーネントとして読み込むことができます。 import { ReactComponent as Hart } from './assets/hart.svg'; export function App() { return ( <Hart style={{stroke:'gray', fill:'lightblue', width:'300px', height:'300px'}}/> ); } viteで作成したreactアプリは、デフォルトで svg ファイルをコンポーネントとして読み込むことができません。 そこで svg ファイルをコンポーンネントとして読み込むためのライブラリをインストールします。 ライブラリはたくさんありますが、2022年3月16日時点で主要そうなところをピックアップしまし

2021年11月11日時点のWindows10での情報です。 Visual Studio Code の設定を同期する Visual Studio Code（vscode）の「Settings Sync」という機能を使用して、 vscodeの設定を他のPCと同期することができます。 Visual Studio Code 公式ドキュメント 同期できるのは以下の項目です。 設定 キーボードショートカット ユーザースニペット 拡張機能 UIの状態 GitHubアカウント か Microsoftアカウントを使用して同期しますので、 あらかじめどちらかを用意しておきます。 この記事ではGitHubアカウントを使用して同期する方法で進めていきます。 GitHubのアカウント作成については、以下の記事を参照してください。 GitとGitHub GitHubアカウントを作成する まずは同期元となる1台目のP

先日、Vite + React + TypeScript + Emotion + MUI v5 に、入力フォームライブラリ React Hook Form を導入しました。 React＋MUI v5 の 入力フォーム用のライブラリは React Hook Form の 一択 今回は MUI v5 の以下のよく使うであろうコンポーネントと React Hook Form の連携について調べてみました。 TextField Select RadioGroup DatePicker 複数のCheckBox 通常 validationライブラリ を使用すると思いますが、今回はvalidationライブラリを導入しない状態で React Hook Form の validate のみで実装します。 validationライブラリの選定の前に、まずは MUI v5 と React Hook Form

Vitestのサイトを見ると、以前はトップページに記載があった 「免責事項：Vitestはまだ開発中であり、安定したものではありません。実運用での使用はお勧めしません。」が消えてました。 過去のキャプチャ。Vitestのバージョンは v0.12.6 「DISCLAIMER・・・」が表示されています。 2022/05/18 現在「DISCLAIMER・・・」が消えてます。 Vitestのバージョンは 上記と同じ v0.12.6 です。 使ってもいいのかな・・・？ということで Vite + React 環境に Vitest を導入してみました。 vitest Vitest は Vite 環境で動作する高速なテストフレームワークです。 Vite で作成したアプリケーションであれば、vite.config.ts で設定を共有でき、環境構築が簡単です。 vitest のインストール まずは vite

はじめに 前回は、「Error Boudary」を使用したエラー処理方法について調べました。 React: アプリ内のエラーを処理する（Error Boundary） このError Boudaryコンポーネントは、クラスコンポーネントで定義する必要があり、関数コンポーネントとして作成できません。 また、イベントハンドラでのエラーや、非同期処理でのエラーが処理できません。 そこで、コンポーネントでのエラーやイベントハンドラでのエラー、非同期処理でのエラー、全部まとめて簡単に処理できるError Boudaryのラッパー「react-error-boundary」について調べてみました。 環境 Windows11 vite: v2.7.2 node: v16.13.2 react: v17.0.2 typescript: v4.4.4 react-error-boundary: v3.1.4

Vite + React + TypeScript 環境で axios を使用しています。 axiosのインタセプターでフックを使おうとしたのですが、その方法がわからずちょっと迷ったので、解決した方法を記事にまとめました。 axiosのバージョン: v0.25.0 axiosで、デフォルトConfig と インタセプター基本的な設定方法 axios公式サイト：デフォルトConfig axios公式サイト：インタセプター まずは公式サイトに従って、基本的な方法でデフォルトConfig と インタセプターを作成してみます。 axios 拡張用のファイルを作成します。 ファイル名はなんでもいいですが、axiosClient.ts というファイル名で作成しました。 ▶ すべての HTTP リクエストに共通するデフォルト config を指定する すべての HTTP リクエストに共通するデフォルトの

2022年02月02日 Windows11での情報です。 今回は、React Router v6 で 認証されていないユーザーに見せたくないページや、権限がないユーザーに見せたくないページにアクセスされた場合、ログインページなど指定のページへリダイレクトする方法です。 参考にしたのはコチラ React Router v6 の基本的なルーティング方法についてはコチラで記事にしました。 React: React Router v6 でルーティングする step１ React: React Router v6 でルーティングする step２ 環境 vite: v2.7.2 node: v16.13.2 react: v17.0.2 typescript: v4.4.4 react-router-dom: v6.2.1 プロジェクト作成 ビルドツールViteを使用してプロジェクトを作成しています。

React + Typescript + MUIv5 + React Hook Form で開発環境を作成しています。 今回は React Hook FormでValidationライブラリをどれにするか? について調査しました。 React Hook Form が標準で対応しているライブラリ React Hook Form が標準で対応しているライブラリは以下の10個になります。 正確には React Hook Form で 外部の検証ライブラリを使用する為に @hookform/resolvers が必要なのですが、この @hookform/resolvers が標準対応しているライブラリが以下の10個になります。 その他のライブラリもカスタムリゾルバを構築して使用できます。 class validator https://github.com/typestack/class-vali

Vite + React + TypeScript 環境で MUI v5 を使用しています。 今回は MUI v5 の Theme についてTips的にまとめてみました。 テーマをアプリケーション全体に適用する Light モードと Dark モードを切り替える テーマの色を変更する テーマを一部のコンポーネントに適用する 適用されているテーマの一部を変更したテーマを作成し、一部のコンポーネントに適用する テーマに欧文フォント・日本語フォントを追加する テーマに独自のカラーキーワードを追加し、ボタンで使用する Themeの基本 デフォルトテーマ MUI には Light モード用のデフォルトテーマと Dark モード用のデフォルトテーマが用意されています。 それぞれのテーマに設定されている値などは 公式: Default Theme で確認できます。 テーマをアプリケーション全体に適用する

React調べること多すぎ・・・🤯 今回はReactのCSSスタイルついて調べてみました。 まとめ いきなりまとめです。 ReactのCSSスタイルについての結論 これといった正解はない。 将来どうなるかはわからない。 今のメンバのスキルセットで、使いたいものを使えばいいんじゃないだろうか？ ということで、React（Vite + TypeScript）のCSSスタイルについて調べて、Emotionに流れ着いた経緯と、Emotionの導入方法についての記事です。 主要なもの 2022年2月24日時点で、ザクっと調べた主要なものです。 マイナーなものを含めるともっとありますが、今回は主要な以下の8つから選択します。 Inline Styles Css Modules Styled JSX Styled Components Emotion Linaria Tailwind CSS Wind

2022年01月28日 Windows11での情報です。 今回はReactでのルーティングについてです。 ルーティングとはリクエストされたURLに応じて処理を振りわけることです。 Reactでルーティングを実装するには、React Routerライブラリを利用するのがスタンダードなようです。 環境 vite: v2.7.2 node: v16.13.2 react: v17.0.2 typescript: v4.4.4 react-router-dom: v6.2.1 React Router v6 React Router は現在の最新はv6です。 v5とは書き方が変わったようですので、検索する際はバージョンの確認が必要です。 公式サイト React Router v6 をインストール まずはReact Routerをインストールします。 vscodeのターミナルで下記のコマンドを実行し

2022年02月04日 Windows11での情報です。 今回は、Viteで作成したReact（TypeScript）プロジェクトにEsLintとPrettierを導入していきます。 いろいろな記事がありましたが、何をインストールして、どう設定すればいいのか？ かなり混乱したので、記事にまとめておきます。 環境 vite: v2.7.2 node: v16.13.2 react: v17.0.2 typescript: v4.4.4 Reactプロジェクト作成 まずはReact（TypeScript）新規プロジェクトの作成からです。 既存のプロジェクトにEsLintを導入するとエラーで真っ赤になって心が折れちゃうので、新規プロジェクトにEsLintを導入します。 Viteで作成しています。 （create-react-appで作成している場合は導入方法が違うのかもしれません。） Viteで

前回 React の テスト方針を調べたでテスト環境について調べました。 今回は、Vite + React + TypeScript + EsLint + Prettier に テスト環境を Jest + Testting Library を ステップbyステップで作っていきます。 環境作成 まずは Viteを使って、React + TypeScript を作成し、EsLint + Prettier を導入した状態までのプロジェクトを用意します。 環境作成の詳細 Viteを使用したアプリの作成方法 → 参考 EsLint + Prettier の導入方法 → 参考1、参考2 環境作成用のコマンド Viteを使用してReact(TypeScript)アプリを、「testsample-app」というアプリ名で作成します。 npm init vite testsample-app -- --te

今回は「Reactでテスト環境を作ろうっ！」と思ったのですが、そもそもReactのテストってどうするの？どんなツールを使うの？ということで、まずはReactのテストについて調べてみました。 Reactのテスト Vitest Vue.jsやViteの開発者が作っている高速で動作するテスティングフレームワークです。 2022年2月16日現在 v0.3.5でまだ開発版です。 GitHubにも「免責事項：Vitestはまだ開発中であり、安定したものではありません。実運用での使用はお勧めしません。」とあります。・・・残念😭 Jest + React Testing Library Reactの公式サイトによると Jest + ReactTestingLibrary が推奨のようです。 JavaScript テスティングフレームワークです。 React コンポーネントをテストすることができるツールセ

今回は、React.lazyを使って、グループ単位でバンドルファイルを分割する方法です。 React公式　ルーティング単位でコード分割する方法 目的 アプリが大きくなると、ビルドで作成されるバンドルファイルのサイズが大きくなって アプリの初期ロード時に、モジュールの読み込みに時間がかかってしまいます。 この初期ロード時のモジュールの読み込み時間を短縮する方法として、バンドルファイルを分割し、初期ロード時は必要なもののみ読み込み残りはユーザーが必要なときに遅延読み込みします。 ページ単位でコード分割すると、バンドルファイルの数が多くなりすぎます。 また分割したバンドルファイルが必要になった時、モジュールを読み込む時間が発生します。 一度読み込んだモジュールはキャッシュされるとはいえ、ページ単位でモジュール読み込みが発生すると、SPAの軽快な動作に支障が出ます。 ページ単位では粒度が小さすぎる

2021年11月14日時点のWindows10での情報です。 前回は 「 Node.jsとは 」でNode.jsについて調べました。 今回はNode.jsをインストールしていきたい・・・・ところですが、 その前に、 Node.jsのバージョンの切り替え方法を、どうするか決めておく必要があります。 Node.jsのバージョンの切り替えをどうするか 実際の開発では、システム単位でNode.jsのバージョンが変わります。 たとえば 少し前にリリースしたWebサービスの保守作業のときは、Node.js 12.xx.xxでビルドする。 現在、新規作成中のWebサービスは、Node.js 16.xx.xxでビルドする。 といった具合に、実際の開発では結構頻繁にNode.jsのバージョンの切り替えが発生します。 Node.jsのバージョンを切り替える方法としては、主に以下のような方法があります。 Nod