React は次の10年を生き残れるか：3つのトレンドから考えるReact Tokyo ミートアップ #7 のメイントークのスライド。 https://react-tokyo.connpass.com/event/358171/
React I Love You, But You're Bringing Me Down
Dear React.js, We’ve been together for almost 10 years. We’ve come a long way. But things are getting out of hand. We need to talk. It’s embarrassing, I know. Nobody wants to have that conversation. So instead, I’ll say it in songs. You Were The One I’m not a first-time JS lover. I’ve had long adventures with jQuery, Backbone.js, and Angular.js before you. I knew what I could expect from a relatio
【LINE証券 FrontEnd】コンポーネントをカスタムフックで提供してみた
こんにちは。フィナンシャル開発センターの鈴木です。LINE証券のフロントエンドを担当しています。 以前の記事でご紹介した通り、LINE証券ではReactを使用しています。React 16.8で導入されたフックの機能は非常に革新的で、特にカスタムフックの概念によってReactにおけるコンポーネント設計は大きく様変わりしました。我々もフック時代のコンポーネント設計を試行錯誤しており、その結果はLINE証券にも反映されています。 この記事では、その中でも我々が最近ハマっている「カスタムフックを通じてコンポーネントを提供する」という、いわば“render hooks”とも言うべき設計パターンを紹介します。 今回のお題 今回は、「いくつかのチェックボックスがあり、全部チェックを入れると次に進める」という典型的なパターンを題材にしましょう。次の画像では3つのチェックボックスと「次へ」ボタンが並んでおり
React v18.0 – React
For React Native users, React 18 will ship in React Native with the New React Native Architecture. For more information, see the React Conf keynote here. What is Concurrent React? The most important addition in React 18 is something we hope you never have to think about: concurrency. We think this is largely true for application developers, though the story may be a bit more complicated for librar
kintoneマイクロサービス化検証プロジェクトのWebフロントエンドにおける技術選定 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロントエンドエキスパートチームのsakitoです。 本記事ではkintoneをマイクロサービス化するためのPoCプロジェクトにおけるWebフロントエンドの技術選定について紹介します。 プロジェクト背景 本記事で扱うプロジェクトは「kintoneマイクロサービス化Proof of concept(PoC)プロジェクト」です。 現在サイボウズの主力製品であるkintoneは大きなモノリシックなアーキテクチャになっています。 モノリシックなサービスに関わる人数が増えるに伴って、意思決定や開発速度の低下が課題となってきています。 モノリシックなアーキテクチャや組織によって起こる課題を、マイクロサービスとして切り離して小さくすることで解決ができるのではないかと考えました。マイクロサービス化にあたって、まずはPoCとして一部の機能をマイクロサービス化するプロジェクトを発足し、kinton
CSS in JSとしてVanilla-Extractを選んだ話と技術選定の記録の残し方
インクリメンタルに新しい技術を取り入れる方法では、VueからReactへ段階的に移行していったという話を紹介していました。 このReactの採用を決定してから大きな論点となったのは、ReactでCSS(スタイル)をどのように書くかについてです。 Reactのスタイリング方法には、デファクトと言えるものはありません。 Styling and CSS – React CSSファイルとclassNameを使う方法、CSSファイルをimportするCSS Modules、JavaScriptでCSSを書くCSS in JSなどさまざまな方法があります。 スタイリングライブラリの選定は、表現力はそこまで大きく変わりませんが選択肢が多過ぎます。 そのため、VueやReactを選ぶといった技術選定よりも難しい部分があります。 KARTE Blocks(以下、Blocks)では、最終的にReactのスタイ
インクリメンタルに新しい技術を取り入れる方法。TypeScriptへの移行を例にしたプロセス
📝 require(moduleName) は同期処理なのに対して、import(moduleName)は非同期処理となります。 📝 tsconfig.jsonでesModuleInteropがtrueでないとdeafult importの意味合いは異なります。 この表はCommonJS ModulesとECMAScript Modulesで機能的に1対1で応するという意味ではありませんが、 大まかにはこの対応表にそってECMAScript Modulesの構文へと変換ができます。 エディターを使い手動で変換したり、次のようなツールを使ってある程度機械的な変換も可能です。 cjstoesm commonjs-to-es-module-codemod このモジュールの変換で重要なことは、できるだけCommonJS ModulesとECMAScript Modulesを混ぜないことです。
メルカリShops のフロントエンド | メルカリエンジニアリング
こんにちは。ソウゾウの Software Engineer の hiroppy です。「連載：「メルカリ Shops」プレオープンまでの開発の裏側」 の最後は、Web フロントエンドの紹介をしたいと思います。メルカリ Shops は既存のメルカリアプリの中に独立した Web アプリケーションとして動いています。本記事では、どのようなライブラリを選定し、どのようにアーキテクチャを設計してきたかを解説します。 なぜ Web なのか？ アプリの上で動いているのであれば、WebView ではなくても良いと感じる人はいると思います。今回採用した 1 つの理由としては、リリースが柔軟な点が挙げられます。iOS/Android の両方に対して開発サイクルを早めることが可能であり、また機能追加やバグ修正が容易です。どのように WebView で動いているかについては、6 日目のメルカリ Shops のため
【検証】React.FCとReact.VFCはべつに使わなくていい説
こんにちは、クレイの正岡です。 コロナ禍が始まってから小学生時代以来のゲーム生活を送っています。ゲームボーイと呼んでください。 さて、今回は React × Typescript でコードを...
Utility First な CSS in JS フレームワークの導入と３ライブラリの比較 - JX通信社エンジニアブログ
JX 通信社のフロントエンドでは React TypeScript や Emotion のような CSS in JS を技術選定することが多いです。弊社 SaaS の FASTALERT、新型コロナ関連情報などでも同様の技術選定で、過去にもエンジニアブログで紹介してきました。 tech.jxpress.net tech.jxpress.net 今日は、Emotion の活用の極地「Utility First な CSS in JS フレームワーク」についてご紹介します。 Emotion で開発する悩み 素の Emotion や類似の CSS in JS ライブラリでは、 1 つの TS/JS ファイル内に CSS を書くような感じでスタイル設定を行っていきます*1。CSS in JS ライブラリに概ね共通しているのが、 styled.タグ名 でスタイリングすることです。 const Tit
React ステート管理 比較考察 - uhyo/blog
こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子
【LINE証券 FrontEnd】Recoilを使って安全快適な状態管理を手に入れた話
こんにちは。LINEフィナンシャル開発センター フロントエンドエンジニアの峯です。 先日新卒としてLINE証券プロジェクトに配属となり、最初のタスクとしてRecoilによる状態管理の導入に取り組みました。 その際、なぜRecoilにしたのか、また本番開発にRecoilを使うにあたって設計に気をつけたことなどを本記事でご紹介しようと思います。 技術選定 いままでの状態と課題 LINE証券フロントエンドではReact+Typescriptによる開発を採用しており、いままでのグローバルな状態管理にはUnstated を用いていました。 Unstatedでは Container classを状態の単位とし、その内部の stateを setState によって更新します。状態を使用したいコンポーネント側では、<Subscribe> コンポーネントによって情報を読み出すことができます。 一方ご存知の通
iOS NativeからReact Native に乗り換えた Shopify の話聞いてきた - tomoima525's blog
"最も使われているサービスのひとつを iOS Native から React Native に作り変えた" というアナウンスメントを出し話題となった Shopify で、まさにその内容を扱った React Native の meetup があり、参加してきたので内容と所感をまとめました。 React Native is the Future of Mobile at Shopify 発表内容 検証/導入フェーズ 技術スタック React Native がもたらした効果 途中でやめたこと 追加で登壇者に聞いたこと その他の発表 React Native for Web @twitter その他もろもろ React Native is the Future of Mobile at Shopify React Native で書き換えた話はしばらく前にアナウンスしていたのですが、Shopify
Event Handler Naming in React
Naming's a hard problem, right? Well, coming up with the names can be hard. After that, it's just a simple matter of typing. Here are a few of my naming conventions for React or even handling in general. For propsWhen defining the prop names, I usually prefix with on*, as in onClick. This matches the built-in event handler convention. And by matching it, we declare that these props will house simi
React 18 Alpha is out! Now what?
Hello! They kept us in Suspense long enough, but HECK React developers have some new features to play with!! The best part: Almost all of the benefits of the upgrade don't require major code changes. The New Root API React has always had to have some kind of root. You're probably used to seeing something like this at the top level of your applications: import ReactDOM from 'react-dom'; import App
DocBaseのフロントエンド改修をどのように進めたか
こんにちは、クレイの阪本です。 もともと外部委託パートナーとしてクレイ案件のお手伝いをしていましたが、気づけば中の人となっていました。 よろしくお願いいたします。 先日、DocBaseはフロン...
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
The Foundation for your Design System - shadcn/ui
Radix UI
CodeSandbox SSE Discontinued
Vue.js & Nuxt.js から React & Next.js へ移行した理由 | fwywd（フュード）powered by キカガク
