YEND

useEffectはReactの中でも扱いの難しいフックとして知られています。Reactで開発を行う中でuseEffectを検討するタイミングや適切な使い方について悩んだ経験のある方も多いのではないでしょうか。 本記事では、useEffectの目的を把握し、どのような場合にuseEffectの使用を検討すべきかについて考えていきたいと思います。 コンポーネントの純粋性と副作用 まずuseEffectについて考える前に、コンポーネントの純粋性について理解する必要があります。Reactにおいて純粋性は重要な概念の1つです。 前提として、Reactではすべてのコンポーネントが純関数であるこ...

先日、次の記事を読んでinfinityの計算について興味を持ちました。 https://zenn.dev/crayfisher_zari/articles/d98a0aef6326a8 なお、infinityの値が2147483647ではありません。calc(infinity - 2147483647)の結果も2147483647と同じなります。 infinityが実行環境における「可能な最大値」となることは知っていましたが、infinityを含む計算がどのような結果になるのかは理解していませんでした。そこでz-indexプロパティを用いて、infinityに関する計算の検証および調...

はじめに テキストの読みやすさを大きく左右する要素の1つに、テキストと背景のコントラストがあります。これまで私は、何かしらのツールを用いてコントラスト比を確認することはあれど、その具体的な計算方法については理解していませんでした。 そこで、今回はWeb Content Accessibility Guidelines (WCAG) 2.2を参考に、コントラスト比の計算方法について学んだので、ご紹介します。 ウェブアクセシビリティにおけるコントラストとは 一般的に「コントラスト」という言葉には「対比」や「対照」という意味があります。中でもウェブアクセシビリティという文脈において、コ...

Three.jsでShaderMaterialを使ってテクスチャをブラウザの画面にフィットさせる方法について紹介します。この記事では、開発環境としてViteを採用していますが、紹介する考え方は他の開発環境でも同様に適用可能です。 全体のコードの概要 ここでは、Planeメッシュを作成し、ShaderMaterialを使用してテクスチャを適用する方法を紹介します。詳細なコードは以下のリンクから確認できます。 https://github.com/yend724/yend-playground/blob/main/src/three-fit-texure/assets/ts/index....

! 本記事はCSS Advent Calendar 2023の15日目の記事になります。 ! 本記事はCSSのmatrix関数を把握すること、または使用できるようにすることを目的としています。数学の行列については詳しく解説しません（というよりできません）。 CSSのtransformプロパティにおけるmatrix関数（matrix()およびmatrix3d()）について書いていきます。 transformプロパティとは https://developer.mozilla.org/ja/docs/Web/CSS/transform transform は CSS のプロパティで、...

Chrome 102 以降で Navigation API が、Chrome 111 以降で View Transitions API がサポートされました。 本記事ではこの二つの API を用いてページ遷移アニメーションを実装してみようと思います。 ! この記事が執筆された 2023 年 8 月 17 日現在では、View Transitions API と Navigation API はまだ限られたブラウザ・範囲でしかサポートされていません。これらを使用する際には、「Can I use... Support tables for HTML5, CSS3, etc」といったリソースを...

本記事はクソアプリ Advent Calendar 2024の4日目の記事です。 クソアプリAdvent Calendarに参加してみたかったので作りました。手ブレ写真が撮れるウェブアプリです。何…