はてなブックマークアプリ

サクサク読めて、
アプリ限定の機能も多数!

アプリで開く

はてなブックマーク

  • はてなブックマークって?
  • アプリ・拡張の紹介
  • ユーザー登録
  • ログイン
  • Hatena

はてなブックマーク

トップへ戻る

  • 総合
    • 人気
    • 新着
    • IT
    • 最新ガジェット
    • 自然科学
    • 経済・金融
    • おもしろ
    • マンガ
    • ゲーム
    • はてなブログ(総合)
  • 一般
    • 人気
    • 新着
    • 社会ニュース
    • 地域
    • 国際
    • 天気
    • グルメ
    • 映画・音楽
    • スポーツ
    • はてな匿名ダイアリー
    • はてなブログ(一般)
  • 世の中
    • 人気
    • 新着
    • 新型コロナウイルス
    • 働き方
    • 生き方
    • 地域
    • 医療・ヘルス
    • 教育
    • はてな匿名ダイアリー
    • はてなブログ(世の中)
  • 政治と経済
    • 人気
    • 新着
    • 政治
    • 経済・金融
    • 企業
    • 仕事・就職
    • マーケット
    • 国際
    • はてなブログ(政治と経済)
  • 暮らし
    • 人気
    • 新着
    • カルチャー・ライフスタイル
    • ファッション
    • 運動・エクササイズ
    • 結婚・子育て
    • 住まい
    • グルメ
    • 相続
    • はてなブログ(暮らし)
    • 掃除・整理整頓
    • 雑貨
    • 買ってよかったもの
    • 旅行
    • アウトドア
    • 趣味
  • 学び
    • 人気
    • 新着
    • 人文科学
    • 社会科学
    • 自然科学
    • 語学
    • ビジネス・経営学
    • デザイン
    • 法律
    • 本・書評
    • 将棋・囲碁
    • はてなブログ(学び)
  • テクノロジー
    • 人気
    • 新着
    • IT
    • セキュリティ技術
    • はてなブログ(テクノロジー)
    • AI・機械学習
    • プログラミング
    • エンジニア
  • おもしろ
    • 人気
    • 新着
    • まとめ
    • ネタ
    • おもしろ
    • これはすごい
    • かわいい
    • 雑学
    • 癒やし
    • はてなブログ(おもしろ)
  • エンタメ
    • 人気
    • 新着
    • スポーツ
    • 映画
    • 音楽
    • アイドル
    • 芸能
    • お笑い
    • サッカー
    • 話題の動画
    • はてなブログ(エンタメ)
  • アニメとゲーム
    • 人気
    • 新着
    • マンガ
    • Webマンガ
    • ゲーム
    • 任天堂
    • PlayStation
    • アニメ
    • バーチャルYouTuber
    • オタクカルチャー
    • はてなブログ(アニメとゲーム)
    • はてなブログ(ゲーム)
  • おすすめ

    Google I/O

『zenn.dev』

  • 人気
  • 新着
  • すべて
  • Next.jsにnext/testmodeという概念が出現しMSW x Playwrightのテストがやりやすくなりそう

    46 users

    zenn.dev/uyas

    2023年8月15日にリリースされた Next.js v13.4.16から next/experimental/playwright next/experimental/playwright/msw が登場してテストがしやすくなりそう。というお話です! 前提条件 今回お話するのは、Next.js の開発サーバーに対してMSWによりAPI通信をモックしてPlaywrightで行うブラウザテストのことをお話します これまでは? Page RouterかつCSRに関して言えば、MSWでモックすることは可能でした。exampleとしてすでに公式が提供しているので、これをベースにセットアップすれば可能です 現状の課題 Page Router CSRの場合はブラウザ上のservice worker経由でmswが実行されています。なのでmswのserver.useを使うにはそこそこ工夫が必要です。 有志

    • テクノロジー
    • 2023/08/16 13:43
    • next.js
    • あとで読む
    • react
    • テスト
    • test
    • [最初の一歩]OSSにチョット🤏だけコントリビュートできるようになってきて見えてきた個人的コツを書きます

      28 users

      zenn.dev/uyas

      対象者 「OSSにコントリビュートしたことない・・・本当はやりたい・・・!!!でもまず何をすればいいのかわからない・・・最初の一歩どうすればいいんだ・・・!」 「OSSこんとりびゅーたーーーってかっこいい!!!!俺も〇〇のコアコントリビューター(キリ って言いてぇ!」 こんな事を心のなかでちょっと思ってるような、でも具体的な一歩を動かせてない人向けです。ちなみに↑の思考は過去自分が思ってた心の中の声です。過去というかこの記事を書いている現在進行系で思っています。 何を話す? OSSにコントリビュートしたい!PRの出し方とか、gitの使い方とか、そこらへんのやり方はわかるんだけど、どうしても最初の一歩が踏み出せない!、どんな感じで進めていけばいいのかわからない!という人に対して、自分の過去の知見から 「こんなふうな視点でで取り組むといいかもしれない」 という事柄を書いていきます。これをきっか

      • テクノロジー
      • 2023/07/07 13:42
      • oss
      • あとで読む
      • React(Next.js)からSvelte(Sveltekit)に浮気するための参考まとめ

        3 users

        zenn.dev/uyas

        以下のまえがきは深夜テンションで書いたものです 翌日見直したら滑りすぎててボツにしようとしたのですが深夜テンションなりに頑張って書いたので残しておきました。時間を無駄にしたい人は読んでみてください 前書き 皆さんはUIフレームワーク、何を使っていますか? どうせReactでしょうね。だってReactみんな使ってますもんね。私もです。仕事でもReactです Next.js、便利ですもんね。すごくわかります。 私も「駆け出し園児ニア」の頃Next.jsを触ったときにpagesフォルダ配下のファイルパスの構造がそのままurlのpathになるのに感動したものです。 ただ最近、特にNext.js v13から出現してきたApp Routerが発表された後の諸々の新規機能の発表があったりしてからキャッチアップしていくのがしんどくなって来てしまいました。具体的には React Server Compone

        • テクノロジー
        • 2023/07/01 14:59
        • Jestのuiテストがつらすぎるので愚痴らせてください。そしてブラウザテストで本質的なuiテストをしよう

          61 users

          zenn.dev/uyas

          ここから下で話す際、主に使う言語・フレームワーク・ツールとしては - Typescript - React (Next.js) - Jest - React Testing Library - ブラウザテストツールとしてPlaywright を前提としています。ただ話す内容の本質的な部分はVueでもSvelteでも、Vitestだろうがあまり変わらないだろうなと思ってます。そう思って見ていただけると助かります。 現代ではReactでUIの単体テスト・インテグレーションテストを書く場合、Jest x React Testing Library を使うのが一般的かと思います。皆さんはJestでUIテストを書いていますか?Jestでコンポーネントの単体テストを書いていると辛いことがたくさんありませんか?例えば 大量のライブラリのモックによる(これってテストやる意味あるの・・・?)と感じる虚無感

          • テクノロジー
          • 2023/06/17 14:42
          • テスト
          • あとで読む
          • React
          • oss
          • UI
          • ツール
          • Cloudflare WorkersのHTMLRewriter を使って超簡単に他サイトのOGPを取得し自ブログに表示してみた!

            4 users

            zenn.dev/uyas

            Cloudflare WorkersのHTMLRewriter を使って超簡単に他サイトのOGPを取得し自ブログに表示してみた! 初めに Zennで記事を書いていると、外サイトのurlを入力するといい感じにOGPが表示されます。 ↑こんな感じです。ちなみにこれは僕の個人ブログです。よかったら来てください! そういえば、自分のサイトにOGPを設定する記事とかはよくあるけど他サイトのOGPを表示する方法とかあんまり見ないな・・・と思うようになりました。 ていうか自分のブログだとできてないじゃん・・・ よし!実装しよう! 超簡単だと思ったら・・・ (o'ω'o) < OGPデータを手に入れるにはとりあえずhrefに設定しているサイトのhtml取ってくる -> htmlのパースをする -> metaタグのogpに関する情報を取ってくればええってことやろ。それならapi作らなくてもクライアントからf

            • テクノロジー
            • 2023/06/06 21:11

            このページはまだ
            ブックマークされていません

            このページを最初にブックマークしてみませんか?

            『zenn.dev』の新着エントリーを見る

            キーボードショートカット一覧

            j次のブックマーク

            k前のブックマーク

            lあとで読む

            eコメント一覧を開く

            oページを開く

            はてなブックマーク

            • 総合
            • 一般
            • 世の中
            • 政治と経済
            • 暮らし
            • 学び
            • テクノロジー
            • エンタメ
            • アニメとゲーム
            • おもしろ
            • アプリ・拡張機能
            • 開発ブログ
            • ヘルプ
            • お問い合わせ
            • ガイドライン
            • 利用規約
            • プライバシーポリシー
            • 利用者情報の外部送信について
            • ガイドライン
            • 利用規約
            • プライバシーポリシー
            • 利用者情報の外部送信について

            公式Twitter

            • 公式アカウント
            • ホットエントリー

            はてなのサービス

            • はてなブログ
            • はてなブログPro
            • 人力検索はてな
            • はてなブログ タグ
            • はてなニュース
            • ソレドコ
            • App Storeからダウンロード
            • Google Playで手に入れよう
            Copyright © 2005-2025 Hatena. All Rights Reserved.
            設定を変更しましたx