2024-02-20のJS: ES2024 RC、typescript-eslint v7、React Compiler
JSer.info #681 - 2024年6月の正式公開に向けたES2024のリリース候補が公開されました。 Release ES2024 Candidate February 2024 · tc39/ecma262 ES2024では、次のような変更が含まれる予定です。 ArrayBuffer.prototype.resize ArrayBuffer.prototype.transfer RegExp v flag Promise.withResolvers Object.groupBy/Map.groupBy Atomics.waitAsync String.prototype.isWellFormed/String.prototype.toWellFormed 毎年2月ごろに仕様へ取り込むProposalが決まり、6月ごろのGA 127th meetingで最終的な承認を得る予定です
多言語化対応における TypeScript の型定義を通して開発のしやすさについて考えた - SmartHR Tech Blog
こんにちは、SmartHR でプロダクトエンジニアをしている @nabeliwo です。 今年の9月に SmartHR のログイン後のホーム画面がリニューアルされました。 【9/21更新】新しいホーム画面を公開しました | SmartHR｜シェアNo.1のクラウド人事労務ソフト この記事では、新しいホーム画面の実装の中で、開発者体験を損なうことなく多言語化対応を進められるよう、TypeScript の型定義を工夫した話をします。 まだまだ改善の余地がある状態ではあるのですが、私達のチームでの試行錯誤が読んでくれた方の参考になれば幸いです。 SmartHR の多言語化対応 SmartHR の既存のページではすでに WOVN.io というツールを使った多言語化対応が行われていました。 ただ諸々の理由があり1、新しいプロダクトでは自前で翻訳の仕組みを用意していこうとしています。 実際に、Smar
Using TypeScript – React
TypeScript is a popular way to add type definitions to JavaScript codebases. Out of the box, TypeScript supports JSX and you can get full React Web support by adding @types/react and @types/react-dom to your project. Installation All production-grade React frameworks offer support for using TypeScript. Follow the framework specific guide for installation: Next.js Remix Gatsby Expo Adding TypeScrip
React Native 0.71: TypeScript by Default, Flexbox Gap, and more... · React Native
Today we’re releasing React Native version 0.71! This is a feature-packed release including: TypeScript by defaultSimplifying layouts with Flexbox GapWeb-inspired props for accessibility, styles, and eventsRestoring PropTypesDeveloper Experience ImprovementsNew Architecture UpdatesIn this post we’ll cover some of the highlights of 0.71. infoFor a full list of changes, check out CHANGELOG.md. TypeS
TS 4.9 satisfies operator を使って React Router のナビゲーションを型安全にしてみる - Mobile Factory Tech Blog
BC チームでエンジニアをしている id:d-kimuson です 11月にリリースされた TypeScript 4.9 から satisfies operator が追加されました。satisfies operator が追加されたことで 「React Router でのナビゲーションを型安全にする」がやりやすくなったのでやってみました この記事で紹介するコードは TS Playground で試すことができます React Router v6.4 からオブジェクト形式でルーティングをかけるようになり、ルーティング宣言から型を拾いやすくなった React Router v6.4 から createXXXRouter のAPIが追加され、コンポーネントではなく、プレーンオブジェクトでルーティングを書けるようになりました import { createBrowserRouter } from
react-router v6.4 で比較的型安全なルーティングを実現することで管理を楽にする
import { BrowserRouter, ParamParseKey, Route, Routes, useParams } from "react-router-dom"; import User from "./pages/users/[id]"; import "./App.css"; import Top from "./pages/top"; export const PATHS = { TOP: "/", ABOUT: "/about", USERS_ID: "/users/:id", } as const; // これでクエリパラメータの id が取り出せる export const useParamsUsersId = useParams<ParamParseKey<typeof PATHS.USERS_ID>>; function App() { return (
React.ComponentProps 型を積極的に使おう
Atomic Design でいう Atoms に相当する、汎用コンポーネントについての小話です。次の様に Props 型定義を用意し、解説している記事をよく見かけます。<input />タグを使わずコンポーネント化している理由は style を施すためかと思いますが、このコンポーネントが受け取れる Props は限定的で、メンテナンスコストが高いためお勧めできません。 type Props = { value: string; onChange?: React.ChangeEventHandler<HTMLInputElement> onBlur?: React.FocusEventHandler<HTMLInputElement> } export const Input = ({ value, onChange, onBlur }: Props) => ( <input value=
2021-11-09のJS: React Router v6、Angular v13、ChromeのRecord and Replay、TypeScriptへの段階的な移行
JSer.info #565 - React Router v6がリリースされました。 React Router v6 | Remix React Hooksベースで再実装、<Route>のネストの扱いを改善、<Link to>の値に相対パスの解釈を<Route path>を基準にする変更などが含まれています。 合わせてReact Router v5からのマイグレーションガイドも公開されています。 React Router | Upgrading from v5 Angular 13がリリースされました。 Angular v13 is now Available. We’re back with the brand new release… | by Mark Thompson (@marktechson) | Nov, 2021 | Angular Blog Ivyがデフォルトとなったた
Designing a Dataflow Editor With TypeScript and React | Protocol Labs Research
This is a design report – a story about the tradeoffs and challenges that we encountered while building a medium-complexity React component in TypeScript. These include state modeling (“making illegal states unrepresentable”) basic type-level programming in TypeScript DX patterns for generically typed React components DX patterns for reusable controlled components using a Redux-like action/dispatc
DocBaseのフロントエンド改修をどのように進めたか
こんにちは、クレイの阪本です。 もともと外部委託パートナーとしてクレイ案件のお手伝いをしていましたが、気づけば中の人となっていました。 よろしくお願いいたします。 先日、DocBaseはフロントエンド構成を Backbone.js+Coffeescript から React.js+TypeScript へ移行しました。大改修です。 どれくらい大きな変更だったかというと、10万行(2500ファイル)もの変更が行われ、それまでRubyだったはずのリポジトリ代表言語がTypeScriptに替わってしまったほどでした。 なお、2021/3/31のリリースでリニューアルすべてが終了したわけではありません。今後、機能拡張やUI改善をしやすくするための足がかりという位置づけです。 安全にリリースするためテスト期間を多めに取ったこともあり、期間としては1年ほどかかってしまいました。 今回はどのようにリニュ
GitHub - contiamo/restful-react: A consistent, declarative way of interacting with RESTful backends, featuring code-generation from Swagger and OpenAPI specs 🔥
⚠️ restful-react has been deprecated: We are focusing on a new open api generator that generates react-query components: https://github.com/fabien0102/openapi-codegen ⚠️ Building React apps that interact with a RESTful API presents a set of questions, challenges and potential gotchas. This project aims to remove such pitfalls, and provide a pleasant developer experience when crafting such applicat
tRPC - Move Fast and Break Nothing. End-to-end typesafe APIs made easy. | tRPC
Move Fast and Break Nothing. End-to-end typesafe APIs made easy.Experience the full power of TypeScript inference to boost productivity for your full-stack application.
xstyled - A utility-first CSS-in-JS framework built for React. - xstyled
<x.div p={{ _: 3, md: 6 }} bg="white" display="flex" spaceX={4} alignItems="center" boxShadow borderRadius > <x.div flexShrink={0}> <img height={12} width={12} src="/logo.png" alt="xstyled" /> </x.div> <x.div> <x.h4 text={{ _: "md", lg: "xl" }} fontWeight="medium" color="black" > xstyled </x.h4> <x.p color="gray-500" text="sm" my={1}> A CSS-in-JS framework built for React. </x.p> </x.div> </x.div>
弁護士ドットコムライブラリーのフロントエンドのアーキテクチャ（Next.js + TypeScript） - パンダのプログラミングブログ
弁護士ドットコムライブラリーのフロントエンドのアーキテクチャを紹介します この記事は弁護士ドットコム Advent Calendar 2020、2日目の記事です。2020年12月に執筆された記事です。 私は弁護士ドットコムライブラリーというサービスを開発しています。これは法律書籍をネットで読める弁護士向けのサブスクリプションサービスです。 フロントエンドの採用技術はNext.js + TypeScriptで、要件定義から設計、実装は私が担当し、現在も運用しています。 この記事では、2020年5月にリリースしてから半年間、Next.jsで上記サービスを運用した知見の中から、フロントエンドでのアーキテクチャについてご紹介します。 弁護士ドットコムライブラリーの特徴は以下の通りです。 画面数は10画面ほどの中規模アプリケーション（OOUIの考え方を取り入れたら画面数が減りました） 基本的にバック
React TypeScript Cheatsheets | React TypeScript Cheatsheets
React TypeScript CheatsheetsCheatsheets for experienced React developers getting started with TypeScript
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - anymaniax/orval: orval is able to generate client with appropriate type-signatures (TypeScript) from any valid OpenAPI v3 or Swagger v2 specification, either in yaml or json formats. 🍺
CSS in JSとしてVanilla-Extractを選んだ話と技術選定の記録の残し方
インクリメンタルに新しい技術を取り入れる方法。TypeScriptへの移行を例にしたプロセス
GitHub - solidjs/solid: A declarative, efficient, and flexible JavaScript library for building user interfaces.
https://redwoodjs.com/
