Cloudflare Workers 入門【はじめからそうやって教えてくれればいいのに！】
はじめに この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にも Web に関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします！ Cloudflare Workers とは？ Cloudflare Workers とは、一言で言うと、Cloudflare のエッジで動くサーバーレスの JavaScript 実行環境のことです。 ...と言っても、これだけだとよくわからないですよね。だから、今回は初めて触る人でもわかるように、順序だててわかりやすく解説していきます。 Cloudflare Workers 理解するための道のり Cloudflare Workers を理解するためには以下の3つのキーワードを理解することが重要です。 CDN エッジコンピューティング JavaScript 実行環境 こ
async/await 比較（C#, JavaScript, Python） - Qiita
using System.Windows.Threading; Dispatcher.CurrentDispatcher.InvokeAsync(async () => { // いろいろな処理... // メッセージループを終了させる Dispatcher.CurrentDispatcher.BeginInvokeShutdown(DispatcherPriority.Normal); }); Dispatcher.Run(); WPF とか WinForms とかでは、フレームワークがすでにメッセージループを回しているので、自分で Dispatcher.Run() する必要はない。 JavaScript 自分で書く必要なし。 Python asyncio.run(最初に実行するasync関数)
htmxとは何なのか？ その背景にある思想について - Qiita
先日、Qiitaに投稿された一つの記事が注目を集めました。 元記事では、htmxというJavaScriptライブラリが英語圏で認知を獲得しているとして、インストールの仕方から使い方について公式のドキュメントの全体にわたって簡単に説明が行われています。 さまざまなプラットフォームでこの記事に対する反応を観察してみると、どちらかというと懐疑的な見方のほうが優勢のように見受けられます。ただ、多くのコメントは誤解に基づいているように見受けられました。「JSが要らない」といった元記事のミスリードによるところも大きそうですが1、なぜhtmxが大きく支持を得つつあるのかを理解するには、背景情報を含めて理解することが必要です。 htmxは、最近の複雑化するフロントエンド技術に対する単なる逆張りではありません。これまで30年ほどのあいだウェブ上のシステムを支え続けた「ハイパーメディア」の持つ強力さに今一度目
今モノレポやるならどのツール使うのがいいのん?? - Qiita
モノレポ管理ツール単体を管理するGitHubリポジトリとしてみると Lerna Bazel Nx あたりのStar数の多さが目を引きます。 ※npm Workspaces, pnpm Workspaces, Rush, Turborepo, Yarn WorkspacesのGitHub Star数はモノレポ管理以外の機能も含まれるリポジトリのためご参考 Trends比較 今回各ツールのトレンドを比較するため GitHub Star History npm trends State of JavaScript の調査を行いました。 GitHub Star History GitHub Star Historyで各GitHubリポジトリのStar数推移をチェックしてみました。 引用：GitHub Star History | bazel vs bolt vs lerna vs moon vs
バグバウンティにおける JavaScript の静的解析と動的解析まとめ - blog of morioka12
1. 始めに こんにちは、morioka12 です。 本稿では、バグバウンティなどの脆弱性調査で行う、JavaScript の静的解析と動的解析についてまとめて紹介します。 1. 始めに 免責事項 想定読者 検証環境 静的解析と動的解析 2. 静的解析 (Static Analysis) 2.1 JavaScript File の URL を収集する getJS hakrawler getallurls (gau) 2.2 エンドポイントを列挙する LinkFinder xnLinkFinder katana jsluice endext 2.3 シークレット情報を検出する SecretFinder jsluice Mantra trufflehog 2.4 潜在的な脆弱性情報を検出する Retire.js ESLint 3. 動的解析 (Dynamic Analysis) DevTool
GoエンジニアがReactにチャレンジして驚いた5つのこと
はじめに こんにちは。Magic Momentでエンジニアをしている伊藤です。 いつもはMagic MomentのプロダクトであるMagic Moment Playbookの開発に携わっています。 元々はGo言語エンジニアとしてMagic Moment Playbookのバックエンド開発に参加し始めました。 ですが、今回フロントエンドエンジニアとしてフロント側の開発に参加することとなりました。 Go言語を使っていたエンジニアがReactを使い始めて驚いたこと、理解しづらかった部分などを書いていこうと思います。 これからフロントをやってみたいと思うバックエンドエンジニアの方の参考になれば幸いです。 そもそもReact.jsとは Magic Moment PlaybookのフロントエンドはReact.jsを使って構築されていますが、そもそもReactとはなんなのでしょうか。 ReactはFac
Chat GPTを使ってFigmaの面倒な作業を自動化する｜鈴木慎吾 / TSUMIKI INC.
この記事は、Figma Advent Calendar 2023の11日目の記事です。 最近Figmaで面倒な作業が発生し、自動化のためのFigmaプラグインのコードをChat GPTに書いてもらったところ大変はかどりました。その手順を説明します。 きっかけエンジニアとの振り返りMTGで、こんな相談を受けました。 使用頻度が高いコンポーネントから実装を進めたい。デザイン上で使用頻度の高いコンポーネントの一覧を出してもらいたい。 解決策はいくつか考えられます。 目視でカウントする Figmaのデザインシステムアナリティクス機能を使う 既存のプラグインを使ってカウントする プラグインを開発してカウントする 対象となる画面数が３画面くらいなら、「1. 目視でカウントする」で解決しそうです。しかし対象となるFigmaファイルで扱われている画面数は100画面を軽く超えるので、この案は却下です。 「2
Webフロントエンドパフォーマンスチューニング80選 - Qiita
こんにちは、ぬこすけです。 近年、Webフロントエンドではサイトのパフォーマンスの重要性が高まっています。 例えば、GoogleはCore Web Vitalというパフォーマンスに指標を検索結果のランキング要因に組み込みました。 また、近年の某企業が「パフォーマンスの改善に取り組んだ結果、セッション数〇％アップ、CVR〇％アップ...」などの事例は枚挙にいとまがないでしょう。 パフォーマンスチューニングするためには、定量的に計測してボトルネックを探すようなトップダウンなアプローチもあります。 しかしながら、時には千本ノック的にハウツーを片っ端から試していくボトムアップなアプローチも有効になることもあったり、日々のコーディングでパフォーマンスを意識したコードを書くことは大切でしょう。 この記事ではパフォーマンス最適化のハウツーを紹介します。 パフォーマンス改善の施策が思い浮かばない時やフロン
Reactベストプラクティスの宝庫！「bulletproof-react」が勉強になりすぎる件
Reactアプリケーションのアーキテクチャの一例として公開されているGitHubリポジトリ「bulletproof-react」が大変勉強になるので、私自身の見解を交えつつシェアします。 ※2022年11月追記 記事リリースから1年ほど経過して、新しく出てきた情報や考え方を盛り込んだ続編記事を書いていただいているので、こちらも併せて読んでいただければと想います（@t_keshiさんありがとうございます！）。 ディレクトリ構造が勉強になる まずはプロジェクトごとにバラつきがちなディレクトリ構造について。 ソースコードはsrc以下に入れる bulletproof-reactでは、Reactに関するソースコードはsrcディレクトリ以下に格納されています。逆に言えば、ルートディレクトリにcomponentsやutilsといったディレクトリはありません。 たとえばCreate Next Appで作成
いまさらパララックスを極めるコード｜深津 貴之 (fladdict)
Flash時代の秘伝のコードや、ノウハウが、時代とともに失伝しつつある問題。メモ書き程度に書き残す。 消えゆくパララックス表現「ここパララックス（視差効果）とか、ちょろっと入る？」と聞くと、エンジニアさんから難色を示されることも多い。 パララックスは実装がメンドウだし、読み返しにくいif文や難解な式がイベントハンドラに入り、デバッグやチューニングが難しくなってしまうことが多いからだ。 でも実は、パララックスは、数行で再利用性のある実装ができるのだ。そんなメモ。 Flash全盛期に熟成されたパララックスの実装が、時代とともに消えて行ってしまうのも切ない。残しておけば、Unityとかで誰かの役に立つかもしれない。 マッピング関数をつくるスマートにパララックスを実装するには、まずマッピング関数を実装する。任意のレンジA～Bの数字を、任意の別のレンジC～Dに変換する関数だ。 // マッピング関数
JavaScriptの非同期処理をじっくり理解する (3) async/await
対象読者と目的 非同期処理の実装方法は知っているが、仕組みを詳しく知らないのでベストプラクティスがわからないときがある 実行順序の保証がよくわからないので自信をもってデプロイできない変更がある より詳しい仕組みを理解することでより計画的な実装をできるようになりたい という動機で書かれた記事です。同様の課題を抱える人を対象読者として想定しています。 目次 実行モデルとタスクキュー Promise async/await AbortSignal, Event, Async Context WHATWG Streams / Node.js Streams (執筆中) 未定 用語に関する注意 前々回定義した以下の用語を今回も使います。 1 tick ... タスクキューが1周すること。 1 microtick ... マイクロタスクキューが1周すること。 これらの単位は非同期処理の間の相対的な優先
【Next.js】アクセスコントロールパターン
はじめに Next.js で MPA を構築していると、ページ単位でアクアセスコントロールを行うニーズやケースがよく発生します。 ここでのアクセスコントロールは、ページごとにアクセス可能な条件を定義したり、ルールにそぐわないアクセスを別のページに転送させるなどの処理を意味します。 例えば、一般ユーザ向けのページと、登録済みユーザ向けのマイページを持つケースを考えてみると… 一般ユーザ向けページは誰でもアクセス可能 マイページはログイン済みのユーザのみアクセス可能 ログインのためのサインイン・アップフォームのページも存在するが、ログイン済みであればマイページにリダイレクトされる ただし、パスワードリセットのフォームは誰でもアクセス可能 今回は上記のルールを実装する上での、いくつかのアクセスコントロールパターンを考えます。 個人的には中規模以上のプロジェクトではパターン3をおすすめします。その
Chrome拡張作ったら異世界転生した件 - Qiita
// ランダムに要素を取り出す関数 const randomPick = (items) => { const index = Math.floor(items.length * Math.random()); return items[index]; }; randomPick("123456"); // 1〜6のどれか // 文字列の範囲を展開する関数 const expandCharRange = (str) => str.replace(/.-./g, (range = 'a-z') => { // ハイフンを挟んだ文字列を全て置換 const first = range.codePointAt(0); // 1文字目の文字コード const last = range.codePointAt(2); // 2文字目の文字コード const length = last - first
Reactを使うならRecoilも学べば良いと思うって話 - Grooves開発ブログ
こんにちは、 tbaba です。元々 Rubyist として入社していますが、ここ2〜3年はフロントエンド力の向上にも力を注いでおります。 突然ですが、React で状態を管理する時に何を使っていますか？クラスコンポーネントにしてクラスに状態をもたせている、Redux を使って管理している、React Hooks で管理している、などなど色々な選択肢があるかと思います。 そんな中で自分たちのチームは、現在社内向けのアプリケーションにおいて、フロントエンド開発をする際に Recoil という状態管理ライブラリを使うことが多いです。そこで、今日は「なんでそれ使うの」「何が便利なの」みたいな話ができれば良いなと思います。 先に言っておくと、自分のスキルセットとしては「 TypeScript を利用した開発2年目」「React を利用した開発3年目」「基本は Ruby on Rails が得意なバ
今からVue.jsを始める人のための「知るのを後回しにしてよい」n個のこと - Qiita
＊この記事は2020年3月頭に書かれている記事です どうも、Vueはいいぞおねーさん(自称)です。 Vue.jsは私に言わせるととてもよいフロントエンドフレームワークであり、その理由の一つにプログレッシブフレームワークである(段階的に利用する機能を増やしていくスタイルにマッチしている)ものとして、フロントエンド初学者の皆さんにもおすすめしたい代物です。 しかし、現在までに様々なプラクティスが考案されたがゆえに、「最初からベストな方法で始めたい」という思いから一度にたくさんのことに挑戦してしまいたくなりがちです。 そしてそれはプログレッシブという思想に反するもので、結果として挫折を生んでしまっているのではないかと思いました。 そこで今回は「知るのを後回ししてよいこと」として、Vue.jsへの入門する方へのアドバイスを独断と偏見で不要度という指標でまとめてみました。 不要度というネガティブな指
最新のブラウザで変わるCookieの取り扱いやPrivacyの考え方
2020/02/13 DevSumi 発表資料
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【2024年】React, Tailwind CSSでメルカリクローンサイトを作ろう【入門】
コードには型アノテーションよりも要件アノテーションを増やせ！/harajukuts2
Webブラウザ上で動作する帳票エンジンを作る話
KARTE Blocksを支える技術
