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

タグ: フロントエンド開発

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

公開:
React + vite + vitest(+ Happy DOM)のフロントエンドプロジェクトに初挑戦、SVGの参照にReactコンポーネントとしてのインポートを可能にするvite用プラグインvite-plugin-svgr(実体はSVGR)を利用したところ、vitest実行で次の警告が報告されました。…
エントリを表示

シャドウDOMを使わないLitElementでslot要素を使う方法

公開:
Lit、というかウェブコンポーネントには子要素を指定位置に再配置するためのslot 要素という機能があります。これはシャドウ DOM用のため、thisを返すcreateRenderRootメソッドを定義するなどして普通に DOM にレンダリングするようにしたLitElementでは機能しません……そのままでは。…
エントリを表示

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

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

LitでVue.js 2.xコンポーネントを置き換えた話

公開: / 最終更新日:
Lit + Deno + Packup でお手軽に Web Components 定義で記した通りLitのコンポーネントが開発できるようになったので、前回の更新ではブログ部分のVue.js 2コンポーネントを Lit コンポーネントに置き換えて Vus.js 依存を解消しました。Lit の使いかたがすこしわかってきたので、把握した注意点をメモとして残しておきます。
エントリを表示

Lit + Deno + Packupでお手軽にWeb Components定義

公開: / 最終更新日:
IE サポート終了Web Componentsもいよいよ実用フェーズかと Web Components 開発用ライブラリLitのドキュメントに目を通していて、これはDenoを使えばお手軽なのでは?とひらめき試してみたところあっけなく成功したので共有。
エントリを表示

Parcel 2とJestを組みあわせるときはBabelの設定を分離する

公開:
Parcel は便利、でも Jest を使うなら……の続き。 バージョン 2 リリースまで長い停滞期間のあったParcel、最近は開発が活性化しています。 バージョン 2 になって取りあつかいがおおきく変わったのがBabelの設定。 presets での @babel/preset-env や @babel/preset-typescript 、 @babel/preset-react の指定は Babel の設定としては定番ですが、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 の日本語の情報はほとんど見かけないのでちょっとメモ。…
エントリを表示

Parcelは便利、でもJestを使うなら……(追記あり)

公開: / 最終更新日:
working-time-aroundではバンドラーにParcelを採用しました。試してみたかった、設定作業はしないに越したことがない、というのがその理由。実際に試してみるとなんにも準備せずに実行できる手軽さは圧倒的ですね。手放しでほめたくなります……が、ちゃんと開発するにあたってはおおきな落とし穴が。 Jest使いはじめて気がついたのですが、Jest はbabelと協調して動くので、Parcel では不要な babel の設定も Jest 用に用意しないといけないのでした……だったら…
エントリを表示

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 まで順調に版を重ねているので問題なかろうと判断してのこと。しかしこれはちょっと時期尚早で、まだまだ気軽に使うというわけにはいきませんでした。以下覚え書き。…
エントリを表示

Microsoft Edge Legacyのfetch API実装は2018年10月の時点では問題あり

公開: / 最終更新日:
2022-10-17(Mon)追記: 2018 年公開の本エントリの指摘対象はいわゆる Edge Legacy で Chromium ベースの 2022 年現在の Edge にはあてはまらないため、タイトルを「Microsoft Edge の fetch API 実装は現在のところ問題あり」から変更しました。 ここのところ業務ではしばらく Single Page Application(SPA)と Web API で構成された Web アプリケーションを開発しています。担当は主に SPA 側。最近は SPA も Internet Explorer のようなレガシーブラウザを相手にしなければ特に課題となるようなことはありません……とは残念ながらいかないのがつらいところ。問題になりがちなのはまたしてもマイクロソフト謹製のモダン(なはずの)ブラウザ、Edge です。…
エントリを表示

Material Design Liteのiframe処理をecho.jsで最適化する

公開: / 最終更新日:
Material Design Lite(MDL)は画像その他のリソースの有無をチェックし、存在しないときは非参照の表示が表に出ないよう調整します。そもそもこの機能がありがたいかは議論の分かれるところだと思うのですが(指定ミスに気づかない可能性が高まりますし)、対象のひとつである iframe 要素では別の問題も生じます。読みこみが二回発生してしまうのです。iframe 要素の参照先は比較的重いコンテンツになるので、これはありがたくない動作です。本来なら MDL が解決の方策を用意すべきだと思うのですが、残念ながら v1.3.0 の時点ではそうなっていません。
エントリを表示

Pick up work

最近のエントリ

アーカイブ

ブログ情報