新規作成画面をなくすと考慮事項が激減して嬉しい
例えば CMS の管理画面を考えます。 /posts に記事一覧画面、/posts/new に新規作成画面、 /posts/:postId に記事更新画面を置くような URL の設計はあるあるかと思います。 今回は /posts/new の画面はないほうが色々嬉しいと思った話をします。 新規作成画面があることで増える考慮事項 まず新規作成画面があると、どんな煩わしさがあるかを考えます。 下書き保存した時、どうする？ 新規作成画面で下書き保存をすると、内部的にはリソースの ID が採番されます。つまり下書き保存した段階で、それは記事更新画面になるはず。 その ID で URL を /posts/:postId に書き換えるかどうかを検討します。 筆者は React 一辺倒人間なので React 寄りの話にはなりますが、Next.js や React Router などでは /posts/ne
データフェッチはuseEffectの出番じゃないなら、結局何を使えばいいんだ
ショートアンサー React 18 からのフックである、useSyncExternalStore を使えばいいようです。 ※ useEffect がまったくだめだというわけではありません。 ※ クライアントサイドレンダリングのみを考えています。サーバーサイドレンダリングを考慮すると違った答えになるかもしれません。 サンプルコード 次のような useData フックを作ってみます。 JSON API の GET レスポンスを返すシンプルなものです。 実験をしやすいように、リクエスト URL を変えるボタンを置いてあります。 import { useEffect, useState } from "react" export function SearchResults() { const [id, setID] = useState(1) const todo = useData(`http
RailsエンジニアのためのNext.js入門 - hokaccha memo
というタイトルで先日 Kaigi on Rails 2021 で話してきました。 プレゼンで話せなかった内容なども含めてブログ記事にも書いておきます。 Intro Railsのことはけっこう知ってるけどNext.jsについて何も知らないという人をターゲットにしてNext.jsとは一体何なのか、いつどこで使えばいいのか、具体的にNext.jsのどういうところがいいのか、どういう機能があるのかという話をします。 最終的には普段Railsを書いているエンジニアが、Next.jsよさそうなんで使ってみようかな？と思ってもらえるといいかなと思っています。 Next.jsとは何か Next.jsのトップページを見てみましょう。 The React Framework for Production と書いてあります。これは読んで字のごとくですが、Next.jsというのはReactをベースにしたフレームワ
React + fabric.jsで手書き表現
fabric.js を React 環境下で使う機会があったので、開発手順をまとめます。 作ったもの 手書きできます 文字の色・太さを変えられます その他、ダウンロードもできます(デモでは動きません)。 デモ 状態管理について 状態管理にはunstated-nextと useReducer を利用しました。 キャンバスの初期化 fabric.js では、提供される変数 fabric のプロパティとして、いくつかのクラスを利用できます。今回は fabric.Canvas を利用し、コンストラクタには紐づける canvas 要素の ID を指定します。canvas 要素が先に必要なので、useEffect を利用して最初のレンダリング後にクラスを作成します。コンストラクタには canvas 要素自体を指定することもできるので、ID を割り振らず、useRef を使ってもいいかもしれません。 i
blitz-js prisma rails 倒し方
この記事の内容 blitz-js が生まれた背景 prisma の紹介 blitz で簡単なブログを作ってみる blitz を vercel にデプロイしてみる tldr blitz-js は next.js + prisma で rails を再現しようとしているフレームワーク Prisma ORM それ自体が良い。blitz の理解のためにも、まず Prisma を学べ blitz-js 自体はまだ α 品質だけど、今から注目しておく価値はある。デファクトになるかは不明。思想は継承されそう。 はじめに next.js はとても良いフレームワークだが、永続層を持たない。なのでフロントエンドとフロントサーバーに閉じている。 永続層、つまり DB を持たないので、初学者や流行りのプログラミングスクールの教材に選ばれない。また、JavaScript の学習資料が散らばっている。 要は Rail
コンポーネント時代のi18n - Qiita
グローバルからコンポーネントベースのid管理へ サービスを海外展開したい場合、国際化対応を行う必要性があります。これをi18n対応と呼びます。Reactでフロントエンドを構築する場合、i18nのための多くのライブラリがありますが、ダウンロード数的にyahoo製のreact-intl が最も使われているライブラリです。react-intlを実際に使っている例としては、スター15000を超えるReactボイラープレートであるreact-boilerplate やSNSの マストドンがあります。 react-boilerplate/react-boilerplate: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best
シンプルさとパフォーマンスを両立した API 設計と実装の一例 - HeartRails Tech Blog
こんにちは、エンジニアの村田です。今回はシンプルさとパフォーマンスを両立した API を作るためにはどうすればよいのかについて述べていきます。 背景 いままで API サーバーを作ってきて、シンプルな API にすればパフォーマンスが犠牲に、パフォーマンスを優先すれば実装が複雑になって保守が大変になるということを経験してきました。具体的には、 関連リソースの Entity が何重にもネストしていたり、同じリソースに一覧用、詳細用などの Entity があり実装、保守が大変 1. の問題を解消するためにシンプルな API にする 2. では N+1 の問題がありパフォーマンスが悪い 1. 2. の問題を解消するためにリソースの Entity はシンプルにしつつ、パラメーターで関連リソースを指定すると関連リソースの Entity を埋め込んで返すようにする 4. だと関連リソースの権限管理やペ
【新サービス】マネージドGraphQLサービス「AWS AppSync」のプレビュー版を使ってみた #reinvent | DevelopersIO
AWS AppSyncを触ってみました AWS re:Invent 2017で発表された、モバイルアプリのための期待のマネージドGraphQLサービス「AWS AppSync」。現在はパブリックプレビューとして提供されており、事前登録制となっています（2017年12月15日現在）。 AWS AppSync – GraphQL を基盤として、データに基づいたアプリケーションをオフライン機能でリアルタイムに構築する AWS AppSyncの紹介 – リアルタイムおよびオフライン機能を備えたデータ駆動型アプリケーションの構築 | Amazon Web Services ブログ プレビューが通過したので早速触ってみました。 APIを作成する まず、マネジメントコンソールのサービス一覧から「AWS AppSync」を探します。モバイルサービスのカテゴリにあります。キーワード検索するとすぐ見つけられま
React / Flux を実案件で使ってみた
自己紹介 Name : Takuto Wada github : twada twitter : t_wada hatena : t-wada TDD とライオンの人 power-assert の人 React / Flux を知ったきっかけ mizchi さんのエントリ (あなたがReactを使うべき理由) だったと思う 日本語の情報はほとんど無かったが、エッジ系の人たちが騒ぎ出した & 海外で圧倒的に事例が増え出したので興味を持った Rendr の AirBnb が React を使い始めたことを知り、これは決定的だと思った React をどう勉強したか 公式ドキュメントとチュートリアルが充実している まず Tutorial をそのまま写経 次に browserify + reactify で Tutorial をもう一周やってみる (showdownはbrowserify 対応してい
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
