Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

制作

Playwrightを使ってVRTを始める

参照したページ 公式ページ Installation | Playwright Visual comparisons | Playwright その他 入門者でも安心、Playwrightで驚くほど簡単にブラウザテストを行う | アールエフェクト Playwright で一番小さく始める VRT と、次のステップの選択肢 - Speak…

Uncaught ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined を解決する

参照したページ コンパイル時フラグ | Vue.js vue.js - ReferenceError: __VUE_PROD_DEVTOOLS__ is not defined - Stack Overflow 環境 私の環境で今回の件に関係ありそうなパッケージのバージョンは以下の通りです。 webpack: 4.46.0 vue: 3.4.21 vue-route…

Railsのsystem spec (Capybara)でJavaScriptのconsole.logを出力する方法

参照したページ Capybara+ChromeでJavaScriptのエラーを出力 #Rails - Qiita gem のバージョン gem 'selenium-webdriver', '~> 4.11.0' gem 'capybara', '>= 2.15' 出力する方法 以下のように書くと出力されました。 puts page.driver.browser.logs.get(:bro…

Vue2からVue3への移行作業で出た Failed to resolve component: router-view If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. を解決する

解決方法 以下のようになっている router プロパティを import { createApp } from 'vue'; import router from './router.js'; import App from './app.vue'; const app = createApp({ router, components: { App, }, }); app.mount('#app_regular_users_cre…

Vue2からVue3への移行作業で出た Error: Provide the "history" option when calling "createRouter()" を解決する

参照したページ [Solved] Uncaught Error: Provide the “history“ option when calling “createRouter()“ | ProgrammerAH javascript - Failed to resolve component <router-view> VueRouter - Stack Overflow 概要 vue-router を使っているアプリケーションを移行する際</router-view>…

端末を買い替えたときなどにさくらVPSのサーバーに新しい端末の公開鍵を追加する

参照したページ SSH公開鍵認証メモ #Linux - Qiita はじめに Macの端末を買い替えたりして、新しい端末の公開鍵を追加したときのメモです。 ログインする方法の選択 以下のいずれかの方法でログインできます。 ssh ログインできる端末のターミナルでログイン…

Jestを実行したときに Object.values の記述箇所で TypeError: Cannot convert undefined or null to object at Function.values (<anonymous>) になったので修正する

解決したいこと HOGE は定数で import しているのに、以下のような感じでテストが失敗しました。 このテストが失敗しているファイルを example.tsx とします。 ● Test suite failed to run TypeError: Cannot convert undefined or null to object at Functi…

Jestを実行したときに Error [ERR_REQUIRE_ESM]: require() of ES Module になったので解決する

参照したページ Jest の実行環境のサンプル Jestでテストを書こう | TypeScript入門『サバイバルTypeScript』 はじめましょう · Jest yarn upgrade について yarn upgradeのあれこれ #CLI - Qiita Error [ERR_REQUIRE_ESM]: require() of ES Module の解消に…

JavaScriptの浮動小数の丸め誤差について調べたことの備忘録

参照したページ IEEE 754 - Wikipedia JavaScriptにおける丸め誤差と対応 JavaScriptの浮動小数点数型の誤差をなくす | 株式会社CONFRAGE ITソリューション事業部 「0.1+0.2≠0.3」を説明できないエンジニアがいるらしい #Python - Qiita "「0.1+0.2≠0.3」だ…

@ant-design/charts 1.4.2 でチャートを作るオプションのメモ その0001

参照したページ @ant-design/charts の GitHub リポジトリ GitHub - ant-design/ant-design-charts: A React Chart Library Ant Design Charts 1.x の公式ドキュメント https://ant-design-charts.antgroup.com/examples G2, G6, X6, L7 の公式ドキュメント …

Object.keys()の返り値をstring[]型でなくユニオン型の配列にしたい

参照したページ 【TypeScript】Object.keys() の返り値をstring[]型でなくユニオン型の配列にしたい 関数を定義して解決する 以下のようにするとkeysは ("hoge" | "foo" | "baz")[] 型になります。 const obj = { hoge: 'value', foo: 'value', baz: 'value'…

useEffectが依存しているstateの前回の値を取得する

参照したページ 前回の props や state はどうすれば取得できますか?: フックに関するよくある質問 – React サンプルコード const [hoge, setHoge] = React.useState(''); const [prevHoge, setPrevHoge] = React.useState(''); React.useEffect(() => { re…

Chart.js 4.4.0でレスポンシブなチャートを作るときに参考になりそうなオプションのメモ

参照したページ Chart.js 公式ドキュメント latestバージョンのドキュメント: Chart.js | Chart.js 4.4.0のドキュメント: Chart.js | Chart.js jsDelivr chart.js CDN by jsDelivr - A CDN for npm and GitHub pluginの作り方 Plugins | Chart.js Chart.js 2…

MacでPATHを通す( npmでインストールしたyarnにpathを通す )

参照したページ MacでPATHを通す .bash_profileの作成と編集 - Motomichi Works Blog はじめに まず前提として、 brew を使って nodenv をインストール済みです。 nodenv を使って node をインストール済みです。 例として npm で yarn をインストールして p…

Next.jsのアプリケーションにnice-modal-reactを導入してみる

参照したページ GitHub - eBay/nice-modal-react: A modal state manager for React. 今日の環境 ebay/nice-modal-react: 1.2.10 next: 13.4.4 はじめに Next.jsのアプリケーションにnice-modal-reactを使って、実用的なモーダルを実装していきます。 Next.j…

iPhone 12 miniの画面のピクセルサイズ

はじめに 自分の備忘のためですが、iPhoneの画面幅を検索するとページによって書いてある数値が違ったので手元にある実機で調べてみました。 幅と高さ 機種 幅 高さ(アドレスバー表示時) iPhone 12 mini 375px 629px iPhone 14 390px 664px

Next.jsでuseEffectのクリーンアップ関数はクリーンアップのために使うという当たり前の話

参照したページ フックに関するよくある質問 – React 前回の props や state はどうすれば取得できますか? Hooks時代のReactライフサイクル完全理解への道 はじめに この記事は個人的な学習記録です。 useEffectのクリーンアップ関数の駄目な使い方について…

React.memoで子コンポーネントの再描画を抑制する

関数コンポーネントの再描画とは 関数が実行されて、HTML文書構造をreturnすることで、対象のDOMが再描画されます。 関数コンポーネントが再描画(再実行)されるタイミング 以下のようなときに再描画(再実行)されます。 stateが変化した時 propsが変化した時 …

dockerを使ってOpenAPIのファイルからコードをgenerateする | openapitools/openapi-generator-cli

参照したページ CLI Installation | OpenAPI Generator ディレクトリ構造の例 この記事では、カレントディレクトリに local ディレクトリがある以下の構造を想定しています。 ./ └── local └── sample.yml sample.yml の記述内容は、OpenAPIのフォーマットに…

@radix-uiのコンポーネントにstyled-jsxでスタイル適用をしてみる

参照したページ Introduction – Radix UI はじめに スタイルが適用されていないヘッドレスなUIライブラリが流行ってきているみたいなので、ちょっと @radix-ui を使ってみます。 スタイルを適用してみる 試しにSwitchコンポーネント( Switch – Radix UI )に…

@mui/baseのコンポーネントにstyled-jsxでスタイル適用をしてみる

参照したページ Overview - Base UI はじめに スタイルが適用されていないヘッドレスなUIライブラリが流行ってきているみたいなので、ちょっと @mui/base を使ってみます。 2023年4月17日現在では、まだ @mui/base はalpha版しか無いようです。 そのまま使っ…

Reactで使えるUIライブラリについてちょっと調べる

参照したページ まとめ記事 UIライブラリの「機能」は欲しいけど「見た目」はカスタマイズしたいを叶えるRadix UI | microCMSブログ コンポーネントベース Primitives – Radix UI Overview - Base UI Headless UI - Unstyled, fully accessible UI component…

OpenAPI (Swagger) に少しだけ入門してmock dataを返すAPIサーバーを起動してみる

参照したページ API Documentation & Design Tools for Teams | Swagger Installation | Prism OpenAPI (Swagger) まとめ - Qiita OpenAPI仕様(Swagger仕様)とは swagger.ioの公式ドキュメント( https://swagger.io/docs/specification/about/ )には以下の記…

Next.js13の開発環境構築手順 step04 lint-stagedとhuskyを設定する

lint-stagedとhuskyをインストールする 以下のコマンドを実行します。 yarn add --dev lint-staged husky huskyをセットアップする 「 husky | husky」に倣って、以下の通り実行しました。 npx husky-init && yarn このとき、package.jsonとyarn.lockが更新…

Next.js13の開発環境構築手順 step03 css-in-jsとstylelintを設定する

はじめに Next.js13の開発環境構築手順 step03 をやっていこうと思います。 emotionやlinariaもCSS in JSのパッケージとして候補でしたが、Next.jsに組み込まれているstyled-jsxを使うことにしました。 以下のようなことを前提としてCSS周りの技術選定をして…

VSCodeのsettingsの項目について調べる

はじめに VSCodeの設定項目についてよくわからずにやっている部分が多いので、自分がよく使用している項目を中心に公式ページで調べてみようと思います。 この記事で例として書いているのは、個人的によく設定している値などで、VSCodeの初期値ではありませ…

Next.js13の開発環境構築手順 step02 eslintとprettierを設定する

はじめに Next.js13の開発環境構築手順 step02 をやっていこうと思います。 Next.jsのベーシックな設定を確認する Next.jsのベーシックなESLintの設定を確認するために、まずは以下のドキュメントを読みました。 Configuring: ESLint | Next.js eslint-confi…

lint-stagedとhuskyを使ってgit commitする前にeslint、stylelint、prettierを実行する

参考にさせていただいたページ Husky - Git hooks Basic Features: ESLint | Next.js lint-staged + husky でコミットするファイルだけ cspell を走らせる Next 12 で ESLint, Prettier, husky, lint-staged の環境構築 ++ Gaji-Laboブログ はじめに lint-st…

VSCodeでstyled-jsxの入力補完をする

参照したページ シンタックスハイライト identifier: blanu.vscode-styled-jsx 参考リンク: styled-jsx - Visual Studio Marketplace 入力補完 identifier: Divlo.vscode-styled-jsx-languageserver 参考リンク: styled-jsx Language Server - Visual Studio…

Next.js13の開発環境構築手順 step01 yarn create next-app --typescript

はじめに 2023年3月時点での自分のためのメモとして、Next.jsの環境構築手順をまとめてみます。 かなり長くなるのでいくつかのstepに分けて書いていきます。 環境 主に以下のような環境でNext.js 13の環境構築を行なっていきます。 CSSを書くにあたってNext.…