Vitestを使ったコンポーネントテストのサンプルコードを紹介する

tsconfig.jsonのpaths設定でimport文にエイリアスを使えるようにしたものの、 tscでトランスパイルするとエイリアス形式のパスは変換されない パスの変換のためにtsconfig-pathsなどの追加ライブラリが必要で、ビルドコマンドが冗長になる jestなどはpathsを反映するために追加設定が必要 などで微妙な気持ちになってきたことはありませんか。 一度導入すると利用箇所が結構多くなってきて手動で戻すには大変すぎるし、まあ動いてるからいいか...みたいな。 そんな時のために自動で相対パスに戻せるeslintプラグインを作ってみました。 やめ方 @mkizka/eslint-plugin-relative-import を入れてeslint --fixするだけ。 設定は↓のような感じです。 // eslint.config.js import { relativeImp

UI の一部を非表示にする React の Activity コンポーネント React の新しい実験的なコンポーネントとして `<Activity>` が追加されました。これは UI の表示非表示を切り替えるために使用されます。従来の条件付きレンダリングとは異なり、アンマウントされた場合にも状態を保持する点が特徴です。 音声による概要 この音声概要は AI によって生成されており、誤りを含む可能性があります。 React の新しい実験的なコンポーネントとして <Activity> が追加されました。これは UI の表示非表示を切り替えるために使用されます。 import { unstable_Activity as Activity } from "react"; function App({ isVisible }: { isVisible: boolean }) { return (

2025.04.24 Thu. SmartHR AI tech talk#2 ── コード生成×AI 現場のリアル で登壇した際のスライドです

バレンタインデーにおける、いわゆる「義理チョコ」で渡すものといえば？ 手作りのガトーショコラスポーツドリンク何も渡さない板チョコ

Notionは全てのオブジェクトをブロック構造で管理してるので、AIリーダブルではないんですよね。その複雑さをUIで完璧に隠蔽しているのが美しかったしデファクトとなった所以だと思ってるけど、なんとAI時代と相性が悪かった。 https://t.co/zZvTnKtJvF — いけぴ / Takahiro Ikeuchi (@iktakahiro) April 26, 2025 なんとなく、あれ、最近のNotionってなんか使いにくい？と感じている人が増えてきているようなのだけど、じつはAI時代においてNotionの強みが打ち消されてしまってきているという話だと思っているので、その解説記事を書く。 最初に結論なぜNotionはAI 時代の勝者とならないのか、という問いに最初に答えると、次のようになる。 NotionのBlock構造がAIへの知識供給の妨げになっているから 成果物とドキュメント

Mita.ts #5 https://mitats.connpass.com/event/340678/ での登壇資料です。

2025年度 traP新歓オリエンテーションのLTで発表した内容です。5分のLTなので1章のみを話しました。

深爪 @fukazume_taro 「有線イヤホン＝エモがってる、貧乏」みたいなイメージがあるらしいけど、いくらボロクソ言われようが、失くしたはずのメンタムリップがカバンの中から３つ出てきたりさっきまで手に持ってたスマホが突然消えたりが日常茶飯事な人間に無線イヤホンは無理。 2025-04-23 13:26:54 ウリ坊主🍙キャリア応援🍙 @uribowz46 分かり過ぎてヘドバン。 有線イヤホンは、エモいとか、好きとか、嫌いとかの選択ではなく、『失くさないから』🤗 手のひらサイズの物は、目を離すと直ぐに失くなる。 「消しゴム」、「目薬」、「薬用リップ」、「ハサミ」、「自転車のカギ」失くしては買いを繰り返し、売るほどあります😆 x.com/fukazume_taro/… 2025-04-24 08:41:06 広田尚輝 @raimg43 いやマジでそれ。 時代に逆行してるけど此方と

April 10, 2025 Rspack joins the Next.js ecosystem# One of Rspack's primary goals is to seamlessly integrate with webpack-based projects or frameworks, providing an enhanced development experience with minimal migration costs. In the JavaScript ecosystem, Next.js has one of the most advanced build systems, with deeply customized webpack configurations and a rich plugin ecosystem. This made it an id

With incoming laws like the European Accessibility Act taking effect in June 2025, teams are scrambling to ensure their UIs are accessible. Storybook is here to accelerate your path to WCAG compliance. I’m thrilled to share a sneak peek of Storybook 9’s updated accessibility workflow, including a redesigned addon, automated checks in CI, and more. You’ll also get the chance to sign up for early ac

"use client"; import { parseAsInteger, useQueryState } from "nuqs"; export function Demo() { const [hello, setHello] = useQueryState("hello", { defaultValue: "" }); const [count, setCount] = useQueryState( "count", parseAsInteger.withDefault(0), ); return ( <> <button onClick={() => setCount((c) => c + 1)}>Count: {count}</button> <input value={hello} placeholder="Enter your name" onChange={(e) =>

スライド概要 2025年3月13日(木)に実施された、ファインディ株式会社主催の「E2Eテスト自動化の事例4選 ~Playwright活用編~」で発表したLT資料です。

こんにちは、SmartHRでプロダクトエンジニアをやっている @Tokky0425 です。 みなさんは普段組織で働いていますか？僕は組織で働いています。 組織で働くにあたって便利なもの、ありますよね。そう、組織図です。 SmartHR にも組織図の機能があるのですが、部署数や従業員数が多いとブラウザ上での操作が重くなってしまうという問題がありました。 最近「数万人規模の組織図での 60fps」を目指してこの組織図機能の描画パフォーマンス改善を行ったので、その中で実践したフロントエンド開発における大量描画処理の Tips を共有します。(React を前提としています) そもそも問題はどこにあるのか 最近まで、SmartHRの組織図機能は数万人規模の企業で十分に使えるような作りになっていませんでした。というのも、対象従業員数が数万人を超えてくると、いろんな操作が著しく重くなり、実用に耐える操

こんにちは。プロダクトエンジニアのnakanotです。普段は組織図・分析レポート・従業員サーベイの開発を担当しています。 「この画面、ちょっと遅いな…」 そんな違和感から始まるRailsアプリのパフォーマンス改善、皆さんも経験あるのではないでしょうか？ 私が担当しているプロダクトでは、ありがたいことにユーザー数も増え、パフォーマンス課題が発生することが増えてきました。 実際にパフォーマンス改善に取り組む中で「ここ気をつけると結構変わる」「こんな感じで解決している」というポイントが見えてきたので、この記事ではそれらをTips集としてまとめてみました。 明日から使える実践テク、ぜひチェックしてみてください！ 目次 目次 ActiveRecord関連 ActiveRecordをむやみにインスタンス化しない ActiveRecord::Relationに対してデータの存在確認をする場合は exis

AIエージェントユーザー会・オフ会（第1回）でお話しした内容です https://ai-editor-users.connpass.com/event/347707/

tsconfig.json を使うと、型チェックを緩く/強くしたり、また出力する JS の形式を変えたりできる。しかしいくつかの事情から、正しく書くのが難しい。 オプションの数が非常に多い その数なんと 133 個 *1 オプションの意味や役割が理解しにくい 公式ドキュメントは丁寧にかかれているが... JavaScript や TypeScript の仕様、型の知識、歴史的経緯などを知らないと理解しづらい 推奨されるオプションが変わっていく 言語やエコシステムの進化/変化によって変わる 最近だと Node.js の TypeScript サポートで変わった 「オプションの細かい意味とかは一旦いいから、モダンで最小限の tsconfig.json がすぐに欲しい！！！」。そうした声に応えて、id:mizdra がオススメする「4 ステップでモダンな tsconfig.json を作る方法」

2025/03/28 ゆめみ ✖️ カミナシのフロントエンドLT会 React Server Componentは 何を解決し何を解決しないのか osuzu ソフトウェアエンジニア