はじめに こんにちは！ Microservices Platform Network チーム の hatappi です。 メルカリでは、2023年からCDNプロバイダーを Fastly から Cloudflare へと段階的に移行してきました。現在、ほぼすべての既存サービスのトラフィック移行が完了しており、新規サービスについては全て Cloudflare を使用しています。 この記事では、CDNプロバイダーの比較ではなく、移行プロセスに焦点を当て、スムーズに移行するために実施したアプローチを解説します。また、移行が私たちの最終的なゴールというわけではありません。その先の取り組みの一環として、社内向けの「CDN as a Service」についても紹介します。 背景 メルカリでは、これまでに開発環境および本番環境を合わせて数百のFastlyサービスが存在しており、これらは私たちNetwork

株式会社スタディスト様の依頼で、フロントエンド傭兵として、Rails 内の巨大SPA の段階的なモダナイズの提案を行った事例紹介です。 いつもはパフォーマンス視点で仕事にかかるのですが、今回はマクロな設計視点でソースコードを読んでいきます。一旦は中期ゴールを提案しつつ、その作業の必要性を通して、なぜその変更が必要なのかという解説をしていきました。 コスパが良い部分からやりたいですね。でもコスパ感覚は人それぞれです。あくまでフロントエンド専門家の自分が優先度付けるなら、という観点でやっていきます。 今回の仕事にあたっていくつかの技術的な課題を取り上げますが、それはスタディスト様に問題があるという話ではありません。むしろ問題を修正しようという意思が強く、実際1ヶ月の期間中にいくつかの修正をマージすることもできています。 以下、敬称略。注意点として、今回の内容は中の人達が見返すための記述が多いの

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

Hono Advent Calendar 2024 4 日目の記事です。遅れてすみません！！！！！！！！！！！！！！！！！！！！！ 去年はかけなかったけど今年は書けたのでよかったです.......... TL;DR Cloudflare Images を使えば、Next.js の next/image による画像最適化を再現できます。さらに、Cloudflare Images の「blur」オプションを利用することで、base64 プレースホルダー画像をサーバー側で生成する必要がなくなり、処理が効率化されます。コスト面でも、Vercel の画像最適化機能（$5/1000 枚[1]）に比べ、Cloudflare Images は大幅に安価（$0.5/1000 枚[2]）です。 デモ はじめに この記事は @cloudflare/next-on-pages や @opennextjs/clou

以下の公開計測会でやったものを個別に解説してみる。 細かいテクニックが多いのだが、それを可能な限りテキストとスクショで解説したい。使い方の解説が中心で、どういう意味があるかは解説しない。 Chrome131時点のスクリーンショットで、後で読む場合は頻繁にUIが変わっている点に注意。大事なのは意図。 宣伝: これを御社のサイトで解説する仕事をやっています。 デモのURL これに意味はなく、今日偶然見ていただけで意図はない。関係ないがエッジランナーズは最高のアニメ。 DevTools を開く F12 or 右クリックから「検証」 DevTools > Lighthouse この状態で計測 このとき、新しいプロファイルを作ったりして、可能な限り Chrome拡張が入ってない状態にすること。Chrome拡張による処理も計測に含まれてしまう。 Lighthouse レポートの読み方 点数部分にマウス

JavaScriptでコンテンツを表示するサイトの特徴今回の相談内容は「ReactなどのJavaScriptでコンテンツを表示するサイトで、気をつけることは？」というものです。ペンネーム「dictav」さんが寄せてくださいました。ありがとうございます。Reactは、インタラクティブなユーザーインターフェイスを開発するためのJavaScriptライブラリです。 JavaScriptのなかに、ユーザーインターフェイスを構成する部品をHTMLで書いたものを、Reactではコンポーネントと呼び、このコンポーネントを使い回すことでサイトを構築していきます。Reactで作られたサイトは、サーバーからブラウザやGooglebotに渡されるデータのほとんどがJavaScriptであることが特徴です。 GooglebotはJavaScriptイベントを起こさないさて、ReactなどのJavaScriptライ

2024/11/23(土)で開催された JSConf JP 2024に関する、現時点での公開資料と X アカウントリンクをまとめました。 よろしければご活用ください。 はじめに 登壇社名および登壇者名は敬称略させていただいています。 x アカウントについては、以下のように確認できたものを記載しております。 JSConf JP 公式サイトに記載がある JSConf JP 公式サイトに記載のプロフィールと一致している 当イベントで登壇されることに言及されている スライドに記載されている リンクの間違い等ありましたらコメントいただけると助かります🙏 アーカイブ 本イベントは YouTube でライブ配信されていました。 ただ、執筆途中時点からトラック A の動画が非公開になっていました。 アーカイブとして残るのかがわからなかったため、一旦 JSConf JP の YouTube アカウントへの

Mermaid Graphical Editor VSCodeの拡張機能です。 Mermaid記法を利用してマークダウン内部で作図しながら、Mermaidそれ自体のエディタを立ち上げることができます。 逆にMermaid Editor側で編集した内容もマークダウンにフィードバックされます。 vs Draw.io Integration 類似ツールとしてDraw.io Integrationがあります。 こちらは.drawio拡張子のファイルをVSCodeで作成すると、draw.ioのエディタが開いて作図ができるツールです。 しかし、draw.ioはあくまで図が書けるところを生業としていて、作成したdraw.ioファイルをマークダウンファイルに埋め込むには画像としてexportが必要です。 できれば自分はマークダウン以外のファイルを作らず、一つのマークダウンファイルだけで完結したいと思ってま

jsconfjp2024-perf.md jsconf2024 で発表したスライドのソースコードだが、テキスト版のが読みやすい気がしたので公開する。 画像のデッドリンクは面倒なので、気が向いたら… Slide English Text marp: true theme: v0 幸せの形はどれも似ているが 不幸なプロジェクトはそれぞれの形がある @mizchi at JSConfJP 2024 English Text Version About https://x.com/mizchi Node.js とフロントエンドの専門家 120万*達成率で御社のフロントエンドの高速化をやります 今日話す内容ができます。社内勉強会等も承ります。 話すこと/話さないこと 話すこと パフォーマンスという予算の考え方 Lighthouseによる計測 ソースコードを二分探索して問題を特定 計測した問題の扱い方

社内で「node --test って実際どうなの?」という議論がありました。その参考に、id:mizdra が node --test 最近を触って思ったことや、感想などを書いてみます。 結論だけ先に書いておくと、node --test はミニマムなテスティングフレームワークです。テストする時に必要とされる機能は大体ありますが、Vitest と比較すると色々欠けてます。そして、Vitest と比べて何が足りないのか、実際に触ってみるまで意外と分からないです。とりあえず動けば OK という人は、Vitest 使ったら良いと思います。node --test はミニマリスト向けです。 node --test とは まず node --test って何という人のために書いておくと、Node.js 組み込みのテストランナーのことです。Node.js v16.17.0, v18.0.0 から導入されて

「すべてのライフサイクルモデルの祖は、ウォーターフォールモデルである」とは、スティーブ・マコネルの言葉だ1。また、ソフトウェア開発ライフサイクル（SDLC）に関するGitHubの文書では、広く採用された最初のSDLCがウォーターフォールモデルであるとされている2。 そこに、ウォーターフォールを学ぶことに対する価値がある。それは、スクラムを導入し、アジャイルソフトウェア開発を実践する組織にも言えることだろう。いや、そうであるからこそだ。どんなソフトウェア開発プロセスモデルであろうと、ウォーターフォールから派生したり、何らかの影響を受けていると考えられる。したがって、ウォーターフォールへの理解から、自分達がやっていることの本質を見いだせるのではないだろうか。 ウォーターフォールなんて誰でも知っていると思うかもしれないが、そうとも限らない。確かにウォーターフォール未経験のソフトウェア開発者は少な

最近、技術書を読んでいると「完成形から逆算された、書き手にとって嬉しいコード」によく遭遇しています。 これが自分の理解ステップと噛み合わず、自分はこうだと嬉しい、といっても文句だけいうのも良くないと思い、自分の思う良いサンプルコードをまとめてみようと思います。 先に言っておきます。自分も自分の要求を全部同時に満たすことはできません。また、普段が自分が書くものは想定読者は自分として手を抜いています。手間を書けたとしても、一定以上の文量で必ず手間や実現性の部分でトレードオフが発生します。 自分の考える良いサンプルコード 最小スタート ステップ毎に何らかの動的/静的検査で検証できる。TDD だと望ましい 一度のコード追加は20行あたりが上限 上から順にコピペするとモジュールが動作する 最小スタート これは何らかのコンパイラを想定した適当なサンプルコードで、良い点悪い点両方あります。 // BAD

こんにちは、JADEブログ編集部です。 Google Search Consoleで表示される「平均掲載順位」と、サードパーティーツールが示す「順位」。同じ「順位」という言葉でも、その捉え方や算出方法は大きく異なっています。この記事では、両者の違いを明確にしながら、SEO実務において順位データをどのように捉え、活用すべきかについて、コンサルティング・オペレーションズ・マネージャーの小坂に聞きました。 【もくじ】 「平均ではなく、いまの順位が知りたい」 サードパーティーツールは言わば「点のデータ」 順位と平均掲載順位、どう観測していくべきか そもそも何を1位としているのか 「順位」との向き合い方 「平均ではなく、いまの順位が知りたい」 小坂　もともと「この話題はJADEブログで取り上げるべきだろうな」と思ったのは、お客様からの質問がきっかけでした。 Google Search Console

Vue Vapor Mode をやる可能性があるので、調べることにした。 Svelteの知識があるので、自分の為のキャッチアップとして、Vue Vapor と Svelte 出力の比較を行う。SSR時の処理などは追ってない。 試した場所 https://vapor-repl.netlify.app/ の @2ed0be8 https://svelte.dev/playground 静的コンポーネント まず何もしない Static なコンポーネントで比較する。 Svelte import "svelte/internal/disclose-version"; import * as $ from "svelte/internal/client"; var root = $.template(`<h1>Hello</h1>`); export default function App($$an

ブラウザ内テキスト探索の高速化というテーマで改善を行いました。公開許可は頂いていますが、先方の希望で社名は伏せさせていただきます。 技術的には「再現性がある木構造のノード探索の条件の生成、その実行の高速化」という少しR&Dっぽいタスクでした。Playwright のコードを参考にしつつ、個別により速いパーツで置き換えていく、というもので非常に興味深いものでした。こういう仕事は楽しいので、いくらでも歓迎です。 今回は最初はドメイン理解に時間をあてて、その後十分にドメイン理解が進んだら計測しつつ改善する、という流れです。 以下、敬称略。 相談内容 ブラウザを自動操作する技術を開発している。技術的には一種のE2Eテストの応用技術で、サーバーに要素の探索条件と、その操作を登録する。 今回の相談では、その要素探索が重くなってしまうケースがあり、これを改善してほしい、という依頼。とくにテキストを条件に

株式会社ハウテレビジョン様で、 質問箱サービスMondのパフォーマンス分析と改善を行いました。 内容としてはLCPの内訳の計測、その解決方法の提案、そして一番大きな問題だった GraphQL リクエストの最適化という話になります。 現時点で全ての問題の修正には至っていませんが、開発的には全ての問題の内訳が認識可能になっていて、検証が終われば段階的にリリースできる、という状態です。 以下、敬称略 相談内容 mond.how のLighthouseスコアを改善してほしい 主要な技術構成 Next.js - Page Router Hasura CE - GraphQL Server Hasura のセルフホスティング版 計測と問題 最近は Chrome が出してくれる Lighthouse スコアの推移が見れるダッシュボードがある。 ここで Mond の直近のスコアをみる。 代表例として ht

Zaraz はCloudflare 版の GTM 要約すると Google Tag Manager の Cloudflare 版。クライアントだけではなく、Cloudflare CDN を通る時の CDN Edge でも動く。 メジャーなサードパーティスクリプトはCloudflare謹製のものがあるが、基本的には GTM にあるものをそのまま移せるようなものではなく、専用に実装されないといけない。 詳しい使い方はこちら Zaraz の目的 なんでわざわざ普及したGTMではなくこんなものを？という疑問があると思う。とくに初見だとこれがなんなのか本当にわからないはず。自分もサードパーティスクリプトの開発者を経験したからこそ分かる部分と、まだわかってない部分がある。 とりあえず次のブログでZarazの買収意図が書いてある。 あなたがサードパーティのスクリプト開発者で、スクリプトを適切に保護してい