こんにちは。アクセシビリティ本部のアクセシビリティエンジニアの五十嵐です。SmartHRでは主にアクセシビリティテスターが見つけた課題を技術的な観点から改善したり、根本的な問題を解決するための仕組みづくりを担当しています。 さて、Meta が開発する UI ライブラリとして長い間人気を博している React ですが、2024年4月に最新版であるバージョン 19 のRC版が公開されており、注目を集めています。 バージョン 19 では "use client" や "use server" でも知られる Server Components を含む様々な機能が含まれる予定ですが、この記事では、そんな React バージョン 19 をアクセシビリティの観点からキャッチアップし、特に便利になりそうな点や、注意が必要になりそうな点などを見ていきます。 forwardRef が不要になった 仮想 DOM
This guide is open source, please go ⭐️ it on GitHub and make suggestions/edits there! https://github.com/FrontendMasters/front-end-handbook-2024 1. Overview of Field of Work This section provides an overview of the field of front-end development/engineering. 1.1 — What is a (Frontend||UI||UX) Developer/Engineer? A front-end developer/engineer uses Web Platform Technologies —namely HTML, CSS, and
デル・テクノロジーズ様ならびにITmedia様が開催する「データ仮想化」セミナーの登壇資料です。 詳細は当社ニュースをご参照ください。 https://kazaneya.com/fdcdfd5026ab4ec6a56484955be98f06 過去登壇資料のショート版となります。フル版は以…
iPhone全モデルと2020年以降のMacからパスワードやメールを盗み出す「iLeakage」が報告される、実際に動作するデモ映像もあり
すべてのiPhoneおよびiPadや2020年以降に登場したApple Silicon搭載Macが対象となる攻撃手法「iLeakage」がジョージア工科大学の研究チームによって発見されました。iLeakageを悪用するウェブサイトにアクセスした場合、ウェブサービスのパスワードやメールなどの情報を盗み出されてしまいます。 iLeakage https://ileakage.com/ iLeakageは必要になる可能性のある処理を事前に行うことでCPU性能の向上を図る技術「投機的実行」を悪用するタイプの攻撃で、iPhoneやiPadに搭載されているAシリーズチップおよびMacや一部のiPadに搭載されてるMシリーズチップに対して有効です。このため、すべてのiPhoneおよびiPadと2020年以降に登場したMacはiLeakageによる攻撃の対象となり得ます。 iLeakageは「ウェブサイト
https://hackers-champloo.org/2023/program.html のLT、「htmx is not a typo」のスライドです。 スライド内で紹介した情報やリンクは以下のとおりです。 https://htmx.org https://www.thoughtworks.com/radar/languages-and-frameworks/htmx https://github.com/kimihito/hcmpl23-htmx-demo https://hypermedia.systems/book/contents/ https://htmx.org/essays/#memes https://alpinejs.dev/
リクルートは8月9日、新卒エンジニア向け研修資料を無料公開した。公開したのは、2024年度に実際行った研修の内容と資料の一部。エンジニアの心構えからデータベース設計、JavaScript研修、Webアクセシビリティー入門など、26種類の資料を無償公開している。 例えば、エンジニアの心構えを学べる資料「ソフトウェアエンジニアとしての姿勢と心構え」は、プログラマー向けの技術書を複数出版している、ソフトウェア開発者の和田卓人さんが作成したもの。エンジニアとしてどのように技術を学んでいけば良いのか、「技術の学び方を学ぶ」ために作成した資料だという。 同社は例年、新卒エンジニア向けの研修資料を無償公開している。23年度は24種類の資料を公開していたが、24年度は「実践データベース設計」などの資料を追加した。この資料を使った講座では、具体的なデータベースの設計方法や、実際の開発プロセスを実践に沿った形
タイトル通り、JavaScriptツール群「UnJS」にどんなライブラリが存在するのかをひたすら見てみよう！ という記事です。 本当は全て紹介しようと思ったのですが、全75個あり、1つの記事に入れるとあまりにも多すぎるので、この記事では2023年11月4日時点のStar数の順に沿って上位30個を紹介していきます。 UnJS とは UnJSは、Nuxt 開発チームが中心となって開発・メンテナンスされている、あらゆるJavaScriptフレームワーク上で統一的に動作するユーティリティーツール・ライブラリ群です。 UnJSというプロジェクトが何であるかについては、2022年11月に公開された講演映像「UnJS: Nuxt 3 behind the scenes by Pooya Parsa」を観て頂くのが最もわかりやすいと思います。Nuxt 3 正式リリース直後ということもあって、かなり詳細な背
JavaScript標準でgroupBy関数が実装されています。2023年11月現在Safari以外の主要なブラウザで実装済みで、SafariもTechnology Previewのようです。 （現在MDNの日本語の記事は古い情報のままになっており、現行と異なるので注意！ →更新していただきました。ありがとうございます！） Proposal の Stage はすでに 4 / Finished なので規格として確定済みです。 基本的な使い方 よくあるgroupByです。配列（Iterable）とキーを抽出する関数の二つを指定すると、キーで配列をグループ化します。 const ret = Object.groupBy([ { name: '山田太郎', address: '東京' }, { name: '山田次郎', address: '愛知' }, { name: '山田三郎', addre
We've been building a bridge. You can hear Ryan talk about this announcement at React Conf 🎥 For nearly 4 years we've been working on Remix, a fullstack framework built on web standards to help you build better websites and applications. React Router has always been Remix's largest dependency after React itself. The two projects are so closely aligned that we updated React Router to include Remix
Next.jsでは、レンダリング手法をCSR・SSR・SSG・ISRの中から選ぶことができます。 本記事では、それぞれの特徴に触れつつ、実装方法を紹介します。 CSR （Client Side Rendering） クライアントからのリクエストに対して、サーバーは空のHTMLとJavaScriptを返します。 このJavaScriptがブラウザ上で実行されることにより、実際に表示するHTMlをレンダリングします。 メリット サーバーとの通信が初期遷移時のみに抑えられる ページ遷移が高速 デメリット 初回読み込み時に全てのデータを一括して取得するので、ページが表示されるまでの時間が長い（アプリケーションの規模が大きくなればなるほど、時間が長くなる） JavaScriptはブラウザで実行されているので、ページ表示までの時間（JavaScriptの実行時間）が使用しているマシンスペックに依存して
スクロール駆動アニメーションは、ビジターがスクロールするとそれに連動して要素がアニメーションします。スクロールに連動するということは、上下に繰り返しスクロールするとアニメーションも繰り返し実行されてしまいます。 スクロール駆動アニメーションを1回だけ実行し、アニメーションの終了フレームに留まらせる実装方法を紹介します。 Run a Scroll-Driven Animation only once by Bramus! 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに スクロール駆動アニメーションを1回だけ実行するコード コードの使い方 なぜ機能するのか デモ はじめに スクロール駆動アニメーション（Scroll-Driven Animations）は、スクロールによって制御されます。上下にスクロールすると、アニメーショ
Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも対応しています。 サンプルの実装方法が参考になる点も魅力の一つです。 簡単ですがつらつらと紹介していきたいと思います。 shadcn/uiとは デモを見てるとフレームワークやライブラリなのかなと思いきやそうではなく、コピペで利用できるサンプル集という立ち位置になっています。基本的にはTailwind CSSでデザインされてるようです。 サンプルとはいえ、実装方法で参考になった箇所が結構あったのでそこも気に入ってるポイ
[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita
2024年6月11日リリースのChrome126から、View Transitions APIがパワーアップし、別ページへの遷移でも使うことができるようになったので紹介したいと思います。 View Transitions APIとは View Transitions APIは、画面遷移をなめらかに行うことができる機能です。 この機能を使うと、以下の動画で紹介されているように、ページ遷移にアニメーションをつけることができます。 まずはView Transitions APIの特徴から紹介したいと思います。 特徴1：異なるDOM要素間でアニメーションできる アニメーション前後のDOM構造が異なっていても、アニメーションを行うことが可能です。 例えば、<div>がアニメーションで変化しつつ<img>要素になる、といったアニメーションが可能です。 特徴2：アニメーションがCSSで自由自在 アニメー
![[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/6d0f69b54c49382d904de765c0422236d575c6fb/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSlMlRTMlODElQUElRTMlODElOTclNUQlMjAlRTMlODMlOTElRTMlODMlQUYlRTMlODMlQkMlRTMlODIlQTIlRTMlODMlODMlRTMlODMlOTclRTMlODElOTclRTMlODElOUZWaWV3JTIwVHJhbnNpdGlvbnMlMjBBUEklRTMlODElQTdNUEElRTMlODIlOTJTUEElRTMlODElQkYlRTMlODElOUYlRTMlODElODQlRTMlODElQUIlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTczOTE1OTBiYWFjZTA5OTRlOTQ5Nzg5YWY4YWYzNTU0%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBhY2Nlc3MzMTUxZnEmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWY1MzU2MmY1NWIyOTk5ZTJlMzQ4MDAwNmY2Nzg4ODA4%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dfc3d15fe1084dea53fb4229c9a89561f)
fetch の中断と Back/Forward Cache からの復元で発生する奇妙な現象について - mizdra's blog
TL;DR あるリソースの fetch 中にページ遷移すると、一部ブラウザでは fetch が中断される 中断されると、TypeError が throw される ページ遷移時は、ブラウザによって遷移前のページの実行が"停止"され、"捨てられる"ので、通常 throw された後のことは考えなくて良い しかし、そのページが Back/Forward Cache から復元されうるなら、話は別 ブラウザバックすると、エラーが throw された後からページが再開される！！！ そして発生する、奇妙な現象の数々... はじまりは、あるサービスの不具合報告 ある日、「Webサービスから外部サービスにページ遷移した後、ブラウザバックで戻ると、エラー画面が表示される」という不具合が報告された。どうも Webサービスの ErrorBoundary で何かしらのエラーが catch され、それによってエラー画
【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】
【Vue.js】今、ゼロから Vue を学び始めるならこうやるといいんじゃないか (2024) 【初学者向け】 🤔 Vue.js って何から勉強すれば良いですか？ この疑問は Vue.js に限らず、多くの初学者の中でホットなトピックです。 すごく端的にこの問いに答えてみると、「好きにすればいい、正解はない！自分で考えなさい！」です。 これは確かにとても正しい意見[1]だと思いますが、そうは言っても初学者にとっては何から手をつけたらいいのかわからない状況が多いです。 と言うことで、上記のような前提は持ちつつ「まぁ、とりあえずこんな感じで良いんじゃないですかね(安牌)」と言う私(筆者)なりのアイデアを書いてみたいと思います。 ご参考までに 😙 それではスタート 💨 Vue.js の公式ドキュメント 「おいおい、急にハードルが高すぎるだろ...」 そう思った方も少なくないかもしれません。
Deno、モダンなJavaScript/TypeScriptに最適化したパッケージレジストリ「JSR」パブリックベータ公開。Node.js、Bun、Cloudflareなどにも対応
JavaScript/TypeScriptランタイムの「Deno」を開発提供しているDeno Land Inc.は、モダンなJavaScriptおよびTypeScriptに最適化した新しいパッケージレジストリ「JSR」をパブリックベータとして公開しました。 現在、JavaScriptのパッケージレジストリは、Node.js用に構築され、GitHubが運営するnpm（Node Pacage Manager）が事実上の標準となっています。 参考：GitHubがnpmの買収を発表、JavaScriptのパッケージ管理サービス。将来的にはGitHubとnpmを統合へ npmにはさまざまな機能を備えたパッケージモジュールが大量に登録されており、この豊富なパッケージモジュールの存在がNode.jsの大きな利点となっています。そのため、現在ではDeno、Bun、Cloudflare Workersなど後
Findy Team+でフロントエンドエンジニアをしている 川村(@peijun333)です。 Findy では、フロントエンドのコード品質と安定性を確保するために Jest などのテストフレームワークを積極的に活用しています。通常、Jest は CLI から実行してテスト結果をコンソールで確認しますが、コマンドを用意する手間や、テスト経過のデバッグのために都度 console.log などでその内容を確認しなければならずとても不便です。 そこで、今回はテストの自動化とリアルタイムなフィードバックを提供する JavaScript の統合テストツールである Wallaby.js を紹介します。Wallaby.js を導入することで、開発効率の向上が期待できます。 Wallaby.js とは？ 前提条件 VS Code でテストの修正 Wallaby.js はリファクタリングに強い スナップシ
2023年11月19日開催された JSConf JP 2023 で発表した「書いたJavaScriptがそのままブラウザで動く未来へ」のスピーカーノートです（スライドに対した情報がないので、スピーカーノートをそのまま公開します）。
Back to articlesAnnouncing WinterJSThe most performant JavaScript Service Workers server thanks to Rust and SpiderMonkey Follow up the WinterJS series reading about the recent production-ready WinterJS 1.0 release here. Today we are incredibly excited to announce WinterJS (wasmer/winterjs package). WinterJS is a JavaScript Service Workers server written in Rust, that uses the SpiderMonkey engine t
フロントエンドカンファレンス北海道 2024にて「ウェブエンジニアでもWasmを使いたい!」というタイトルで20分のトークを行いました． 当日のトークでは，WebAssemblyの特徴に触れつつ，特殊な用途[1]以外でWebAssemblyをどのように活用できそうか，実際にAssemblyScriptのコードを例に紹介しました． AssemblyScriptはTypeScriptをWebAssemblyにコンパイルできる言語として紹介しましたが，より正確にはTypeScriptと同じ構文を持つ言語をWebAssemblyにコンパイルする言語という方が正しいかもしれません． これはTypeScriptにはない構文などをAssemblyScriptでサポートしているという話ではなく，TypeScriptの型推論などの言語機能を活用してAssemblyScriptのコードを書くことができるように
WebアプリケーションのUIの表現はどんどんリッチになってきています。しかしその一方でブラウザ上での描画の負荷は増大し、時としてスムーズに動かず体験を損ねることもあります。ユーザーにとって使い心地の良いUI体験はフロントエンドのパフォーマンスチューニングに大きく委ねられていると言えるでしょう。 スタートアップ開発を支援する株式会社Gaji-Laboでは、サービスの価値に直結するエンドユーザーの体験向上のため、快適なUIを提供する事をとても大切にしています。 この記事では、快適に動くUIを作るため、フロントエンドフレームワークのマジョリティであるReactとどう付き合っていくべきかを考えていきましょう。 Reactの仕事を理解するまず、Reactがどんな仕事をしているのかを理解するところからはじめましょう。Reactの主な仕事はUIを描画すること、そして必要に応じてそれを再描画することです。
コードフォーマッターをPrettierからdprintにしたら10倍以上速くなった話🚀 - KAKEHASHI Tech Blog
はじめに こんにちは！ソフトウェアエンジニアの種岡です。 私たちのチームでは、TypeScriptを使用して開発を行っており、Prettierというコードフォーマッターを利用し、チーム内でコーディングスタイル統一に大変重宝しています。 そんなフォーマッター界隈で、Rust製で爆速で動作すると噂のdprintが良いということで試してみたところ、驚くべきことが起きました！ Prettierでは、コードフォーマッティングに 7.69秒 かかっていたのですが dprintを使うことでわずか 0.47秒 で完了するようになりました🚀🚀🚀 なんと、 10倍以上速い とういう結果に！ コードフォーマットは、Gitのpre-commitフックやGitHub Actionsで日々活用しており、普段の開発作業の裏側でコードの品質を支えてくれているありがたい存在です。 この速度改善により、開発プロセスの中
型は型、どうもかわしんです。SQLite では型は絶対ではなく、あくまでも尊重です。信用しすぎると裏切られます。 最近 Rust で SQLite をフルスクラッチで再実装しています。 github.com なるべく本家の SQLite と compatible にするために SQLite のドキュメントやコードを読んで挙動を理解しながら作っています。これを作ることになった経緯はこの記事で紹介していますが、その過程でいろいろ知らなかった面白い仕様や実装があったので紹介していきたいと思います。今回はその第一弾です。 kawasin73.hatenablog.com データ型と Type Affinity SQLite のドキュメントの中で、今の所一番面白いのがこれです。 www.sqlite.org まず、SQLite の内部的には 5 つのデータ型しかありません。 NULL INTEGER
リッチテキストエディタ(RTE)って？ リッチテキストエディタ（以下RTE）とは、文字を入力できるだけでなく、文字に装飾を加えたり、段落を設定できたりと複雑な機能を持つエディタのことです。 弊社プロダクトであるkintone内にも以下のようなエディタが存在します。 また、似たものを指すWYSIWYG(読み方:ウィジウィグ)という用語もありますが、これはWhat You See Is What You Get（見たままが得られる）の略であり、編集時と出力時の見た目が同じエディタのことを指します。 Zennやesaのように、Markdown記法で編集したものが変換されて表示されるようなエディタは含みません。 このようにWYSIWYGはRTEより狭義の意味になっています。 WYSIWYGエディタ(Google Docs) WYSIWYGではないエディタ（esa） 独自データモデル VS DOMツ
これはなんらかのアドベントカレンダーの何日目かの記事だったりしません。 KOBA789 です。仕事では人工衛星の搭載ソフトウェアを書いたり、人工衛星の管制システムのソフトウェアを書いたりしています。 先日、こういうツイ……ポストをしたらちょっとバズりました。意外と興味持ってくれる人が多かったので、それに関連するオタク早口記事でも書くかぁと思って筆を執っています。 うちの人工衛星の開発ツールはウェブ技術でできている 前述のポストは管制システムについてですが、開発用ツール（C2A DevTools）もまた React + TypeScript でできています。 まぁ画面見てもなにがなんだかという感じだと思いますが、UNIX サーバーで top コマンド叩いたときの内容と、サーバーのログが合体したみたいなものが表示されていると思ってください。 これらの数値は gRPC-web の Server-
Phoenix | Phoenix
A lightweight macOS window and app manager scriptable with JavaScript. You can also easily use languages which compile to JavaScript such as TypeScript. Phoenix aims for efficiency and a very small footprint. If you like the idea of scripting your own window or app management toolkit with JavaScript, Phoenix is probably going to give you the things you want. With Phoenix you can bind keyboard shor
TypeScript/JavaScriptの不要なコードを削除するツール「Knip」の紹介 - ベースマキナ エンジニアブログ
こんにちは、taroです！ 今回は、ベースマキナのTypeScriptのプロジェクトで不要なコードの検知・削除で使用しているKnipについて紹介します。 Knip とは Knipは、TypeScript/JavaScriptのコードベースの不要なコードを検出するCLIツールです。 以下が検出できる不要なコードの例です。 package.jsonのdependencies/devDependenciesの中で使われていないpackage exportされているがどこからもimportされていない変数、関数、型など 使用していないファイル その他、検出できる内容の一覧はこちらで確認できます。 またExperimentalな機能（2024年7月現在）として不要なコードの自動削除も可能です。 ちなみにTypeScript/JavaScriptの不要なコードの検出するツールではts-pruneも知ら
JavaScriptの活躍の場を広げる「ランタイム」の今
執筆 山内 直 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表 山田祥寛）に所属するテクニカルライター。出版社を経てフリーランスとして独立。ライター、エディター、デベロッパー、講師業に従事。屋号は「たまデジ。」。著書に『Bootstrap 5 フロントエンド開発の教科書』、『作って学べるHTML＋JavaScriptの基本』など。 監修 山田 祥寛 静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「独習」シリーズ、「これからはじめるReact実践入門」、「改訂3版 JavaScript本格入門」他、
2024-03-27に行われたFindy『フロントエンド技術選定 ~ゼロランタイムCSS in JSとTailwind CSS編~』の登壇資料です https://findy.connpass.com/event/312625/
はじめに この記事について こんにちは、zomysan（ぞみ） です。今回は私の所属するソーシャルPLUSのフロントエンドチームがどのようなことを考えてテストを作っているのかを紹介します。 フロントエンドのテスト手法については素晴らしい本や記事がすでにたくさん存在しますが、限られたリソースの中で、実務としてどうテストをこなしているのか、という具体的な事例として楽しんでいただければ幸いです。 テスト運用における課題や改善点も率直に紹介しますので、「うちではこうやって解決しているよ」といったご意見があればぜひコメント欄で教えてください！ 対象読者 フロントエンドのテスト運用に悩んでいる方 フロントエンドのテストってどういうものなのか興味がある方 ソーシャルPLUSに入社したフロントエンドメンバー この記事に書いていないこと すべてのチームにとっての最適解は提示していません 弊チームにとっても折
新たなサーバサイドJavaScriptランタイム「WinterJS 1.0」正式リリース、WebAssemblyへのコンパイルも可能。Wasmerが開発
新たなサーバサイドJavaScriptランタイム「WinterJS 1.0」正式リリース、WebAssemblyへのコンパイルも可能。Wasmerが開発 WebAssemblyランタイム「Wasmer」の開発元として知られているWasmer社は、新しいサーバサイドのJavaScriptランタイム「WinterJS」の正式版となる「WinterJS 1.0」のリリースを発表しました。 ❄️ Introducing WinterJS 1.0 - the fastest WinterCG Javascript runtime in the world powered by Rust and SpiderMonkey ...and #WebAssembly compatible! Now supporting: React Server Components Cloudflare mode 150
はじめに こんにちは。Repro で Booster の開発をしている杉浦と申します。 最近は JavaScript の盛り上がりが凄いですね。今ではブラウザ内にとどまらず、サーバサイドでも活用される様になりました。 これには、言語仕様が整理されたり機能が強化されたり、非常に大きな発展があったという点が大きいです。 実は、言語としての JavaScript だけではなく、最近 HTML との境界インタフェースとしての JavaScript の仕様も最近かなり明確化されてきています。 自分も HTML5 の最初のあたりまでは把握していたのですが、Booster の開発に携わる中で久しぶりに確認したところ、随分と仕様が進化し複雑になっていました。 今回はそんな HTML 規格の変化部分の紹介と、過去からの HTML と JavaScript の流れを振り返る簡単なまとめです。 HTML 仕様と
米セキュリティ企業のPhylumは7月3日（現地時間）、JavasScriptライブラリ「jQuery」の特定バージョンがトロイの木馬化され、GitHubなどで拡散していると警告した。 同社は5月26日、パッケージ管理システム「npm」でトロイの木馬化されたjQueryを確認。少なくとも1カ月にわたって、数十のパッケージで“汚染”されたバージョンが公開されているのを確かめた。さらに、GitHubやCDNサービス「jsDelivr」でも拡散していることが分かったとしている。 対象のパッケージには、悪意あるコードが追加されたjQueryのコピーが含まれていた。汚染されたバージョンはWebサイトのフォームデータを抽出し、外部に送信するという。 Phylumは「マルウェアを作動させるために必要な条件は限られているが、パッケージが広く配布されていることから、潜在的な影響は広く、多くの開発者に影響を与
GitHubは、脆弱性のあるコードをAIボットが自動的に発見、修正したコードとその解説をプルリクエストしてくれる「code scanning autofix」（コードスキャン自動修正機能）を発表しました。 Meet code scanning autofix, the new AI security expertise now built into GitHub Advanced Security! https://t.co/cTDuKZCWMv — GitHub (@github) March 20, 2024 下記がそのコードスキャン自動修正機能の説明です。「Found means fixed: Introducing code scanning autofix, powered by GitHub Copilot and CodeQL」から引用します。 Powered by GitH
Honoで見直すMPAの開発者体験
Next.js App Routerのリリース以降、 async function で書けるServer Componentsいいじゃんファイルベースルーティングも使いやすいなと触ってたのですが、まだ安定していないこともあり不可解なエラーメッセージや複雑なキャッシュの仕組み、デプロイ先を選ぶ感じなどこのままNext.jsにベットしてていいのかなと感じていました。 そんな折にHonoでシンプルなフォームを持つWebアプリを書く機会があり、非常に優れた開発者体験に驚きました。5年以上前にMPAを開発した経験もありますがそこから比べてもとても良くなっていて、Honoの良さを感じるとともにMPAというアプローチを見直すきっかけになりました。 そもそも現在Webフロントエンドを構築する際に当たり前のように選択肢に上がるSPAですが、必ずしもSPAが適していない場合でもSPAが選択されることが少なくな
Storybook をフル活用してテストを実装したその後の話 - Cybozu Inside Out | サイボウズエンジニアのブログ
この記事は、CYBOZU SUMMER BLOG FES '24 (Frontend stage) DAY13 の記事です。 こんにちは、フロリアでエンジニアとして活動している hacchan です。 現在 kintone ではフロリアというプロジェクトの中で、Closure Tools から React への移行作業に取り組んでいます。 以前、そのフロリアのチームの 1 つである Reactone チーム が Storybook をフル活用してテストを実装した話 を紹介しましたが、今回はそのアフターストーリーを紹介します。 Storybook のフル活用はやめた 以前の Reactone チームでは、Storybook の Test Runner を使って、Integration Test を実行するなど、Storybook をフル活用してテストを実装していましたが、新たな領域の刷新を開
ブロッキングってそもそも何だよ - Lambdaカクテル
さきほど別のブログ記事を書いていて(それはまたそのうち発射するけど)、その中でブロッキング処理とか同期的に扱う、という言葉を使った。 このときの自分の理解がこれ: ブロッキング 呼ぶと待たされる ノンブロッキング 呼んでも待たされない、すぐ返る そのときはJavascriptの話をしていた。Javascriptはシングルスレッドの言語だ。そして、各種のAPIは基本的にノンブロッキングに設計されている。つまり、コールバックを取るようになっていたり、Promiseを返すようになっているということだ。だから、処理系が提供する特殊な処理(例えばNodeが提供するhogehogeSync()といったもの)を利用しない限り、ブロックが原理的に起こらないし、あえてする理由もない。 という話を書いていて、でも重い計算処理は待たされるだろと思った。これはブロックしていることに他ならないのではないか、と。 し
Remix の SPA モード
Remix の SPA モード 2024.01.14 Remix は React のフルスタックフレームワークで、Web 標準に基づいた API で構築されていることが特徴です。Node.js のようなサーバーサイドの JavaScript 環境で動作することを前提としています。しかし、現実の世界ではサーバーを用意せずに、静的なファイルをホスティングするだけの環境で Web アプリケーションを構築することが有効な場合も多くあります。このような需要を満たすために、Remix v2.5.0 から実験的に SPA モードが導入されました。 Remix は React のフルスタックフレームワークで、Web 標準に基づいて構築されていることが特徴です。例えばデータのミューテーションはクライアントからサーバーの API をコールするのではなく、HTML のフォームを使って行うといます。また Resp
この記事は最近リリースしたlocation-stateというライブラリの紹介記事です。 モチベーション Reactのstate管理は、様々な分類が可能です。筆者が過去に書いた記事「スコープとライフタイムで考えるReact State再考」では、stateの分類は大きく以下2つの観点で分類ができると述べました。 スコープによる分類 ライフタイム（=stateの生存期間）による分類 詳しく知りたい方はこの記事を読んでいただきたいのですが、今でもstate管理というと多くの場合スコープによる分類の話が多く、ライフタイムによる分類の話はあまり聞かない気がします。 なぜライフタイム観点が重要か ライフタイムを意識せずに実装した場合に発生するのが、遷移時に状態が破棄され復元されない、つまりブラウザバックでstateが壊れるという問題です。この問題については以下の記事で、Vercelの社長が2014年に
Next.js App Router と控えめにお付き合いして普通の Web アプリを配信する | Offers Tech Blog
まずは長いものに巻かれたいときもある Offers を運営している株式会社 overflow の あほむ でございます。 先日 コードベースのディレクトリ構成にフォーカスした記事 を公開した関連記事として、Next.js App Router をどのように取り扱っているかについてご紹介します。 【AD?】今回の記事の内容を含んだり含まなかったりすると思いますが、来週 2024/01/17(水) 19:20 〜 オンライン開催の PWA Night vol.59 で発表予定なので興味のある方はぜひ。（終了済み） 下記は本記事の内容を含むイベント発表資料です。ご参考までに。 今回の前提 前回記事 の引用ですが今回も同様です。 最終目標は単体事業でありつつ実質マルチプロダクトな画面群のリプレース クライアントサイドでヘビーなビジネスロジックを持つ必要がない アプリケーション特性としては SaaS
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React 19 で変わるアクセシビリティ周りの技術 - SmartHR Tech Blog
The Front End Developer/Engineer Handbook 2024
データマネジメント入門 - DX推進を支えるデータ基盤の重要性 / 20240125
htmx is not a typo
リクルート、新卒エンジニア向け研修資料を無料公開 「実践データベース設計」など全26種類
UnJS にどんなツールがあるのか、上位30件すべて紹介してみた
ついに JavaScript に groupBy が実装されたぞ！！！ - Qiita
Merging Remix and React Router
【Next.js14】CSR・SSR・SSG・ISRの違いと実装方法 - Qiita
CSSのスクロール駆動アニメーションを1回だけ実行し、終了フレームに留まらせる実装方法 -runOnce
Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita
Wallaby.jsを使ってフロントエンド開発のテストを効率化しよう - Findy Tech Blog
「書いたJavaScriptがそのままブラウザで動く未来へ」スピーカーノート
Announcing WinterJS · Blog · Wasmer
ウェブエンジニアでもWasmを使いたい! アフタートーク
Reactの気持ちになって理解するWebパフォーマンスチューニング
SQLite のおもしろ仕様 (1) : データ型 - kawasin73のブログ
リッチテキストエディター（RTE）のJSライブラリ色々試してみた
リアルタイム通信用のコネクションをタブ間で共有してまとめる
デザインシステムで Tailwind CSSとCSS in JSに分散投資をしたら良かった話
弊社のフロントエンドのテストについて、考え方・方針・やっていることなど全部紹介します（2024年版）
SCRIPT 要素の変遷から触れる Web の進化 - Repro Tech Blog
トロイの木馬化したjQueryがGitHubやCDN経由で拡散 米セキュリティ企業が警告
GitHub、脆弱性のあるコードの自動修正機能発表。AIボットが修正済みコードと解説をプルリクエスト
ブラウザバックで壊れないstate管理を実現する`location-state`