Reactで社内向けUIライブラリ開発・ビルド・公開・布教入門【2024年】
会社で複数の新規事業を立ち上げる機運が高まったことをきっかけに社内向けUIライブラリを開発し、限定公開して利用を始めました。 本記事ではReactで社内向けUIライブラリを開発・ビルド・公開・布教するためのアレコレを共有します。 以下のような話題について知りたい方に特に読んでほしいです。 Private Packageの作り方、配布の方法のイメージがつかない方 CommonJSとES Modules、今はどちらでビルドするのがいいのか知りたい方 ライブラリの作り方について網羅的に知りたい方 前提 利用側のアプリケーションはNext.js固定を前提とする Tailwind CSSを内部的には利用する 利用側のアプリケーションはパフォーマンス（Lighthouseスコア）重視することが多い 社内の様々なレベルのエンジニアがContributeする可能性がある 端的に言うと、社内のプライベートリ
React Libraries for 2024
Follow on FacebookReact has been around for a while. Since then, a well-rounded yet overwhelming ecosystem of libraries evolved around the component driven library. Developers coming from other programming languages or libraries/frameworks often have a hard time figuring out all the libraries for creating web applications with React. At its core, React enables one to create component-driven user i
【2023年】SWR & TanStack Query比較
はじめに 今回はSWRとTanStack Queryの比較によってそれぞれの特徴と違いを整理したいと思います。背景としてネット上にある両者の比較記事は2022年以前のものが多く、当時に比べSWR2.0がリリースされたことなどで比較の観点が変化したように感じました。改めて整理することで技術選定の参考になればと思います。 前提 今回は以下のバージョンを前提にします。（2023/08/26時点でLatest） SWR v2.2.0 TanStack Query v4.34.0 また、私自身はTanStack Queryを業務で1年ほど扱ったことがありSWRは全く経験がない状態です。この記事はどちらが優れているかを示すためのものではなく、あくまで客観的に比較することを目的にしています。 目次 ここでは以下の3つの観点から比較を行い考察をします。 interfaceでの比較 機能面での比較 キャッシ
ブラウザバックで壊れないstate管理を実現する`location-state`
この記事は最近リリースしたlocation-stateというライブラリの紹介記事です。 モチベーション Reactのstate管理は、様々な分類が可能です。筆者が過去に書いた記事「スコープとライフタイムで考えるReact State再考」では、stateの分類は大きく以下2つの観点で分類ができると述べました。 スコープによる分類 ライフタイム（=stateの生存期間）による分類 詳しく知りたい方はこの記事を読んでいただきたいのですが、今でもstate管理というと多くの場合スコープによる分類の話が多く、ライフタイムによる分類の話はあまり聞かない気がします。 なぜライフタイム観点が重要か ライフタイムを意識せずに実装した場合に発生するのが、遷移時に状態が破棄され復元されない、つまりブラウザバックでstateが壊れるという問題です。この問題については以下の記事で、Vercelの社長が2014年に
Introducing auto-triage rules for Dependabot
ProductSecurityIntroducing auto-triage rules for DependabotMake quick work of alerts with preset and custom rules. Since the May beta release of our GitHub-curated Dependabot policies that detect and close false positive alerts, over 250k repositories have manually opted in, with an average improvement of over 1 in 10 alerts. The impact so far: auto-dismissal of millions of alerts that would have
ひよっこエンジニアが Node のアップデートに立ち向かったら Zod でハマった話
はじめに 駆け出して約１ヶ月ほどのひよこエンジニアです。 Vercel の以下のアナウンスを受けて、社内のフロントエンド開発で利用している Node.js を v14 から v18 にアップデートしましたので、そのときにやったことやハマったことを簡単にまとめていきます。 方針 そもそも Node.js をアップデートするときに同時に考慮すべき問題としては、OS 起因の問題や Node.js Runtime 由来の問題など様々あります。 が、だいたいは 「プロジェクトで利用しているライブラリの問題」 にぶつかることが多いです。（以下記事など参照。また今回担当しているプロジェクトでは Docker イメージを用いていたため OS 起因の問題などは起こり得ない。） そのため、基本的には 「依存ライブラリの更新」 をメインで進めていくことにしました。 ただとはいえ 「とりあえずyarn upgra
You Don't Need Rails to Start Using Hotwire
You Don't Need Rails to Start Using Hotwire Although Hotwire is closely tied to Ruby on Rails, you might be surprised to know that you don't really need Rails to learn, play, and experiment with Hotwire. In this article, we'll build a simple static site that uses Turbo Drive + Frames to make it responsive and use Streams to make it dynamic. Update: I originally published this post few months ago,
Typescript Runtime Validators and DX, a type-checking performance analysis of zod/superstruct/yup/typebox
Typescript Runtime Validators and DX, a type-checking performance analysis of zod/superstruct/yup/typebox Preface In 2023, Typescript is rarely questioned as an important tool for modern JavaScript developers, but one of its biggest limitations is the lack of added runtime type safety, particularly when dealing with IO at the boundaries of your application. To solve this problem a number of popula
Prisma Client Just Became a Lot More Flexible: Prisma Client Extensions (Preview)
Prisma Client extensions (in Preview) enable many new use cases. This article will explore various ways you can use extensions to add custom functionality to Prisma Client. Table Of Contents Introduction Using Prisma Client extensions The components of an extension Sharing an extension Sample use cases Example: Computed fields Example: Transformed fields Example: Obfuscated fields Example: Instanc
LernaとGithub Actionsでmonorepoライブラリのリリースを楽にする - Link and Motivation Developers' Blog
プラットフォームチームの菊池です。 弊社ではフロントエンドの共通コードを社内ライブラリにして開発しています。 https://link-and-motivation.hatenablog.com/entry/2022/08/10/152852 しかしライブラリのリリースが手動で行われていたため、問題が起きていました。 今回はリリース自動化にあたって、採用した方針と方法について紹介したいと思います。 背景 現状のリリースフローは以下のようになっていました。 リリース作業者がローカルでビルドする リリース作業者がローカルでバージョンを打つ リリース作業者がローカルから社内npmレジストリ（Github Packages）にpublishする 実際のコマンドとしてはこのような感じです。 # ビルドする yarn build # 新しいバージョンを打つ yarn version # npmレジスト
Node.jsのツールで--cacheフラグを実装するためのライブラリを書いた
ESLint、Prettierなどは--cacheフラグという一度チェックしたファイルは、ファイルが変更されるまで再チェックしないキャッシュの仕組みを実装しています。 同様の仕組みをtextlintを実装したことはありますが、file-entry-cacheを使い結構煩雑な実装が必要になります。ファイル変更を元に処理結果をキャッシュする仕組みはある程度定型化されているのに、毎回同じような実装をツールごとに書くのは微妙だなと思ったので、ライブラリを書きました。 azu/file-cache: Node.js library that provide a cache for file metadata or file content. --cacheフラグの仕組み --cacheフラグの仕組みとしては、ファイルの内容のハッシュ値 or ファイルの更新時刻をキャッシュファイルとして保存して置きま
ブラウザ, Node, Cloudflareでも動くDenoモジュール開発
ブラウザだけでなく、非ブラウザなJavaScript（JS）処理系も増えてきたので、「主要ブラウザ、Node.js、Cloudflare Workersでも動くDenoファーストなTypeScript/JavaScriptモジュール開発＆CI/CD」をやってみました。一事例として共有します。 はじめに 最近、TypeScriptで hpke-js というモジュールをつくりました。 HPKE (Hybrid Public Key Encryption) というのは、ざっくり言うと、公開鍵を交換しあって共有鍵をつくり、安全にEnd-to-End暗号化をおこなうための規格です。これを Web Cryptography API 上に実装し、このAPIをサポートする複数のJS処理系（主要なWebブラウザ、Node.js、Deno、Cloudflare Workers）で動作保証する（ちゃんと全環境で
pzuraq | Four Eras of JavaScript Frameworks
April 25, 2022 Four Eras of JavaScript Frameworks April 25, 2022 I started coding primarily in JavaScript back in 2012. I had built a PHP app for a local business from the ground up, a basic CMS and website, and they decided that they wanted to rewrite it and add a bunch of features. The manager of the project wanted me to use .NET, partially because it’s what he knew, but also because he wanted i
How Jotai Specifies Package Entry Points
Introduction If someone has already looked into package.json in the jotai library, they may find "exports" field. https://github.com/pmndrs/jotai/blob/v1.6.4/package.json#L18-L31 "exports": { "./package.json": "./package.json", ".": { "types": "./index.d.ts", "module": "./esm/index.js", "import": "./esm/index.mjs", "default": "./index.js" }, "./utils": { "types": "./utils.d.ts", "module": "./esm/u
React 周辺ツールの React v18 サポート
方針 対応中のものは GitHub で watch できるようにできるだけ issue か discussion を貼る なにか見つけた情報あったら気軽に貼ってください！ 他にまとまっている情報
Node.jsのMySQLパッケージにおけるエスケープ処理だけでは防げない「隠れた」SQLインジェクション - Flatt Security Blog
※本記事は筆者styprが英語で執筆した記事を株式会社Flatt Security社内で日本語に翻訳したものになります。 TL;DR Node.jsのエコシステムで最も人気のあるMySQLパッケージの一つである mysqljs/mysql (https://github.com/mysqljs/mysql)において、クエリのエスケープ関数の予期せぬ動作がSQLインジェクションを引き起こす可能性があることが判明しました。 通常、クエリのエスケープ関数やプレースホルダはSQLインジェクションを防ぐことが知られています。しかし、mysqljs/mysql は、値の種類によってエスケープ方法が異なることが知られており、攻撃者が異なる値の種類でパラメータを渡すと、最終的に予期せぬ動作を引き起こす可能性があります。予期せぬ動作とは、バグのような動作やSQLインジェクションなどです。 ほぼすべてのオンラ
Replit — Ace, CodeMirror, and Monaco: A Comparison of the Code Editors You Use in the Browser
EngInfraAce, CodeMirror, and Monaco: A Comparison of the Code Editors You Use in the Browser I’ve been working on Replit for roughly six years now, and as the team has grown, I’ve focused on the IDE (what we call the workspace) portion of the product. Naturally, I was increasingly preoccupied with the code editor. While we’ve considered creating a code editor that meets our needs, the complexity i
2021 JavaScript Rising Stars
Welcome to the 6th edition of the JavaScript Rising Stars, our annual round-up of the JavaScript landscape. If you took a break to escape the JavaScript fatigue in 2021, you are in the right place! We'll be talking about meta frameworks, the need for speed and all-stars are joining forces at tech companies. But first, we have a new "champion" this year, that no one expected, and it's a command lin
react-router 作り方
history で自分だけの最強のルーターライブラリを作ろう！ react-router は history というライブラリを内部で使用しています。ブラウザの history API の抽象化を提供するのが目的のライブラリです。 react-router v5 の API に useHistory というカスタムフックがあります(v6 から名前が変更されています)が、それはまさに history ライブラリの実体を取得するための関数になっています。 ルーティングに関する以下の処理は history ライブラリ内部で行われています。 現在の URL から Location オブジェクトを作成する 履歴の操作を行う 履歴の変更を検知してコールバックを実行する react-router は React 用のインターフェイスを提供しているに過ぎません。 つまり、 history をベースに Re
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS in JSとしてVanilla-Extractを選んだ話と技術選定の記録の残し方
