サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Pixel 10
hiroppy.me
最近は、LLMによるコード生成が日常的になっています。 それに伴って、テストはコードが正しく実行されているかを保証するために今後更に重要になっていきます。 そこでLLMにとっても人間にとっても、実行速度が重要な要素となりますが、特にe2eは実行速度が遅い点が課題です。 さらに実際のDBを用いたテストを行う際、並列に実行した場合にはテスト全体を冪等にすることは難しく、直列実行が一般的です。(GitHub Actionsのmatrixやコンテナで隔離すれば可能) 今回は、実際のDBを用いつつ、並列に実行し、e2e全体の実行時間を大幅に短縮しつつ堅牢にする方法を考えます。 今回使用する技術スタック Next.js NextAuth.js Prisma PostgreSQL Playwright Testcontainers Playwrightの問題点 webserver は、単一のサーバー起動
Release v3.25.8 RooCodeIncのGitHubリポジトリで公開されたリリースv3.25.8では、いくつかのバグ修正と機能追加が行われた。主な修正点には、無効なMCPサーバーがプロセスを開始しないようにすること、コードベース検索ツールでの現在のディレクトリパスの正しい処理、OpenAIのベースURLからのホワイトスペースのトリミングが含まれる。また、Gemini 2.5 Proの最小思考予算を128に減少させる機能追加や、URL取得時のエラー処理の改善、ChatViewの仮想スクロール実装におけるメモリリークの解決も行われた。さらに、デフォルトモデルの最大トークン数をコンテキストウィンドウの20%に制限する機能も追加された。 • 無効なMCPサーバーがプロセスを開始しないように修正 • コードベース検索ツールでの現在のディレクトリパスの正しい処理 • OpenAIのベース
Feedlyをやめてから今まではRSSフィードをすべてslackに流し、記録しておきたいものは「後で見る」に保存していましたが、SlackのUI的に見づらいのなーとはずっと思っていたので、今回このようなものを作成しました。 なのでここにあるRSSフィードは、自分が普段見ているものを集めたものですが、HTMLをスクレイピングできるようになったので、新しくRSSフィードを配信してないサイトも追加しました。 本当はXもこっちに流したかったけど、無料枠だと月100件しかreadできないので諦めました。今は、IndexedDBで状態を管理していますが、たまにスマホで見たいときがあるので、クロスデバイスでの同期をいつかは考えるかもです。 もし自分でフロントエンドの情報を集めるのがめんどくさいなと思っている方は、ぜひご活用ください。 これらをまとめたRSSフィードも提供しています。 LLM すべての記事
A guide to designing successful product management workshops Learn how to design product management workshops that drive alignment, decisions, and strategic outcomes instead of just activities. NuxtLabs joins Vercel with Daniel Roe In this episode of PodRocket, Daniel Roe, lead dev over at NuxtLabs, joins Paul to discuss the big news: NuxtLabs is joining Vercel. They dive into what this partnershi
このコードはfish専用です。ほかで利用したい場合には、LLMに変換してもらいましょう こちらの方の記事を見て、たしかにfzfでworktree間を移動するの楽だなと感じたので、自分用のを書きました。 fzf で高速に git worktree 間を移動する - お雑煮研究会 AI Coding の発展により、 最近は一つのリポジトリの中に複数のgit worktreeを切って並列作業をすることが増えてきた。 こうなると、当然git worktreeの間を素早く移動したくなるのが人間というものである。 いいアイデアはないだろうかと考えていたら、ふと id:mizdra さんが似たものを作られていたことを思い出した。 www.mizdra.net 多分同じ要領で行けそうなので作ってみることにした。 完成形 基本 zsh で作業しているのでそれ用になっている。他のシェル使っている方は申し訳ない
4月1日から独立し、フリーランスとして活動を始めました。 引き続きフルリモートで柔軟に働きながら、いろんな会社のプロジェクトに参加していく予定です。 「AIにエンジニアは淘汰されるから今フリーランスになるのは危ない」ってちょくちょく聞きますが、まぁその時になったら考えればいいやと思っています。 数年後にはエンジニアの働き方がどうなっているのか予想できない状況の中、少しでも多くの会社の方と関わっていくことに価値をおいていきたいと考えています。 桜井政博さんみたいに、「私のように一つのディレクターが単体でぶらぶらしているのも面白いかと思いそうしています」と動画で仰ってますが、自分も一度はそれをやってみてもいいのかもなと思いました。 もしフリーランスが自分にあまりにも向いてなかったらまた会社員に戻るのだろうと思います。 フルタイムではなくなるので、他の方よりもパフォーマンスを出すことが難しくなる
Next.js@15.1から実験的にミドルウェアのテストヘルパーが追加されました。 なぜかv15.1のリリースノートにも書かれてないため、まだまだ破壊的な変更が入るかもしれない点に注意が必要です。 このヘルパーはApp Router, Pages Router両方共に対応しています。 提供されているヘルパー 2つのヘルパーが提供され、2軸でのテストを行っていきます。 unstable_doesMiddlewareMatch そのミドルウェアがリクエストにマッチするかどうかをテストする ミドルウェアのconfig と next.config.ts での rewrites の両方共を確認できる あくまでも中身のロジックを確認するわけではない isRewrite, getRewrittenUrl そのミドルウェアが実際に期待している挙動をするかどうかをテストする コード例 middleware.
自分はDBをモックしてテストを行うのが嫌いですが、もし実際のDBを利用し並列実行する場合にポートやtruncate周りの問題が発生します。 今回は、それを解決するためにTestcontainersとVitestを利用したコードで解決します。 Testcontiners Docker社が買収したTestcontainersは、Dockerコンテナをテストで利用しやすくするライブラリです。 開発時にdocker composeを利用している人が多いと思うので、そこで利用しているcompose.yamlの定義をまんまテストで再利用できる点も便利かなと思います。 Testcontainers Testcontainers is an opensource library for providing lightweight, throwaway instances of common dat...
module: add --experimental-strip-types by marco-ippolito · Pull Request #53725 · nodejs/node It is possible to execute TypeScript files by setting the experimental flag --experimental-strip-types. Node.js will transpile TypeScript source code into JavaScript source code. During the transpi... 💁♀️ まだマージされてない点に注意してください --experimental-strip-typesというフラグを実行時に付けることにより、Node.jsでTypeScriptのコードを実行できるようになる
新しくCJSとESMの間での解決方法が変わる提案が出てきました。 まだマージされてませんが、すでに複数の承認があり、この方針から変わることはないように見えるので紹介したいと思います。 module: support require()ing synchronous ESM graphs by joyeecheung · Pull Request #51977 · nodejs/node Summary This patch adds require() support for synchronous ESM graphs under the flag --experimental-require-module This is based on the the following design aspect of ESM: The resolution can be syn...
週末に自分がよく使っている技術をまとめたら反応が良かったので、テンプレートを作りました。 なにかWebサービスを作るときに、自分はこれらのライブラリを基本的には入れます。 ベースはcreate-next-appとなりますが、そこで生成された状態だと認証もDBも何もありません。 しかし、サービスを作るにあたって必要なケースがほとんどです。 このテンプレートには特定のライブラリを入れると毎回書かないといけない項目等を事前に作っておき、 開発に集中できる仕組みを作るのがゴールとなります。また、例を示しつつ削除するコード量を最小限に抑えます。 主にNext.js固有のハマるポイントや環境構築などめんどくさいけど毎回書いている点をカバーします。 linterと関連があるVSCode, pre-commit等の設定NextAuthに指定されたDB Schemaの作成やAPI routeの設置開発、テス
Next.js App Router Training Introducing various basic patterns using Next.js' app router with simplified code. ディレクトリ作って、コード書いたら新しいサンプル追加できるので、 追加ウェルカム です! 目的 自分の検証サンドボックスがほしかった 公式ドキュメント含め、解説と参考コードはあるが、実際に動いている状態とコードを同時に見たい 簡潔な短いコードで早く理解を促したい 一番の目的は、初学者にApp Routerの機能を説明するときにこのサイトである程度、網羅されており実行されているコードとその状態が見えるものが欲しかったというのが主な理由です。 逆にあまり説明は書きたくなく、それは公式ドキュメントや他の方のブログで説明されているのでそちらを読んでもらいたいです。 知見 / 感想
ESM では使えないメソッド・変数 以下のメソッド・変数は、CJS でのみ存在し、ESM では存在しないため、エラーになります。 __dirname __filename require exports module arguments 予約語への操作 予約語が変数として操作可能かどうかです。 e.g. var let = 1; CodeCJSESM
GitHub Next GitHub Next investigates the future of software development この機能の登場により、PR でのレビューのオーバヘッドを少なくすることが期待されます。この PR では何を変更したのかを説明したり、更には review の依頼を投げることもできます。 また、Issue でも AI にどうしたらよいか?を聞くこともできるそうです。詳しくは公式の動画を見てください。 How many times have you submitted a change and forgot to update the unit tests? Or the documentation? Or introduced linter errors. Perhaps we can fix that for you….watch this spa
Script の問題点 以下のコードの場合、Header は共通で使われるものではあるものの Foo は条件により/blog以下でしか HTML 上には出力されません。 つまり、これは他のページではこの Foo.astro 自体が読み込まれないように期待したいところです。 しかし、これは上手くいきません。
タイトルの通りこの hiroppy.me のサイトを 1 から刷新し、そこにブログページが入ったことによりブログもはてなから移管することにしました。 特に意識してなかったのですが、はてな ブログの方が、ちょうど 100 記事目 の時に移行するという流れになってしまいました。。 はてな ブログは有料会員で 4 年間ぐらいやっていたのですが、最近は使えておらず、そうなると当初の目的である独自ドメインでのはてブ通知も今はあまり必要なくなりました。 また、ブログの名前が技術探しですが、最近はプライベートの話や技術を昔以上に探せてない点があり、もう自分としては役割を終えたのかなと思っています。 359 人の方に購読してもらい、多くの方に閲覧してもらって本当にありがとうございました。1 年半も技術の記事を投稿していなかったのに未だにアクセスがあり、嬉しく思います。 過去の記事もこちらへ移動させてますが
一回目の退職の後に、アイルランドに住みながらメルカリ Web のリアーキテクチャに関する技術顧問として 1 年半ほど働いた後に日本に帰ったタイミングでお誘いを頂き、2019 年の 11 月に二回目の正式な入社をしました。 メルカリでやったこと 入社後、リアーキテクチャとは異なりますが、メルカリ web の刷新プロダクトがはじまるということだったのでそちらに一年ぐらい開発に関わっていました。その後に、再度設立されたソウゾウの初期メンバーとして参加することとなりました。 メルカリ チームメンバーとは 2017 年や技術顧問時代からの知り合いも多く、プライベートでも遊ぶような人たちばかりでした。数ヶ月後には、気づいたらチーム内の外国人の方の比率が多くなってきて共通言語はすべて英語となりました。この頃にメルカリの Web を 0 から刷新するプロダクトが始まり、一年近く開発に関わりました。 新しい
30 歳という節目でもあり、社会人になって、7 年経ったのでせっかくなので振り返ろうかと思う。今日から form の枠で 20 代が使えなくなってしまったことは悲しい。 仕事 自分のキャリアはとても珍しいと思う。新卒でドワンゴに入り、後にメルカリへ行き、またドワンゴに行って今現在、メルカリ(souzoh)にいる。出戻りを歓迎してくれる会社は本当にいい会社だと思った。 そこでは、立ち上げフェーズでアーキテクチャの構築やベースを書く 0 ->1 をすることがほとんどでニコナレや N 予備校、new メルカリ Web、メルカリ Shops などを作ったり、動画の最適化の研究をしたりしていた。あまり知られていないが、自分は画像処理の研究を 3-4 年間やっていたので、少しだけ画像や動画の最適化にも詳しかった。振り返って一番良かったことは、運が良かったのかどこのチームも仲のいい友人が多く出来て、あま
最近、OSS やってないけど飽きたの?ってたまに聞かれることがある。飽きたというよりも、タイトル通り優先順位が変わってしまった。去年も健康診断を会社で受け、すべて大丈夫だったのだが、10 月ぐらいから明らかな不調がわかっていて今も通院している状態である。 自分が通院しているのは眼科である。エンジニアという仕事柄、自分にとっては一番大切な箇所であり、返しづらい負債となっている。病状としては、眼圧が上がっていて、緑内障の疑いがあり(検査予定)、視力の低下。もともと視力はかなり悪いのに更に追い打ちがかかってしまった。特に眼圧なんてなかなか治らないしどうすればいいんだ感ある。目の手術はまだ気が進まない。毎日、目薬をうったりすることすら昔ならめんどくさく感じてしまうが、さすがにヤバさを感じたのか毎日できている。 中学の頃からゲームのようにプログラミングにハマって、数年前までは毎日 13 時間以上でき
注意: これは公式見解ではない、ただ 1 メンバーの感想文です。 最近の大きなニュースとしては、webpack の主要メンバーの 2 人(Sokra, Alexander)は現在 vercel 雇われたことです。 これによりメンテナンスの安定度が増したことは確かでしょう。現状の問題点はメンテナ不足です。webpack ですら深刻です。 例えば今日、障害が発生している mini-css-extract-plugin は一人で開発しているためレビュワーがいません。この 2 年ぐらいずっとこのような感じです。 npm dependency is breaking some React apps today — here's the fix Tons of users are reporting their Facebook Create React App builds are failing
今回は graphql-codegen を使い説明します。今回の例は、graphql-codegen 以外でも発生する可能性がありますが自動生成系が一番顕著に影響がわかりやすいです。 graphql-codegen はよく、graphql のスキーマから typescript の型定義/react の hooks 等を自動生成するのに使われますが、これは next.js と組み合わせた場合、少しトリッキーな部分があります。
数日前に GitHub Sponsors の機能で企業が支援できるようになることが発表されました。 これにより、今後どのように OSS に変化があるのかないのかを注目します。 特別視するのが良いアイディアか否か そこで以下のような面白い議論が発生しました。 これはこの機能が入ったときに、もし支援している企業やユーザーだけが issue を作れて、他の人はコメントだけできるようにする機能が入ったらどうなるかという議論です。 なぜこのようなツイートをこの人がしたかというと以下の理由です。 The goal is to reduce the maintainer’s burden. Today the options are: turn off issues completely or make the repo private and give access to sponsors. It w
予定では、明日の 10 日に webpack のメジャーバージョンである v5 がリリースされますが、まだエコシステムが安定していない可能性があるため、注意してアップグレードを行ってください。 webpack 5 release plan · Issue #11406 · webpack/webpack TL;DR: release planned for 2020-10-10 After nearly 1 year of beta testing and about 2 years of development we feel that it's time to release webpack 5 soon. As promised we do announce the release a...
webpack は in-memory のみで今まで永続的なキャッシュを実装していませんでした。理由としては、パフォーマンスよりも安全性を優先していたためです。 cache-loader を使ったことがある人はわかるかもしれませんが、確かに速くなる一方、安全性が損なわれているのは事実です。 この機能は、webpack はデフォルトでファイルキャッシュをオンにはしませんがそれでもビルドの速度を上げたい場合に使う機能です。 以下がデフォルトの挙動となります。 modecache
puppeteer をラップした api server みたいなもので内部は koa が使われています。これを起動し、/renderへ url を path として挿入するとそのページの html が返されます。 例えば、/render/https://google.comとアクセスすると、google.com の html が返ってきます。 また、スクリーンショットも取れたりします。(/screenshot) 返す html は配信元とは一致はせず最適化されたものが返されます。例えば、console.log('hello')やdocument.write('test')だけ書かれた js などは、html に挿入された後そのスクリプトタグは html 内からなくなったり、baseがついたりします。 ちなみに rendertron を GCP で動かすのはもっと簡単だったりします。 インフ
この機能が導入されることにより、{raw/file/url}-loader が不要となります。 webpack@4 でも使えますが、まだ実験的フェーズです。 Documentation Asset Modules | webpack webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
GitHub - hiroppy/the-sample-of-module-bundler: You will know how to make a javascript bundler You will know how to make a javascript bundler. Contribute to hiroppy/the-sample-of-module-bundler development by creating an account on GitHub.
今回は中身がどう動いているかを解説したいと思います。 最初のこの記事では、最低限の実装を説明していくことにします。 webpack のアルゴリズムの仕組みはこちらを読んでください。 必要なステップ 必要なステップは以下の 3 つです。 エントリーポイントからのすべてのモジュールを走査し、requireを解決後にユニーク id を付与していく コード内のモジュールパス(requireの引数(e.g. ./module.js))を id へ置換する runtime のコードテンプレートの作成 IIFE(即時関数)箇所とそれに付随する引数の module 群 この実装されあれば、動くコードはできます。(2 つめは optional でもいいけど後からつらくなる) モジュール解決 今回は説明しやすいように関数を 2 つに分けています。 すべてのモジュールの把握と ID 作成 コード内の requi
Module Federation(以下 mfe)は webpack@5 から入る新しい仕組みの一つです。 Proposal Merge Proposal: Module federation and code sharing between bundles. Many builds act as one · Issue #10352 · webpack/webpack This is a proposal to merge my existing work into the Webpack core. The base concept is federated application orchestration at runtime. What I hope will provide a new era for how we build apps at s... 目的 アプリケーションを
次のページ
このページを最初にブックマークしてみませんか?
『hiroppy's site』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く