気まぐれメモランダム / でたらめフィードバック

タグ: React

React AceをTesting Libraryでテストするときはフォーカスを明示設定すること

公開:
Tone.jsをベースにブラウザでのライブコーディングを可能にするlive tone、使えなくもないという感じにまではできそうなのでコード編集要素を標準のtextareaから高機能なコードエディタに変えることにしました。代表的なコード編集用コンポーネントと言えばCodeMirror、Ace、Monaco Editorあたりかと思いますが、今回は機能とサイズのバランスからAceを採用。React用のラッパーライブラリReact-Aceを使うことでtextareaからの置き換えも次を調整するだけで済みました。onchangeイベントハンドラの引数が標準と異なるので対応する幅と高さをwidthheight…
エントリを表示

React単体テスト実行時のSVGコンポーネント警告解消方法(vite + vitest編)

公開:
React+vite+vitest(+Happy DOM)のフロントエンドプロジェクトに初挑戦、SVGの参照にReactコンポーネントとしてのインポートを可能にするvite用プラグインvite-plugin-svgr(実体はSVGR)を利用したところ、vitest実行で次の警告が報告されました。(…)実害はありませんがノイズではあるので、解消を試みて次で解決できました。ユニットテスト実行時の置き換え用ダミーコンポーネント定義を任意の場所(jestのマナーに従うならsrc/__mock__/あたり)に保存します(…)SVGの参照をダミーコンポーネントに置き換えるエイリアスをvitestの設定で定義します…
エントリを表示

RMWCとminifyの組みあわせでMDCのCSSが失われたときの対応方法

公開:
こんな現象に遭遇するのは私くらいかなあと思いながらメモ。個人用勤怠記録 Web アプリWorking time aroundは次のサードパーティーライブラリ・ツールを利用しています。UI キットにRMWC。React で Google 謹製 Web 向け Material Design CSS フレームワークMaterial Components for Web(以下 MDC)を利用可能にするコンポーネントライブラリで、MDC に依存もともと使っていた Google 謹製のMDC Reactの開発が終了してしまったのでやむを得ず乗り換えたもの(乗り換えの顛末)バンドラーにParcel先日ライブデモ…
エントリを表示

RMWCでMDC Reactを置き換える

公開:
地味に間欠的に開発を続けている個人用勤怠記録 Web アプリWorking time around、開発の停止した Material Component for React(MDC React)をいつまでも使い続けるのもなあ、ということでMDC Web on other frameworksで紹介されているRMWC: React Material Web Componentsに置き換えました。RMWC の日本語の情報はほとんど見かけないのでちょっとメモ。グリッド関連のコンポーネント、一行のときは行(GridRowコンポーネント)を省略して列(GridCellコンポーネント)を直接書けるようになっているのですが、そのせいで複数行のとき…
エントリを表示

MDC React v0.15の全面採用は時期尚早(追記あり)

公開: / 最終更新日:
2020-01-19(Sun)追記:昨年 11 月にMDC-React is no longer under active developmentと宣言されていました。アップデートされないと思ったらそういうことだったのか……working-time-aroundでは UI ライブラリとしてMaterial Component for React(MDC React)を採用しました。バージョンは v0.15 とまだメジャーバージョンはリリースされていませんが、ベースとなるMaterial Component for the Webが今年二月に v1.0.0 リリース後 v3.2.0 まで順調に版を重ねているので問題なかろうと判断してのこと。しかしこれはちょっと時期尚早で、まだまだ気軽に使うというわけにはいきませんでした。以下覚え書き。…
エントリを表示

個人用勤怠記録Webアプリ"Working time around"公開

公開:
主に個人の勤怠記録を目的とした Web アプリケーション、"Working time around"を GitHub に公開しました。working-time-aroundWeb アプリケーションといいながらサーバーサイドの処理をまったく行わずデータはブラウザに保存する Single Page Application(SPA)なのでビルドを適当なホスティングサービスに置けばそれだけで動きます。ライブデモを Azure Storage に用意したのでどんなものかはそちらでおたしかめください。Working time aroundいまどきの Web アプリにもかかわらずスタンドアローンという点からもおわかりのように、本アプリは実用を目的したものというよりは私個人の学習成果のアウトプットという性格の強いものです。最近業務ではフロントエンドへのコミットばっかりなのですが、派生開発のシステムで動きの速いフロントエンドの最先端の動向を取りこんでいくのは容易ではなく、学習の成果はなかなか反映させられません。そんな中でスマートフォン用の勤怠システムやアプリの情報を収集する機会があり、アップデートされてないクライアントの数々を目にして、これくらいなら作っちゃえばいいのでは?と思ったのが開発のきっかけ。せっかくなので使いたい技術やパッケージをここぞとばかりに次のとおりぶち込んでみました。…
エントリを表示

Pick up work

最近のエントリ

アーカイブ

ブログ情報