今回はPlaywrightで「いま開いているタブの中に特定の画面が存在するか」をbooleanで返すヘルパー関数について書いていきます。
E2Eテストを書いていると、「ボタンを押したら別タブで詳細画面が開く」「リダイレクト後に意図した画面が立ち上がっているかを確認したい」みたいな場面が地味に多いです。
毎回specの中でcontext.pages()を舐めるコードを書くと冗長になりがちなので、「URLかtitleに対象文字列が含まれていればtrue」と返す関数を1つ用意しておくとシナリオがかなりスッキリします。
短い記事ですがサクッと使い回せるので、Playwrightで複数タブを扱う必要がある方はぜひ見ていってください！
それではやっていきましょう（^^!
今回は、茨城県ひたちなか市にある「那珂湊おさかな市場」へ食べ歩きに行ってきたので、イイダコの丸ごとたこ焼き・2個500円の真ガキ・行列必至の市場寿しまで、現地で実際に食べたグルメをまとめて紹介していきます。
那珂湊おさかな市場は、漁港直送の鮮度と価格バランスが圧倒的に強い、関東圏でも屈指の海鮮スポットです！
「観光客でもふらっと入れる？地元の人ばかりじゃない？」
「市場寿しはどれくらい並ぶ？何時までに行けば安心？」
「コスパは本当にいいの？普通の回転寿司や居酒屋と比べてどう？」
そんな疑問を持っている方に向けて、待ち時間・価格・お腹の膨れ具合まで含めて、自分の足で歩いて食べた感想を全部まとめてレポートしていきます（^^
それではやっていきましょう！
今回はReact + TypeScriptで作っている個人開発の在庫管理SPAで、「並び替え」を3系統に分けて実装した話について紹介していきます。
結論から書くと、画面の性質に応じて比較関数ベースのテーブル列ソート / @dnd-kitによるカードD&D / @dnd-kitによるリストD&Dの3つを使い分けています。
「並び替えくらい全部D&Dでよくない？」と最初は思っていたんですが、実際に作り込んでみると「列ヘッダで瞬時に切り替えたい場面」と「自分の好みで配置を保存したい場面」では要件が全然違うことに気付かされました（- -;
特にlocalStorageに何を入れて、何を入れないかの判断は、ユーザー体験を直接左右してしまいます。
本記事では実装コードを抜粋しつつ、「なぜこの方式を選んだのか」を設計判断の背景込みで紹介していきます。
並び替えの実装で苦戦している方は是非見ていてください！
それではやっていきましょう（^^!
今回はClaude Codeに「画像縮小して」と頼んだら、ブログ用画像が自動でSEOを保ったままリサイズされるようにするための方法について紹介していきます。
結論から書くと、ブログ画像28ファイルが 14.6MB→10.0MB（-32%） まで縮みました。
ブログを長く運用していると、いつのまにかフォルダに1.5MBを超える写真がゴロゴロ転がっていて、cloneも遅いしGitHubにpushするときも気が重い…ということが起きますよね。
かといって何も考えずにsharpで再エンコードすると、PNGが3倍に膨らんだり、低品質JPGが逆に大きくなる事故が起きます（実際に私もやらかしました（- -;）。
そこでClaude CodeのSkill機能を使って、「画像縮小して」と一声かけたら、安全装置付きの自作ツールが自動で走る仕組みを作りました。
それではやっていきましょう（^^!
今回は、埼玉県・川越に観光で行ってきたので、定番の「時の鐘」やインスタ映えするおしゃれスタバから、絶品のねぎま焼き鳥・半熟卵メンチカツ・串ぬれおかき・自家製レモネードまで、食べ歩きの体験をまとめて紹介していきます。
川越と言えば「時の鐘」や「蔵造りの街並み」のイメージが強いと思いますが、実は通り沿いの食べ歩きグルメがめちゃくちゃ豊富で、半日でも飽きずに歩き回れる小江戸タウンでした！
特に「ねぎま専門」を貫いている焼き鳥屋さんは、1本200円とリーズナブルなのにビールとの相性が完璧で、思わず並び直しそうになるレベルでした。
「川越って1日いる必要ある？半日でも楽しめる？」
「食べ歩きならどの店が当たり？コスパは？」
「観光（建物巡り）とグルメをバランスよく回れるルートは？」
そんな方に向けて、混雑度や並ぶ時間、コスパまで含めて、実際に歩いて食べた感想を全部正直にレポートしていきます（^^
それではやっていきましょう！
今回は三井住友オリーブゴールドからWiseカードに乗り換えて、Claude Codeの為替手数料を実勢レートまで圧縮した話について紹介していきます。
きっかけは先日の三井住友オリーブGの明細でした。
Claude Codeの決済を見たらUSD/JPYのレートが165.494円になっていて、換算日(2026/4/15)の実勢レートが159円ほどだったので、1ドルあたり5〜6円も高く換金されていた計算です。
Claude CodeのMAXプランは月110ドルなので、1回あたり約550円の損失。
年間で6,000円超になるので、これは流石にもったいないですよね（- -;
そこで安く換金できると評判の「Wise」のバーチャルカードを作って、Claude Codeの支払い先を切り替えてみました。
申込からカード発行までは1時間ほど、Claude Code側の設定変更も数分で完了です。
コスパ＆タイパ最強ですね！
エンジニアとして正直Claude Codeは必須なので、こういうコスパの良い方法はガンガン使っていきたいところ！
それではさっそくやっていきましょ！！
今回は、東京・青梅にある御岳山(みたけさん)に車で日帰りで行ってきたので、ケーブルカーから武蔵御嶽神社、七代の滝、天狗岩までの体験をまとめて紹介していきます。
御岳山と言えばケーブルカーで一気に山頂まで上がれる「アクセスの良いハイキング先」というイメージがあると思いますが、実は前半は超ラクでも、後半の七代の滝〜天狗岩は急こう配の階段＋鎖場で容赦なく足腰を持っていかれる、ガチハイクなコースでした！
逆にケーブルカー周辺だけでも、武蔵御嶽神社（国宝の宝物殿あり）・山菜そば・揚げメロンパン・焼き団子と楽しみどころがしっかり詰まっているので、体力に自信がない方でも安心して楽しめる場所です！
「御岳山ってどれくらいの体力を使う？日帰りで行けるの ？」
「七代の滝・天狗岩まで行くべき？無理ならどこまで見るべき？」
「山頂駅周辺のグルメは何がおすすめ？」
そんな方に向けて、実際に車で日帰りで巡ったルートと、後半きつかったポイント、最後のごほうびグルメまで全部正直にレポートしていきます（^^
それではやっていきましょう！
今回はClaude Codeで「外部アクセス以外はほぼ自動承認」を実現するsettings.jsonの書き方について紹介していきます。
Claude Codeを真面目に使い始めると、毎回y/nを押すのがだんだんしんどくなってくるんですよね（- -;
かといって全部フルオートにすると、rm -rfやgit push --forceみたいな取り返しのつかない事故が怖い。
PCのデータが消えるのは勘弁です…
そこで、「広くallowして、危険なパターンだけdenyで具体的に塞ぐ」という設計でsettings.jsonを書いてみたら、思いのほか快適に運用できたので共有します。
合わせて、「WebFetchやWebSearchの外部アクセスだけは都度承認したい」という保守寄りパターンも併記します。
自分の作業スタイルに合わせて、どちらかをベースに育てていくのがお勧めです（^^b
それではやっていきましょう！
今回はPlaywrightで一度取得した複数要素のLocatorから、特定の属性を持つ1要素だけを絞り込んで操作する方法について書いていきます。
ラジオボタンやチェックボックスのようにname属性が同じでvalue違いの要素を扱いたいなんてこと結構あると思います！
そういったときpage.locator('input[name="status"]')で要素を取得し、要素が「value="published"のものをcheckする」といった書き方をすると思います。
しかしこの方法が地味に難しく、自分は最初.filter({ has: ... })で絞り込もうとして全然動かず、地味に時間を溶かしたことがあります。
色々試した結果うまくいった方法は.and()を使うことでした。
この記事では、.and()の使い方と、なぜ.filter({ has })では動かないのかを紹介していこうと思います。
サクッと読める短い記事なので、Playwrightでradio/checkboxを扱っている方は是非見ていってください！
それではやっていきましょう（^^!
今回はPWAスタンドアロンで起動された時だけ、AdSense広告を一切読み込まない実装を紹介していきます。
PWA化したアプリでホーム画面から起動すると、アドレスバーが消えてネイティブアプリのように動きますよね。
しかしそこに普通のWebサイト感覚でAdSenseが居座っていると、せっかくのアプリ感が一気に台無しになってしまいます。
そこで自分が運営しているcopype.shinpinoshi.comこぴぺったりでは、通常ブラウザ起動時は広告を出す／PWAスタンドアロン起動時は広告を出さないという出し分けをしています。
PWA対応したウェブアプリを作成している方の参考になればうれしいです！
それではやっていきましょう（^^!