ReactとCSSで一定時間表示される通知をやるときの色々な方法 - Qiita
フロントエンド、というよりUI一般では、ユーザーの操作に対してまったく無反応なのは良くありません。ユーザーが意味のある操作をしたならば、何らかのフィードバックを返すべきです。 例えば、何かをユーザーのクリップボードにコピーするボタンというのはありがちですが、クリップボードに何かを書き込んでもそれだけだと目に見える変化がないので、追加で「コピーしました」のような通知を出すというのはよくあるパターンです。 ここでは、そのような通知が、ちょっとフェードインしながら表示され、一定時間後にフェードアウトしながら消えていくという要件を想定することにしましょう。 transitionを使う基本的な実装 まずはReactの部分をざっくりお見せします。 import { useState } from "react"; import "./styles.css"; export default functi
Webアプリでの長押し機能の実装は意外と難しい - Qiita
<div id="counter">0</div> <button type="button" id="incrementBtn">+</button> const counter = document.getElementById('counter'); const incrementBtn = document.getElementById('incrementBtn'); incrementBtn.addEventListener('click', () => { counter.textContent = Number(counter.textContent) + 1; }); これは、多くのブラウザやWebアプリケーションは、キーボードアクセシビリティを重視しているためです。 ガイドライン 2.1 キーボード操作可能: すべての機能をキーボードから利用できるようにすること。 すべ
Web Audio APIを使ったブラウザフィンガープリント手法の紹介 - Qiita
Web Audio APIというAPIがあります。 RFC / 日本語訳 ざっくり言うと、ブラウザで音を作ったり出したりできるAPIです。 RFCの時点でフィンガープリントの懸念が大量に書かれてるという有様ですが、実際に実用レベルでブラウザフィンガープリントしている例が存在しました。 FingerprintJSという、そのまんまな名前のライブラリです。 以下は同ライブラリのブログより、How the Web Audio API is used for browser fingerprintingという記事のざっくり紹介です。 How the Web Audio API is used for browser fingerprinting Cookieを使うこともなく、許可を求めることもなく、Webブラウザを識別できることを知っていますか？ この技術はブラウザフィンガープリントと呼ばれていて
TS 5.6のiterator helpersサポート――BuiltinIteratorsのwhat & whyを知る - Qiita
先日、TypeScript 5.6 Betaが公開され、あわせてリリースノートも出ました。 この記事では、TS 5.6の新機能の中でもIterator helpersに注目します。特に、Iterator helpersのサポートに合わせて型定義に追加されたBuiltinIteratorsやBuiltinAsyncIteratorsについて解説します。 Iterator helpersとは Iterator helpersは、ECMAScriptのプロポーザルのひとつであり、この記事の公開時点ではStage 3という完成目前の状態にあります。TypeScriptではStage 3に到達したプロポーザルが実装されるので今回これが実装されることになりました。 ランタイムの実装としては、この記事公開時点ではGoogle Chrome 122, Node.js 22.0.0, Deno 1.42など
目に見えない文字を悪用してサイトを好き放題荒らされた話 - Qiita
ある日のこと 僕の運営している『ブラウザで遊べる絵チャット（令和最新版）』に、このような投稿がされてしまいました。 正直こんな荒らしは毎日のようにあるのですが、普段であればすぐに他のユーザーによって通報され、対処されます。 しかし、このユーザーは、何故か他ユーザーに通報されることなく、荒らし続けることができていました。 スクショをよく見ていただきたいのですが、通常であれば、「善良ユーザーA」のように発言の横にユーザーが名が表示され、そのユーザー名をクリックすることでプロフィールを表示することができるようになっています。 しかし、荒らしているユーザーには、なんと名前がないのです。 名前がないと、ユーザー名を押下することができず、プロフィールも表示できません。 違反行為の通報は、プロフィールから行うようになっているため、このユーザーは他ユーザーから通報されることなく、好きなだけおちんちん祭りを
Google Apps Script (GAS) で Slack 連携を実装する前に知っておくとよい 5 つのこと - Qiita
Slack 連携、特にちょっとした通知を Google Apps Script (GAS) からやりたいというユースケースは非常によく聞かれます。本格的なアプリケーション動作環境などを用意することなく Google Workspace (旧 G Suite) のアカウントだけでちょっとした自動化をできるので、重宝しますよね。 ちなみに GAS の正式名称は「Google App Script」ではなく「Google Apps Script」です。たまに誤記を見かけます... Slack 連携で知っておくとよい 5 つのこと さて、本題です。 Slack アプリを Google Apps Script (GAS) で実装する場合、特にインタラクティブな機能の利用において知っておくべき制約があります。この記事では、以下の 5 つの留意点について解説します。ログの有効化など Slack アプリ開
Cookie の HttpOnly 属性について勘違いしていたこと - Qiita
追記 コメントありがとうございます、ご指摘を参考に読みやすくなるように修正しました！ はじめに (本記事は初歩的な内容ですが、少なくとも僕は引っかかったので記事化したものです) Cookie に HttpOnly という属性があります。 この HttpOnly を設定することで JavaScript からの直接の参照・操作を禁止することによって、XSS などの手法によって悪意のある第三者から Cookie の内容を見られるのを防止することができます。 ここまでは多くの記事に書いてあるのですが、私は一点ずっと勘違いしていました。 いや、直接値を読み取れないってだけで、API呼び出しとかの時に使えないってわけじゃないんかーーーーーーーーーーい！！！ いや、まあそれすらできなかったら何のための Cookie なんですかという話なのでそりゃそうなんですが... ということで見ていきます。 実装例(
useRefでステートを管理するのはReact18でアンチパターンになるからやめよう - Qiita
こんにちは。最近、Reactでのステート管理において「useStateの中にステートを置くのではなく、useRefで得たrefオブジェクトの中にステートを置いてuseState（またはuseReducer）をコンポーネントの再レンダリングを発生させるためだけに使う」というやり方を複数の記事で見かけました。このパターンは、今（React 17以前）は動くけどReact 18でアンチパターンに変貌するやり方なので、啓蒙するためにこの記事を用意しました。 ステート（コンポーネントのレンダリングに使用される値）は、useRefではなくuseState（またはuseReducer）をちゃんと使って管理するようにすれば、React 18以降も安泰です。 useRefをステート管理に使うパターンとは こういうやつです。 // 普通のやり方 const Counter1: React.VFC = () =
TypeScriptの型演習 - Qiita
この記事は、TypeScriptの型を使いこなすための演習として、TypeScriptの型に関する練習問題を提供する記事です。解いて自分のTypeScript力を確かめてみましょう。 問題のレベルは、筆者の既存記事「TypeScriptの型入門」「TypeScriptの型初級」を完全に理解した人なら全部解けるという想定で作られています。記事を読んでいない人が腕試しに解いてみるのも問題ありません。また、記事を読んだけど全部は理解していないという場合でもご安心ください。解ける問題はありますから、ぜひ挑戦してみましょう。 問題は20問あり、4段階の難易度別に分かれています。同じ難易度帯の問題は思いついた順で並んでいるので、後のほうが難しいわけではありません。問題は執筆時点の最新版のTypeScript（TypeScript 3.3.3333）で--strictオプションありの状態で動作を確認して
Deno のめっちゃ難しいバグを修正した - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 2022年4月、Deno に以下のバグが報告されました。 fetch API を使って 300KB ぐらいあるファイルをアップロードすると、一定確率でアップロードされたファイルが壊れるというバグの報告です。 報告者によれば、1.20.6 まではバグは発生しておらず、1.21.0 から発生するようになったという事です。1.20.6 の次のリリースが 1.21.0 なので、パッチバージョン1個分まで、バグの発生時期が特定されている状態です。 fetch 周りは自分はほぼ実装していないので「担当範囲ではない」感覚だったので、普通にスルーしてい
Web Animations APIのcompositeが凄過ぎてすごいからみんな見てくれ - Qiita
この記事はようやくSafariでもフルサポートされそうなWeb Animations APIのcomposite（効果の組成）って機能がすごいよ！！って、ただそれだけを伝えたい記事です。平たくいうと複数のアニメーションを簡単キレイに合成できる機能なのですが、通常のWebのコーディングでもよく出てくる辛さを解決してくれる結構すごいヤツなのです。 ▼ こういうアニメーション作るのもだいぶん楽になります Web Animations APIで星空パーティクル 単にCSSのアニメーションをJSで描けるよってだけではあるんだけど、ライブラリなしでそこそこ簡単にインタラクティブなもの作れるって意味ではうれしい。主要ブラウザ全部で使える。https://t.co/8H8zXfc5NL pic.twitter.com/bfTERJPxIX — ゆき＠ティアF47a (@yuneco) October 11
【追記あり】ES2022 Array#at がちょっとおかしい #fix_ecmascript_at - Qiita
既に Stage 4 になっているので諦めていたんですが、流石に見逃せないかなと思ったので TC39 の Discourse にトピックをたててみました。意見がある方はこちらにお願いします。 https://es.discourse.group/t/fix-at/983 議論に伴って私が実際に欲しかったものをモジュールにして公開してみました。 https://github.com/petamoriken/safe-at それといまいちユーザーからの声が伝わっていない感じがしたのでハッシュタグ #fix_ecmascript_at を用意してみました。協力をよろしくおねがいします。 String#char{At, CodeAt} という存在を忘れてたんですが、この似た名前のメソッドたちが引数を整数に丸めるのに String#at が丸めないのはたしかに変だということに気づいてしまったので、自
マッチングアプリ強者を体験できる PWA 開発で、Web プッシュ通知を理解しよう - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? どうも、親からもらったお年玉でマッチングアプリを始めるも、いいね 0 件のまま 3 ヶ月で退会した@sadnessOjisan です。 今日はタイトルの通り、マッチングアプリ強者を体験できる PWA を開発します。具体的には、いいね 通知がたくさん届くアプリを開発します。なおこのアプリは「通知止まらん www」を体験できるアプリを作ったの影響を深く受けました。ただし、これから作る push 通知体験アプリでは、通知の疑似体験ではなく本当に通知が届きます シンプルにプッシュを送るだけのコード: https://github.com/sad
2019年5月時点 JavaScript初心者が参考にしていいモダンJavaScript解説サイト2つ - Qiita
初心者向け解説によくある例です。 これが現時点（2019年5月時点）で非推奨な書き方だと、初心者は気付くことができない。つらい。 【JavaScript初心者のつらいところ】 初心者向け解説（チュートリアル）のvarをconstやletに置き換えなきゃいけない 何も知らずvarで写経すると悪癖がつく 他にも「今は覚えなくていい書き方」がどうやらたくさんある 「歴戦のJavaScripterがモダンJavaScipt知識をアップデートするためのまとめ」を読むには、そもそも必要とされる前提知識を持ってない 「何が正解かわからない→ググる」と、正しい情報探しに時間が消える 解説途中でググらなくても良い、チュートリアル的に読み通せるサイトってどこ！？！？ そんな私のニーズを満たせそうなサイトにたどり着いたので、記事にしてみます。 【js-primer】 js-primer これからJavaScri
top-level awaitがどのようにES Modulesに影響するのか完全に理解する - Qiita
先日、TypeScript 3.8 RCが公開されました。TypeScript 3.8はクラスのprivateフィールド（#nameみたいなやつ）を始めとして、ECMAScriptの新機能のサポートがいくつか追加されています。この記事で取り扱うtop-level awaitもその一つです。 この記事ではtop-level awaitに焦点を当てて、その意味や使い方について余すところなく解説します。top-level awaitは一見単純な機能に見えますが、実はモジュール (ES Modules) と深い関係があり、そこがtop-level awaitの特に難しい点です。そこで、この記事ではECMAScriptのモジュールについても詳しく解説します。この記事を読んでtop-level awaitを完全に理解して備えましょう。 **※ この記事は3分の1くらい読むと「まとめ」があり、残りはおま
Redux不要論と、グローバル状態管理ライブラリReactNの紹介 - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Redux不要論 若干強めのタイトルです。あらゆるケースでReduxが不要と主張するつもりはありません。 しかし、Reduxが不要と思われるケースでもReduxが使われることを避けるため、「Reduxは必ず採用しなければならないものではない」ということを意識していただきたく、刺激的なタイトルで始めました。 （個人的にはむしろ、積極的に採用すべき理由がなければ採用しない方が良いくらいに思っています） （MobXとか他のライブラリについては一旦置いておきます） Reduxのメリット Redux's motivation 曰く、SPAに於ける
TypescriptとReact HooksでReduxはもうしんどくない - Qiita
🏔背景 Reduxはしんどい、だるい、でかい、というイメージが定着して久しいですね 😭 僕も3年ほど前にどっぷり触ったときは「こいつぁなかなか」という感想でした。 しかしながら状態管理ライブラリやらFlux思想やらの流れとしてReduxが不可避の存在だったために、おつらい経験をされた方も多かったのかなとお察しします。 時代は巡り2019年末、令和元年のご時世ではすっかりTypescriptによる型安全、正式提供されたReact Hooksによる脱Class component・HOCフリーな省エネ設計などが定着してきており、この両者を前提とした構築がもはやスタンダードとなってきています。 諸兄の人柱的知見も相まって最近は敬遠されがちなReduxパイセンですが、この度久方ぶりにがっつりと向き合ってみると、上述した両者の恩恵を受けてなんだか垢抜けた感じになっていました。知ってましたか？
TypeScript で書く React コンポーネントを基礎から理解する - Qiita
この記事は Recruit Engineers Advent Calendar 2019 の 23日目の記事です。 TypeScript のプロジェクトで React コンポーネントを書いていると、コンパイラに怒られることがたびたびあります。ネット上にあるサンプルコンポーネントが JavaScript で書かれていると、プロジェクトにもってきたときにコンパイルできないということはよくあるんじゃないでしょうか。any でコンパイラを黙らせることもできますが、せっかく TypeScript を使っているので、安全に解決したいよねってことでこのような記事を書きました。 型定義は @types/react@16.9.17 にしたがっています。目次をみて、この程度のことはもう知っているよという方は react-typescript-cheatsheet をみてください。React + TypeScr
Google翻訳とGrammarlyを1つのアプリにして英作文セルフレビューを効率化する - Qiita
オフショア先とやりとりをしたり英語でコメントやでコミットログを書くときは、自信がないのでGrammarlyでの文法チェックとGoogle翻訳での対訳でセルレビューをする習慣をつけています。 参考： 英語校正ツールでここまで感動したことはあっただろうか？ GitHubでの英文クオリティを劇的に改善！Grammarly - Qiita とはいえ、Webブラウザで毎回GrammarlyとGoogle翻訳を開いたりタブを探したりするのが面倒くさくなっていました。 1画面に2つのWebサービスをまとめたい どうせ同じ英文を両方のサービスにペーストするなら、1つの画面で両方いい感じに開けて、ブラウザとは別のアプリケーションとしてまとまっていたら便利そうです。（下図） 真っ先に考えたのはiframeを使って複数のWebサイトを1HTML内に埋め込むことでしたが、いずれのサービスもiframeからの使用は
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
React大好き侍が、「もうSolidJSでいいじゃん...//」ってなったワケ。 - Qiita
