React は次の10年を生き残れるか：3つのトレンドから考えるReact Tokyo ミートアップ #7 のメイントークのスライド。 https://react-tokyo.connpass.com/event/358171/
モダンなフロントエンドにおけるテストについて ［Modern Featured Test］ | gihyo.jp
本連載について はじめまして！ サイボウズ フロントエンドエキスパートチームのnus3です。 本連載では、Webフロントエンドに関してもう一歩踏み込んだ知識について、サイボウズフロントエンドエキスパートチームのメンバーによって不定期で解説記事を掲載しています。 本記事では、モダンフロントエンドにおけるテストについて、その種類や導入方法などを紹介します[1]。 モダンフロントエンドでのテスト ここ数年のWebフロントエンドでは次のように、さまざまな変化がありました。 ReactやVue.jsといった宣言的UIを採用したライブラリの普及 TypeScript中心としたエコシステムの発展 ES Modulesの採用の広がり ViteやSWC、RspackやTurbopackなどの新しいビルドツールの登場 この変化に合わせて、Webフロントエンドを対象にしたテストのツールや手法も増えてきました。
React Ink によるリッチ CLI (ClaudeCodeの裏側のアレ)
(この記事の AI 成分は 5 割ぐらいです) claude-code や gemini-cli を触った人なら、やたらリッチな CLI のインターフェースが一体どうなってるか疑問に思ったはずです。 これは ink というライブラリで実装されています。実体は React のカスタムレンダラーで、React の差分レンダリングで CLI を構築することができます。 中では yoga というレイアウトエンジンが使われており、これは React Native でも使われているもので、 Web で display: flex を使ったときと同じレイアウト計算モデルになります。 つまり、 React や ReactNative の知識で CLI (TUI) の アスキーアートの UI を作ってるわけですね。 実際に作ってみた例 React Ink の可能性を探るべく、ターミナルで動くゲームを実装して
React Router v7でコードを書いてくれSonnet
Claude 3.7 Sonnetに代表される現在の主力なコーディングモデルやソフトウェア開発タスクの自動化に利用されるLLMは、知識のカットオフにより2024年後半頃までにネット上に存在する情報をもとにしたソースコードしか書くことができない。例えばAnthropicのAPIを直接利用して確認すると、「React Routerの最新バージョンはv6です」と返答が来る。しかし、最新版はv7だ。v7.0.0はちょうどこの時期にリリースされたため境界にあり、つまりv7の実践的な知識はない。これに限らず、LLMの世界ではNext.jsはv14、Flaskはv2、Railsはv7と一世代遅れたバージョンを認識していることになっている。 これらのアップデートによって入った変更は、既存のソースコードに記述していればLLMが空気を読んで従う。加えて、ユーザーがカスタムルールとしてエディタ側で追加情報を設定
Figmaで作ったデザインが自動的に生成AIでWebアプリに。「Bolt.new」がFigmaインポートに対応
Figmaで作ったデザインが自動的に生成AIでWebアプリに。「Bolt.new」がFigmaインポートに対応 AIにフルスタックアプリの生成を指示できるサービス「Bolt.new」を提供するStackBlitzは、Bolt.newの新機能としてFigmaで作ったデザインのインポートに対応したと発表しました。 Introducing Figma to Bolt Go from Figma to pixel-perfect full stack app — just put bolt․new in front of the URL & start prompting! pic.twitter.com/r78vjraVms — bolt.new (@boltdotnew) March 13, 2025 Figmaで作成した画面デザインをBolt.newへインポート可能に これまでBolt.ne
Vercel v0からReact+Hono環境への移行戦略──Cursor活用で進める段階的マイグレーション｜只野剛【Go】
はじめまして。Algomatic ネオセールスカンパニーでソフトウェアエンジニアをしております、只野と申します。 2023年12月に入社して以来、生成AIの急速な進化を肌で感じながら、生成AIプロダクト開発にどっぷりと浸かる日々を送っています。 「2025年はLLMエージェントの年になる」と言われていますが、それは単なる流行ではなく、私たちエンジニアの働き方そのものも再定義されることを意味しています。 従来の常識が塗り替えられていく感覚。その波の真ん中に自分がいると思うと、恐れよりも、胸の高鳴りが勝ります。コードを書くたびに、未来が少しずつ姿を現す――そんなワクワクとともに、今日も開発に取り組んでいます。 この記事を読んだら得られることVercel v0から自社環境への移行戦略: プロトタイプからReact+Hono環境へ、段階的に移行するプロセスを解説 Cursorの効果的な活用法: コ
ReactとCSSで一定時間表示される通知をやるときの色々な方法 - Qiita
フロントエンド、というよりUI一般では、ユーザーの操作に対してまったく無反応なのは良くありません。ユーザーが意味のある操作をしたならば、何らかのフィードバックを返すべきです。 例えば、何かをユーザーのクリップボードにコピーするボタンというのはありがちですが、クリップボードに何かを書き込んでもそれだけだと目に見える変化がないので、追加で「コピーしました」のような通知を出すというのはよくあるパターンです。 ここでは、そのような通知が、ちょっとフェードインしながら表示され、一定時間後にフェードアウトしながら消えていくという要件を想定することにしましょう。 transitionを使う基本的な実装 まずはReactの部分をざっくりお見せします。 import { useState } from "react"; import "./styles.css"; export default functi
今Reactを使うならピュアなCSSをサポートするUIフレームワークやライブラリを選定するのがマルそうと思った話
最近個人開発でNext.jsの環境を立ち上げた際に、スタイリングをどうやってやろうかなと迷ったので初心に帰って最近のスタイリングについて調べ直してみました。結構面白かったので、記事にまとめることにしたので、よかったら読んでみてください。 本記事では以下に触れます。 React界隈におけるスタイリング方法の歴史的変遷 なぜタイトル通りピュアなCSSをサポートする機構が良いと感じたか おすすめのスタイリング機構 ざっと振り返るReactのスタイリング方法の歴史的変遷 私が最終的にピュアCSSを推したいと思った理由をお話する前に、爆速で変わり続けるReactとともに、スタイリングはどう変遷していったのかをざっとまとめたいと思います。 （こういうのって、歴史と組み合わせて理解すると、結構深まりますよねと思っているのは私だけでしょうか…、いえそんなことはないはず😊） 大昔: CSS Modules
Next.jsのIntercepting RoutesとParallel Routesを使ってモダンなUXを実現する
今回はNext.js 13.3のApp Routerから導入されたIntercepting RoutesとParallel Routesを使用して、モダンなUXを実現する方法を解説します。 実際に動作するデモ https://nextjs-intercepting-routes-example-igz0.vercel.app/articles ※ モバイルでは通常の記事一覧表示になりますが、PCではサイドバーを使ったプレビュー表示になります。 ソースコード 1. はじめに このプロジェクトでは以下のような機能を実装します。 記事一覧ページ PC表示時は2カラムレイアウト 記事一覧の右側にサイドバーで記事プレビューを表示 モバイル表示時は1カラムレイアウト 通常の記事一覧ページを表示 記事詳細ページ PC・モバイルで共通のページ 通常のブログの記事ページのように記事の内容を表示 (1) In
React Router v7で実現するuseStateゼロ開発
年末にReact Router v7がリリースされましたね！ これによりWebフレームワークであるRemixとルーティングライブラリであるReact Routerが統合され、1つのプロジェクトとなりました。 React Router v7で実現する完全純粋コンポーネント開発 統合自体が一つの大きなニュースなのでそこに注目が集まりがちですが、当然書き方もいくつか変化しています。 私としてはこの書き方の変化からほとんどのコンポーネントを純関数で表現できるようになったことに大きく注目しています。 純関数とは 純関数とは、ひとことでいうと 隠れた入出力がない関数のこと です。 隠れてない入力は引数、隠れてない出力は戻り値で、それ以外の入出力がある関数と言えます。 いくつか例をあげると、以下のようなものが挙げられます。 // 純関数 function add(a: number, b: number
Findyのエンジニア爆速成長の事例 2024年夏 - Findy Tech Blog
こんにちは。こんばんは。 開発生産性の可視化・分析をサポートする Findy Team+ 開発のフロントエンド リードをしている @shoota です。 先日、END が 【フルスタックエンジニアへの道！】React と TypeScript の修行をした話 というタイトルで、フルスタックエンジニアを目指すためのフロントエンドの修行の記事を投稿いたしました。 こちらの記事では React / TypeScript において個人学習程度のレベルにあった END が、機能開発を自走可能になるまでの内容が書かれています。 そこで本記事では、END の成長と挑戦をサポートし、実際に指導にあたった私がメンター視点での話をいたします。 育成のはじまり 下準備 ゴール設定 助走をしてもらう 実践 育成の方針と実践 トレードオフ 3 ヶ月の成果と分析 プルリクエストの可視化 メンティーの分析 メンターの分
「デザイナー向けCursor」を実現するOnlookのアーキテクチャ - laiso
Onlookとは 「Onlook」は、ReactおよびTailwind CSSを使ったWebサイトやWebアプリを、Electron製デスクトップアプリ上でFigmaのように直接デザイン編集し、その内容を即時にコードへ反映させることを目指すツールです。 onlook.com 類似の“サイトコーディング自動化”ツールが数多く存在する中で、筆者がOnlookに注目した理由は、多くのロジックがクライアントサイドで動作し、その内部構造がオープンソースであることです。内部の動きを追いやすく、自分のプロジェクトへカスタマイズを施すうえでも学びが多い点が魅力といえるでしょう。 反面、Onlookはまだまだ完成度が高くないという点があります。まだ作り途中のプロダクトという印象です（スクリーンキャストをRPして大袈裟に宣伝している人がいたらたしなめておきましょう）。いくつかの機能は開発中のまま動作しません。
Ubieが2024年にReact Nativeを選ぶ理由
Ubieでは、Ionic(Capacitor)でガワアプリ的に実装されていたモバイルアプリ(Android/iOS)を、2024年初頭にReact Native (with Expo)にリプレイスしました。 「なぜ今更React Nativeを？」という方もいらっしゃると思います。本記事では、UbieにとってReact Nativeがフィットした理由や検討した点を紹介します。Ubieの技術資産、人材、事業展望などのコンテキストを前提とするものであり、一般的な技術の良し悪しを論じる記事ではないことに注意してください。 Full-Stack TypeScript Ubieのプロダクト開発チームでは、フロントエンドエンジニア/バックエンドエンジニアといった技術領域での担当分けは原則せず、プロダクト開発エンジニアとして企画から開発、分析などに一貫して携わっています。 このように仕事を広く持つ前提で
React Native + Expoで1年以上運用したCTOが集まってみた 後編 - KitchHike Tech Blog
こんにちは、エンジニアの Miho です！Expo に関わるCTO達の座談会、 前編は React Native や Expo の仕組みについて理解を深めながら、導入のメリットや eject の必要性など、1年以上運用してきたからこそ語れる話題で盛り上がりました。 tech.kitchhike.com 後編は、オープンソースコミュニティという視点を中心に、Expo のもつ可能性をさらに深掘りしていきたいと思います！ Expo を支える組織 温度感あるOSSコミュニティ、Expo Expo のメリット・デメリット復習 コミュニティへの関わり方と、今後の展望 We’re Hiring! Expo を支える組織 藤崎 祥見（以下、S）：改めて Expo の価値や導入のメリットを振り返りたいと思います。React Native を含めて、クロスプラットフォームという特徴は間違いなく、少人数でのネイ
React Native + Expoで1年以上運用したCTOが集まってみた 前編 - KitchHike Tech Blog
こんにちは、エンジニアの Miho です！キッチハイクでは React Native でのアプリ開発が3年目を迎えましたが、みなさんは Expo についてどのような印象を抱いていますか？いざ、React Native でアプリ開発！と思って調べてみると、セットで紹介されていることが多いかと思います。 私自身、「Expo を使うとなんとなく開発が楽になりそうだな...🤔」という理解レベルでした。 ＊ キッチハイクは Expo を採用せず、素の React Native（Vanilla React Native）で開発しています。 Expo を採用して1年以上運用したCTOが、上野に集結 そんな、多くのエンジニアが気になっている「Expo 実際どうなの？」に答えてくれる、頼もしいCTO達がキッチハイクオフィスに集まってくださいました！非常に充実した2時間で、とてもひとつの記事にまとめきれず.
React 19の新機能まるわかり
2024年4月にリリースされたReact 19 Betaの新機能について、細かい点やポイントを解説します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TanStack Routerで型安全かつ効率的なルーティングを実現
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
Onlook – Cursor for Designers
GitHub - onlook-dev/onlook: The Cursor for Designers • An Open-Source AI-First Design tool • Visually build, style, and edit your React App with AI
