ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、第11代黒帯（ヤフー内のスキル任命制度／Webフロントエンド領域）の浜田（@narirow）です。今回はヤフー全社で実施してきた、「Webパフォーマンス改善プロジェクト」についてお話ししたいと思います。 長期に渡る活動の結果、多くのサービスのWebパフォーマンスが徐々に向上しています。この記事では、取り組みの経緯や、多くのサービス分析を通してわかったコスパの良い施策（比較的簡単に実施できてスコアも上がりやすい施策）などをご紹介します。 全社横断でWebパフォーマンス改善を実施する経緯 さかのぼること2021年、Googleから以下のような案内がありました。 「Core Web VitalsがGoogle検索の検索順位に
世の中には多くの C# に関する誤解が蔓延っています。 偏見にも満ちています。 そして技術的に正しい批判ではなく、根本的に技術的に誤った批判ばかりで正直悲しい。 技術的に正しい形の批判なら「お、そうだな。そしてそれの解決策はですねぇ...(ﾆﾔﾆﾔ)」となるのですが...。 そして C# 界隈から一歩出ると、「え、C# で作ってるの！？なんで？？」とか言われる事が非常に多い始末。 C# 大好きマンとしては非常に嘆かわしい。 嘆かわしい限りなので、ここでなぜ C# を私が好むか、そして何故ソフトウェアの開発に向いているかを語りたいと思います。そして誤解が解けたら嬉しい。ついでに C# を書きたいと思ってくれたら嬉しい。 想定読者 前書きという名の予防線 事前知識: C# と .NET C# はパフォーマンスの高い言語 C# はビルドも高速 C# はオープンソースかつクロスプラットフォーム 言
How I built a modern website in 2021September 29th, 2021 — 34 min read For over half of 2021, I worked on a complete rewrite of kentcdodds.com. You're reading this on the rewrite of this site! Are you using dark mode or light mode? Have you signed in and selected your team yet? Have you tried to call into the Call Kent Podcast? This blog post isn't about these and other features of the new site, b
📝 require(moduleName) は同期処理なのに対して、import(moduleName)は非同期処理となります。 📝 tsconfig.jsonでesModuleInteropがtrueでないとdeafult importの意味合いは異なります。 この表はCommonJS ModulesとECMAScript Modulesで機能的に1対1で応するという意味ではありませんが、 大まかにはこの対応表にそってECMAScript Modulesの構文へと変換ができます。 エディターを使い手動で変換したり、次のようなツールを使ってある程度機械的な変換も可能です。 cjstoesm commonjs-to-es-module-codemod このモジュールの変換で重要なことは、できるだけCommonJS ModulesとECMAScript Modulesを混ぜないことです。
スターの多い順にブコメを並び替える
FANZAの検索結果から熟女を除外するブックマークレット がうまく動いたので、気を良くしてはてなブックマークのコメント欄をスター数順にソートするブックマークレットを作りました。 作った動機は、「注目コメントに入りきれなかったちょっといいコメント」をサクサク探したいから。結果として建設的コメント順位付けモデルを無効化していますが、あのアルゴリズムには特に不満は特にありません。 ブックマークレット javascript: (async () => { const wait = ms => new Promise(resolve => setTimeout(resolve, ms)); document.querySelector('.js-bookmarks-sort-tab[data-sort="recent"]').click(); window.scrollTo(0, document.
私が働いているAniqueという会社では、1年前に全てのソフトウェアでTypescriptを採用することにしました。私たちが開発している進撃の巨人のNFTサービス “Attack on Titan: Legacy” でも採用しています。 TypescriptではNestJSという素晴らしいAPIフレームワークを利用することができ、生産性高く開発を続けることができます。また、私たちはフロントエンドでNext.jsを利用しています。言語レベルでのコンテキストスイッチを抑えることで、一人のエンジニアがフロントエンドとバックエンドのどちらもの機能を開発する環境が作れました。 しかし、Nodeならではの作法や設計について、Web上にはたくさんの情報があるものの、あまりにも情報が多すぎて、まとまったプラクティスになかなか出会うことができませんでした。そのため、最初はチーム内での共通認識を作るのに苦労し
OpenUI は Generative UI を構築するためのフレームワークです。OpenUI 言語と呼ばれる独自の宣言型言語を使用して、AI が UI を構築するための指示を与えるという新しいアプローチを提供します。この記事では OpenUI を使用して Generative UI を実装する方法について解説します。 AI エージェントがチャットの応答で UI を生成する Generative UI と呼ばれる分野が注目を集めています。従来の AI エージェントとの対話はテキストベースが中心です。例えば「京都の旅行の計画をして」といった質問に対して、AI はテキストで観光地の場所を説明したり観光名所の外観を説明しようとしますが、人間の脳は視覚情報で理解する方が得意なため、テキストで長々と説明されるよりも地図や写真を見た方が理解しやすいことが多いです。 Generative UI とは、A
Developers are increasingly relying on AI coding assistants to accelerate our daily workflows. These tools can autocomplete functions, suggest bug fixes, and even generate entire modules or MVPs. Yet, as many of us have learned, the quality of the AI’s output depends largely on the quality of the prompt you provide. In other words, prompt engineering has become an essential skill. A poorly phrased
WebKit Features in Safari 16.4
Mar 27, 2023 by Patrick Angle, Marcos Caceres, Razvan Caliman, Jon Davis, Brady Eidson, Timothy Hatcher, Ryosuke Niwa, and Jen Simmons ContentsWeb Push on iOS and iPadOSImprovements for Web AppsWeb ComponentsCSSHTMLJavaScript and WebAssemblyWeb APIImages, Video, and AudioWKWebViewDeveloper ToolingWeb InspectorSafari Web ExtensionsSafari Content BlockersNew Restrictions in Lockdown ModeMore Improve
GitHub - modelcontextprotocol/servers: Model Context Protocol Servers
Official integrations are maintained by companies building production ready MCP servers for their platforms. 21st.dev Magic - Create crafted UI components inspired by the best 21st.dev design engineers. 2slides - An MCP server that provides tools to convert content into slides/PPT/presentation or generate slides/PPT/presentation with user intention. ActionKit by Paragon - Connect to 130+ SaaS inte
はじめに 「オープンソースに挑戦したいけど、どんなプロジェクトを作ればいいかわからない…」そんな悩みを持っていませんか？ 本記事では、初心者・中級者・上級者・達人 の4つのレベルに分けて、合計 120個のオープンソースプロジェクトアイデア を紹介します。 それぞれのアイデアの詳細については折りたたんであります。興味がある内容については広げてみて機能要件や実装のポイント、拡張機能、学べることを見てみてください！ 自分のスキルレベルに合ったプロジェクトを見つけて、実際に開発に挑戦してみましょう！ 初心者向けプロジェクトアイデア 1. ToDoリストアプリ 概要 ToDoリストアプリは、ユーザーがタスクを追加・編集・削除し、完了状況を管理できるシンプルなアプリです。 初心者でも取り組みやすく、プログラミングの基礎となる CRUD（Create, Read, Update, Delete） の概念
IDEs CLion DataGrip DataSpell Fleet GoLand IntelliJ IDEA PhpStorm PyCharm RustRover Rider RubyMine WebStorm Plugins & Services Big Data Tools Code With Me JetBrains Platform Scala Toolbox App Writerside JetBrains AI Grazie Junie JetBrains for Data Kineto Team Tools Datalore Space TeamCity Upsource YouTrack Hub Qodana CodeCanvas Matter .NET & Visual Studio .NET Tools ReSharper C++ Languages & Frame
What's New In DevTools (Chrome 94) | Blog | Chrome for Developers
Use DevTools in your preferred language Chrome DevTools now supports more than 80 languages, allowing you to work in your preferred language! Open Settings, then select your preferred language under the Preferences > Language dropdown and reload DevTools. Preferences" width="800" height="494"> Chromium issue: 1163928 New Nest Hub devices in the Device list You can now simulate the dimensions of Ne
「(わりと)任意」、と書きましたが実際には AppleScript をサポートしている Application が対象で、基本的に AppleScript で取得できる情報については全て取得できるはずです。現状では read のみ実装しています。 ソースコードはこちら 使い方 実行中の Google Chrome に対して incognito の window で開いている tab の title と url が欲しい、という query を実行してみている例です。 npx で試す とりあえずサクッと試す場合は npx jxa-graphql server <appPath> で試せます。curl でも良いですし Apollo Sandbox の Explorer などを使っても良いでしょう。 $ npx jxa-graphql serve /Applications/Google\ Ch
I was continueing my exploration of React server components when I stumbled upon on this article about progressive JSON. Dan Abramov describes a technique for streaming JSON from a server to a client in chunks, allowing the client to start rendering parts of the data before the entire payload has been received. This can significantly improve perceived performance, especially for large datasets. So
STORES 予約 エンジニアの水野です。STORES 予約 の店舗管理画面で利用しているTypeScriptをv4.8からv5.5にアップグレードしたので追加された主な機能をおさらいしようと思います。 satisfies (v4.9) v4.9で実装されました。 型アノテーションのように型付けしつつ型推論も行う演算子です。 例を見てみましょう。 type Color = 'red' | 'green' | 'blue' const pallet: Record<Color, string | number[]> = { red: [255, 0, 0], green: '#00ff00', blue: '#0000ff', } // pallet.red => string | number[] pallet.redの型はstring | number[]となっています。これはRecor
これぞ拡張機能の真髄！chrome.webRequest APIについてまとめてみた - iimon TECH BLOG
こんにちは。iimonでエンジニアをしているhayashiと申します。 普段は主に拡張機能を開発しております。 本記事はiimon Advent Calendar 2025 24日目の記事となります！ 今回はこれぞ拡張機能の真髄って個人的に思ったchrome.webRequest APIについて解説したいと思います！ chrome.webRequest APIとは chrome.webRequest APIとはChrome Extensions(拡張機能)で用意されているAPIです。 このAPIはトラフィックをモニタリングして分析し、送信中のリクエストを傍受、ブロック、変更することが出来るAPIと公式にあります。 ただし、リクエストのブロックや変更を行う webRequestBlocking 権限は、Manifest V3から原則として廃止され、その役割は chrome.declarati
AWS公式SDKにも存在した、署名付きURLにおけるパストラバーサル - GMO Flatt Security Blog
はじめに こんにちは。GMO Flatt Securityのセキュリティエンジニアの松井（@ryotaromosao）とチョン（Eui Chul Chung）です。 皆さんは、「署名付きURLにおけるパストラバーサル」の脆弱性をご存知でしょうか？ Webアプリケーションで署名付きURLを実装する際、AWS公式のSDKを用いることが多いかと思います。過去にはその公式SDK自体にパストラバーサルの脆弱性が見つかった事例がありました。また一方で、公式SDK側では正しい対策がされているものの、アプリケーション開発者の実装ミスによってパストラバーサルが引き起こされてしまうケースも存在します。 本記事では、実際にAWS SDKで見つかった脆弱性の事例を交えながら、コードベースで署名付きURLにおけるパストラバーサルの脆弱性を深掘りしていきたいと思います。また、後半では、SDKを利用するアプリケーション
今年も盛り上がっている Qiita Engineer Festa！ Qiita Engineer Festa 2023、大いに盛り上がっていますね・・・！ 特に、Organization対抗戦・・・！ いろんな企業さんが、必死になって沢山の記事を書いています。 現在のランキングはこちら Organization対抗戦: 総合いいね賞ランキング ※7月21日 12:35時点のランキングです。 なんと、弊社（株式会社ゆめみ）も2位につけています。 ただ、気になったことが・・・ ワイ「なんか、ワイが記事を書くと・・・」 ワイ「いつも、同僚たちが沢山いいねをくれる・・・」 ワイ「そのおかげで、いつもデイリートレンドに載ることができてる・・・」 ワイ「これって、ちょっとズルくないか？」 ワイ「組織票ってやつとちゃうか・・・？」 調べてみた デイリートレンドの30記事を対象に「同僚からのいいね1が何％
Nic Jansma (@nicj) is a software developer at Akamai building high-performance websites, apps and open-source tools. Table of Contents The JS Self-Profiling API What is Sampled Profiling? Downsides to Sampled Profiling API Document Policy API Shape Sample Interval Buffer Who to Profile When to Profile Specific Operations User Interactions Page Load Overhead Anatomy of a Profile Beaconing Size Comp
Today we’re excited to announce the release of TypeScript 5.2! If you’re not familiar with TypeScript, it’s a language that builds on top of JavaScript by making it possible to declare and describe types. Writing types in our code allows us to explain intent and have other tools check our code to catch mistakes like typos, issues with null and undefined, and more. Types also power TypeScript’s edi
9 Times the Web Platform Was Influenced by Libraries | Jad Joubran
The web platform didn't invent most of its best APIs. It caught up to them. Libraries did the R&D work in production. They got tested by thousands of developers across thousands of codebases, which is the kind of feedback you can't simulate. They got bug reports. They iterated. And, the patterns that survived eventually became part of the platform itself. If you've been writing JavaScript for a wh
All JavaScript and TypeScript Features of the last 3 years
TypeScript as envisioned by Stable DiffusionThis article goes through almost all of the changes of the last 3 years (and some from earlier) in JavaScript / ECMAScript and TypeScript . Not all of the following features will be relevant to you or even practical, but they should instead serve to show what’s possible and to deepen your understanding of these languages. There are a lot of TypeScript fe
WebKit Features in Safari 17.4
ContentsArchitectural improvementsWeb AppsForm elementsCSSWeb APIJavaScriptMediaSVGWebGLWeb AssemblyWeb InspectorChanges to SafariSafari ExtensionsWeb AuthenticationBug Fixes and moreUpdating to Safari 17.4Feedback Just like Safari 15.4 and Safari 16.4, this March’s release of Safari 17.4 is a significant one for web developers. We’re proud to announce another 46 features and 146 bug fixes. You ca
2026-05-05, Version 26.0.0 (Current), @RafaelGSS We're excited to announce the release of Node.js 26! Highlights include the Temporal API enabled by default, updates to the V8 JavaScript engine to 14.6, Undici to 8.0, and several important deprecations and removals as we continue to modernize the platform. As a reminder, Node.js 26 will enter long-term support (LTS) in October, but until then, it
Today we’re excited to announce our Release Candidate of TypeScript 5.2! Between now and the stable release of TypeScript 5.2, we expect no further changes apart from critical bug fixes. To get started using the RC, you can get it through NuGet, or through npm with the following command: npm install -D typescript@rc Here’s a quick list of what’s new in TypeScript 5.2! using Declarations and Explic
WebKit Features in Safari 18.0
ContentsNew in Safari 18Web apps for MacCSSSpatial WebHTMLJavaScriptWeb APICanvasManaged Media SourceWebRTCHTTPSWebGLWeb InspectorPasskeysSafari ExtensionsApple PayDeprecationsBug Fixes and moreUpdating to Safari 18.0Feedback Safari 18.0 is here. Along with iOS 18, iPadOS 18, macOS Sequoia and visionOS 2, today is the day another 53 web platform features, as well as 25 deprecations and 209 resolve
Join a VS Code Dev Days event near you to learn about AI-assisted development in VS Code. Update 1.70.1: The update addresses these issues. Update 1.70.2: The update addresses these issues. Update 1.70.3: This update is only available for Windows 7 users and is the last release supporting Windows 7. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welc
【速報】Rails 8.0.0がリリースされました Rails 8.0（v8.0.0タグ）は、7.2.0リリースから半年後のリリースということもあり、メジャーリリースとしてはChangelogの変更件数が少なめなのが特徴です。機能面では、Strong Parametersのexpect追加や、MySQL 5.5のサポート廃止が目につきます。大きなbreaking changesも今のところ見当たりません。 rails/rails at v8.0.0 以下、Rails 8.0のChangelogを件数の多い順に見ていきます。なお、原則として削除のChangelogは、その項目が非推奨化されたときのプルリク情報にリンクしています。 なお、以下の機能にはChangelogがありません。 Action Mailbox Action Mailer 🔗 Active Record（56件） Rail
Nx Console VS Code Extension Compromised - StepSecurity
Update: On May 19, 2026, GitHub publicly disclosed that approximately 3,800 of its internal source code repositories were exfiltrated after an employee's device was compromised by a poisoned VS Code extension. While GitHub did not officially name the extension, Nx CEO Jeff Cross confirmed that Nx is working with Microsoft and GitHub on the impact of the malicious Nx Console version 18.95.0, and no
Today we are excited to announce the availability of TypeScript 5.8 Beta. To get started using the beta, you can get it through npm with the following command: npm install -D typescript@beta Let’s take a look at what’s new in TypeScript 5.8! Checked Returns for Conditional and Indexed Access Types Consider an API that presents a set of options to a user: /** * @param prompt The text to show to a u
Let's build a Chrome extension that steals everything
Update: this piece was featured on the NBTV YouTube Channel Manifest v3 may have taken some of the juice out of browser extensions, but I think there is still plenty left in the tank. To prove it, let’s build a Chrome extension that steals as much data as possible. I’m talking kitchen sink, whole enchilada, Grinch-plundering-Whoville levels of data theft. This will accomplish two things: Explore t
引用元: https://nodejs.org/en/about/branding 2024年4月24日にリリースされたNode.js v22の主な変更点を紹介します。 Node.js v22はLTS(長期サポート)のバージョンになります。10月の後半にLTSとしてサポートが始まります。 nodejs.org require()がESMをサポート V8 12.4 アップデートによる JavaScript の機能 Array.fromAsync() Set methods union() intersection() difference() symmetricDifference() isSubsetOf() isSupersetOf() isDisjointFrom() Iterator Helpers map() filter() reduce() --runオプションによるpacka
When a single-page application needs to fetch data from a remote source, it needs to do so while remaining responsive and providing feedback to the user during an often slow query. Five patterns help with this. Asynchronous State Handler wraps these queries with meta-queries for the state of the query. Parallel Data Fetching minimizes wait time. Fallback Markup specifies fallback displays in marku
A2A プロトコルはエージェント間の通信を標準化するためのプロトコルです。JavaScript SDK を使って A2A サーバーとクライアントを実装し、エージェント間通信を試してみます。 A2A プロトコルは、エージェント間の通信を標準化するためのプロトコルです。多様なフレームワークやベンダー間での相互運用性を促進することを目的としています。 A2A の仕様に基づいて実装された JavaScript SDK が新たに公開されました。この記事では A2A プロトコルの JavaScript SDK を使って、エージェント間通信を試してみます。 プロジェクトのセットアップ まず、プロジェクトをセットアップします。Node.js と npm がインストールされていることを前提としています。 mkdir a2a-example cd a2a-example npm init -y 次に、必要なパ
Update 1.78.1: The update addresses this security issue. Update 1.78.2: The update addresses these issues. Downloads: Windows: x64 Arm64 | Mac: Universal Intel silicon | Linux: deb rpm tarball Arm snap Welcome to the April 2023 release of Visual Studio Code. There are many updates in this version that we hope you'll like, some of the key highlights include: Accessibility improvements - Better scre
Jun 9, 2025 by Jen Simmons, Saron Yitbarek, Jon Davis, Richard Robinson, Eddy Wong, Brandel Zachernuk, Marcos Cáceres, Tim Nguyen, Daniel Liu, Razvan Caliman, Blaze Burg, Qianlang Chen, Brian Weinstein, Aditya Keerthi, Karl Dubost, David Johnson, Luming Yin ContentsSVG IconsEvery site can be a web app on iOS and iPadOSHDR ImagesWebKit in SwiftUI<model> on visionOSImmersive video and audio on visio
WebKit Features in Safari 17.2
ContentsHTMLCSSImages and videoJavaScriptWeb APIWeb AppsWebGLPrivacyWeb InspectorFixes for Interop 2023 and moreUpdating to Safari 17.2Feedback Web technology is constantly moving forward, with both big new features and small subtle adjustments. Nowadays, web developers expect web browsers to update multiple times a year, instead of the once or twice a year typical of the late 2000s — or the once
I’ve been trying to write this post at least a dozen times. I don’t mean this figuratively; at one point, I literally had a desktop folder with a dozen abandoned drafts. They had wildly different styles—from rigoruous to chaotically cryptic and insufferably meta; they would start abruptly, chew on themselves, and eventually trail off to nowhere. One by one, I threw them all away because they all s
JSer.info #690 - Electron 30.0.0がリリースされました。 Electron 30.0.0 | Electron V8 12.4、Chromium 124、Node.js 20.11.1へアップデート。 File System APIをサポート、Cross Origin iframeにPermission Policyを使うように変更、WebContentsView/BaseWindowの廃止などの変更が含まれています。 Firefox 125がリリースされました。 Firefox 125.0.1, See All New Features, Updates and Fixes Firefox 125 for developers - Mozilla | MDN Intl.Segmenterのサポート、Popover APIのサポート、AV1コーデックのサポート
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ヤフー全社横断「Webパフォーマンス改善」の取り組み (Core Web Vitalsスコアの向上)
【C#】何故 C# を好むのか。～他の言語と比較しながら～ - ねののお庭。
How I built a modern website in 2021
インクリメンタルに新しい技術を取り入れる方法。TypeScriptへの移行を例にしたプロセス
“Tao of Node - Design, Architecture & Best Practices” 日本語翻訳
Generative UI のためのフレームワーク OpenUI
The Prompt Engineering Playbook for Programmers
レベル別で紹介！オープンソースで挑戦できる120のプロジェクトアイデア集 - Qiita
JavaScript Best Practices | The WebStorm Blog
(わりと)任意の Mac Application に GraphQL でアクセスできるようにした
Streaming JSON in just 200 lines of JavaScript
TypeScript v4.9からv5.5で追加された機能のおさらい - STORES Product Blog
【検証してみた】株式会社ゆめみは、Organization対抗戦で不正をしているのか？ - Qiita
JS Self-Profiling API In Practice
Announcing TypeScript 5.2 - TypeScript
Node.js — Node.js 26.0.0 (Current)
Announcing TypeScript 5.2 RC - TypeScript
July 2022 (version 1.70)
Rails 8.0 Changelog（全項目リンク付き）｜TechRacho by BPS株式会社
Announcing TypeScript 5.8 Beta - TypeScript
Node.js v22の主な変更点 - 別にしんどくないブログ
Data Fetching Patterns in Single-Page Applications
A2A プロトコルの JavaScript SDK を試してみる
April 2023 (version 1.78)
News from WWDC25: WebKit in Safari 26 beta
React for Two Computers — overreacted
2024-04-26のJS: Electron 30、Firefox 125、Node.js 22、React 19 Beta、TypeScript 5.5 Beta