これまで、React で非同期処理(データを取ってきて、取れたら表示を更新する等)をするには、大変な苦労を伴いました。 Reduxのmiddlewareを駆使したり、Hooks、redux-saga、useEffect等をこねくりまわしてなんとかしていました。 しかし、これからは React 公式の機能 Suspense を使うことで、非同期処理を React らしく記述することができます。 そこでReactが行き着いたひとつの答えがSuspenseです。Suspenseは非同期処理を無理やりReactの世界に引きずり込み、Reactの流儀で制御できるようになります。 詳細は以下の記事に書かれています。 ReactのSuspenseで非同期処理を乗りこなす – 2020年2月10日 https://sbfl.net/blog/2020/02/10/react-suspense-async
Increments × cyma (Ateam Inc.) Advent Calendar 2020 の23日目は Increments株式会社の @phigasui が担当します。 同時編集のシステムのコアである 競合解消のための操作変換(Operational Transform)の説明 クライアント、サーバーで操作の管理と送受信についての説明 を行っていきます。 Operational Transformation の有名なOSSとして ot.js が存在しています。実は、JavaScript のみならず、Python, Haskell, Coq, Lua での実装例が用意されています。 それぞれの読みやすい言語で読み解けるためありがたいです。 https://github.com/Operational-Transformation また、Visualization of OT
はじめに 最近チームに React 18 を布教することの多い osuzu です。 普段の業務で、ペアプロ時に設計意図を伝えたり、コードレビューで都度自分の意図を伝えたりしてきました。 今回、これまでのチーム開発の経験やドキュメントに目を通す中で、自分が良いと考えている設計やコードレビューの観点を言語化することが出来てきたので、筆を執ってみました。 この記事はコードレビューの観点をチーム内へ知見共有するために書きましたが、社内に閉じる必要もない内容のため、Zenn でオープンに公開することにしています。 設計部分はプロジェクト(チーム)に依存していることが多く参考にしにくい部分もあるかもしれませんが、この記事がコードレビューや設計ガイドラインのような形で少しでも参考になれば幸いです。 記事の対象外 コードレビューそのものの基準や観点は取り扱いません。下記記事など適宜参考に。 Google
export type Bookmark = { id: number; url: string; comment: string; }; このファイルには型しか書いてありませんね。ということは、「型定義ファイル」として bookmark.d.ts という名前にするべきでしょうか。実はそうではなく、この場合は bookmark.ts とするべきです。 「型定義ファイル」とは、「どこか別の場所にある実装に型をつけるためのファイル」です。たとえば、以下のファイルは「どこか別の場所にある実装」に型をつけているから、 *.d.ts にするのは自然です。 いっぽう、 type Bookmark は別のどこかにある *.js の型を与えているわけではないので、 *.ts でよいです。 このように本来 *.ts であるべきものを *.d.ts にしてしまうことには問題があります。代表的な問題として型エラ
何をするか?React (Next.js) の useState フックは、Web ページの状態を保持するものですが、ページのリロードや、ブラウザの再起動を行うと、その状態はリセットされてしまいます。 一方、Web ブラウザに搭載されている localStorage や sessionStorage を使用すると、キー&バリュー(両方とも文字列のみ)の形でデータを保存することができます。 ここでは、これらを一緒に使うことで、useState で管理している状態をローカルストレージに保存・復帰できるようにしてみます。 使い方のイメージ例えば、Web サイト上でダークモードの On/Off を行うスイッチがあるとして、その状態をローカルストレージに保存できるようにしたいとします。 図: ダークモード切り替えのイメージダークモードの状態は useDarkMode のようなカスタムフックを作成して
TypeScript 4.9 から、satisfies operator が使えるようになりました。従来のas constと組み合わせ、型チェックと widening 防止を同時に行えます。筆者的には、"顧客が本当に必要だったもの"です。 本記事では satisfies とは何か? as const とは何か? 2つを組合わせるとどのようなメリットがあるのか? について、実際のコードと共に解説します。 結論 TypeScriptで 定数を export する場合は、as const satisfies を設定しておくと便利です。 export const myName = "田中" as const satisfies string; export const foodList = { ramen: "ラーメン", udon: "うどん", soba: "そば" } as const sa
Intro SPA の隆盛で進化したフロントエンドライブラリによって生み出された「コンポーネント」という資産は、それを View 層の最小単位として扱うエコシステムにその重心をずらした。 近年の Web 開発は、虫食いのテンプレートエンジンにデータをはめ込む方式から、デザインシステムにカタログされたコンポーネント群に、 API から取得したステートを流し込み、それらを「いつ、どこで、どう」レンダリングするかという課題への最適解を、各位が模索するフェーズとなっている。 コンポーネントを敷き詰めるコンテナ側の設計は、 Flexbox および Grid の登場によるレイアウトの進化が手助けしたところも多いにある。しかし、「ページ」を前提に設計された CSS は、「コンポーネント」を前提にした設計に移行するうえで、ミッシングピースが多かった。 現在、提案/実装が進んでいる CSS の新機能群には、
ブログやマッチングサービスのような、価値を生み出す『生産者』と価値を消費する『消費者』の二種類のユーザーがいるサービスを、『プラットフォーム』や『ネットワーク製品』と呼びます。 Twitterやメルカリ、そして今あなたが読んでいるnoteも、「プラットフォーム」と呼ばれるサービスです。 しかし、このプラットフォームの立ち上げには、一つ大きな壁があります。 それは、『立ち上げ初期に機能させるのがとても難しい』という問題です。 プラットフォームでは『生産者』と『消費者』の2種類のユーザーを集めなくてはなりません。 しかし、サービス立ち上げ時には、このユーザーを集めて実際にサービスを機能させるのに大変苦労します。 なぜならプラットフォームでは、『生産者が増えないと消費者が増えない一方で、消費者が増えないと生産者が増えない』というジレンマがあるからです。 たとえばメルカリであれば、出品者が増えない
この記事は、Money Forward Engineering 2 Advent Calendar 2022の20日目の投稿です。 21日目の記事は、Taiga KIYOKAWAさんによる『react-i18next で日本語の改行箇所を制御したい時は、設定で wbr タグを使えるようにしよう』でした。 本日は、マネーフォワードに入社して3ヶ月目の私が、「コンポーネントを高品質に保つためのStorybook運用」というテーマで、記事を書いていきます👊 背景 私が開発に携わっているプロジェクトでは、マネーフォワードクラウドにある複数のプロダクトを横断して利用される機能を開発しており、その機能をマイクロフロントエンドとしてプロダクト側に提供しています。 より詳しく知りたい方は、Money Forward Engineering 1 Advent Calendar 2022の14日目に投稿され
こんにちは、よしこです。 この記事は 2020年に立ち上げたWebフロントエンド構成の振り返り の「Applicationのアーキテクチャ」項の詳細記事です。単体でも読めますが、よければ元記事もあわせてどうぞ! この記事では、わたしの所属する株式会社ナレッジワークで開発・運用しているWebアプリケーションのドメインロジックやAPI通信部分のアーキテクチャについてご紹介していきます。いわゆるフロントエンドの中でも裏側の部分。 一番設計っぽい話になると思いますが、そのぶん「△△ライブラリの便利な使い方」「◯◯のベストプラクティス」というような具体的で汎用的な話とは異なり、うちではこうやってますという事例の共有以上の何物でもないです。 社内資料を社外にも公開するぐらいのイメージで共有していきます! 前提:アプリケーションの構成要素の4分類 前段として、大元の思想から話します。 まず、フロントエン
前提情報 開発環境はスクラム、2週間のスプリントですが、デザインに関しては、レビュー、仕様変更、デザイン修正、サクッと実装、リリース!、ユーザーの声を聞きサクッと修正のようなイメージで基本的に超高速に小回りきかせて、顧客への価値提供は担保しつつ、スピードと顧客の体験重視な対応をしています。そこに前述の9時間の時差と1万キロの距離が加わるので、それ相応の工夫が必要なのは必然かと思います。 これらの前提からFigmaのデザインファイルで実現しなければいけないことは主に4点あって: 1. 最新マスターデザインの場所を明白にする プロジェクト内の構成 以上。 超絶にシンプルですね。単純にこのファイル: Master Design Files の中に、自分が担当しているプロダクトの最新マスターデザインを全部入れています。ルールは”このファイル内で常にデザイン更新する”です。 ファイル内のページ構成
こんにちは、念願の高級水拭き兼用ロボット掃除機を買ってほくほくなプロダクトデザイナー@kgsiです。 ※ この記事は、SmartHR Advent Calendar 2022の13日目の記事です。 SmartHRではReact コンポーネントライブラリ「SmartHR UI」を全プロダクトで使っています。なぜ使っているのか?それはSmartHRのプロダクトの体験統一と、開発速度を向上させるためです。 github.com SmartHR UIがそもそもどういったコンポーネントライブラリなのか、どうやって始まったのか、運用やリリース手順の改善については、過去の記事にて説明しています、よろしければ以下の記事をご覧ください。 「プロダクト間共通の React コンポーネントライブラリ」がどうなったか、という話 - SmartHR Tech Blog プロダクト間共通の React コンポーネント
メンテナとして関わっていた SWR v2 がリリースされましたので紹介したいと思います。 各機能の細かい紹介については、リリースブログを確認してください。日本語翻訳も行ったので日本語で読むこともできます。 https://swr.vercel.app/ja/blog/swr-v2 ここでは、ざっくりと補足を書きたいと思います。 Mutation 周り useSWRMutation 一番わかりやすいのは、新しい useSWRMutation という Hook が追加されたことです。swr/mutation から import できます。 import useSWRMutation from 'swr/mutation' async function sendRequest(url, { arg }) { return fetch(url, { method: 'POST', body: JS
2022/11/26(土)で開催された JSConf JP 2022に関する、現時点での公開資料と Twitter アカウントリンクをまとめました。 よろしければご活用ください。 ※2022/11/28追記 ねぎしさんからいただいたコメントを元に、各講演に時間指定をした YouTube リンクを追記しました。 (時間指定をすると流石に動画埋め込みはできないようだったので、リンクでご容赦ください🙏) はじめに 登壇者名は敬称略させていただいています。 Twitter アカウントについては、ご本人が当イベントで登壇されることに言及されている、スライドに記載など、確認できたものを記載しております。 リンクの間違い等ありましたらコメントいただけると助かります🙏 アーカイブ動画 当イベントは、3つのトラックに分かれて講演が行われました。 その3つともアーカイブ動画が残っているので、後から見直すこ
皆さんこんにちは。株式会社バベルでエンジニアをしている uhyo です。バベルが提供しているaileadというプロダクトではNext.jsおよびReactを使用しています。以前から、自分はaileadのフロントエンドにおいてRecoilの利用を推進する活動をしてきました。実は、筆者が以前に公開した次の記事もその流れを汲んだものです。 Recoilはステート管理ライブラリとして知られていますが、筆者はRecoilのデータフローグラフを構築しその上にアプリケーションロジックを載せられるという点に可能性を感じています。実際、aileadではそのような方向性の設計に取り組んでいます。 そこで、この記事では筆者がaileadにおいて実践しているRecoilの運用を紹介します。 この記事はReact Advent Calendar 2022の8日目の記事です。 ステート更新に反応するならまずselec
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く