Refineでココナラ法律相談管理画面を作り直した話
こんにちは。 ココナラ法律相談という弁護士の先生方と相談したい悩みのあるユーザーのマッチングサービスを担当しているエンジニアの高崎と申します。 法律相談開発チームでは、一般に公開されているユーザーの利便性向上はもちろんのこと、社内のメンバーが利用する管理画面への継続的な改善を行っています。 ココナラ法律相談開発チームでは、RefineというReactベースの管理画面構築用フレームワークを利用して、ココナラ法律相談の管理画面を効率よく再構築しました。 その結果リプレイス作業を通して様々なメリットがあったので、共有したいと思います。 リプレイスの背景 ココナラ法律相談は、2016年にリリースされ、サービス開始から早7年が経過しました。お陰様で順調にユーザー数を増やし、現在では全社の約10%の利益を生み出すサービスに成長することが出来ました。 引用: 2022年8月期通期決算説明資料 ビジネス面
React大好き侍が、「もうSolidJSでいいじゃん...//」ってなったワケ。 - Qiita
Reactが好きです。 Reactが好きです。コンポーネントを関数として扱うのが好きです。 SolidJSはReactそっくりの書き心地(DX)を保ちつつ、Reactに足りない要素を兼ね備えた期待の新人です。 コードの比較 React const Counter = () => { const [count, setCount] = useState(0) useEffect(() => { console.log(`Count: ${count}`) }, [count]) return ( <div> <div>{count}</div> <button onClick={() => setCount(prev => prev + 1)}>Add</button> </div> ) } const Counter = () => { const [count, setCount] =
Next.jsアプリのローカライゼーション | POSTD
クイックサマリー ‐ 国際化ルーティングは、厳密にはNext.jsの新機能ではありません。（v.10以降搭載されています。）この記事では、この機能のメリットだけではなく、こうした機能を利用して最高のユーザ体験と円滑な開発者体験を実現する方法についても見ていきます。自己文書化コードやバンドルサイズの削減、さらにはランタイムエラーではなくコンパイル時エラーに興味のある方は、是非このまま読み進めてください。 開発中のアプリにおいて、ロケール（または国、あるいは両方）ごとにルートを設定したい場合、Next.jsで簡単に対応できるようになりました。プロジェクトのrootディレクトリにnext.config.jsがない場合、新たに作成してください。このスニペットからコピーしても構いません。 /** @type {import('next').NextConfig} */ module.exports
React Queryを状態管理ライブラリとして使い倒そう！/useQStateのススメ - Qiita
はじめに NTTテクノクロスの上原です。 この記事はNTTテクノクロスアドベントカレンダー2021 24日目の記事です。昨日は@watanyさんの記事」、明日は@j-yamaさんの記事になります。 自分は過去のAdvent CalenderではReact関連では(React Meets Grails、Grails React Scaffold、Redux Saga、Gatsby、React Spring、AirTableのAPPSをReactで作ろう)などを書いて来ましたが、結局1年ぶりに記事を書いています。もっともっとアウトプットしないといけないですね。 それはともかく、今回は「状態管理ライブラリとしてのReact Query」を紹介し、「useState感覚でクライアント状態管理する手法」 を提案してみたいと思います。何はともあれその手法とやらを先にみたい方はこちらのuseQState
Design Doc for react-boilerplate-2022
これは何? React(Next.js)アプリケーションのテンプレートのための Design Doc React(Next.js)アプリケーションのテンプレートとして実装したリポジトリ shimpeiws/react-boilerplate-2022 の設計についてのDesign Docです SSR/ISRはせずnext exportしてStatic Fileを出力する構成です API Routesを使っていますが、API接続コードをローカルで動作させるためのもので本番動作させるためのものではありません Design Doc 本ドキュメントは実装したリポジトリの構成、ライブラリの選定理由など設計についての背景を示すためのドキュメントという位置づけです 「デザインドックで学ぶデザインドック」(https://www.flywheel.jp/topics/design-doc-of-desig
Next.jsで静的サイトを作成時 よく使っているライブラリまとめ
KubeCon EU 2024 Recap “Kubernetes Policy Time Machine: Where to Next?”
React Hook Form はどのように再レンダリングを最適化しているのか？
【READYFOR×コミューン】業務に活かせるReact LT & 座談会 https://readyfor.connpass.com/event/224586/
Next.js の状態管理 2020
Next.js といえば、SSG（JAMstack）が最近は特に話題ですね。1年前まではgetInitialPropsを用いて、どう SSR するのかという事が話題の中心でした。Next.js 9.3 以降、SSR をする際にはgetInitialPropsではなくgetServerSidePropsを使用することを推奨すると記載されています。（そして、getInitialPropsを使用することで自動最適化が無効となってしまう旨も）getStaticPropsやgetServerSidePropsを利用することで、私たちは SSG・SSR をページ単位で切り替えることができます。 「SSG・SSR」が共存する可能性がある場合、SSR にはgetServerSidePropsを利用することになります。この変化による影響範囲は多大で、状態管理とデータフェッチについて、再考する必要がでてきまし
新しくnext.jsで作るプロダクトで CSS Modules か CSS in JS か決める調査や思考のログ
前提 実行速度は可能な限り上げたいものの、作ろうとしているのは実行速度を極力 上げる必要があるアプリケーションではない チームメンバーは今のところCSS in JSの知見しかない よほどメリットが上回らない限り、なるべくwebpackやbabelやpostcssなどの設定を書きたくない 感じていた課題 書きやすいが読みづらい 幾つかの記事で述べられているように、ただスタイルを付与して別名を付けたコンポーネントなのか、処理上/atomic design上の意味のあるReact Componentなのか判別しづらい styled-componentsをnext.js SSRで動かすための対処 のように _doucment.tsx に一手間挟む必要がある CSS in JSとstylelintの相性の悪さ 2020年秋頃だと babel設定が特定の条件を満たしているときに https://git
フロントエンドアプリケーションにおいて状態をどこに置くべきか論 - Runner in the High
後学のために自分の考えていることをまとめてみる。 考えられるパターン これまでの経験から以下4つのパターンがある。 ローカルStateでprop-drillingする ローカルStateかつイベント経由でデータ交換をする グローバルStoreとローカルStateを併用する グローバルStoreのみを使用する 1. ローカルStateでprop-drillingする propとしてコンポーネント間のデータをやりとりする手法。 ほぼすべてのUIコンポーネントを親からデータを受け取りDOMを出力するだけの純粋な関数として表現できるため、全体の設計自体はシンプルになる。手間は多いが魔法は少ない。 コンポーネントの粒度が小さいアプリケーションの場合にはいわゆるバケツリレーと揶揄されるデータの受け渡しが頻発し、これに嫌悪感を持つエンジニアもいる。 2. ローカルStateかつイベント経由でデータ交換を
Reactの仮想リストライブラリを調べたときのメモ - tmegos blog
まとめ Slackのような仮想リストを実現するのは難しい いずれのライブラリも上方向へのスクロールは難しい 普通に使う分には、react-virtuosoはいいぞ 環境 React Slackライクなメッセージアプリを作りたい 下方向に新しいメッセージが表示される 新規メッセージは下に追加される スレッドが存在している場合、スレッド元にジャンプできる 基本的にユーザは上方向へのスクロールを行う メッセージには画像や動画も添付でき、高さは不明 react-window doc: react-window npm: react-window - npm GitHub: GitHub - bvaughn/react-window: React components for efficiently rendering large lists and tabular data bundlephobi
Next.js + Prisma + NextAuth.js + React Query で作るフルスタックアプリケーションの新時代
どうも、@yuyaaar です。 最近は Next.js アプリを見ることが多くなってきました。もはや JAM スタックの王道、と言っても過言ではないかもしれません。 ですが、やっぱりフルスタックとなると、データベースや認証などが必要になってきて、その辺のやり方がいまいちよくわからない、という人も多いのではないでしょうか。 自分もその一人でした。😅 いろいろ調べたり作ったりした結果、今現在もっとも最強コンビであろう、 Next.jsPrismaNextAuth.jsReact Queryでのフルスタックアプリケーションの作り方をこの記事では書いていきます。 今回は、チュートリアルアプリでよくある Todo アプリを作って、vercel にデプロイ、というのをやってみたいと思います。 まずは最初に Next.js ボイラープレートアプリを作りましょう。 作成できたら、まずは TypeScr
Next.jsで動的にXMLサイトマップを生成する
2021年1月現在、Next.jsでXMLサイトマップを生成するライブラリとしてはnextjs-sitemap-generatorが最も人気のようです。 nextjs-sitemap-generatorのドキュメントを軽く読む限り、Next.jsのCustom Serverを使用してビルド時にサイトマップを生成する仕組みのようなので、以下のようなケースでの使用には最適とは言えません。 Custom Serverは触りたくない コンテンツ追加のタイミングでビルドが走らないユーザー投稿型のサイトでも、サイトマップを一定間隔で更新したい 個人的に色々と試してみたところ、思った以上に簡単にXMLサイトマップを動的に作ることができたので、その方法を共有します。 Next.js + TypeScriptで動的にXML Sitemapを生成する 以下のような方針で実装します。 sitemap.xmlをN
NextのJSぜんぶ抜く
サイトパフォーマンスを最適化するため、export 時に Next.js のランタイムを全部抜いた。 どういうことか？ このブログは静的書き出しをしているので、ただの静的なドキュメントといえる。だが Next にしろ Nuxt にしろ、書き出したページをブラウザで読み込むと JS アプリケーションとして振る舞うために Hydration 処理が行われる。これをするために JS モジュールの読み込みや Scripting 処理の負荷が発生する。 書き出された HTML には Hydration 処理用に JS モジュールやシリアライズされた state が挿入されている ピュア HTML を目指して しかしこのブログはドキュメントでありアプリケーションではないので、ほぼ JS を動かす必要はない。state は不要だし、client-side routing も要らない（先読みに必要かもだが
React、Angular、Vue対応、高性能なテーブルを実装できるシンプルで軽量のJavaScriptライブラリ -Grid.js
高性能なテーブルを実装できる、シンプルで軽量のJavaScriptライブラリを紹介します。HTMLテーブル、ページネーション、検索機能、ソート機能、XMLやJSONからインポートなどに対応しています。 React、Angular、Preact、Vueなどの主要なフレームワークのプラグインとして動作するだけでなく、フレームワークなしのバニラJavaScriptでも使用できます。 Grid.js Grid.js -GitHub Grid.jsの特徴 Grid.jsのデモ Grid.jsの使い方 Grid.jsの特徴 Grid.jsは高性能なテーブルを実装できる12Kbの超軽量のJavaScriptです。 シンプルで軽量な実装。 人気が高いすべてのJavaScriptフレームワーク（React、Angular、Vueなど）で使用できます。 フレームワークなし（バニラJavaScript）でも使用
新規事業開発での技術選定の意思と意図 (フロントエンド編) - Sansan Tech Blog
こんにちは、関西支店で新規事業開発室に所属するソフトウェアエンジニアの加藤です。Bill Oneという新規サービスの開発に携わっています。 バックエンド編の続きとして、フロントエンドで私たちが使用している技術やライブラリを振り返って、どんな意志と意図があるかを確認していきます。 Bill Oneは今年の1月ごろにピボットし、それまで開発してきたフロントエンドを全て捨て、1から作り直しました。ピボットの際に改めて技術選定を行い、それまで使っていたライブラリ等を見直したので、本稿ではピボット前後で変化した箇所を中心にフロントエンドの技術選定を紹介します。 前提 改めて前提です。私たちのチームで開発しているBill Oneは今年の5月にローンチしたばかりのサービスで、チームのエンジニアは5名です。開発しているアプリケーションはSingle Page Application (SPA) で、エンジ
React Native製アプリのクオリティを上げるために工夫した事
Illustration by unDrawInkdropというMarkdownノートアプリを一人で作っているTAKUYAです。最近、React Nativeを使って、iOS版とAndroid版の新しいバージョンをリリースしました。React Nativeは、JavaScriptとReactを使ってクロスプラットフォームなモバイルアプリが開発できるフレームワークです。 どうすればReact Nativeでハイクオリティなアプリが作れるのか、今回の開発を通して多くのことを学びました。本稿では、よりよいアプリを作るために自分が工夫したことをシェアします。既にReact Nativeでアプリを作っている方も、これから作ろうと思っている方も参考になるかと思います。 概要OSSライブラリは慎重に選ぶネイティブ拡張モジュールは出来るだけ使わないUIテーマの対応タブレットの対応動作を軽く保つ違和感のない
「Reactの難しさ」を分解しよう - タオルケット体操
他のライブラリと比べるまえに まず、ReactとjQueryと比べるのはやめよう 「テンプレートエンジン」として捉えて、シンタックスを攻撃するのをやめよう ライブラリとしてのReactはとても簡単 Reactの思想を理解するのはチョットムズカシイ 環境構築が難しい JavaScriptそのものが難しい GUIが難しい jQuery時代からのパラダイムシフト フレームワーク関係者の情報量が多い SPAはとりわけ難しい まとめ ずっと感じてたもやもやを書き連ねたら長くなってしまったが、ぼんやりとReactとかなんか難しそうだしめんどくさいから新規案件だけどjQueryでやろっかなどうしよっかなーと迷っている人の指針になってくれればうれしい。 他のライブラリと比べるまえに まず、ReactとjQueryと比べるのはやめよう 出た時から延々と言われ続けているものの、やっぱり今でもjQueryとRe
Reactでも使える！シンプルなJavaScriptステート管理ライブラリー Mobxを試す
Reactのステート管理といえばReduxですが、React以外でも使えるライブラリーとして注目されているのが、MobXです。jQueryとReactを使ったサンプルコードで解説します。 あなたが開発したのがjQueryを使ったごくシンプルなアプリに過ぎなくても、UIのさまざまなパーツの同期を維持する問題に直面したことがあるはずです。たいていの場合、データを変更すると複数の箇所に反映する必要があり、アプリの規模が大きくなるにつれて対応が困難になります。この問題にうまく対処するには、イベントを利用して、アプリのさまざまなパーツに対して、変更があったことを知らせるのが一般的です。 それでは現在、多くの人はアプリケーションのステートをどのように管理しているのでしょうか。 「ステート」とはいったい何者なのか？ ある人物がこう言っています。「こんにちは、ぼくだよ！ ぼくにはfirstName、las
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
