UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
Magic UI
UI library for Design Engineers20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable.
フロントエンド開発の効率化！Nx と Playwright でビジュアルリグレッションテストを賢く実施しよう - Techtouch Developers Blog
はじめに なぜ VRT が必要なのか？ VRTとは？ Nx と Playwright で賢く VRT を実施する どう賢く実施したか 結果 まとめ 参考資料 はじめに 「食べログ ラーメン TOKYO 百名店」の全店舗訪問を目指してラーメン巡りを続けているフロントエンドエンジニアの kenshin です。 フロントエンド開発者の皆さん、新機能を追加したり、ライブラリをアップデートした後に UI が予期せず変更されてしまった経験はありませんか？このような問題を素早く検知し、未然に防ぐ方法として、ビジュアルリグレッションテスト（以下、VRT）があります。 この記事では、Nx と Playwright を用いて VRT を効率的に行う方法をご紹介します！ なぜ VRT が必要なのか？ フロントエンド開発では、新機能の追加やライブラリのアップデートにより、予期せぬ UI 変更が発生することがありま
生成AI時代のフロントエンド開発術
2022年11月にChatGPTがリリースされて、1年と約半年が経過しました。私はChatGPTが話題になった頃から、継続して利用しています。ChatGPTを使い続けていると、Webアプリケーションのフロントエンド開発に役立つことがありました。 そこで、本記事ではフロントエンド開発でChatGPTを活用して効率よく進める3つのパターンにまとめました。これらのパターンを紹介し、読者の皆さんの開発に役立ててもらえればと思います。 以下は、本記事で紹介するFigma、ソースコード、デプロイ先URLです。 Wireframing photo - Figma silverbirder/figma-photo-sample-app-for-ai - GitHub https://figma-photo-sample-app-for-ai.vercel.app ChatGPTを使う前に ChatGPTに
はじめに 本記事では無料で公開されている企業のエンジニア向け研修資料をまとめました。 近年では、多くの企業が新人向けの研修資料を公開しています。これらの資料は内容が充実しており、初心者から中級者まで幅広いレベルの学びを得ることができます。さらに、資料の作り方も参考になるため、勉強会で発表する人や企業の研修担当者にとっても貴重な情報源となっています。 本記事では様々な企業のエンジニア向け研修資料をまとめましたので、ぜひ参考にしてみてください！ 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 この記事の主な対象者 有名企業の研修資料を幅広く確認したい方 エンジニアとして初級から中級レベルの方 独学で学んでいる方 今後研修資料
React Compiler React 19 Beta から React Compiler が導入され利用可能となりました。 ※単体での検証としては次の記事が参考になります。 Next.js での利用 React Compiler のドキュメント内には、各種バンドラやフレームワークで利用する方法も記載されています。 というわけで、Next.js で実際に試してみよう、というのがこの記事の主旨です。 事前準備 / セットアップ 基本的にドキュメントに従って進めます。注意点としては、執筆時点での Next.js の Stable バージョン 14.2 ではまだ React 19 が利用できないため、canary バージョンの利用が必要です。 適当なディレクトリを作成し、その中で create-next-app を実行します。 実験用のためオプションは適当に選択しますが、せっかくなので Tur
Next.js breaking change - disable router/fetch cache by default
Next.js App Routerは巷では難しいと評されることが多々あります。これはReactの新機能であるServer ComponentsをはじめとするServer 1stとも言えるパラダイムシフトを必要とすること、そして初見殺しなデフォルトのキャッシュ挙動に起因していると筆者は考えています。 パラダイムシフトが必要となるServer ComponentsやServer ActionsなどのReactの新機能については、エラーで指摘・修正のヒントが提示されるなどの初学者のフォローもしっかり考慮した設計がなされてたり、多くのドキュメントや記事が公開されているので、これらについてはhooksが登場した時のようにあとは世の中に理解が広まるまでの時間の問題なのかなとも感じています。 一方でキャッシュについては、デフォルトで積極的かつ何層にも分けてキャッシュされる上、「意図せずキャッシュされて
別にみんなそうするべきとは全く思わないのだけど、僕は最近GitHub Copilotを意図的に無効にすることがあるので、そのへんについて雑に書いておく。 あらかじめ言っておくが、僕はGitHub Copilotを有効にすることもある。この記事もGitHub Copilotおよびそのユーザーを批判する意図は全くない。 GitHub Copilot が便利な場面 僕がGitHub Copilotを使い始めて少なくとも一年以上は経ってる。自分が書こうと思っているコードに近いものが簡単に生成されていくことに最初は感動したし、便利な場面がはたくさんある。 具体的に便利な場面を思い返してみる。 僕は仕事ではNext.jsでフロントエンドを書いたり、NestJSでバックエンドを書いたりしているのだが、その用途では便利だった。僕は自分が関わっているプロジェクトのReactやNode.jsの書き方はある程度
2024 年 5 月現在だと Next.js のドキュメントには明示的な記載がないが、「同時に実行可能な Server Action は常に１つだけ」という件について。 実は自分もこれをちゃんと認識しておらず、先日会社の先輩に教わって初めて知ったので、試したことなどを書き残しておく。 Next.js の場合、App Router (Router Reducer) によって、Server Action の実行が直列化 (キューイング) されるようになっている。 このキューイングの挙動を考慮すると、以下のような呼び出し方は危ういコードとなる。 "use client"; import { useState } from "react"; import { increment } from "./actions"; export default function Page() { const [
アクセシビリティの改善のために React Aria を活用しています - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！DOGO プロジェクトでソフトウェアエンジニアとして活動している @nissy_dev です。 DOGO プロジェクトでは、React Aria を活用してアクセシビリティの改善を行っています。 今回の記事では、React Aria を国内にもっと広めて行きたいということで、React Aria を利用することに決めた理由を振り返りつつ、React Aria について簡単に紹介します。 目次 OSS を活用した効率なアクセシビリティの改善 ライブラリの選定 React Aria の概要 Next.js App Router との相性 終わりに OSS を活用した効率なアクセシビリティの改善 DOGO プロジェクトでは、フロントエンドの刷新を進めていく中でアクセシビリティの改善についても取り組んでいます。 具体的な事例などについては、次の記事も参考にしてもらえればと思います。 各
May 19, 2024 - Póvoa de Varzim, Portugal 🇵🇹 A virtual DOM in 200 lines of JavaScript In this post I’ll walk through the full implementation of a Virtual DOM in a bit over 200 lines of JavaScript. The result is a full-featured and sufficiently performant virtual DOM library (demos). It’s available on NPM as the smvc package. The main goal is to illustrate the fundamental technique behind tools li
初夏のJavaScript祭りにて使用した資料です。 TanStackを用いてアプリケーションを実装するためのポイントと注意点を解説しています。 https://javascript-fes.doorkeeper.jp/events/172450
Next.js 15 RC
The Next.js 15 Release Candidate (RC) is now available. This early version allows you to test the latest features before the upcoming stable release. React: Support for the React 19 RC, React Compiler (Experimental), and hydration error improvements Caching: fetch requests, GET Route Handlers, and client navigations are no longer cached by default Partial Prerendering (Experimental): New Layout an
ドワンゴのN予備校という教育サービスでプログラミング講師をしている @sifue といいます。N高等学校/S高等学校のプログラミング講師もしており、学内のツール開発や運用などもしたりしています。 最近は生成AIが流行ったこともあって、Pythonだったり、UIが必要なものはどうしてもTypeScriptとReactで実装することも多いのですが、久しぶりにScalaを使っての開発をしてみました。 自身は、Scalaでの開発はニコニコ生放送のサービスを開発するときに使っていた他、N予備校内で提供している大規模Webアプリの教材やドワンゴが当初作成していたScalaテキストの作成などにも関わらせてもらいました。 その当時のScalaは2.12であったわけなのですが、その後2.13が出て、さらに今はScala3系になって3.3.1までバージョンが進み、開発環境が変わってすごく使い勝手がよくなったと
Next.js 15 RCまとめ
基本的には以下のNext.js 15 RCのブログを翻訳してまとめたものになります。 TL;DR React 19 RC: React 19 RCとReact Compiler(Experimental)、ハイドレーションエラーの改善のサポート キャッシュ: fetchによるリクエストとGETによるRoute Handlers、クライアントナビゲーションのキャッシュをデフォルトで無効化 Partial Prerendering (Experimental): 段階的な採用のための新しいLayoutとPageの設定のオプション next/after (Experimental): レスポンスの後にコードを実行するための新しいAPI create-next-app: デザインのアップデートとローカル開発でTurbopackを有効化するための新しいフラグ 外部パッケージのバンドル (Stable
GitHub Copilot Extensions発表 ―さまざまな開発ツールを組み合わせながらCopilotを利用可能に GitHubは2024年5月21日、サードパーティのツールやサービスの機能をGitHub Copilotに追加できる「GitHub Copilot Extensions」を発表した。Copilot Extensionsを使用すると、開発者はIDEやGitHub.comから離れることなく、好きなツールやサービスを使用しながら自然言語でAIとやりとりし、開発を進めることができる。 GitHub Copilot Extensionsのご紹介：パートナーとのエコシステムで無限の可能性を引き出す -GitHubブログ Copilot Extensionsは現在のところGitHub.com上のGitHub Copilot Chat、Visual Studio、およびVS Code
AzureについてCopilotが何でも教えてくれる「GitHub Copilot for Azure」発表。操作方法からプログラミング、デプロイの方法まで
AzureについてCopilotが何でも教えてくれる「GitHub Copilot for Azure」発表。操作方法からプログラミング、デプロイの方法まで マイクロソフトは日本時間5月22日から開催中のイベント「Microsoft Build 2024」で、生成AIがソフトウェアエンジニアを支援してくれる「GitHub Copilot」の拡張機能として、Microsoft Azureについて生成AIが質問に答える「GitHub Copilot for Azure」を発表しました。 GitHub Copilot for AzureをCopilot Chatから呼び出すことで、Azureのサービスの選択からReactアプリケーションの実行方法やDjangoで使用する際に最適なAzureデータベースの選択、デプロイの手順など、Azureに関するあらゆる質問に答えてもらえます。 回答は利用者のコ
視覚障害を持つ人々はブラウザの拡大機能やカスタムCSSを使用して文字を大きくしてウェブサイトにアクセスすることがありますが、サイト側の対応が不適切だとレイアウトが崩れてしまいます。レイアウトを維持したまま文字のサイズ変更に対応する方法が、Airbnbの企業ブログで解説されています。 Rethinking Text Resizing on Web. Airbnb has made significant strides in… | by Steven Bassett | The Airbnb Tech Blog | May, 2024 | Medium https://medium.com/airbnb-engineering/rethinking-text-resizing-on-web-1047b12d2881 視力が著しく低下してしまった人がAirbnbのページを見た時のイメージはこん
React to Nuxt
Nuxt for React devs in development everything you need to get started with Nuxt, from a React perspective. join waitlist with GitHub by registering you are signing up for email updates what will it cost? I'm still working out the details. I am aiming to be accessible to most developers. There will be purchasing power parity discounts. I'll also offer an early adopter discount for users who purchas
Author Mario Rodriguez GitHub Copilotの世界はますます大きくなっており、開発者をフローに長くとどめ、自然言語でより多くのことができるようにすることで、開発者のエクスペリエンスを向上させています。 今日、私たちはGitHub Copilot Extensionsを導入し、最も広く採用されているAI開発者ツールに世界の知識を取り込みます。拡大するパートナーエコシステムを通じて、GitHub Copilot Extensionsは、開発者がIDEやGitHub.comを離れることなく、好みのツールやサービスを使用して自然言語でクラウドを構築し、デプロイできるようにします。GitHub Copilot、そして今回のGitHub Copilot Extensionsを利用することで、開発者はフローを長く維持し、スキルを向上させ、イノベーションを迅速に起こすことがで
Introducing GitHub Copilot Extensions: Unlocking unlimited possibilities with our ecosystem of partners
Today, we’re introducing GitHub Copilot Extensions to bring the world’s knowledge into the most widely adopted AI developer tool. Through a growing partner ecosystem, Copilot Extensions enables developers to build and deploy to the cloud in their natural language with their preferred tools and services, all without leaving the IDE or GitHub.com. With Copilot and now Copilot Extensions, developers
Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada where 700+ attendees gathered in-person to discuss the latest in UI engineering. This was our first in-person conference since 2019, and we were thrilled to be able to bring the community together again. At React Conf 2024, we announced the React 19 RC, the React Native New Architecture Beta, and an experimental release
Rethinking Text Resizing on Web
Airbnb has made significant strides in improving web accessibility for Hosts and guests who require larger text sizes. This post takes an in-depth look at: The problems encountered on mobile web when relying solely on browser zoom.The challenges of introducing changes that would impact the workflow of all frontend engineers.The benefits seen since launching these accessibility improvements.by: Ste
モダンフロントエンドの境界線(2024年春)
あなたのモダンフロントエンドはどこから？ モダンフロントエンドとは、最新の技術とトレンドを取り入れた開発手法を指します。しかし、「モダン」とは一体どこから始まるのでしょう？Reactを使っていたら？クラウド上にHostingしていたら？最新のNextJSじゃないとダメ？人によって意見が分かれると思います。この記事では、2024年春時点で、どういう点を満たしていれば「モダン」なフロントエンドと言えるのか、自分なりにまとめています。 AltJS：TypeScriptによる静的型付け JavaScriptの柔軟性は開発者に多くの自由を与えますが、その自由が時にバグや予期しない動作を引き起こすこともあります。これに対して、TypeScript（TS）は静的型付けを導入することで、コードの信頼性とメンテナンス性を大幅に向上させる言語として、AltJSの地位を確立しています。 10年前、2014年頃の
GitHub Next | SpecLang
When we as software developers instruct computers to do something, we use a programming language like Rust, TypeScript or CSS. Theoretically, the precision of formal languages allows us to predict exactly what behavior we'll get. But this comes at the expense of needing to explicitly specify every detail we want. On the other hand, if we are instructing a fellow human being, we usually leave out m
It's possible to cut EC2 boot time from 40 seconds to 5 seconds by combining several optimizations like root volume streaming, instance warm pools, and instance resizing. It is possible to increase the speed at which EC2 instances boot! This can be critical for certain types of workloads, where a fresh EC2 instance is needed to process some request or task. At Depot, we accelerate builds, so the E
StackBlitzでReactとJSON Serverを動かしてフロントエンドでAPIからデータを取得するサンプルをブラウザで全部動かす | DevelopersIO
StackBlitzでReactとJSON Serverを動かしてフロントエンドでAPIからデータを取得するサンプルをブラウザで全部動かす StackBlitzを使って、ブラウザ上でReactとJSON Serverを動かして、フロントエンドからバックエンドAPIのデータを取得するサンプルを作りました。フロントエンドもバックエンドもあなたのブラウザ上で動きます。 フロントエンド（React）のブログを書くのに、動かせるサンプルとして StackBlitz を使っています。 StackBlitzって何？と、思った方はこちらのブログを御覧ください。 簡単に言うと、ブラウザ上でプレビューできるオンラインのコードエディタです。 フロントエンドは、基本的にデータをバックエンドAPIから取得して表示することが多いです。 そういった機能を盛り込んだブログを書くとき、StackBlitzのサンプルのデータ
GitHub - roblillack/spot: React-like desktop GUI toolkit for Go
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
【CloudWatch RUM × X-Ray】フロントエンドからバックエンドを一気通貫でトレースする方法 | DevelopersIO
CloudWatch RUMではX-Rayを利用してフロントエンドからのHTTP通信をトレースを確認することができ、さらにX-Rayに対応したバックエンドサービスにトレースIDを送信することで、フロントエンドからバックエンドまで同一のトレースIDで確認することが可能になります。 はじめに CloudWatch RUM (Real User Monitoring)はフロントエンドのモニタリングに関するサービスです。 ページを開くまでに掛かる時間やAPI実行時のエラー発生を検知することができます。 CloudWatch RUMではX-Rayを利用してフロントエンドからのHTTP通信をトレースを確認することができ、さらにX-Rayに対応したバックエンドサービスにトレースIDを送信することで、フロントエンドからバックエンドまで同一のトレースIDで確認することが可能になります。 今回はそのための構成
Astro 4.9 | Astro
Astro 4.9 is out! This release includes the long-awaited Container API, stabilized experimental features, and more. A small but mighty release! Full release highlights include: Experimental: Container API React 19 support for Astro Actions Stabilized experimental features To upgrade an existing project, use the automated @astrojs/upgrade CLI tool. Alternatively, upgrade manually by running the upg
はじめに こんにちは！ Yahoo!知恵袋の津村です。去年の11月からYahoo!知恵袋のフロントエンドシステムのリアーキテクトに取り組んでいます。この記事では、これまで抱えていた技術的な問題と、それらをどう解決したかについて説明します。この結果、開発効率向上やレビュー時間短縮などの効果がありました。 Yahoo!知恵袋は利用者登録者数5,200万人、質問総数2億8,000万件、回答総数は6億5,000万件以上（2024年4月3日現在）ある、日本最大級のQ&Aサイトです。2004年からサービスを開始し、今年20周年を迎えます。 Yahoo!知恵袋はモバイルクライアント、バックエンド、フロントエンドの3つのシステムで構成されています。今回対象とするフロントエンドシステムは、ブラウザやYahoo! JAPANアプリからアクセスされる際のWebページを提供するシステムです。 Yahoo!知恵袋の
先日RemixとReact Routerがマージされ、React Routerv7で統合されるという衝撃的なニュースがありました。 React RouterはこれまでSPA開発におけるルーティングライブラリとして広く活躍してきました。しかし今回の統合の背景にReact Router自体がすでにRemixとの差分が無くなっていたという事情があったことからも分かる通り、React Routerは直感的にルーティングの域を超えた存在です。 またFrameworkを採用せずReactでSPA開発をする際にはReact Routerの存在は大きいものでしたが、昨年の12月にTanStack Routerがversion1系になったことでVite+Reactでルーティングを実装する選択肢が新たに1つ増えました。 TanStack Routerについてご存知でない方はこちらの記事で詳しく紹介をしています
NTT東日本の中村です。 Amplify Gen2がGAとなり、プレビューで紹介されていたチュートリアルも大きく変わりました。 改めて、正式公開されたチュートリアルを確認してみました。 プレビュー版はこちらの過去の記事でまとめられていますが、GAになり、多少コマンドの変更等がありますので、ご注意下さい。 amplify → ampxにコマンドが変更 sandboxのオプションがnameからidentifierに変更 チュートリアルを始める前に チュートリアルはReact、Vue、Flutter等、言語フレームワークにより分かれていますが、今回はNextJSのApp Routerをベースに確認します。 今回はQuickStartを進めていきます。 Amplify Gen2のチュートリアル（Quick Start） 以前は無かった、QuickStartのチュートリアルで、GitHubにGen2
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2024年度】エンジニア向け研修資料まとめ - Qiita
Next.js で React Compiler を試しつつ出力コードを見てみる
最近は意図的にGitHub Copilotを無効にすることがある
Server Actions の同時実行制御と画面の状態更新
A virtual DOM in 200 lines of JavaScript
TanStackで効率的なルーティングとデータ取得を実現
Scala3の開発体験がScala2時代に比べてめちゃくちゃ良くなっていた話 - Qiita
GitHub Copilot Extensions発表 ―さまざまな開発ツールを組み合わせながらCopilotを利用可能に | gihyo.jp
ブラウザ側で文字サイズを変更してもレイアウトが崩れないようにするための方法をAirbnbのエンジニアが解説
GitHub Copilot Extensionsのご紹介：パートナーとのエコシステムで無限の可能性を引き出す
React Conf 2024 Recap – React
Making EC2 boot time 8x faster
Yahoo!知恵袋 フロントエンドをリアーキテクトしている話
【2024年】React Router & TanStack Router比較
Amplify Gen2のQuickStartチュートリアルを進めてみた | DevelopersIO
react on X: "2019「シュクメルリが話題だから食べたい」 ↓ 2020「松屋で買ってきた。鼻が慣れて食べ進むたびに美味しくなる」 ↓ 2024「松屋のシュクメルリはゴミ。ほぼ食べずに捨てた。」 中の人は別の人になったのかもしれない。 https://t.co/6PVtrThqCN"