Teruhisa Yamamoto

Teruhisa Yamamoto

Software Developer / Father / Enthusiast of fishing and beer

sizu.me

Let's say Hi, in Tokyo or Discord.

What's your dev style?

My tweets

昨今のフロントエンド界隈での技術の進化は凄まじく、キャッチアップするのが大変です。 一つアドバイスしたいのは、フレームワークやライブラリの使い方に囚われすぎないでください。 重要なのは「その技術が何を解決したいか」です。 理解できない時はマインドセットを切り替える必要があります。

19
Reply

同意。あと、着地を何処にするかは統一しないとゴチャついちゃうのがフロントエンド側。 catchするの(ErrorBoundary)は外側から整備していくのが自分の中の基本方針。もちろん適切に。 event handlerでthrowしても反応してくれないので設計が難しいんだけど、jotaiで(続く

naoya
naoya
@naoya_ito

TypeScript の例外のはなし、現実的にはフロントエンド書くときの話なのか GraphQL バックエンド書く時の話なのか、場面によって話変わるなというのが自分の感想。フロントエンドで React の場合、ErrorBoundary や Suspense があるから素直にスローするほうが全体的に良さそう

7
Reply

クリックすると🧡がフワフワ漂うアニメーションをtailwindcssベースで実装してみた。 #React animation keyframesはtailwindのconfigで定義。クリックしたら🧡の数だけコンポーネントを生成。 日頃アニメーション関連の実装は出来合いのもので間に合わせるので楽しかった! codesandbox.io/p/sandbox/hear…

10
Reply

Microsoft Excelを使わない人生を送っていたので?Byte Order Mark(BOM)が無いcsvは文字化けするって初めて知りました🙄

Image
0
Reply

Release is better than perfect. jotai-gallery.pages.dev It has just one now, I'll add more content. Thanks to @CloudflareDev @honojs @reactjs @jotaijs @tailwindcss @mdx_js @codesandbox @FormidableLabs

Image
Teruhisa
Teruhisa
@t6adev

Hi, @jotaijs users. I'm just struggling to build `Jotai Gallery` to show how can we implement something using jotai. The official doc already has some examples but I'd like to collect more real use cases or copy-pastable code. Not a React Server Component project, but so fun 👻

8
Reply

Hi, @jotaijs users. I'm just struggling to build `Jotai Gallery` to show how can we implement something using jotai. The official doc already has some examples but I'd like to collect more real use cases or copy-pastable code. Not a React Server Component project, but so fun 👻

8
Reply

I approved writing `import Foo from 'Foo.js'` for importing tsx file as there was no choice. However, the allowImportingTsExtensions option provides me with a peaceful heart😇

Image
2
Reply

Did you know layout.jsx can be a client component in the Next.js app router? Thanks to it, we can use context providers with RSCs. RSCs are rendered as payload on the server side then those are sent to clients with SSR-ed page "in Next.js".

Described next.js app router can have context providers with RSCs
6
Reply

Server functions are called by POST with multipart/form-data in Next.js <form action={...}> or <form><button formAction={...} /></form>. ACTION_ID is a reference of the server function as an API endpoint.

Image
4
Reply

ğŸŽ‰ @uehaj さん主導の元、create-t3-appのドキュメントが日本語翻訳されましたー!

Christopher Ehrlich
Christopher Ehrlich
@ccccjjjjeeee

create-t3-app docs are now available in Japanese, thanks to a massive effort from @uehaj @t6adev now we can really be the new rails :)

Image
8
Reply

初めてLive Codingをしてみました。 CybozuのKintoneのReact化でJotaiが"選ばれなかった"のですが、良い機会なので題材にさせていただきました!! さて、どうやって実装したでしょう? YouTubeはこちら👇 youtu.be/HNs_bdaErKc コードはこちら👇 github.com/t6adev/jotai-t…

15
Reply

React Tip: You know we can use a key to trigger rerendering components when we change the key, right? You don't need to use the useEffect inside <Content /> to change content by a key, like a user id. Just do it.

Image
13
Reply

VSCodeでTypeScriptのエラーを超絶読みやすくしてくる拡張が登場したのでその話題と、Vercelで募集されたドキュメントエンジニアのポジションとその給料についての話題を話しました。 👇 youtu.be/vJgqZgmUYhw

350
Reply

Let's dive into React Server Components!! First, How does it work? What is the difference between normal components? When render and commit in streaming? ...What's RSC? (I need your public review🙃)

Rendering flow of React Server Components
1. Server just returns a pure index.html with React, and then begins rendering components
2. Async components wrapped in <Suspense /> are awaited for like data fetching, and then their components are rendered as JSON.
3. Client commits the rendered VDOM received from the Server via streaming as soon as it arrives
251
Reply

Recently, the topic of React Server Components has become more prevalent. I took the time to review React concepts like SPA, data fetching and client-side rendering, SSR, and Suspense.

How does React work as a basic Single Page Application?
1. Send a request for a page
a. The browser displays a blank page
2. Receive all necessary files, such as HTML, JS, and CSS, and begin rendering the page
b1. The browser displays the received HTML file (e.g. <div id="root"></div>)
b2. React builds the whole page view as a VDOM (document tree in JS)
b3. React applies the VDOM to the root tag to draw the view for users
3. Display the complete page
Fetching data with rendering flow
1. Fetch data to render components
a. Server prepares requested data
2. Received data, then rendering components
b. Replace loading view with the rendered components
3. Display the components
Server Side Rendering / Static Site Generation
1. Prepare the data needed to build the requested page
2. Render the actual HTML with the data, then send the built HTML along with JavaScript to the client
3. Display the HTML first, then load required JS/CSS files
4. Render the VDOM on the client to make the elements interactive, which is also known as "hydration"
Streaming HTML(SSR) + Selective Hydration in React 18
1. Build HTML containing some components that use <Suspense />, and then respond to it using renderToPipeableStream
2. Display the received HTML containing some components with a "Loading..." indicator, and then begin loading the remaining components
3. Render the requested components and then send the response back to the client
4. Hydration
279
Reply

React Server Components の前に知っておいたほうが良さそうなStreaming HTMLとSelective Hydration。 Data fetchやcode splitしたいコンポーネントをSuspenseで囲んでおいて初期表示を速める(SSRという点はこれまでと変わらず)。残りの2,3,4もSSRなんだけど並列化可能。 全てSSRという点に注目。

Image
78
Reply

React Server Components 理解のための SSR / SSG の復習。 serverではリクエストページ”全体”のHTMLを構築します。 1と2はcacheやprebuildで短縮可能です。3,4でのJS読み込み〜hydration完了でようやくbuttonやinputが動作可能になることも押さえておきましょう。 そして1~4全てがwaterfallです。

Image
11
Reply

React Server Components 理解のための復習。 ”Render-As-You-Fetch”, "Fetch-on-Render" と呼ばれるパターンです。 コンポーネントで必要なデータを随時取得していくので、データ取得が逐次的になりやすいですね。並列化は実装者次第。 不要なJSXが初回リクエスト時に取得済みな事もポイント。

Fetching data with rendering flow in React
56
Reply

Reactの状態管理をURLクエリーパラメータと組み合わせる時はJotaiのatomWithHashが使えます話や、WebSocketではなくEventSource(Server-Sent Events)が使えるね話をしました。 youtu.be/yJLVElPfwA0

33
Reply

I like it😂

CodeSandbox
CodeSandbox
@codesandbox

Introducing Sandpack 2.0 and Nodebox, a Node.js runtime for any browser. 📱 Run Node.js in any browser, any device ✨ Vite, Next.js, Astro & more ⚡ Super fast, with a Rust-based transpiler Here’s why we believe this is HUGE 👇 codesandbox.io/blog/announcin…

75
Reply
Replying to @t6adev

最近反対のfunction + returnで縛る理由を探していてようやく見つけて納得できた。 👇 twitter.com/t6adev/status/… あとはeslint-plugin-react/function-component-definition があるのでOK。喧嘩せずにすむね😂

Teruhisa
Teruhisa
@t6adev

Aha twitter.com/sunnysinghio/s…

7
Reply

Reactのコンポーネント関数、あなたはどっち派? 理由を添えてね🫰

Image
46
Reply

配列内で重複となるデータを省きたいときにBOCCHI THE ROCKğŸŽ¸

Image
3
Reply
Replying to @t6adev

課題はserver/client間の型とバリデーション。真実とすべきはserverなのでreq.bodyのバリデーションをzodで、後はres.send部分をreturnã§æ›¸ãğŸŽ« あとは"type"をexportしてclientで使えば、clientでバリデーションすることも二重で型定義することも不要。 もちろん補完も効く。

Image
12
Reply

分かっててやってる人以外はここに座りなさい、怒らないから、ね 😌

Image
102
Reply

TypeScriptでタイプガード書きまくるの辛いし不要な物が交じる可能性もあるので完璧ではない。 そんなときのzod先生。スキーマ定義したらパーサーも型も手に入って不純物は取り除いてくれる。惚れる。 const user: unknown のところを User でキャストする悪い子も素直になれるはず。

Teruhisa
Teruhisa
@t6adev

ğŸ’ŽğŸ’ŽğŸ’Ž

Image
42
Reply

これを見て自分の中の靄が晴れてきた感じ。 Jotai / Recoil は従来のReduxのようなトップダウンな状態管理ライブラリではなくボトムアップ型。 なので一元的にまとめるような構成は哲学に反してる気がする。 Single source of truth 、巨大なstoreから切り出すのを忘れよう? zenn.dev/8_8/articles/5…

Image
140
Reply

いやぁ、駆け出しエンジニアの皆さんも大困惑のNextjs v13ですな😂 React始めるのに際してCRAの代わりにNext使う流れになってきてこれだし、チュートリアル終わったらノーマルすっ飛ばしてハードモードって感じ。 日本語記事を頼りにするしか無い人達は2歩も3歩も出遅れる・・ beta.nextjs.org/docs/rendering…

83
Reply