ReactのuseStateについて丁寧に理解する - Qiita
はじめに useStateはReactの関数コンポーネントで使われる代表的なAPIの1つで、シンプルかつ便利なのでよく使われる馴染み深い機能です。この記事ではそんなuseStateについて踏み込んで解説します。 この記事で述べるコンポーネントとは基本的にReactの関数コンポーネントを指します。 状態 useState自体がどのような振る舞いを持つAPIなのかを紹介する前に、useStateを学ぶ時に必要となる状態(State)という概念を紹介します。 状態とはコンポーネントのレンダリング間で保持され、変更することで再レンダリングが起きるような値のことを指します。言い換えると、状態はコンポーネントがアンマウントされる(使われなくなる)までのライフサイクル間で共有され、更新する度にコンポーネントを再計算させるような値です。 レンダリングとはReactが何らかのトリガーを感知した時に対象のコン
Custom elements
独自のメソッドやプロパティ、イベントなどを持つ、独自のクラスで記述されたカスタムHTML要素を作成することができます。 一度カスタム要素が定義されると、組み込みのHTML要素と同じようにそれを使用できます。 HTMLの種類は豊富ですが、無限ではないので、これは素晴らしいことです。<easy-tabs>, <sliding-carousel>, <beautiful-upload> などはありません。他に必要となるタグについて考えてください。 特別なクラスでそれらを定義し、それ以降はあたかもそれがHTMLの一部であるかのように使用することができます。 Custom element(カスタム要素)には2種類あります。: 自律型カスタム要素(Autonomous custom elements) – 抽象的な HTMLElement クラスを拡張した “すべてが新規” の要素です。 カスタマイズ
Tiny Raytracer - Gabriel Gambetta
I love raytracers. Their combination of a simple algorithm and stunning results are hard to beat. I’ve written several raytracers over the years, including the one in Computer Graphics from Scratch, but this time I decided to write the smallest possible one I could write. My current version is 912 bytes of Javascript, and I’m sure it’s still possible to shave off a few more bytes. Note that the si
document.all の例外仕様を知っていますか
昨日、ツイッターで次のような JavaScript クイズを出しました。 久しぶりの JavaScript クイズ！ function hello(x) { if(typeof x === 'undefined') { alert(x.f()); } } この hello 関数で "Hello, World!" のアラートを表示させることが出来るか？ — Takuo Kihira (@tkihira) July 31, 2022 このブログ記事では、この問題について解説します。 解答 答えは「出来る」です。出題者の意図としては document.all を想定しておりました。 document.all は、ブラウザに存在する、非常に特殊なオブジェクトです。 document.all 自体は object 型である。console.log(document.all) とすると内容が確認出来る
JavaScriptのレガシー挙動を定めたAnnex Bをひたすら読む記事
ECMAScript Annex Bおよび関連する仕様を読みます。 おことわり 言うまでもありませんが、ここで説明されている機能は使わないようにしましょう。 筆者がJavaScriptを書き始めたのは2005年頃で、その後2010年代は実質的な空白期間でした。そのため本記事に含まれる歴史的背景の説明は、2005年頃の筆者が学んだ内容に加えて、当時の資料を遡って調査した結果に基づいて記載されています。できる限り信頼性の高い情報を見つけた上で記述するよう心がけましたが、当時常識だった知識の欠落等により不正確な記述になっている部分があるかもしれません。もし誤り等があったら指摘いただけると嬉しいです。 現在のzennでは <sub></sub> や <ins></ins> は描画されていませんが、心の目で下付き文字や下線装飾に読み替えてください。 ECMAScript Annex B とは ECM
Scrapboxの複雑GUI - guiland
https://gyazo.com/343caf0f14cc565ce656a43e9a02aad2https://gyazo.com/471d8cab15bf364febe29e6f2cafb5ad
Scrapboxの開発 - React & Websocketで作るリアルタイムWiki - 橋本商会
→ commitをさかのぼって、「削除された行を参照したinsertをした行」を参照してinsertする
Alpine.js
<script src="//unpkg.com/alpinejs" defer></script> <div x-data="{ open: false }"> <button @click="open = true">Expand</button> <span x-show="open"> Content... </span> </div> { let keys = Object.keys(steps) direction = keys.indexOf(value) > keys.indexOf(old) ? 'right' : 'left' })" > Alpine is a rugged, minimal tool for composing behavior directly in your markup. Think of it like jQuery for the mode
InstantClick — JS library to make your website instant
Documentation Click test InstantClick is a JavaScript library that dramatically speeds up your website, making navigation effectively instant in most cases. Follow @instantclickjs 25 December: version 3.1 is here, with support for dynamically added links! Download Changelog Why Despite huge bandwidth increases, websites don’t get much faster. This is because the biggest bottleneck in loading web
esbuild - An extremely fast bundler for the web
Above: the time to do a production bundle of 10 copies of the three.js library from scratch using default settings, including minification and source maps. More info here.Our current build tools for the web are 10-100x slower than they could be. The main goal of the esbuild bundler project is to bring about a new era of build tool performance, and create an easy-to-use modern bundler along the way
esnip.dev - Share snippets
esnip.dev - Share snippetsPlay with presetreactpreacttfjssveltevue-tsxvanillaLatest editscatalogue by 7a08c584-b2f7-4128-b3ea-1942da371f65class with proxy by tosukeMarked + React JSX Renderer Example by 7a08c584-b2f7-4128-b3ea-1942da371f65fork: input test/raf by tosukeinput bug(firefox + skk) test by tosukeinput test by tosukeinput test by tosukeinput test by tosukefork: react by Shinyaigeeknoise
async/await は Promise を置き換えない - Okapies' Archive
まとめ async/await 構文は、Promise で書ける処理のうち特定のケースしか表現できない 特定のケースとは、ある非同期処理の前処理と後処理がそれぞれ 1 個ずつの場合のみである async/await 構文は初心者に非同期処理を導入する際に適しているが、非同期処理を逐次処理として書けるという幻想を与えるので、どこかで知識をアップデートする機会を設けるべきである この記事はなに？ 少しバズったのでまとめておこうかと。 「async/await があれば Promise なんて難しいものは要らない！」とか言ってるウブな子に、複数の API に並列にリクエストを投げて一つ以上成功した時だけ先に進む、みたいな問題を与えて愛でてみたい。— Yuta Okamoto (@okapies) 2020年12月11日 async/await は Promise のネストを手続き的なコードに見え
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Nature of Code
Mermaid | Diagramming and charting tool
Structure and Interpretation of Computer Programs
Interactive Results
Block Pong: Web 技術を駆使したゲームアプリの実装舞台裏 - DevFest 2020
社内でフロントエンドのパフォーマンスチューニングコンテストを開催した
Monaco Editor
GPU.js - GPU accelerated Javascript
