React Three Fiber入門 - ReactとThree.jsで始める3D表現 - ICS MEDIA
「React Three Fiber」は、Three.jsをReactで扱うためのライブラリです。Reactの特徴である再利用可能なコンポーネントを活かしながら、宣言的に3Dシーンを構築できるのが大きな魅力です。 通常のThree.jsでは、メッシュの作成、マテリアルの適用、シーンへの追加などひとつひとつの処理を命令的に記述する必要があります。しかしReact Three Fiberを使えば、裏側の複雑な処理をライブラリ側が担ってくれるため、作りたいシーンをコンポーネントとして宣言でき、処理の流れがわかりやすいコードが書けます。 ▼ 通常のThree.jsで立方体メッシュを記述する例 const geometry = new THREE.BoxGeometry(); const material = new THREE.MeshNormalMaterial(); const box = n
良いReactを書くことは凡事徹底だと考えている話 - カミナシ エンジニアブログ
カミナシで、Webフロントエンドエンジニアをしている osuzu です。 これまでフロントエンド専門外のエンジニアからReactを学ぶ良い方法やお勧めドキュメントを聞かれる度に、 公式ドキュメント のリンクを貼る日々を過ごしてきましたが、何かすごい上達方法がないものかと普段意識していることをこの記事で書き起こしてみました。 文字にした結果、中身になにか特別なことや魔法のテクニックは一つもなく、むしろプログラミング一般に通ずる話ばかりになりましたが、（自戒も込めて）凡事徹底することの難しさもあると感じておりその一助になれば幸いです。 ※ 凡事徹底：平凡なことを非凡なほどに実行すること。一つ一つの理解や実行は平易でも、それを実践し続けるのは難しい。 React Server Component（以下RSC）を採用するかで変わる部分もありますが、記事の例はClient Componentの話が中
React のルール – React
様々な概念を表現する方法がプログラミング言語によってそれぞれ異なるように、React にも、理解しやすい方法でパターンを表現し高品質なアプリケーションを産み出すための慣用的な記法、ないしルールが存在します。 このセクションでは、自然な React コードを書くために従うべきルールを説明します。自然な React コードを書くことで、安全で整理されており、組み合わせ可能なアプリケーションを作成することができます。以下に挙げる特性により、アプリは変更に対して頑健になり、他の開発者やライブラリやツールと連携しやすくなります。 以下のルールは React のルールとして知られています。これらを守っていないならアプリにバグがある可能性が高い、という意味で、これらは単なるガイドラインではなくルールです。またこれらを守らない場合、あなたのコードは不自然で、理解や推測が難しいものになるでしょう。 Reac
最近最小限のReactアプリを作るのに使ってるもの - @ssig33
ssig33's microblog Archive ここはssig33のmicroblog.pubのアーカイブです。 現在は @ssig33@hollo.ssig33.com に移行しています。そちらをフォローしてください。 最近最小限のReactアプリを作るのに使ってるもの についてとりあえずメモしとく。 前提: デカいフレームワークは使わない next.js, Astro, Remixは使わない。next.jsとAstroは大好きなのだが、社内向けとか個人用とか小さいアプリに使うにはあきらかに恐竜であると思う。Remixは大好きではない。 前提: SSRしない SSRもSSGもISGもしない。CSRでいい。SSRしたいならReactをそもそもぶん投げたほうが(個人レベルなら)いいと思ってる。それがほしいならPHPやRails でええ。今更RailsでView書きたくないとか思うかもし
HTML First
HTML First is a style of writing web software that favours using the native capabilities and languages of the browser and reducing layers of abstraction (languages and toolchains) on top of them. Introduction Modern web development has changed a lot in the last decade. Before libraries like React came along, the common approach was to write your interfaces with html and use something like jQuery t
いまNext.jsで新規サービスを立ち上げるときの観点（Router・CSS・認証・監視など/2023年末）
免責事項 社内向けに展開するように雑にまとめました Next.jsの知見が深くない人がリードしてPoCを立ち上げなきゃいけなくなったが、社内的にはNext.jsを推奨しているみたいな場面を想定しています なので自信ないところも多いですが割と断言するように心がけて書いています PoCの立ち上げ想定なので、jest/Storybookなど内部品質面についてあまり深く書くことを避けています ほぼ自分の知識だけで書いており私見も多いですし、そもそも自分自身がトップクラスの知識や視座を有しているわけでもないので、まずは以下の話を理解はした上で、踏襲するかどうかは別途他記事やGitHub、公式ドキュメントなどを漁って判断することを推奨 App RouterかPages Routerか 2023年末現在まだApp Routerは技術記事が足りてきている印象ではないため、社内でノウハウを積極的に貯めていく
Hono + htmx + Cloudflareは新しいスタック
この記事は以前7月に自分で書いた「Hono + htmx + Cloudflare is a new stack」という記事を一部修正し、訳したものです。 Hono + htmx + Cloudflareは新しいスタック 以前、バックエンドエンジニアだった身からすれば、Reactは複雑だと感じることがあります。さらに（私はフレームワーク開発者なのですが）フレームワーク開発者にとってはハイドレーションの仕組みを作ることは厄介です。しかし、しばしばReactを使うことになります。 Reactの優位な点の一つは「JSX」です。最初見た時、JSXは奇妙に思えました。「なんでJavaScriptの中にHTMLのタグが入っているんだ！」。しかし、一度慣れると、JSXは柔軟で、書きやすいことに気づきました。 今日はこれから、JSXをサーバーサイドのテンプレートとして使う技術スタックを紹介します。これはつ
ページ遷移時にReactコンポーネントの状態を維持する - pixiv inside
こんにちは、VRoid部所属のエンジニアのyueです。 VRoid Hubでページ遷移時にcanvasの状態を維持する改善をリリースしました。本記事ではこの取り込みについて解説していきます。 前提 VRoid Hubではモデル詳細画面と投稿者のみに表示するモデル編集画面が存在しています。この二つのページは別々のレイアウトを使っていたため、モデル表示用のcanvasを操作するインスタンスがお互い共通せず、ページ遷移するたびにモデルを再度読み込むことが必要でした。 今回はDOM APIを利用してコード変更を最小限に押えつつ、再度読みを無くすような改善を行いました。 問題の再現 通常Reactの再レンダリングを防ぐには様々な手段があります。例えば React.memo 、React コンポーネントの key 、classコンポーネントのshouldComponentUpdate などが存在します
Ionic Frameworkとは
Overview Ionic focuses on the frontend UX and UI interaction of an app — UI controls, interactions, gestures, animations. It's easy to learn, and integrates with other libraries or frameworks, such as Angular, React, or Vue. Alternatively, it can be used standalone without any frontend framework using a simple script include. If you’d like to learn more about Ionic before diving in, we created a
Create React Appは役割を終えました
長らくReactの入門キットとして使われてきたCreact React App（CRA） 2023年春に正式版になった新しいReactの公式ドキュメントでは、選択肢として紹介されていません。 標準から外れたとは言え、まだ一定の役割は担えるのだろうかと思い様子を見てみました。 とりあえず試してみる まずは現状確認のために実際にプロジェクトを作ってみます。 $ npx create-react-app cra --template typescript Creating a new React app in /Users/nekoya/src/github.com/nekoya/ggg/cra. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scr
Reactに追加されるuse-sync-external-storeを使えば誰でも簡単にオレオレstate管理できますよという話
https://github.com/hachibeeDI/nozuchi npm化 日本語で紹介している記事をみかけなかったので書いてみました。何か間違いがあったらごめんね。 なお、まだundocumentedなAPIなのでインターフェースがころっと変わる危険性があります。 ひとまずは↑のpolyfillを経由しておきましょう。 このAPIですが、その名の通り外部のStore（subscribableなオブジェクトのことです）とcomponentを同期させるライブラリです。 React使いはState管理機構を自作する宿命を背負って生まれてきているため、今までは各々のやり方で同期させる処理を書いていたとおもうのですが、晴れて公式のツールが誕生するわけですね。 Storeの実装例 use-sync-external-store には残念ながらちゃんとしたドキュメントはありませんが、やりたい
その処理、 setInterval じゃなくてブラウザが暇な時にやっちゃえば？
こんにちは。ぬこすけです。 setInterval などで定期的にブラウザで実行させている処理があったりするでしょう。 例えば、定期的にアクセストークンが有効かチェックし、無効だったら新しいトークンを取得するなど。 ブラウザはページのコンテンツを表示するために JavaScript の実行や UI の更新で忙しいです。 もし定期実行している処理がコンテンツ表示にかかわらない優先度の低い処理なのであれば、 できるだけブラウザの重要なタスクに影響を与えないようにしたい ものです。 この記事では できるだけブラウザの重要なタスクに影響を与えずに定期的に処理を実行させる方法を、アクセストークンのローテーションを例に紹介 します。 実装する機能 この記事で実装する機能は次の通りです。 React の hooks を使って実装します。 ブラウザのアイドル中(暇なとき)にアクセストークンを有効かチェック
次世代ゼロランタイムCSS-in-JS「macaron」の導入方法を調べてみた - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに こんにちは！hy094です。 今回はZero-Runtime CSS-in-JSである「macaron」(macaron-css)の使い方を調べてみたので、 それをまとめたいと思います。 ※本記事は大部分が公式のGitHubと公式ドキュメントの和訳で構成されています。 ※英語がとても苦手なので翻訳アプリを駆使して書いています。誤りがあったらこっそり教えていただけると嬉しいです。 はじめに macaron（macaron-css）って結局どうなの？ macaron（macaron-css）って何？ どんな特徴があるの？ どうやってインストールするの？ バンドラの設定は？ どうやって使うの？ 1. styled componentを作成する 2. スタイルを追加する 3. variantsを追加する 4. デフォルトのvariantsを設定する 5. コンポーネントをレンダリングする
React の状態管理ライブラリ9選
はじめに 次から次へと登場する状態管理ライブラリですが、それだけ React (に限った話ではないが) において状態管理というのは大きなテーマであり、最も実装難易度の高いトピックの一つでしょう。適切な設計ができないとアプリケーションの規模が大きくなるにつれ負債は増え続けます。 状態管理の難しさをよく表した文章が Redux の公式サイトにあるためお借りしたいと思います。(Redux の公式サイトは読み物としても面白いです) JavaScript のシングルページアプリケーションの要件がますます複雑になるにつれて、コードはこれまで以上に多くの状態を管理する必要があります。この状態には、サーバーのレスポンスやキャッシュされたデータ、まだサーバーに永続化されていないローカルに作成されたデータなどが含まれます。UI の状態も複雑化しており、アクティブなルート、選択されたタブ、スピナー、ページネーシ
それでもどうしてRecoilを使うのか / Harajuku.ts Meetup Recoil
2023年1月20日 Harajuku.ts Meetup 〜 Recoilの事例集めました〜 にて発表した資料です。
図で分かるReact18のしくみ
これは何? この記事はReact18がどのように動いているのかをまとめた記事です。なるべくコードの記載はせず、図を使用して読みやすさを重視しています。また、これからReactの内部のコードを読む予定の方のために、各セクションの終わりにアコーディオン形式でGitHubのリンクを貼っています。 ※ この記事はnote株式会社 Advent Calendar 2022 の17日目の記事です。 対象読者 Reactの内部コードを読む気は無いが、裏で何をしているのか把握しておきたい方 これからReactの内部コードを読もうと思っている方 暇な方 Fiberについて まず最初に、Reactのドキュメントを漁っていると度々出現する「Fiber」についてお伝えします。 そもそもFiberとは何か 一部例外はありますが、1個のFiberは1個のコンポーネント（<MyComponent>や<div>など）管理
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Build your component library - shadcn/ui
まず Container より始めよ
You and 120% Cleaner React
const Hoge: React.FC<Props>=()=>って書いてたら思考停止系と言われたので調べた
