筆者自信、個人開発を長い間やってきた＆toB含め多くの開発に携わってきました。もともと開発速度に自信があり力でねじ伏せるタイプでしたが、それでもこのCursorを使い始めて世界が変わりました。具体的には、よくあるAI驚き屋の「3分でLPが作れた」「24時間AIが自動で」とかではなく、実践的な開発で6~10倍程度のスピードが出せるようになりました。序盤は10倍どころかとんでもない速度で仕上がっていきます。 筆者はAI駆動開発にハマり、1500時間くらいCursorを使い込んできたので、その経験を踏まえて現状をしっかり解説します。 この記事を読むとわかるCursorの持つ可能性 「コードを書く」から「AIがコードを書き、開発者が補助する」すべての機能 基本はProプラン$20で何でもできる 0→1開発から複雑な大規模プロジェクトまで、Composer Agent がマジでやばい ここ数年でGi
SQLを学習できるサービス「SQL道場」のご紹介
はじめに はじめまして、DMMで電子書籍のデータ分析をしている栃沢と申します。 日々、キャンペーン・クーポンの効果検証、UI改善、ABテスト設計などの仕事をしています。入社当初は「長くて複雑なSQLクエリを書く」ことに苦労しました。（もちろん今もですがw） データ分析の現場では、基本的なSQLの知識だけでは不十分だと感じています。 実務では、複数のテーブルを結合したり、サブクエリやウィンドウ関数を駆使したりと、より高度なSQLのスキルが求められます。しかし、これらを独学で習得するのは容易ではないと思います。 SQLを学べる書籍やオンラインサービスなどあることにはあるのですが、ほとんどがソフトウェアエンジニア向けであり、データアナリストが実際の業務で必要とするSQLを学べる場は少ないと感じています。 こうした背景から、データアナリストやビジネスアナリスト向けに、より実務に直結するSQL学習環
現時点の AI コーディングの実力を測るために、自分はプロンプトのみ、直接コードを書くのは禁止で Roo Code による VS Code によるエディタ操作のみでコードを書かせた。その感想 (急いで書いたのでいろいろと雑です) tl;dr 良し悪しはともかく、人類は確実にAIによる自動操縦型のプログラミング体験に依存するという確信を持った。 ただ、その基盤である CLINE(系)自体のツールとしての完成度はいまいち。 CLINE以外の、各モデルのコーディング性能も、現時点では物足りない。 CLINE とは何か(知らない人向け) いろいろと機能はあるが、コア機能としてはヘッドフルな vscode runner で、AI にコードを書かせるために必要な情報を受け渡しするインターフェースを持っている。ファイルの読み書きや、コマンドを実行結果をプロンプトにしてAIに渡す。puppeteer によ
ライブラリ選定のときに使えるツールあれこれ
自分が使ってるやつを紹介します。 GitHub Star History 指定したGitHubリポジトリのスターの増加数をグラフで見れるサイトです。 たとえば、👇の3つのReactのUIライブラリを例に見てみます。 mui chakra-ui shadcn-ui ▲https://star-history.com/#shadcn-ui/ui&chakra-ui/chakra-ui&mui/material-ui&Date こんな感じで、一目でライブラリの人気度合いをざっくり比較できます。 使い方 テキストボックスに、比較したいライブラリのGitHubリポジトリURLを入力するだけです。 また、「Align timeline」にチェックを入れると、グラフのスタートを揃えれます。 たとえば、Prisma ORMとDrizzle ORMを比較するとPrismaの方が圧倒的に見えますが、スタート
Reactはシンプルなサイトから複雑なアプリケーションまで、非常に幅広く採用されている人気のフレームワークです。OSS化から10年以上の歴史がありながら、昨今もReact Server Componentsなど革新的なアイディアを我々に提案し続けています。 一方で、React Server Componentsへの批判的意見やBoomer Fetching問題などを見ていると、Reactチームと一部Reactユーザーの間には意見の相違が見て取れます。この意見の相違はそれぞれが置かれた状況の違いから生じるもの、つまり「見てる世界が違う」ことに起因してると筆者は感じています。 本稿では「Reactチームの見てる世界」を歴史的経緯を踏まえながら考察し、Reactの根本にある思想やコンセプトに対する読者の理解を深めることを目指します。 要約 ReactはMetaの大規模開発を支えるべく開発され、シ
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 日本のソフトウェアエンジニアリングコミュニティの皆さんへ エンジニアリングは、単なるチェックリストではありません。システムを深く理解し、その制約を把握する学問です。ここ数年、日本のソフトウェアコミュニティの技術ブログを拝見する中で、少し気になる点があります。 それは、日本と海外との技術的なギャップが広がっているように見えるだけでなく、技術的な議論や知識の共有が十分に行われていないことです。 私が過去15年間で多くのプロジェクトを開発してきた中で、技術的な意思決定は常に長期的な影響を伴うものでした。特定のデータベースやプログラミング言語を
本スライドはオブジェクト指向プログラミング（OOP）を理解しているバックエンドエンジニアの方向けに、フロントエンドのコンポーネント指向を解説することで、フロントエンドを開発するための足がかりを作ることが狙いです。OOPとの違いを意識することで、フロントエンド特有の設計思考を身につけましょう。Reactと…
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
ほとんどのサービスとアプリケーションには、制限の大きなお試し版とも言える無料プランと、制限の緩和された有償プランがあります。さらに、有償プランのトライアルや、グループ開発向けのEnterpriseプランが用意されていることがあります。個々のサービスおよびアプリケーションについての料金体系の掲示は省くので、関心のあるものについてはまず無料プランから試すことをお勧めします。 アプリケーション構築は、多くの手順を必要とすることから比較的難易度の高い作業です。専用のウィザードがステップ・バイ・ステップで構築をフォローするスタイルは、今では「やりたいこと」を述べるだけでAIが代行してくれるようになりました。デザインも、直接アプリケーション構築に持ち込むことができます。 スタイリッシュなUIを生成するv0 ▲v0 v0（ブイゼロ）は、Next.jsの開発元であるVercel Labsによる、AIを活用
React で Modal や Confirm の実装を簡単にする react-call というライブラリがアツい！！！
タイトルの通り、めちゃくちゃ良さげなライブラリ react-call を見つけたので紹介するコーナー 実際の動きはわかりやすいデモページがあるので見てください👍 react-call とは react-call がもたらす効果は「ReactComponent を手続き的に処理できるようにする」というのが私の理解です。 これが何を意味するのかというと、Modal や Confirm のような「別のコンポーネントから任意のタイミングで呼び出したい(≒表示したい)」また「その結果(≒値など)を受け取りたい」というごく一般的な要件をシンプルに解決します🙌 詳しく見ていきましょう！ window.confirm との比較 下記は README にある例です。
Dockerでバインドマウントするのやめません？もうCompose Watchでいいでしょ？Docker composeの新機能を使い倒そう
はじめに Docker × VueやReactなどを使用して開発を行う方は多いかと思いますが、その際結構ハマるのがnode_modulesあたりではないでしょうか？ 特にnode_modulesをバインドマウントすることによって、ホスト側のnode_modulesが空になったり色々とややこしいですよね。沢山の賛同の声ありがとうございます！そうですよね！(🤔) 実はDocker compose 2.22.0以降で使用可能となったCompose Watchの機能を使えば、ややこしいバインドマウントのことを考えなくても良くなったりします。 またnode_modulesに焦点を当てていますが、Compose Watchで以下のことが可能なので多くの人のためになるかと思います！ ホスト側のファイルの変更をコンテナに反映させる package.jsonに変更が入ると自動で再buildしてくれる ぜひ
Join the O'Reilly online learning platform. Get a free trial today and find answers on the fly, or master something new and useful. Learn more Betty Jean Jennings and Frances Bilas (right) program the ENIAC in 1946. Via the Computer History Museum Eventually, interpreted languages, which are much easier to debug, became the norm. BASIC, one of the first of these to hit the big time, was at first s
フロントエンドテストの正解って？FAANSにおけるテスト戦略の振り返りとこれから - ZOZO TECH BLOG
はじめに こんにちは、FAANS部フロントエンドブロックでWeb開発をしている平舘です。 Webフロントエンドのテスト戦略って、結局どうすればいいのか、よくわからなくないですか？ この記事では、FAANS Webアプリケーション開発におけるテスト実装の歴史を「リリース期」「急成長期」「現在」という3つの開発フェーズに分けて振り返ります。プロダクト立ち上げからのリアルな現場感とともに振り返りつつ、主にテスト配分についてチームで議論しながらプロダクトへ反映していった歴史のレポートになっています。みなさんのテスト戦略の見直しや実践のヒントになれば幸いです。 目次 はじめに 目次 背景・課題 この記事で語らないこと 前提：FAANSについて 開発の歴史とテスト戦略の変遷 フェーズ1. 怒涛のリリース期 起きたこと (1) 関心の中心は、「何をつくるか」 (2) こなれない実装 (3) jest-d
今日からあなたはフロントエンドエンジニアです！ え、面接でバックエンド・インフラしかやってなかったって言ったのに！？フロント！？どうしよう 😭 [1] どうも、株式会社カナリーでお部屋探しマーケットプレイスの CANARY を開発している shusann です！ 本エントリーでは、 もしあなたが明日から急にフロントエンドエンジニアを任されることになっても困らないよう、私がこの半年間で何をどうやって学んできたかをシェアすることで道しるべとなれることを目指しています。 これから同じ境遇に立つ人やフロントエンド興味あるけど何から手を付ければいいかわからないようなエンジニアにとって、この記事が参考になれば嬉しいです 😍 とはいえ、本エントリーは半自伝的な記事で「ああ、こんなことやってたんだ」という読み物として話半分に読んでいただければ幸いです。 自己紹介 本題の前に、半年前の入社当時の自分の状
TypeScript の interface を活用して安全性と拡張性を兼ね備えた型を作る - Techtouch Developers Blog
はじめに 型安全性と拡張性の両立 宣言マージの活用 宣言マージとは？ 宣言マージを使ってメッセージの型を拡張する 型エイリアスと Generics を使った方法との比較 宣言マージを使うことで実装と型の整合性を担保しやすくなる MUI での宣言マージの活用事例 注意点 VS Code 上の型チェックの表示が tsc の型チェックの結果と異なる場合がある ライブラリ側が空の interface のままだと困ることがある なぜ react-redux ではこのアプローチをやめたのか？ まとめ interface の宣言マージを活用することで はじめに こんにちは！Element チームでフロントエンドを担当している all-user です。 Elementチームとは、テックタッチのプロダクト開発の中でも主にDOMとのインタラクション周りの開発を担当しているチームで、Shadow DOM や i
Origin UI - Beautiful UI components built with Tailwind CSS and React
Beautiful UI components built with Tailwind CSS and React.A collection of copy-and-paste components for quickly build application UIs. Quick search...
1. Project Rules とは Cursor の Project Rules（v0.45~） は、Cursor Chat/Composer での対話において、必要なコンテキストを与えるための機能です Cursor > General > Project Rules から設定できます。 これまで、Cursor では Rules for AI, .cursorrules といったカスタムルールを用いて、プロンプトのコンテキストを与えていました。 Project Rules は、これらのカスタムルールに加え、より具体的かつ個別にコンテキストを与えることができる機能です。 もちろん、Rules for AI や .cursorrules を併用することも可能です。 各ルールの特徴 Rules for AI Cursor のアプリケーション自体に設定するカスタムルールです。 Cursor で
Onlookとは 「Onlook」は、ReactおよびTailwind CSSを使ったWebサイトやWebアプリを、Electron製デスクトップアプリ上でFigmaのように直接デザイン編集し、その内容を即時にコードへ反映させることを目指すツールです。 onlook.com 類似の“サイトコーディング自動化”ツールが数多く存在する中で、筆者がOnlookに注目した理由は、多くのロジックがクライアントサイドで動作し、その内部構造がオープンソースであることです。内部の動きを追いやすく、自分のプロジェクトへカスタマイズを施すうえでも学びが多い点が魅力といえるでしょう。 反面、Onlookはまだまだ完成度が高くないという点があります。まだ作り途中のプロダクトという印象です（スクリーンキャストをRPして大袈裟に宣伝している人がいたらたしなめておきましょう）。いくつかの機能は開発中のまま動作しません。
「なにがしたいか」をベースにコメントをつけておくと、後で読むときのコストが下がりやすい。 実際にプロダクトコードで書いたことがあるコメント↓ (簡略化してます) // 画面内に入った動画を自動再生する+ほかの動画は停止する (すでに再生済みだったら再生しない) useEffect(() => { if (inView && !hasBeenPlayed && canAutoplay) { /* ... */ pauseOtherVideo(); play(); } /* ... */ }); このコンポーネントにはコレを含めて4つのコメント付きのuseEffectがあった。たびたび読み返す機会があったが、その度にこれらのコメントが大いに役立った。 なぜコメントが必要なのか? useEffectの中身はたいてい複雑な処理になる。しかもたいてい無名関数を渡すので、実現したい仕様に関する情報がな
【完全版】Clineとは何かを徹底解説します
この記事で紹介する「Cline」は、同様のAI支援ツールの中でも、VSCodeの拡張機能として提供されるオープンソースのAIエージェントです。 AIのコード自動生成のみならず、自動的にターミナルを操作して依存パッケージをインストールしたり、エラーが出ればログを解析して修正案を提案・実行するなど、まるで“AIが開発を進めていく”ようなユーザー体験をもたらし話題です。 Clineの他にもWindsurfエディタやCursorエディタも同様の機能を提供しており、コレが今のAI駆動開発というバズワードにも繋がっています。 しかし、Clineはユーザーエクスペリエンスの緻密さや、複雑なコンテキスト認識の部分では、CursorやWindsurf、と見劣りする面も否めません。したがって実際には、CursorやWindsurfが使える環境であればそちらをメインにしつつ、Clineを補助的に利用するというの
型安全にクエリパラメーターを扱う nuqs
型安全にクエリパラメーターを扱う nuqs 2025.01.25 フロントエンドの状態管理のパターンとしてクエリパラメータを信頼できる唯一の情報源(single source of truth)として扱うことがあります。ですが、クエリパラメーターの型が文字列であるため、型安全性が保証されないという課題があります。この記事では `nuqs` というライブラリを使用してクエリパラメーターを型安全に扱う方法について解説します。 フロントエンドの状態管理のパターンとしてクエリパラメータを信頼できる唯一の情報源(single source of truth)として扱うことがあります。つまり、useState などの React の状態管理フックを使用してメモリ上に保持した状態を使用するのではなく、location.search などでクエリパラメーターを取得し、それの情報を元に画面を描画するというこ
GoogleのGemini新機能「Multimodal Live API」で音声・映像・テキストをリアルタイムに扱う時代が到来！スターターキット公開で誰でも実装可能に｜りんか | AI情報発信 /ビジネス/研究
今回はGoogleが発表した次世代大規模言語モデル「Gemini」に搭載された新機能、Multimodal Live APIについてご紹介したいと思います。最近Githubでスターターキットが公開され、「え？これgit cloneで誰でも使えるの！？」とAI好きとしては衝撃を受けています。 誰でもGeminiのマルチモーダルAPIでアプリつくれちゃうのやばいなhttps://t.co/iJWjqE9h0N これgit cloneしたらこれ立ち上げられて、デフォルトで音声、カメラ、画面共有、検索などのツール使用もできる。しかもソースコードいじり放題だから好きなように改造できる。いろんなアプリがでてきそう pic.twitter.com/2LH4qsaXyn — 安東竜平 | Link AI (@airunner_linkai) January 23, 2025 See how to co-m
2025年のReact状態管理、正直どれがいいの？ - Zustand, Jotai, Redux, Recoil, Valtio, XState, TanStack Query をざっくり解説ReactreduxjotaizustandTanStackQuery 「Redux使ってるけど、もっと軽いの無いのかな...」 「Recoilって今でも現役なの？」 「ZustandとJotai、どっちがいいんだろう...」 Reactの状態管理ライブラリ、みなさんも選択に悩んだことありませんか？確かに2025年の今、選択肢の多さに頭を抱えてしまいますよね。Redux、Zustand、Jotai、Recoil、Valtio、XState、TanStack Query...それぞれに「これがウリ！」というポイントがあって、どれを選べばいいのか正直迷っちゃいます。 特にReact 18の登場で状況が更
AI エージェント界隈で話題の MCP の凄さ実感！ー その特徴・技術概要・今後の展開 ー「メタ AI エージェント」実現なるか？
MCP が盛り上がってるらしい… Anthropic が 2024年11月に発表した「Model Context Protocol（MCP）」ですが、AI エージェント界隈で結構な盛り上がりを見せています。そこで、その特徴や技術概要、将来の展望について、実際にコーディングした経験も踏まえてまとめてみようと思います。今後の開発の方向性を見るにつけ、MCP が切り開こうとしている世界とその可能性に、とてもワクワクしています。希望的憶測だと、たぶん 「メタ AI エージェント」「自律進化型AIエージェント」 にまでつながります！（後述） では手始めに、MCP について少々… MCPとは、雑に言うと、LLM が外部ツールやリソースを扱えるようにして、生成 AI の適用範囲を劇的に拡大するための オープンソース技術です。 この技術は「AI エージェント」と非常に相性が良いです。たとえば「マーケティン
年末にReact Router v7がリリースされましたね！ これによりWebフレームワークであるRemixとルーティングライブラリであるReact Routerが統合され、1つのプロジェクトとなりました。 React Router v7で実現する完全純粋コンポーネント開発 統合自体が一つの大きなニュースなのでそこに注目が集まりがちですが、当然書き方もいくつか変化しています。 私としてはこの書き方の変化からほとんどのコンポーネントを純関数で表現できるようになったことに大きく注目しています。 純関数とは 純関数とは、ひとことでいうと 隠れた入出力がない関数のこと です。 隠れてない入力は引数、隠れてない出力は戻り値で、それ以外の入出力がある関数と言えます。 いくつか例をあげると、以下のようなものが挙げられます。 // 純関数 function add(a: number, b: number
React Server Components を手軽に扱うフレームワーク react-server 2025.02.01 react-server は Node.js で JavaScript ファイルを実行するかのように React Server Components を扱うことを目的としたフレームワークです。Next.js の機能が過剰に感じられるような小さなアプリケーションを開発する際に有用です。 2025 年 2 月現在 React Server Components を扱う方法として最も知られているのは Next.js を利用する方法でしょう。実際に Next.js は React Server Components が React の Canary の機能である段階で、すでに安定した機能として提供されていました。このため React Server Components が N
Ruby on RailsでUIコンポーネント構築を効率化、ユーザ体験の仮説検証ループを爆速で回しちゃうぞ！ - Techouse Developers Blog
はじめに こんにちは、2023 年からジョブハウスで業務委託のバックエンドエンジニアをしている jxmtst です。 今日は、ジョブハウスで使用している Ruby on Rails の ViewComponent を用いて UI コンポーネントを実装する際に利用しているライブラリを紹介します。 ViewComponent（UI コンポーネント）× Lookbook（プレビュー）× rspec-snapshot（スナップショットテスト） という、フロントエンドエンジニアには馴染みのあるようなエコシステムを、Ruby on Rails 上で実現しています。 ViewComponent とは ViewComponent は、もともと GitHub のエンジニアによって開発されました。 大規模な Rails アプリケーションを扱う中で、ビューに関するコードの複雑化やメンテナンス性の低下といった問題
React19のuseOptimisticの使いどころがそんなにわからないなと思っていた昨今ですが、めっちゃハマる使いどころを見つけたので共有します！ useOptimisticってなに？ 「楽観的更新をするためのHook」と記載されており、「データの更新→ロード→更新されたあとのデータを表示」の動作のロードの部分を割愛するための仕組みで、確実にデータの更新ができるであろうケースに使用するとアプリを高速で操作できるように見せることができるようです。 useOptimisticの使用の有無の比較 なし あり なしのほうがアイテムを離したあとに少しカクついていることがわかります。 DnDでデータを並び替える実装をみる（なし） ドラックアンドドロップ（以下DnD）で操作を行う場合の多くはDropしたときにDBのデータも書き換えたいものだと思います。今回はリストを並び替えるという動作を例にあげます
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに ついにReact19が安定版になりました！！！！ React19になったことで「サーバーコンポーネントの正式対応」や「アクションの追加」など大きな変更が入りました。 この変更によってShadcnなど多くのライブラリが対応を頑張っている状況です(おそらく裏では...) 今回はそんなReact19の中でも特に知っておきたい機能を中心に紹介していきます。 ちなみにReact19の機能は実験的に少し前から公開されており、世の中にはすでに多くの記事やYoutube動画があります。 しかしそれらの記事や動画を見て思いました… 自分の能力が
遠回りしたことは決して無駄にはならない。Vue.jsに魅せられ、OSSをライフワークにした私のキャリア - Findy Engineer Lab
はじめまして、川口（@kazu_pon）です。私はソフトウェアエンジニアとして現在株式会社プレイドで働いています。OSS活動としては、Vue.jsコアチームメンバー、Nuxtエコシステムメンバーであり、Vue.js 日本ユーザグループ、そしてVue Fes Japanというカンファレンスのオーガナイザーをしています。 この記事では、日々の仕事をこなしつつOSSとどう出会い、どのようなOSS活動をしているか、これらの両立をどうやって築いていったのかなど、私のこれまでのソフトウェアエンジニアとしてのキャリアを振り返りつつ紹介します。 プロのソフトウェアエンジニアとして働くということ 始まりはゲームを作ってみたいという想いから 私がソフトウェアやIT業界に興味を持ったのは、幼少期に遊んでいたテレビゲームがきっかけでした。小学校の頃はファミリーコンピュータが全盛期で、ゲームがどうやって作られている
はじめに Google CloudのVertex AIを活用して、RAGを構築しないといけなくなったので、その方法をまとめていきます。 まずは準備として、ローカルのみで実装をしていきます。 今回の記事では、ローカルに保存したテキストドキュメントをベースに、ローカルのDBにベクトルデータを保存し、LangGraphでRAGを実装していくことを考えます。 その上で、次回以降の記事で、Google CloudのGCSにドキュメントを置いたり、BigQueryをベクトルストアにしたり、Cloud SQLをベクトルストアにしたりする方法を解説していきたいと思います。 参考文献 （書籍のリンクはamazonアフィリエイトリンクです） 記事 LangChainからLangGraphによるAgent構築への移行方法 Chroma DBによる類似度検索のメソッド カスタムRetrieverクラスの作成方法
サーバーからクライアントへ Promise をそのまま渡せる時代へ！ こんにちは、React の世界は日々進化していますね。最近のアップデートで、Server Component から Client Component へ Promise を返して、さらにデータストリーミングができるようになったんです！ この新機能のおかげで、サーバーで作成した Promise をそのままクライアントに渡し、Suspense と連携させることで、シームレスに非同期データを扱えるようになりました！ どういうこと？ 簡単に言うと、サーバー側で Promise を生成し、そのままクライアント側で use API を使って解決できます。今までなら、サーバーサイドで await してからデータを props として渡す必要がありましたが、これでレンダリングのブロッキングを回避できる可能性が広がります。 こんなコードで
こんにちは、株式会社ACES でテックリードをしている奥田(@masaya_okuda)です。 リポジトリで利用するライブラリを適宜バージョンアップするのは、現場によっては当たり前かもしれません。しかし、プロダクトを前に進めるため日々機能開発を行うスタートアップにおいて、継続してバージョンアップを実施するのは容易ではありません。 本記事では、入社後半年で全てのライブラリを最新にバージョンアップし、2024年1月からこの状態を保ち続けている取り組みについてご紹介します！ なぜライブラリのバージョンアップを継続的に行うのか？ 入社時は責任者が曖昧な状態 入社後半年で全てのライブラリを最新に CIで守りながら毎日自動でバージョンアップ ライブラリバージョン以外もメンテナンスする 技術ロードマップの策定 Takepepeさんを技術顧問に迎え、Next.js App Routerへ移行！ おわりに
スキーマバリデーションライブラリの標準インターフェース standard-schema 2025.02.15 スキーマバリデーションライブラリはここ数年で人気を集めています。多くのライブラリが登場する中で、standard-schema はスキーマバリデーションライブラリの標準インターフェースを提供します。これにより、エコシステムツールがユーザー定義の型検証ツールをより簡単に受け入れられるようにすることを目指しています。 Zod や valibot, ArkType などを代表とするスキーマバリデーションライブラリはここ数年で人気を集めています。これらのライブラリは TypeScript の型システムを活用してスキーマを定義し、それに基づいてバリデーションを行います。バリデーションを行った結果は型安全に扱うことができるのが特徴です。 ユーザー入力のように外部からのデータを安全に扱いたいよう
Today, we’re deprecating Create React App for new apps, and encouraging existing apps to migrate to a framework, or to migrate to a build tool like Vite, Parcel, or RSBuild. We’re also providing docs for when a framework isn’t a good fit for your project, you want to build your own framework, or you just want to learn how React works by building a React app from scratch. When we released Create Re
Create React Appが非推奨となり、これからは主にフレームワークを利用することになりそうなので軽くおさらいしてゆく
Create React Appが公式で非推奨となりました 2010年代の後半から長らくReact環境構築のデファクトとなっていた% create-react-appですが、先日（2025-01-29）に公式で非推奨となりました。 2016年頃に、webpack(+dev-server, style-loader), Babel, ESLintといったモダンフロントエンド開発で必須となる静的解析ツール+コンパイラの環境構築を誰でも簡単に構築できるようFacebookから公開されたのが初めてで、現在は アクティブなメンテナが不在であること 各フレームワークなどでそれぞれ環境構築が提供されていること といったような理由から非推奨となったようです。 今回は、これからの代替となりそうなフレームワークやライブラリのおさらいを改めて行いたいと思います。
最近いろんなプロジェクトをNext.js v14からv15にアップデート作業している@zaruです、こんにちは。 Next.js v15の大きな変更点はリリースノートなどで発表されていますし、アップグレードをサポートする codemod もあり、大半のプロジェクトは npx @next/codemod@canary upgrade latest を実行するだけで自動で修正されます。 しかし、Next.js v15のリリースノートには書かれていない（と思う）のですが、Next.js v15にはフォームをサブミットすると、フォーム内容がリセットされるように変更されています。これはv14とは異なる挙動です。 「フォームをサブミットすると、フォーム内容がリセットされる」とテキストで書くと、それはそうでしょう。なに当たり前のこと言ってるんだ？となるかもしれません。 実際に挙動を確認したほうが早いので
LINEヤフーのフロントエンド技術を明らかにするState of LY Frontend 2024実施レポート
LINEヤフーでは、2024年の10月に社内のWebフロントエンド開発に携わる社内のメンバーを対象に、昨今のWebフロントエンド関連のトレンドや周辺ツールの利用状況について調査するアンケート「State of LY Frontend 2024」を実施しました。これは、以前は「UIT Global Survey」とも呼ばれていた取り組みの後継でもあり、毎年社内に向けて実施されているものです（昨年度の実施レポート）。同様の取り組みとして State of JavaScript や State of CSS が知られていますが、そのLINEヤフー版と想像していただけるとわかりやすいかと思います。 今回のサーベイは、合併会社誕生後1年がたち、新会社の体制が整って以来初めて広く周知されたものとなりました。そのため、Webフロントエンド開発者だけで 342人 という、単独のグループ社員としてはあまり例
技術記事のレベル低下は誰のため？ - 楽して学べる幻想と戦うためにもしくはバズるという快楽に対する防衛術 - じゃあ、おうちで学べる
はじめに バズっている技術ブログやSNSの投稿を見ていて「今さらこんな基本的なTipsが数千いいねされるのか」と感じることはありませんか。「とりあえずDockerを使ってみよう」「React超入門」といった手取り足取り系の投稿がバズり続け、タイムラインには毎日のように初心者向けコンテンツが流れています。同じような入門記事が異なる執筆者によって際限なく生み出されるこの状況は、技術情報の共有における興味深い現象と言えるでしょう。では、なぜこのような現象が続いているのでしょうか。 「学習」に対する一般的な認識 多くの普通の人にとって「学習」は快適な体験であるべきだという認識があります。自分が理解できる範囲の内容を読み、既存の知識と結びつけて徐々に理解を深めていく。分からないことがあれば基礎的な内容に立ち返る。実際、人間の脳は安全な環境で学習することを好む傾向にあり、多くの人は「コンフォートゾーン
はじめまして、フロントエンドエンジニアの白浜です。 私が所属する令和トラベルでは旅行アプリ『NEWT（ニュート）』を提供しており、この3年弱で様々な新機能をリリースしてきました。 パフォーマンス面の改善は後回しになりがちだったのですが、2024年11月にChromeに搭載されたパフォーマンスのAIアシスタントを試してみたところ、想像以上に手軽にパフォーマンスを改善できたので、今回はその取り組みをご紹介します。 2024/11にリリースされたパフォーマンスAIアシスタント Lighthouseで改善点の洗い出し まずはChromeのDevToolsからLighthouseでNEWTの改善点を洗い出します。 普段使っているChromeを使うとFireabse認証やChrome拡張機能によって影響を受けるため、作成したばかりのChromeプロファイルを使うことをおすすめします[1]。 こちらがL
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最強神器「Cursor」の本当に使い方を徹底解説【知らないとヤバいレベルです】
人間によるコーディング禁止の CLINE 縛りでゲームを作らせてみた感想
Reactチームが見てる世界、Reactユーザーが見てる世界
日本のエンジニアよ、技術スタックのチェックリスト共有はやめろ - Qiita
バックエンドエンジニアのためのフロントエンド入門 #devsumiC
React→Hotwireへ 技術スタック変更した話
サイト構築からデプロイまで。AIが変えるフロントエンド開発 | レバテックラボ（レバテックLAB）
The End of Programming as We Know It
バックエンド出身エンジニアがReact/Next.jsに入門してみた話
Cursor の Project Rules 活用と改善
「デザイナー向けCursor」を実現するOnlookのアーキテクチャ - laiso
useEffectにはコメントをつけよう - Panda Noir
2025年のReact状態管理、正直どれがいいの？ - Zustand, Jotai, Redux, Recoil, Valtio, XState, TanStack Query をざっくり解説 - Qiita
React Router v7で実現するuseStateゼロ開発
React Server Components を手軽に扱うフレームワーク react-server
React19のuseOptimisticとDnDを組みせるといい感じ
【図解解説】React19の新機能を使って書籍管理アプリを開発するチュートリアル【Hono/TypeScript/TailwindCSS】 - Qiita
LangGraphのTool Callingを利用して、RAG Agentsを構築する（前編）
サーバーからクライアントへ Promise をそのまま渡せる時代へ！ - Qiita
半年でライブラリを最新化！スタートアップが実践する継続的メンテナンス - ACES エンジニアブログ
スキーマバリデーションライブラリの標準インターフェース standard-schema
Sunsetting Create React App – React
Next.js v15からはフォーム内容がリセットされる
DevToolsに搭載されたパフォーマンスAIアシスタントをNEWTに使ってみる