Announcing Pub/Sub: Programmable MQTT-based Messaging
Announcing Pub/Sub: Programmable MQTT-based Messaging2022-05-12 This post is also available in 简体中文, 日本語, Español. One of the underlying questions that drives Platform Week is “how do we enable developers to build full stack applications on Cloudflare?”. With Workers as a serverless environment for easily deploying distributed-by-default applications, KV and Durable Objects for caching and coordin
State of JavaScript 2023
It should be clear by now that, for better or for worse, JavaScript is not slowing down. Between server components, server actions, signals, compilers, and more, we're seeing new innovations pop up faster than most of us can handle. The trick to avoiding the dreaded JavaScript fatigue is remembering that you can pick your lane: sure, you can live life on the cutting edge with the early adopters; b
JSConf JP 2021 でトークしたスライドです。 このスライドの内容を文字にしているブログ記事はこちら https://blog.nnn.dev/entry/2021/12/03/123000 トークのアー…
宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践/swiftui-graphql
宣言的UI https://speakerdeck.com/sonatard/xuan-yan-de-ui GraphQL実践ノウハウ https://speakerdeck.com/sonatard/graphql-knowhow GraphQLの誤解 https://speaker…
This guide is open source, please go ⭐️ it on GitHub and make suggestions/edits there! https://github.com/FrontendMasters/front-end-handbook-2024 1. Overview of Field of Work This section provides an overview of the field of front-end development/engineering. 1.1 — What is a (Frontend||UI||UX) Developer/Engineer? A front-end developer/engineer uses Web Platform Technologies —namely HTML, CSS, and
【忙しい人のための】Next.js公式チュートリアルを完走してきたので記事１本で振り返る【ギュッと凝縮】 | DevelopersIO
本記事はNext.jsのチュートリアルが大きく変わったためリンク切れを起こしています。 技術メモのため記事としては残しますが、リンク切れにご留意ください。 また機会があれば新チュートリアルで記事を書こうと思いますm(_ _)m こんちには。 データアナリティクス事業本部 インテグレーション部 機械学習チームの中村です。 今回は以下のNext.jsのチュートリアルをほぼ一通り（SEOのところ以外）実施しましたので、ポイントを記事化しました。 https://nextjs.org/learn/foundations/about-nextjs" チュートリアル自体は、以下のような内容が分かるものとなっています。 CRA（create-react-app）のみ使用しているとイメージしづらい、素のHTML + JavaScriptとReactの関係のイメージが分かる Reactがフレームワークではな
普段使わないけど便利なWeb API 8選
MDNのWeb APIリストから、便利で、しかし普段のサービス開発ではあまり使われていない可能性のあるAPIを8個選びご紹介します。これらのAPIはあまり知られていないかもしれませんが、特定の状況や要件に対して非常に有効であることがあります。 Beacon API Beacon APIは、非同期でブロッキングしないリクエストをWebサーバーに送信するために使用されます。このリクエストはレスポンスを期待しないため、XMLHttpRequestやFetch APIを使ったリクエストとは異なりページがアンロード(ウェブページがユーザーによって閉じられるか、別のページに移動する際)される前にブラウザがビーコンリクエストを開始し、それを完了させることを保証します。 主な使用例としては、クライアント側のイベントやセッションデータをサーバーに送信するために使用されます。このAPIは、navigator.
Document Picture-in-Picture APIというWeb APIがあります。まだブラウザの実装が限定的ですが、Chromeなら116から使えるようです。 The Document Picture-in-Picture API makes it possible to open an always-on-top window that can be populated with arbitrary HTML content — for example a video with custom controls or a set of streams showing the participants of a video conference call. It extends the earlier Picture-in-Picture API for <video>, whi
OpenCVの新しい顔検出をブラウザでも試してみる
この記事はOpenCV Advent Calendar 2021の 23 日目の記事です。 はじめに 3 日目の記事で紹介されているように、OpenCV 4.5.4 では新しく顔検出/顔認識の API が実装されました。この記事ではこの顔検出 API をブラウザから呼んでみることにします。ブラウザから呼び出すにあたって、先にきちんとパフォーマンスを確認して使用する解像度を決めます。更に高速化のために SIMD とマルチスレッドを使った OpenCV の Wasm バイナリを作ります。その後、実用的な環境を想定して React のフロントエンドから呼び出すようにしてみます。ついでに WebRTC で実際に加工した画像が送信できることのデモまで行います。 OpenCV.js での新機能の扱い OpenCV.js で JavaScript から呼び出せる機能はホワイトリスト形式になっており、ビル
TypeScriptやGoやRustでWebAssemblyウォークスルー - SMARTCAMP Engineer Blog
みなさん、WebAssembly聞いたことありますよね？ スマートキャンプでエンジニアをしている瀧川です。 私が初めてWebAssemblyを目にしたのは確か2018年、VimをWebAssemblyに移植してブラウザで動くようにしたという記事だったかなと思います。 https://github.com/rhysd/vim.wasm 当時は「はー、なんだか未来を感じるけど、どう使われてくんだろう」くらいな認識で、最近までほとんど注目していませんでした。 しかし、少し前にffmpeg.wasmについての記事がバズっているのを見かけたときビビっときましたね。 ブラウザ上でffmpegが動かせるのはWebアプリケーションを作る上で可能性が広がりますし、何よりWebAssemblyのポテンシャルが活かされていると感じました。 そこで今回、WebAssemblyの世界観を味わうために、代表的なWeb
コードを1行追加するだけでどんなWebサイトもノーコードで編集できる「Scepter」を使ってみた！ -
どうも、まさとらん（@0310lan）です！ 今回は、WebサイトのHTML内に1行のコードを追加するだけで、誰でもノーコードでカスタマイズができるようになるWebサービスをご紹介します！ Webサイトの要素を直接クリックしてそのまま編集ができるようになるので、誰でも簡単にカスタマイズができるうえ、好きな要素を追加してまったく異なるページを作成してしまうことも可能です。 Webサイトのカスタマイズやノーコード開発にご興味ある方は、ぜひ参考にしてみてください！ 【 Scepter 】 ■「Scepter」の使い方 それでは、「Scepter」をどのように使えばいいのか詳しく見ていきましょう！ まず最初にトップページ上部にある【Sign up for Free】ボタンをクリックして無料のユーザー登録を済ませておきます。 ユーザー名・メールアドレス・パスワードを入力すれば登録完了です！ 次に「S
fetch() では Host ヘッダーを設定できないし話はそこまで単純じゃない - Object.create(null)
JavaScript (TypeScript) のコードから HTTP リクエストを送る手段として, 最近では Web 標準の一つである Fetch Standard で定義された fetch() が使われることが多いですね. await fetch("https://example.com"); リクエストヘッダーには Host を設定できない Fetch Standard では Host をはじめとして Content-Length, Cookie, Origin など, いくつかのリクエストヘッダーを設定 (JavaScript から上書き) することが禁止されています. https://fetch.spec.whatwg.org/#forbidden-request-header いずれのヘッダーも HTTP やセキュリティ上の取り決めに従うために, ページの JavaSript
最近のランディングページで見かける！ スクロールに連動して背景画像をアニメーション化できるバニラJavaScriptのライブラリ -ScrollMovie.js
マウスのスクロールやキーボード操作、スマホのスワイプ操作に連動して背景画像をアニメーション化し、まるでスクロールで動画を操作しているかのようなコンテンツを実装できるバニラJavaScriptのライブラリを紹介します。 プロダクトのランディングページとかにいいですね。Appleなどは動画を使用していますが、操作している感があって面白いです。順再生・逆再生にも対応しており、背景画像なのでその上にコンテンツを自由に配置できるのも大きな魅力です。 ScrollMovie.js ScrollMovie.js -GitHub ScrollMovie.jsの特徴 ScrollMovie.jsのデモ ScrollMovie.jsの使い方 ScrollMovie.jsの特徴 ScrollMovie.jsは、ウィンドウをスクロールするときに背景画像をアニメーション化できるバニラJavaScriptのライブラリ
本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回はVue.jsでコーディングするための基本的な記法を説明しました。今回はVue.jsの公式ブログから発信された「Vue 3をデフォルトバージョンにする」発表と、それに伴って、これまでと変わっていくVue.js開発の新常識を紹介していきます。 はじめに 本連載では、JavaScriptを利用して動的なWebページを構築できるフレームワークVue.jsを、データの型指定ができるように拡張されたAltJS（コンパイルしてJavaScriptにする言語）であるTypeScriptで活用する方法を、順を追って説明しています。 本連載ではVue.jsの最新バージョンとなる「Vue 3」を用いてきましたが、実は
TypeScriptで定数をどのように表現するか、というのは意外に意見が分かれるテーマです。本稿では、enumの特徴とその代替手段を整理し、何を採用すべきかを考えてみます。 enumを推奨しないという意見が多いのは知っていても、何故そう言われているのか、を理解していますか？ 「使ってはダメ」と思考停止するのではなく、この記事を読むことでメリット・デメリットを理解して自分で選択できるようになる、かもしれません！ 列挙型（enum）とは enumはJavaScriptにはないTypeScript独自の構文で、定数を集合としてまとめて扱うことができます。 enum Mode { Auto = 'Auto', UDP = 'UDP', TCP = 'TCP', } const mode: Mode = Mode.Auto
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
全デバイス・全ブラウザで PDF を読みたい - Kaizen Platform 開発者ブログ
TL;DR PDF を画面に埋め込む方法は、iframe, object, embed, Viewer（3rd party library の利用）がある。 ブラウザネイティブの PDF 表示機能はブラウザ差異が大きいため、PDF を canvas や svg に変換して表示するライブラリやビューアーを利用した方が安定する。 しかし 3rd party library / service の利用はバンドルサイズやランタイムでの変換にコストがかかるため、なるべくブラウザネイティブなやり方で PDF を開きつつ、一部ブラウザ向けに対してのみ 3rd party library/service 経由で表示するように分岐させたい。 どのブラウザならブラウザネイティブの機能が使えるかを調べるために、サポート範囲の全端末・全ブラウザで PDF の描画結果を比較・調査した。 はじめに 業務委託エンジニア
【Web開発】 主要Webフレームワークを比較 - React、Vue.js、Next.js、Django、FastAPIなど - Qiita
JavaScriptベースのフレームワークは、TypeScriptで開発することが一般的になってきています。一方、PythonやRubyのフレームワークは、それぞれの言語が持つ型システムを活用します。 2.3 TypeScriptを使うメリット 型安全性によるバグの削減 コンパイル時に型エラーを検出できるため、実行前に多くのバグを防げます。 // TypeScriptの例 interface User { id: number; name: string; email: string; } function getUserName(user: User): string { return user.name; } // 型が合わないとコンパイルエラーになる getUserName({ id: 1, name: "太郎" }); // エラー: emailプロパティが必要 開発体験の向上 I
Next.jsの対抗馬となりそうなReactのフレームワークでRemixのv1.0がリリースされました。 個人的にRemixでいちばん魅力を感じているのはCloudflare WorkersでSSRができるという点です（現状ではNext.jsをCloudflare Workers上でSSRするのは難しい）。これがなぜ嬉しいのかと言うと、パフォーマンスを出しつつ、低コストで運用でき、大量のアクセスに対しても低コストでスケールできそうだからです。 そもそもSSRをする必要ある？ ほとんどのWebサービスはSSRなしでSPAとしてビルドし、Cloudflare PagesやGitHub Pagesに静的ファイルをのせて動かせば十分だと思います。 例えば僕が先日作った個人開発のサービスもReact on Cloudflare Pagesの完全なSPAですが、SSRが必要な要素はまったくありません。
【全編無料】GoogleやAdobeなど実力ある講師が多数登場、マーケ・デザイン・プログラミング・ゲーム作成などが学べるオンライン学習プラットフォーム「Udemy」のおすすめ無料講座7選
新たなスキルを身につけたいと思った時に問題になるのが「どうやって身につけるか」です。インターネットが発達したおかげで、書籍以外にもさまざまな方法を選べるようになりましたが、新しい方法というのはなかなか手を出しづらいもの。今回は、ムービー形式で講座を受講できるというサービス「Udemy」から、ムービーの分かりやすさを実感できそうな良質な無料講座をピックアップしてみました。比較的簡単なものからよりレベルアップできる講座の順番に並べており、最後のJavaScriptの講座ではステップアップできる講座を関連講座として用意しているので参考にしてみてください。今回掲載しているすべての講座が無料なので、ムービー形式の講座がどんなものなのか、自分に合っているのかを気軽に試すことが可能です。さらに今なら8月18日(水)まで「Udemy夏のビッグセール」が開催中とのことで、もっと学んでみたいトピックが見つかっ
Cloudflare、サーバレスの「Cloudflare Workers」とJAMスタックの「Cloudflare Pages」を統合へ
Cloudflare、サーバレスの「Cloudflare Workers」とJAMスタックの「Cloudflare Pages」を統合へ Cloudflareは、同社のエッジデータセンター上で提供している2つのサービス、「Cloudflare Workers」と「Cloudflare Pages」を統合することを明らかにしました。 Pages vs. Workers -- what are you choosing? Soon, you won't have to! We're thrilled to announce that Pages and Workers will be merging into one unified experience, giving you the best features and DX of both worlds. Learn more https:
NGK2022S発表資料です https://ngk2022s.connpass.com/event/233520/ yagisan-reportsのWebサイト https://www.denkiyagi.jp/yagisan-reports/
https://hackers-champloo.org/2023/program.html のLT、「htmx is not a typo」のスライドです。 スライド内で紹介した情報やリンクは以下のとおりです。 https://htmx.org https://www.thought…
まつもとゆきひろの技術情報収集術、そして現在の関心事を聞く - TechFeed Conference 2022スペシャルインタビュー
本記事は、TechFeed Conference 2022 の開催に際しての「基調講演」コンテンツです。 先日TechFeed公認エキスパートにもご就任頂いた「Rubyの父」まつもとゆきひろさんに、TechFeedならではの切り口でロングインタビューを敢行！ TechFeedといえば技術情報収集ということで、今回はまつもとさんの技術情報収集術について伺いました。（後半ではRubyとコロナ禍、そしてコミュニティについて存分に語っていただきました）。 まつもとゆきひろ、情報収集術を語る – まつもとさんは具体的にどのように情報収集をしてるんでしょう？ まつもと: 暇なときずっと、って感じですね。 仕事とかプログラミング以外の時間は、ずっと何かしらの情報を得ているんじゃないでしょうか。 私の情報収集はRSSリーダーがメインですが、Twitterで共有されているリンクなんかも見ますし、寝る前にKi
この記事では、現在 Stage 1 のプロポーザル Change Array by copy について解説する。 プロポーザルの詳細については、https://github.com/tc39/proposal-change-array-by-copy を参照してほしい。 また、ここで紹介した仕様に関しては今後更新されていく可能性がある。 概要 Change Array by copy は、簡単にいえばイミュータブルな配列操作メソッドを導入するプロポーザルである。 JavaScript の配列には多くのインスタンスメソッドがあり、それらを使って配列を操作できる。 配列のインスタンスメソッドには、ミュータブルなもの、つまりもとの配列を変更することによって配列を操作するタイプのものがいくつかある。 たとえば、Array.prototype.push や Array.prototype.pop、A
Update (Dec 2024): React Router v7 has been released! We now recommend starting all new projects with React Router v7 and upgrading existing Remix apps. We've been building a bridge. You can hear Ryan talk about this announcement at React Conf 🎥 For nearly 4 years we've been working on Remix, a fullstack framework built on web standards to help you build better websites and applications. React Ro
変更に強いコンポーネント設計の方針と規約（Webフロントエンド） - Sansan Tech Blog
技術本部 データ戦略部 Newsグループの木田です。 最近、初めて自作キーボードに挑戦しました。ちょうど２枚目のモニターも買ったので、モニター２台と自作キーボードで快適に記事を書いています。 予めお断りしておきますが、この記事は元々、社内向けに設計方針や規約・ツールなどについて共有するために書いたものでした。最近、他チームの参考資料として役立ったこともあり、社外向けに手を加えて公開する運びとなりました。 はじめに 機構改革・人事異動情報(β) とは ⚛️ Atomic Design に従う ⚛️ Atomic Design とは ⚛️ Molecules と Organisms の分け方 ⚛️ コンポーネントの設計方法 📝 規約 📝 Component と Container を分ける 📝 データの繋ぎ込みは Organisms 以上で行う 💡 Tips 💡 Atoms はタグ本
Tamagui 1.0 🎉 — Tamagui
Tamagui comes in three parts: Tamagui Core (@tamagui/core) is a style library for React Native and web that supports 100% of the React Native API surface in a library that only depends on React. It adds all the goodies of modern style libraries into a cohesive package. Tamagui Static (@tamagui/static) is an optimizing compiler on top of Core, turning even inline styles sprinkled with logic into at
Provides a plugin to customize default themes, you can change all semantic tokens or create an entire new theme.
要約 Googleが検索結果スクレイピングツールへの対策を強化し、一部のSEO分析ツールが影響を受けることが明らかになりました。Googleが検索サービス利用時に JavaScriptが有効になっていることを求めるよう仕様変更したためと考えられます。順位取得ツールの選定ではベンダー各社の「復旧スピード」「顧客との連携」「技術基盤」が重要です。 障害まとめメモ 障害内容：検索順位計測ツールがGoogle検索における検索順位を取得できない 発生日時：日本時間 2025年1月16～17日頃より 原因：Google検索がJavaScriptが有効でないクライアントに検索結果を返さないため（bot対策が強化された） 影響範囲：サードパーティーの順位計測ツールやスクレイピングツールの一部 要約 障害まとめメモ Googleがbot対策を強化、スクレイピングや順位取得ツールをブロック 検索結果スクレイピ
HTMLに味付けするためのバニラJS tips集
ReactやVueを使わずに、素のJavaScriptでDOM操作する時のやつです。 何度も同じようなことをググって時間を溶かしていたので、よく使うやつをまとめてみました。 要素の取得 // 最初に見つかった要素1つを取得 document.querySelector("#hoge-id"); //[object HTMLElement] document.getElementById("hoge-id"); //[object HTMLElement] //条件に合う要素を全て取得 document.querySelectorAll(".hoge-class"); // [object NodeList] document.getElementsByClassName("hoge-class"); // [object HTMLCollection] Array.from(documen
JSer.infoで紹介したサイトのデータをドメイン別で一覧できるサイトを作りました。 JSer.info Watch List JSer.info Watch Listは、次の条件でサイトをドメイン別(または作者別)で一覧できます。 JSer.infoで2年以内に紹介したことがあるサイトが対象 紹介した回数順 GitHubやAmazonなど一部特殊なものは除外 JSer.infoを更新するたびにこのリストも更新されます。 そのため、鮮度を保ちつつ、JavaScriptの情報源となるサイトが一覧できるようになっています。 また、タグでの絞り込みもできるようになっているので、興味があるトピックのサイトやブログなどを調べてみるといいかも知れません。 https://t.co/CXy3hOXJ8q のデータを使ったJavaScript情報源リスト タグでの絞り込みができるようになった。 "per
https://www.solidjs.com/
Lodash is dead. Long live Radash. 記事は上記記事を意訳したものです。 ※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。 Lodashの何が問題なのか？ 関数の詳細分析 Lodashの_.get関数 Lodashの_.filter関数 Lodashの_.map関数 コード品質 でも、そのコミュニティは... では、どうするか？ try関数 parallel関数 retry関数 counting関数 range関数 list関数 Lodashの何が問題なのか？ JavaScriptの動的な能力が欠点ではなく特徴として捉えられていた時代に、Lodashは異なる入力に対して異なる振る舞いをする関数を提供することで、できる限り役立つように作られました。現在では、私たちはより良い方法を知っています。純粋関数、決定論的な振る舞い、関数合成といった関数型のコ
はじめに Next.jsで一番最初の詰まりどころと言えば、「CSR/SSR/SSG/ISRとあるけどデータ取得はどのやり方でやれば良いか」という点ではないでしょうか。 自分の中でようやくこの辺りの整理ができたので、この記事ではCSR/SSR/SSG/ISRとは何ぞやというところからそれぞれの使い分けについて書いていこうと思います。 CSR/SSR/SSG/ISRとは CSRとは CSRはClient Side Renderingの略で、日本語に訳すとクライアント側でのレンダリングです。 CSRではクライアントのリクエストに対して空のHTMLとJSを返し、クライアント側でJSを実行してレンダリング、及びデータ取得を行います。 Reactのみを使ってSPAを作る場合にuseEffectの中でデータをfetchして結果をuseStateに渡して表示するというお馴染みのやり方です。 全てがクライア
アクセシビリティに配慮した軽量・高機能スライダー。 ほかのライブラリに依存せず、Lighthouseのエラーもありません。
こんにちは。武田（@tkdn）です。 GraphQL を API として採用したサービスを今年序盤にリリースしています。具体的な内容は今年の夏サミ 2020 の公募枠でお話させていただいたのでよろしければ資料もご参考ください。 週一でリリースし続けるためのフロントエンドにおける不確実性との戦い方 / Developers Summit 2020 Summer C-4 - Speaker Deck今日は GraphQL や Apollo Server についての振り返りと反省を中心に供養しておきます。GraphQL 採用に迷いがある開発者、Apollo Server を採用しようとしている開発者へ向けた知見になれば幸いです。 まとめてみたら GraphQL みが思いの外少なくなりましたが、GraphQL Advent Calendar 2020 の 23 日目の記事です。 なぜ GraphQ
Bento UIとはパネルが伸び縮みしながら配置が入れ替わるお弁当箱みたいなUI、View Transitions APIでCSSアニメーションが進化する
Bento UIとはパネルがお弁当箱のように配置されており、各パネルをクリックすると伸び縮みしながら配置が入れ替わるUIです。最近のWebサイトやスマホアプリでもよく見かけるようになりました。そんなBento UIをView Transitions APIを使用して実装されたデモを紹介します。 一昔前なら実装は面倒でしたが、Chrome 111から利用できるView Transitions APIにより簡単に実装できるようになりました。 Rediento -Bento Radio Group Carousel thing 実装にはChrome 111で実装されたView Transitions APIが使用されており、2つの状態間のアニメーションを作成しながら、1ステップでDOMを簡単に変更できます。 各パネルは、CSS Gridでレイアウト。 positionはなし。 ビジュアルのトラン
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webフロントエンドのリプレースを支えるテストの考え方 / JSConf JP 2021
![DDR5を中心にメモリの暴騰が止まらず、64GB×2枚組で248,000円の例も [12月前半のメモリ価格]](https://cdn-ak-scissors.b.st-hatena.com/image/square/ceee078ef8c4e1975ab2913c3e5f631fbf295424/height=288;version=1;width=512/https%3A%2F%2Fakiba-pc.watch.impress.co.jp%2Fimg%2Fah%2Flist%2F2070%2F296%2F2025-1206-125032.jpg)
The Front End Developer/Engineer Handbook 2024
記事をPicture-in-Pictureで読めるようにしてみた | stin's Blog
Vue.jsの世代交代が到来！ Vue 3デフォルト時代の「Vue.js開発新常識」
【TypeScript】enumを使ったっていいじゃないか
オブジェクトのクローンにJSON化を使う時代は終わった！【JavaScript】 - Qiita
JITをやめてみる ～Microsoft、「Edge」で「めっちゃすげえセキュリティモード」をテスト／標的となっている「V8」の攻撃面を減らし、レンダラープロセスで強力な緩和策を有効化
Cloudflare WorkersでSSRができると何が嬉しいか
Webブラウザ上で動作する帳票エンジンを作る話
htmx is not a typo
JavaScript にイミュータブルな配列操作メソッドを導入するプロポーザルについて
Merging Remix and React Router
NextUI - Beautiful, fast and modern React UI Library
Google、検索結果のスクレイピングツール対策を強化、順位取得ツールなどに影響 - SEMリサーチ
JavaScript情報の情報源となっているサイトの一覧を作った
さようならLodash、TypeScript時代の新星ユーティリティ【Radash】 - コハム
もう迷わないNext.jsのCSR/SSR/SSG/ISR
JavaScriptに「型」を ～Microsoftが新構文を提案へ／TypeScriptの知見をもとにした「コメントとしての型」
Splide - アクセシビリティに配慮した軽量・高機能スライダー
GraphQL 採用における反省と Apollo Server の運用について
www.sankei.com
setsuyakufuansyougai.hatenablog.com
share.google
www.city.tottori.lg.jp
www.daily.co.jp
zenn.dev/prevent