React 19 is now stable! Additions since this post was originally shared with the React 19 RC in April: Pre-warming for suspended trees: see Improvements to Suspense. React DOM static APIs: see New React DOM Static APIs. The date for this post has been updated to reflect the stable release date. In our React 19 Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. I

皆さんこんにちは。最近とある事情でTailwind CSSにわりと真剣に向き合わないといけなくなった筆者です。 Tailwind CSSの話題は、Twitterのフロントエンド界隈では定番のトークテーマのひとつです。しかし、筆者の考えを文章にまとめたことは無かったので、このたびブログ記事にすることにしました。 結論筆者が一番みなさんに伝えたいことは、Tailwind CSSは考え無しに採用してよい技術ではなく、採用するには熟慮が必要だということです。とくに、フロントエンドのスターターキット的なプロジェクトの中にTailwind CSSが混ざっていることがありますが、あれはけっこうな罠です。気軽に採用すべきものではありません。 筆者の考えでは、Tailwind CSSの採用を考慮に入れてよいのは次の2つの場合です。 デザインにこだわりがなく、最低限整っていればいい場合。デザイナー不在のプロジ

はじめに Firebase Realtime DBを実践投入するにあたって考えたことを読んで頂いてありがとうございます。　多くの方から「いいね」を頂いて、今回のこの記事を書くモチベーションになりました 本当にありがとうございました！ さて、CloudFirestoreは、Firebase Realtime Databaseとは全く違うデータベースです。特にSubCollectionやQueryが導入されたことにより、リレーションシップの設計に関して大きく異なります。 この記事では、主にCloudFirestoreにおけるリレーションシップの設計方法から、アプリ・CloudFunctionsに至るまでを幅広く解説して行こうと思います。 次の記事ではデータベースの歴史を解説しています。 RDBの限界とNoSQLの登場 Cloud Firestoreでの開発について 私の経験上確実に断言できるこ

React version: 18.0.x, 18.1.x, 18.2.x Steps To Reproduce Visit provided sandbox Open console and observe logs displayed twice. Click the button and observe the rendering log happens twice, the effect log happens once. Link to code example: https://codesandbox.io/s/react-18-use-effect-bug-iqn1fx The current behavior The useEffect callback runs twice for initial render, probably because the componen

Component party Web component JavaScript frameworks overview by their syntax and features

React is an excellent tool for building front-end applications. It has a diverse ecosystem with hundreds of great libraries for literally anything you might need. However, being forced to make so many choices can be overwhelming. It is also very flexible, you can write React applications in any way you like, but that flexibility comes with a cost. Since there is no pre-defined architecture that de

最近 Redux Toolkit というReduxのツールがあることを知りました。 公式ドキュメントのチュートリアルを写経してみたところ、かなり良かったのでご紹介します。 Redux Toolkit とは Redux ToolkitとはReduxをより簡潔に記述するためのツールです。 はじめはredux-starter-kitという名前で2018年から開発され、2019/10にv1.0がリリースされました。 Redux Toolkitは公式に作られたツールでReduxの公式サイトでも紹介するページがあります。 サンプルコード Redux Toolkitを使ったコードを見てみましょう。 const todosSlice = createSlice({ name: 'todos', // ① initialState: [], // ② reducers: { addTodo(state, a

What does Bundlephobia do? JavaScript bloat is more real today than it ever was. Sites continuously get bigger as more (often redundant) libraries are thrown to solve new problems. Until of-course, the big rewrite happens. Bundlephobia lets you understand the performance cost ofnpm install ing a new npm package before it becomes a part of your bundle. Analyze size, compositions and exports Credits

2021年のVue.jsは新しいVue 3のコアが安定し、開発環境からライブラリやコードの書き方まで、新しい発表の多い一年でした。ICSではすでに複数のプロジェクトでVue 3やVite等の新しいフレームワーク・ツールを使用していますが、まだまだ様子見という方も多いでしょう。 変化の大きいVue 3の周辺ですが、2021年11月のVueConf Toronto 2021（セッション動画）でようやく次の定番と言える構成がアナウンスされました。この記事では、Vite・cteate-vue・<script setup>・Piniaといった新しい推薦構成を紹介し、Vue 2時代から何が良くなるのかを比較します。 新しい構成は何が良くなる？　メリットを確認 新しい構成ではプロジェクトを作成する際のコマンドラインツールからVS Codeの機能拡張やコードの書き方まで、さまざまな部分が変わっています。個

Vue.js の Composition API が登場してから 1 年少しが経過しており、すでに使いこなしている方もいらっしゃるのではないでしょう？ 私自身お仕事で Composition API を使用しており、従来の Options API と比較して UI とロジックの分解がよりやりやすくなったように思えます。リアクティブなデータをコンポーネントの外で定義できるようになったことで、1 つのコンポーネントにまとめて書かざるをえなかった論理的な関心事に分けてそれぞれ別のファイルで定義できます。 書き心地としては React のカスタムフックに近い感じとなっていますね。 個人的には React がクラスコンポーネントから関数コンポーネント + Hook へ移行したように、Vue.js においても Composition API へ移行する流れが来るのではないかと思います。 さて、そんな

<script setup> 構文とは Vue.js 3.2 から <script setup> 構文が使えるようになりました。これは単一ファイルコンポーネント(SFC)内で Composition API を使用している際に使える糖衣構文です。下記のようなメリットを得ることができ、公式からも使用が推奨されています。 ポイラープレートが減りより簡潔になる props と emit を定義する際に純粋な TypeScript の構文が使える ランタイムのパフォーマンスが向上する IDE のパフォーマンスが向上する 基本的な構文 <script setup> 構文をざっくりと説明すると、従来の Composition API における setup() 関数内部を <script> 直下に直接記述することができるという構文です。 単一ファイルコンポーネントの <script> タグにsetup属

ES2023 / ES2022 / ES2021 もうじき2022年ということで、ES2022にFinished Proposalsとして取り入れられた機能がそれぞれどんなものなのか見てみることにします。 ちなみにFinished Proposalの手前の段階であるStage4が「複数の実装が既に存在する」というのが定義なので、2022という名前にもかかわらず既に一部のブラウザで使用可能、というか一部以外のブラウザで使用可能です。 ES2022 Class Fields Class Fieldsは似たような3RFCの集合体です。 Private instance methods and accessors privateメソッドです。 むしろ今まで存在してなかったことにびっくりだよ。 class Foo{ #privatemethod() { return "privatemethod";

はじめに 2020年も始まりましたね！ タイトル通りですが、2020年現在スタートアップや大手のWeb系IT企業で採用されている、トレンドとなっている技術についてそれぞれのジャンル毎に求人や採用ページ、ブログを元にまとめてみました。 いくつかピックアップしている形になるので、記述できてないものもありますが、ご了承くださいm(＿ ＿)m (適宜アップデートしていきたいと思います。) (自分のメイン領域がバックエンドなので、そちらに偏っていると思います) 言語編 Ruby サーバーサイドのスクリプト言語、動的型付け言語です。 まつもとゆきひろさん（Matzさん）により開発されたオブジェクト指向スクリプト言語。 日本生まれの言語です。 整数や文字列なども含めデータ型はすべてがオブジェクトであり、純粋なオブジェクト指向言語です。 有名なフレームワークである Ruby on Rails を使うと開発

React 18はReactの次期メジャーバージョンで、2021年の6月にalpha版が、11月にbeta版が出ました。また、Next.js 12でもReact 18のサポートが実験的機能として追加されました。React 18の足音がだんだんと我々に近づき、アーリーアダプターではない皆さんの視界にもいよいよReact 18が入ってきたところです。 特に、React 18ではServer-Side Rendering (SSR) のストリーミングサポートが追加されます。現在ReactでSSRを行いたい人の強い味方としてNext.jsが存在しているわけですが、Next.js 12でもReact 18を通してストリーミングの恩恵を受けることができます（Next.jsではSSR Streamingと呼んでいるようです）。また、厳密にはReact 18とは別ですが、React Server Comp

はじめに この記事はTailwindCSSが最近流行ってるけどなんで流行ってるの？という疑問をいただいた、フロントエンドエンジニア歴3年ほどの人間が調べてわかったことをまとめた記事です。以下のようなことがわかります。 TailwindCSSとは一体なんなのか？ CSS設計とは違うの？Bootstrapなどとの違いは？ どんな背景があって流行るようになってきているのか考察 Design Systemとの相性は？ TailwindCSSとは一体なんなのか？ ものすごくざっくりまとめるとユーティリティクラスの詰め合わせのライブラリと表現できるのかなと思いました。 以下のTailwindCSSの公式ドキュメントに書いてあることについて軽くまとめます。 https://tailwindcss.com/docs/utility-first まずはコードを見てみる まずTailwindを使わない普通のH

最近の日本のフロントエンド界隈では「Native ESM時代」という言葉が聞こえてきます。Native ESM時代におけるビルドツールがどうなるかといったことが主な話題です。 個人的には面白い概念なので流行ってほしいと思い、Native ESM時代とは何かを解説する基礎的な資料を用意しました。 そもそもNative ESMとは Native ESMとは、ES Modulesのことです。つまり、ECMAScript仕様の一部として定義されたモジュールシステムを指します。現在、モダンな部類のフロントエンド開発において広く用いられている、import宣言でインポートしexport宣言でエクスポートするのがES Modulesです。 特に、ES Modulesはブラウザによって直接理解されるモジュールシステムです。Nativeという単語はこのことを強調しています。 Native ESM時代とは N

はじめに Vue.js はバージョン 3 がリリースされたこともあり、バージョン 2.x 系を使っていてもプラグインを利用して composition-api を使った開発をしている人が多いと思います。 私も composition-api が公開されて比較的早い段階から利用してきました。結果、使い方が私の中で固まったので共有したいと思います。 なお、比較的大規模かつ、長期的にメンテナンスしたいようなプロダクトを想定しています (大体そうだと思いますが)。 プロトタイピングや寿命の短いソフトウェアなら、ここで説明することはあまり合わないかもしれません。 また、Typescript の利用を前提としています。 composition-api と Options API について composition-api 自体についてを知りたい場合は以下を御覧ください。 私が composition-a

こんにちは。Reactの話題の中でもかなりの部分を占めるのがステート管理、さらに言えば各種のステート管理ライブラリです。今さらながら、Reactにおけるステート管理の手法やいくつかのステート管理ライブラリを比較考察して記事にまとめました。 useState + バケツリレーReactにおける基本的なステート管理はuseStateです。ひとつのコンポーネント内で完結するようなステートならばuseStateは非常に適しており、他の選択肢はほぼ無いと言っても構わないでしょう。 ステートをアプリケーションの広範囲で使いたい場合が問題です。次の画像に例示されるように、分岐したコンポーネントツリーの末端のコンポーネント（使用者）で同じステートを参照したい場合を考えます。 useStateと組み合わせる場合、もっとも原始的な方法はpropsのバケツリレーによるものです。propsは親コンポーネントから子