React 19の新機能まとめ — サーバーコンポーネントは全フロントエンドエンジニア必見
9月5日、Vercelの公式ブログで「What’s new in React 19 – Vercel」と題した記事が公開された。この記事では、React 19における重要な新機能や改善点について、詳細かつ実践的な内容が取り上げられている。これまでのReactのバージョンで導入されてきた実験的機能が、React 19で正式に安定化され、多くの開発者にとってさらなるパフォーマンスの向上と開発体験の向上が期待されている。 ここでは、同記事からポイントを絞って内容をご紹介する。 サーバーコンポーネント (Server Components) サーバーコンポーネントは、Reactの10年の歴史の中でも最も大きな変化の1つであり、React 19の新機能の基盤となるものである。この機能により、以下の点が大幅に改善される。 初期ページロード時間の短縮 サーバーコンポーネントを使用すると、クライアントに送
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL
技術選定の失敗 2年間を振り返る TypeScript,Hono,Nest.js,React,GraphQL はじめに 新たに書きました。 MySQLを使っても会社は潰れない 久々に記事を書いたのでどうぞお手柔らかに... 私が過去2年間で行った技術選定の成功と失敗を振り返り、その学びを共有したいと思います。 文才無いので淡々と箇条書きでいきます Twitterエンジニア垢作りました。エンジニアのお友達がいません。 @uncode_jp 注意 意見を押し付けるものではありません。ただ建設的な議論は大事だと思う。 自分の意見は明確に、歯切れのよい表現を意識している。人それぞれだよねみたいな感じに逃げたくない。技術選定に結論はある（過激）。 ただし技術選定にはコンテキストがあり、例えばプロダクトのフェーズや組織の事情によって当然結論は変わる可能性がある。 OSSの開発者さん達は偉大ですごい。あ
React Server Component、そしてqwikのインパクト ー フロントエンドアーキテクチャの最新動向をmizchiさんに聞いてきた(1)
こんにちは、テックフィード白石です。 日本のエンジニア界隈をリードするエキスパートに、テクノロジーの最前線を語っていただくYouTube動画連載「Ask the Expert」の新着動画が公開されました！ 今回は、フロントエンドのエキスパートmizchiさんに、フロントエンドの最新動向について詳しく伺ってきました。 mizchiさんのアカウントをぜひフォローしましょう！ mizchiさん（フロントエンド兼Node.jsエンジニア） ついでに白石のもフォロー推奨: 聞き手: テックフィード白石 以下に掲載するのは、インタビュー動画の内容の要約です（正確な書き起こしではありません）。 内容をフルにご覧になりたい方は、ぜひ動画をご視聴ください。 ご質問、ご感想などはYouTubeのコメント、もしくはこの記事のコメント欄でも受け付けております。どしどしお寄せください😊 以下、動画の内容の要約です
フロントエンド領域でチームをリードしたいエンジニア募集中！
フロントエンド領域でチームをリードしたいエンジニア募集中！ 株式会社カオナビ @kaonavi React TypeScript Web Standards / Browsers CSS JavaScript I want to hear a detailed 株式会社カオナビでは、場所と時間に縛られない、新たな働き方制度「MY WORK STYLE」を始めています。 働く場所の選択（出社 or 自宅 or 許可された就業スペース） スーパーフレックス制度 スイッチワーク制度 などなど、詳しくはこちらをご確認ください！ 「場所と時間に縛られない、新たな働き方制度 MY WORK STYLE を開始」 https://corp.kaonavi.jp/news/pr_20201201/ 【募集概要】 自社サービスのタレントマネジメントシステム「カオナビ」において、新機能開発や機能拡張の実装、パ
Reactパフォーマンスを最大70%向上させる!? Million.js入門 - Qiita
3. Million.jsの基本的な使い方 Million.jsの基本的な使用方法は、Reactのコンポーネントをblockという関数で包むだけです。以下に例を示します。 import { block } from "million"; function Lion() { return ( <img src="https://million.dev/lion.svg" /> ); } const LionBlock = block(Lion); 上記のように、Million.jsを使用すると、Reactのコンポーネントを高速化できます。 ただし、現時点ではUIコンポーネントライブラリと一緒に使うことはできず、またコンポーネントにpropsを渡す際にスプレッド構文が使えないなど、まだいくつかの制約が存在します[^1^]。 4. Million.jsでのパフォーマンス向上 Million.js
React 18で使える新たなCSSユーティリティ「CSS Components」が公開 ー React 18以降主流になりつつあるサーバーコンポーネントに対応、CSS-in-JSのDX課題を解決
8月1日、React向けの組み合わせ可能なCSSコンポーネントの作成について発表がありました。 React 18のリリースにより、サーバーコンポーネントが一般的になり、Reactアプリを作成するためのデフォルトの方法になりました。 [LogRocketのブログ](https://blog.logrocket.com/writing-composable-css-components-react/)で、ReactとCSSを組み合わせるための新たな選択肢 「CSS Components」に関する解説記事が公開されています。 本稿では、日本のエンジニア向けに記事を要約して紹介します。詳しくは原文を参照してください。 CSS Componentsは、ReactコンポーネントにCSSクラスの組み合わせを行うための小型（2.3Kb）なモダンユーティリティです。このユーティリティは、開発者エクスペリエン
最低限の知識で簡単なWebアプリを作る（生JavaScript vs React&TypeScript、やりたいこと別サンプル集） - Qiita
はじめに ユーザーが何の準備も必要なく、PCでもスマホでも動かすことができるWebアプリの魅力に惹かれてJavaScriptを勉強しました。 Web初心者のわたしが最終的にはこんなアプリたちを作ることができました。 完全に独学なので「もっといい方法がある」とか「もっときれいに書ける」とかはあるかもしれませんが、これらを実装した経験を通して、必要だった最低限な知識をまとめようと思います。 サーバーとのやりとりは一切しない（したい方はすればよい）ので、定義によっては「Webアプリ」とは言わないかもしれませんが、ここでは便宜上そう呼ぶことにします。（あとがきも参照） 対象読者 Webアプリって難しそう 完全無料でアプリやゲームを公開したい サーバー立てたくない JavaScriptやったことない初心者 Reactって何？TypeScriptって何？便利なの？生JSでよくね？ フロントエンドだけ学
TypeScript/Reactのモダンな環境で開発するフロントエンジニア
TypeScript/Reactのモダンな環境で開発するフロントエンジニア 株式会社カオナビ @kaonavi I want to hear a detailed なにをやっているのか 私たちは、社員の個性・才能を発掘し戦略人事を加速させるタレントマネジメントシステム「カオナビ」を展開しています。 ■「カオナビ」とは？ 今まで紙やExcel、システム、社員の頭の中などに散在していた人材情報を一元管理することで、あらゆる人事課題への対応を可能にするプロダクトです。 現在は、企業規模や業種問わず、2214社（2021年9月時点）の企業に導入いただき、6年連続日本でのタレントマネジメントシステムシェアNo1※を獲得しています。 ※ITR「ITR Market View1：人材管理市場2021」人材管理市場-ベンダー別売上金額シェアで6年連続1位（2015～2020年度予想） 「カオナビ」製品情報
Reactでの広告配信プラットフォーム開発！フロントエンドエンジニア募集！
Reactでの広告配信プラットフォーム開発！フロントエンドエンジニア募集！ 株式会社フクロウラボ @fukurou I want to hear a detailed なにをやっているのか フクロウラボは、アプリ向けの広告配信プラットフォームを企画・開発・提供している広告スタートアップです。事業は売上成長前年比125%超え、取引顧客数も300社に近づき、シェアを拡大しています。 ◆アプリに特化した広告配信プラットフォーム「Circuit X（サーキットエックス）」 アプリユーザーを獲得したい広告主と広告収益を最大化したいメディアをつなぎ、「成果型Web広告」を通じて、顧客の商品・サービスの効果的なプロモーションを支援しています。 ────「Circuit X（サーキットエックス）」3つの強み ・動画を活用した広告を導入できる ・審査を通過した高品質なメディアに特化している ・高度な技術力に
「.js」選びに迷った時に役立つ！人気のJavaScriptライブラリ＆フレームワークまとめ！
JavaScriptでの開発にライブラリとフレームワークは欠かせないと言っても過言ではありません。しかし、種類が多すぎて選ぶのに迷うという方は多いのではないでしょうか？ そこで本記事では、人気のJavaScriptフレームワーク＆ライブラリをまとめました。各フレームワーク・ライブラリの特徴を解説していますので、「.js」選びに迷った際には、ぜひ参考にしていただければ幸いです。 JavaScriptライブラリとフレームワークの違い JavaScriptライブラリとJavaScriptフレームワークがあるのは知っているものの、実は違いをよく分かっていないという方は多いのではないでしょうか？ たとえば、Reactはライブラリで、Angularはフレームワークですが、解説記事でも混同して使われるケースがしばしば見受けられます。開発で利用するならそれぞれの役割の違いを正しく理解しておいた方がよいでし
2018 年 React と Redux のエコシステム総まとめ - Qiita
Angular などの JavaScript フレームワークは大規模向けに設計されており、標準で多くのエコシステムが組み込まれています。 React は単なる View ライブラリです。そのため View ライブラリを補完するためのエコシステムの選択が必須となります。 エコシステムを自由に組み合わせて開発者とプロジェクトに応じた理想的なフレームワークを作成する必要があるわけです。 これは、小規模アプリケーションから大規模アプリケーションまでの様々な要件やニーズに対応できる柔軟性が高いことを意味していますが、エコシステムを選択するためのコストが必要となります。 下記では、筆者が最低限、導入を検討する余地があると考える主要な React のエコシステムとその簡単な概要を記載しています。 筆者の独断と偏見で選択したエコシステムであることを考慮してお読みいただきたいです。 既知のエコシステム (ほ
中〜大規模なSPAを開発する時に抑えておきたい10のポイント - KAYAC Engineers' Blog
こんにちは。カヤックのSPAおじさんこと島津です。 今年はReactとVueを使ったSPA開発プロジェクトをいくつか担当してきたので、そこで得た知見の総まとめをしたいと思います。 ※ ここでのSPAとはすべてのViewをJavaScriptで書くWebアプリのことを指します。サーバーサイドMVCを主軸にViewの一部をReactやVueで書くこともありますが、今回はそのケースではありません。 1. フレームワーク 数年前とは事情が変わり、 フレームワークを使わないという選択肢は昨今だともう無いでしょう。丸腰のJSでDOMを弄っていた時代に比べると、かなり安定したフロントエンドの開発ができるようになりました。 人気フレームワークの台頭になっている React + Redux Vue + Vuex をこの1年使ってきましたが、書き方は違えどFluxアーキテクチャ・仮想DOM・コンポーネント志向
非SPAなサービスにReactを導入する - クックパッド開発者ブログ
投稿開発部の外村（@hokaccha）です。今回はReactについてのお話です。 ReactとSPA 最近JavaScriptやそれを取り巻くフレームワークなどの話題では、サーバ側はAPIのみを提供し、View(HTML)は全てJavaScriptで描画するような、いわゆるシングルページアプリケーション（以下SPA）についてよく語られます。 一方で、SPAを構築するにはコストがかかることも事実で、特にフロントエンドエンジニアが多くない環境では、従来通りサーバーサイドでViewを書きつつ動的な部分だけJavaScriptで処理するというアーキテクチャのほうが現実的な場合も往々にしてあります。 今回はこのような、サーバー側でHTMLを生成し、一部の動的な部分だけをReactで書くためのTipsを紹介します。 なお、基本的にサーバーサイドはRails前提ですが、RailsにおけるReactの開発
いまさら聞けないReact、Virtual DOM、JSX超入門
Reactとは――その3つの特徴 「React」はFacebookが公開している、ユーザーインタフェース（以下、UI）を効率的に構築することを目的としたWebフロントエンドフレームワーク（JavaScriptライブラリ）です。 Reactには、次のような特徴があります。 シンプル Reactを使ってUIを実装すると、「アプリケーションがどのように見えるか」を単純に表現できます。 叙述的 コンポーネントの状態がReactによって管理され、データに変更があるときには更新の必要があるコンポーネントだけ更新されるようになります。そのため、効率的にレンダリングさせることができます。 コンポーネントベース 「状態」の管理がカプセル化されたコンポーネントを使って、複雑なUIを構築することができます。コンポーネントの組み合わせでアプリケーションを構築することにより、コードの再利用やテストなどを実施しやすく
React、Redux、D3を用いたアニメーション | POSTD
これは小さな粒を生成するものです。あなたがクリックした場所から、小さな円が生まれて飛び出していくのです。マウスを持って、動かしてみましょう。粒はカーソルから生み出され続けます。 モバイル機器や、マウスではなく指で動かすタイプのコンピュータだったらどうでしょうか。同じように動きます。 私はオタクなので、これが楽しいと思います。皆さんの見解は様々かもしれません。埋め込み画像をクリックして、円が飛ぶのを見てください。クールじゃないですか？ 仕組み これは全てReact、Redux、D3を使って作られています。アニメーションのトリックはありません。少しの賢さが必要なだけです。 一般的な方法を、以下で説明してみます。 私たちは、ページ、SVGエレメント、内部の粒といった 全てをレンダリングするためにReact を使います。この全ては、propを使ってDOMを返す、Reactコンポーネントを使って作ら
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Auth.jsを完全に理解する (Next.js App Router 実装編) #2 - Qiita