特定のスクリーンサイズを起点に JavaScript で何かするための方法

特定の画面幅を基準に処理を分ける方法を3つ紹介します Window resize event を利用する まず紹介するのは Window resize event を使った方法です。 Window: resize event - Web APIs | MDN DEMO codepen.io 実行頻度に注意する 最も古くから利用されてきた…

Vue CLI v4 を使ってマルチページアプリケーションを作るための設定方法

やりたきこと SPA (Single Page Application)ではなく、画面ごとにエントリーポイントを指定したい(画面ごとに静的 HTML を出力したい)場合。 インストールとプロジェクトの作成 インストール npm install @vue/cli 新規プロジェクトの作成 vue create YOUR_…

OBS Studio を仮想カメラとして使う

Mac で OBS Studio を仮想カメラとして使う OBS Studio OBS Studio はビデオレコーディングやライブストリーミングのためのオープンソースソフトウェアで、無料で使えることができます。 Video Capture, Text, メディア、ブラウザ、など複数のソースを自由に…

Apple Watch を2週間使ってみた感想

スマートウォッチは Pebble Time Rounded を愛用していたのですが、最近は充電がうまくできなくなっていたり新しい文字盤やアプリのダウンロードができなくなってしまったため、ずっとカートに入ったままだった Apple Watch に買い換えてみました。 この記事…

QA Wolf を使ってブラウザテストしてみる

QA Wolf ブラウザテストを作成 、実行できるツールです。 https://www.qawolf.com/ ブラウザ操作からリアルタイムで Jest のテストコードを作成してくれるのが特徴で、ブラウザの自動操作には Playwright が使われています。 github.com この記事では QA Wol…

typescript-plugin-styled-components 導入メモ

Styled Components を適用したコンポーネントは sc- からはじまるクラス名が HTML に付与されます。 どこで定義されているコンポーネントなのか確認したいとき、そのままだとちょっとわかりにくいです。 React Dev tool から確認してもコンポーネント名は表…

Jest Styled Components メモ

Styled components を使ったコンポーネントをテストする場合、どのスタイルが変更されたかの検知はできません。 例えば、下のような styled components で作成されたボタンを Jest の snapshot 機能 + react-testing-library でテストすることを考えてみます…