はてなブックマーク

2026年9月10日・11日の2日間、パリで「Three.js Conf Paris 2026」が開催されました。JavaScriptの3Dライブラリー「Three.js」のはじめてのカンファレンスです。ICSは日本から渡仏し、現地のイベントに参加しました。本記事では、印象に残った発表やイベントの様子をレポートします。 参加して感じたことは、次の3つです。 3D表現のクリエイティブと技術の両方を学べるイベントだった 著名なライブラリー開発者やクリエイターと交流できうれしかった 海外カンファレンスならではのパワーとカルチャーが楽しかった カンファレンスの概要 会場は、パリ市内の会議施設「Maison de la Chimieメゾン・ド・ラ・シミー」です。名前はフランス語で「化学会館」を意味し、学術会議やセミナー、展示会などに使われている場所です。今回のカンファレンスに参加したのは550人だっ

2026年9月8日に公開されたThree.jsのr186で、3D Gaussian Splattingガウシアン・スプラッティング（以下、3DGS）をライブラリの機能で表示できるようになりました。3DGSは写真から立体を再構成する手法で、手元にあるものをスマートフォンで数十秒撮るだけで、ぐるりと見回せる3Dデータが作れます。 この記事では、スマートフォンでの撮影からThree.jsでの表示までをひととおり試します。 次のデモは、撮影したスパゲティを魔法陣から召喚する演出です。この演出は過去記事『エフェクト作成入門講座 Three.js編 RPGのセーブポイント風の魔法陣』のコードをそのまま使い、召喚される被写体として3DGSを組み込んでいます。［SUMMON］ボタンを押すと何度でも召喚できます。 ［Load .spz］ボタンで手元のspzファイルの読み込みができ、［Flip］ボタンで上下反

useStateとuseEffectだけじゃもったいない！ ユーザー体験を改善するReactの便利機能 ウェブ開発で圧倒的なシェアを誇るReact。バージョンが上がるごとにいろいろな便利機能・コンポーネントが追加されていますが、正直useStateやuseEffectばかり使っている、他の機能はあまり詳しくない、という方もいるのではないでしょうか？ この記事では、ユーザー体験を改善できる便利なフックやコンポーネントを紹介します。アプリケーションにおいてユーザー体験がよいことは意外と重要です。なんだか遅いという印象を与えてしまい、アプリが使われなくなったり、ウェブサイトの画面が閉じられてしまったらもったいないですよね。 Reactの機能にあまり詳しくない方や、なかなかアップデートにキャッチアップできていない方は、この機会に一気に知識を底上げしましょう！ ※この記事に登場する機能は、主にRea

新API「HTML-in-Canvas」を紹介 CanvasにHTMLを描くAPIは何を解決するのか？ 波打つ入力フォームや発光するボタン、ウェブページ全体の派手なグリッチ表現やトランジション……。最近SNSでこうしたウェブページデモを見かける機会が増えてきました。こうしたデモの多くに利用されている新しい技術がHTML-in-Canvasと呼ばれるAPIです。まだ正式に利用できる機能ではありませんが、VFX-JSやCanvasUIのように積極的にサポートするライブラリも登場しており、注目度の高い機能です。定番のThree.jsやPixiJSなども実験的な対応を始めています。 ▼ VFX-JS（ビジュアル表現用のライブラリ）のHTML-in-Canvasを使ったデモ https://x.com/amagitakayosi/status/2059716302059847881 下の作例ではごく

Reactなどで作るコンポーネントは、渡すデータによって見た目が変わります。たとえば次のようなパターンは、普段の開発用データでは確認できないことがあります。 一覧が0件のとき スクロールが必要なほど件数が多いとき カードなどで文言が極端に長いとき 画面遷移やデータの準備をしてから各パターンを見に行く手間もかかります。 こうした状態を、アプリ全体を動かさずに確認するために使うのがStorybookストーリーブックです。コンポーネントだけをブラウザー上に並べ、状態ごとの見た目を切り替えながら確認できます。表示した画面のURLを共有すれば、デザイナーやディレクターにも見てもらいやすく、コーディングエージェントに実装を頼むときにも期待する見た目を伝えやすくなります。 Storybookがあると、プロジェクト内にどんな共通コンポーネントがあるか、どう使うかをいち早く把握できます。また、コンポーネント

ウェブサイトのメニューUIには、「セーフ・トライアングル」と呼ばれる手法があります。フロントエンドエンジニアがメニューを実装するときに意識すれば、階層メニューのマウス操作でのユーザビリティーを高められます。 ウェブでのメニューUIでは、目的のサブメニューへ斜めに進むと、途中の別項目に反応してサブメニューが切り替わることが多々あります。ユーザーが誤反応を避けるには、いったん右へ進んでから垂直に動かすしかありません。 ▲対策していない階層メニュー。左側の例では、斜め移動で途中の項目が反応。誤反応を避けるには、右側の例のように、格子上の道のり（マンハッタン距離）で動かすしかない。 セーフ・トライアングルとは この問題を実装で解決するには、マウスポインターと、サブメニューの左上・左下を結んで三角形を作ります。ヒットエリアを拡張することで、斜め方向にマウスを動かしても、誤反応を避けられます。 ▲セー

導入手順（MCP） 導入には、Node.jsのLTS版とnpm、Chromeが必要です。詳細は公式の導入手順を参照ください。利用するAIエージェントごとに、次の手順でChrome DevTools MCPを導入します。 Claude Code ①Claude Codeを起動し、次のスラッシュコマンドを順番に実行します。はじめに、Chrome DevTools for agentsのマーケットプレイスを追加します。 /plugin marketplace add ChromeDevTools/chrome-devtools-mcp ②続いて、追加したマーケットプレイスからプラグインをインストールします。 /plugin install chrome-devtools-mcp@chrome-devtools-plugins ③このプラグインにはMCPサーバーとAgentic Skillsが含ま

JavaScriptで日付を扱ったことのある方なら、「3月のつもりでnew Date(2026, 3, 15)と書いたら4月になっていた」という経験が一度はあるのではないでしょうか。月だけが0始まりであることはDateクラスの仕様の一例ですが、そのほかにも、日付の計算やフォーマット、タイムゾーンの処理には手間がかかります。そうした扱いづらさを補うために、長らくdate-fnsやDay.jsといったライブラリが利用されてきました。 その状況を変えるのが、Dateクラスを置き換えるために一から設計された新しい標準API「Temporalテンポラル」です。2017年ごろから議論が始まった提案で、仕様はすでに固まり、ECMAScript 2027に採用される予定です。ライブラリの使い方と違って、標準APIの知識は一度覚えれば長く使えます。Dateの課題を振り返ったうえで、Temporalの使い方と

テキスト演出では、見た目だけでなく読み上げや選択、コピーへの影響などアクセシビリティにも注意が必要です。元のテキストが読み取りやすい構造で残るか、装飾のための文字が選択やコピーの邪魔にならないかを確認しておくと安心です。 slot-text slot-textは、短いUIラベルをスロットのように切り替えるライブラリです。Copy / Copied、Online / Offline、保存中 / 完了 のように、状態が変わったことを伝えたい場面に向いています。 以下のデモでは、テキストが1文字ずつ縦方向に入れ替わるアニメーションで切り替わります。クロスフェードでシンプルに入れ替えるよりも操作の反応が伝わりやすく、UIの「触った感」が増しますね。文章のような長いテキストよりも、ボタンやバッジなどの短いラベルで使うほうが効果的です。 サンプルを別ウインドウで開く コードを確認する import {

JavaScriptには、scrollTo()メソッドやscrollBy()メソッドなど、目的のところまでスクロールする関数があります。これらの関数と一緒に使われることが多いのがbehaviorプロパティに"smooth"を設定して、目的地まで滑らかにアニメーションさせる方法です。たとえば目次をクリックしたら該当の章までスムーズにスクロールさせるなど、使ったことがある方も多いと思います。 スムーズスクロールの課題として一番大きなものは、スクロールの完了後に行う処理が書きづらいことです。Chrome・Edge 150から使えるプログラマティック・スクロール・プロミスでは、今までscrollendイベントの監視やsetTimeout()メソッドなどで検知していたスクロール完了を、Promiseを使って制御できるようになります。 スクロール完了をPromiseであつかう Promiseは非同期の

AIがアプリケーションコードもテストコードも書く時代、UIを操作するE2Eテストは「通るか」だけでなく、「何を操作しているかが読み取れるか」という視点も重要です。 AIが生成したUIのテストコードは一見それらしく動いても、順番や見た目のテキストに依存していて、あとから読むと意図がわからないことがあります。 // 0番目の「削除する」をクリックする await page.getByText('削除する').nth(0).click(); たとえば、上のテストコードは、nth(0)で0番目の「削除する」を順番で決め打ちしています。今は通っていても、ボタンが増えたり順番が変わったりすると意図しない要素を操作する可能性があります。 本記事では、Playwrightで要素を取得する方法（ロケーター）を、「順番」や「文字列だけ」ではなく、ユーザーが認識する役割・名前・領域に沿って指定する方法を紹介しま

Chrome・Edge 149（2026年6月）で利用できるようになったCSS Gap Decorationsを紹介します。従来はGrid LayoutやFlexboxの余白に罫線を入れるために、疑似要素や子要素のborderプロパティに頼る場面も多く、折り返しや列数の変化を考慮しながら要素ごとに罫線を調整する必要がありました。CSS Gap Decorationsにより、余白の罫線をより素直に扱いやすくなります。 CSS Gap Decorationsとは CSS Gap Decorationsは、Grid LayoutやFlexbox、Multi-column Layoutのgap部分に対して線や装飾を与えるための仕組みです。要素そのものではなく、要素間の余白を対象にできるのが大きな特徴です。レイアウト変更時にも破綻しにくく、レスポンシブなUIとの相性も良好です。 Gap Decora

display: grid-lanes display: grid-lanesを使えば、専用のレイアウトモードとしてメイソンリーを実装できます。 .lanes { display: grid-lanes; grid-template-columns: repeat(auto-fill, minmax(144px, 1fr)); gap: 10px; } メイソンリーに必要なのは、最初の2行です。display: grid-lanesでレイアウトモードを切り替え、grid-template-columnsで列（レーン）を定義すれば、メディアクエリー不要のレスポンシブなメイソンリーになります。3行目のgapはカード間の余白指定で、ここまでがよく使う形です。 grid-template-columnsが縦方向の定義になり、縦積み（後述のwaterfall）が選択される minmax(144px,

3つのストレージはそれぞれ得意分野が異なります。この中で一番手軽なのはWebStorageですが、何も考えずになんでも入れてしまうと、容量制限やパフォーマンスの問題にぶつかりやすくなります。 デモ：3つのストレージを併用したアプリ（簡易ペイントソフト） まずは3つのストレージ機能を活用した簡単なデモを見てみましょう。 サンプルを別ウインドウで開く このデモは簡単なペイントツールです。複数のレイヤーを追加して好きな色と太さの線を描くことができます。ストレージを利用することで、リロードしても設定や描いた内容が消えません。 LocalStorage：ブラシの色・太さなどユーザー設定を保持します。設定を変えるとデバッグ表示の「LocalStorage」の値も変わることを確認してみてください。 → ソースコード：LocalStorageを使用した設定の読み書き IndexedDB：すべての操作履歴を

ハンバーガーメニューは、スマートフォン向けウェブサイトでよく使われるナビゲーションUIです。ヘッダーの［≡］ボタンを押すと、リンクの一覧が、現在のページの上に重なって表示されます。 横三本線のボタンが、パン（バンズ）とお肉（パティ）を挟む🍔のように見えることから、慣習的に「ハンバーガーメニュー」と呼ばれています。 新旧さまざまな作り方がありますが、今はHTMLの<dialog>タグで作るのがオススメです！　2020年代以降に登場した新しめのCSSと組み合わせることで、スマートに作れます。 古い作り方を避けたい理由 ハンバーガーメニューは2000年代後半のスマートフォンが出始めた頃よりウェブサイトで流行ってきました。旧式の作り方にどんな課題があったのかを振り返りましょう。もしかしたら「知らずに使っていた😨」といったケースもあるかもしれません。 はりぼてのdivタグ ハンバーガーメニューの

小さな見づらさを減らすCSS - ::selection、caret-color、::target-text など、テキスト周りの装飾を改善しよう テキストの見た目を調整することは、単にページをきれいに見せるためだけのものではありません。 テキストの選択範囲が見えること、入力位置が把握できること、タップの反応が伝わることは、ユーザーに「いま何が起きているか」を伝える状態表示であり、正しく操作できているという確信を与えます。これはデザインの品質に関わるだけでなく、アクセシビリティーの観点からも大切な要素です。 一方で、テキスト選択や入力まわりの表現はブラウザーのデフォルトの設定に任せたままになりがちです。ページの配色やUIの作りによっては、選択範囲が背景に埋もれたり、キャレット（入力位置を示す縦線）が見つけづらかったりすることがあるかもしれません。 この記事では、次のような課題に対して、CS

ウェブサイトやウェブアプリで特定の文字や文章をハイライトしたいとき、今までは<span>タグなどで囲んでCSSのスタイルを当てるのが一般的でした。 この方法では、文章の構造には関係のないタグが必要になり、HTMLの階層構造が深くなりがちです。また、動的にハイライトする場合はJavaScriptでDOMを書きかえてタグを挿入する必要があり、構造と見た目の分離が難しいという課題がありました。 CSSカスタムハイライトAPIは、DOMを書きかえずにテキストの一部をハイライトできるブラウザAPIです。この記事では使い方の解説と、APIを活用したデモを紹介します。 基本的な使い方 まずは基本の使い方をおさえておきましょう。 サンプルを別ウインドウで開く コードを確認する 1. JavaScriptでRangeオブジェクトを作成する ハイライトしたいDOMを取得します。Rangeオブジェクトを作成し、

fetchのキャンセルだけじゃない！　AbortSignalで実現するクリーンなJS非同期処理 イベント監視やリクエストのクリーンアップはウェブ開発で軽視されがちな処理のひとつです。一般にフロントエンドではページを閉じれば全てブラウザーが後片付けをしてくれるので、こうした処理はもれやすく、気づいていても対処されないこともままあります。しかし、長時間操作しても不整合を起こさずに軽快な操作性を維持したり、サーバーの負荷を軽減したりするためには、クリーンアップを正しく行う知識が不可欠です。 JavaScriptにはAbortSignalとAbortControllerという仕組みがあり、処理の中断や監視の解除といったクリーンアップの処理を統一的に行えます。AbortSignalは元々Fetch APIの処理を中断する方法の議論から生まれたものですが、ウェブ開発のさまざまな場面で使える汎用的な仕組

Speculation Rules APIでウェブサイトのページ遷移を速くする - クリック前にプリレンダリングする実装手法 通常のウェブページでは、リンクをクリックしてから次のページの読み込みが始まります。もしクリックする前にブラウザーが次のページを裏側で準備していたら、クリック直後にページが表示され、待ち時間をほとんど感じません。この「先読み」をブラウザーの機能として実現するのが「Speculation Rulesスペキュレーションルールズ API」です。リンクをたどるたびに感じていた読み込みの間が少なくなり、ページ間の移動がスムーズに感じられるようになります。 たとえばユーザーがリンクにマウスカーソルを乗せたタイミングで、ブラウザーがそのリンク先のページをバックグラウンドで先読みします。リンクをクリックした時点ですでにページの準備が終わっているため、瞬時にページが切り替わります。先読

ESLintイーエスリントは、JavaScriptやTypeScriptのコードの問題点を自動でチェックするツールです。フォーマットの統一だけでなく、バグの兆候や実行時エラーにつながる記述も検知できる点が特徴です。 ViteやNext.jsなどのフレームワークを使うと、ESLintが自動でインストールされることがあります。せっかく導入されているのに「どのルールが何のためにあるのか」「いつ実行すればよいのか」がわからず、うまく活用できていないことはありませんか？　この記事では、どんなルールがあるのか、いつ実行するとよいのかをあわせて整理します。 ESLintを使うメリット ESLintを活用すると、たとえば次のようなメリットがあります。 バグの兆候を早期に発見できる 未使用変数や到達不能コードなどの実行時エラーにつながりやすい記述を、コーディングの段階で検知できます。 コードレビューで本質的

CSSのlinear()関数を使うと動きの自由度が高まります。バネのような動きをするスプリングアニメーションもlinear()で実現できることのひとつ。これを使うと、UIにイキイキとした躍動感を加えられ、ユーザーに軽快な印象や心地よいフィードバックを与えることができます。 linear()で作った動きはCSSトランジションやCSSアニメーションに利用します。ウェブページのどの部品にも使いやすく、ボタンやタブ、トグルスイッチのような小さなUIを心地よく見せたいときに便利です。 この記事では次の内容を紹介します。 スプリングアニメーションを適用したUI演出 linear()の値を調整する方法 スプリングアニメーションのニーズの高まり 汎用的なUI スプリングアニメーションを使ったオリジナルのデモを紹介していきます。まずは小さな部品に役立つ例をみていきましょう。 セグメントボタン セグメントボタ

HTMLの属性値をCSSから参照できるattr()関数は、これまで::beforeや::afterといった疑似要素のcontentプロパティで使える機能として知られていました。 attr()関数の拡張構文は、CSSの値や単位の扱いを定義する仕様書「CSS Values and Units Module Level 5」で定義されています。さらに、Chrome・Edge 133（2025年2月）以降では、この拡張構文をcontentプロパティ以外でも利用できるようになりました。 拡張されたattr()関数には、次のようなメリットがあります。この記事では、デモを交えながら紹介します。 個別のstyle属性やクラスを減らせる HTMLの属性値をCSSの値として直接利用できる ※注意：本記事のデモは、Chrome・Edge 133以上でご覧ください。 1. HTML属性で色・サイズを指定するデモ

Web Components × Litが便利! ReactでもVueでも、どこでも使えるコンポーネントを作ろう Reactで作ったコンポーネントを、Vue.jsのプロジェクトに持っていくには書き直しが必要です。Vue.jsで作ったものをSvelteで使うのも同様で、フレームワークが違えばコンポーネントは動きません。 この問題を解決する選択肢のひとつが、Web Componentsウェブ コンポーネンツです。Web Componentsはブラウザの標準仕様であり、<my-component>タグという形で定義したコンポーネントは、ReactでもVue.jsでもSvelteでも、素のHTMLでも動きます。そのWeb Componentsを実用的に書くためのライブラリがLitです。 本記事では、Litで作ったコンポーネントを各フレームワークから使う際の具体的な方法と注意点を解説します。コード例

CSSのcorner-shapeプロパティは、border-radiusで定義された角の領域に対して、「どのような形状で処理するか」を指定できるプロパティです。 これまで、角の形状を変えるデザインを実現するには、用途に応じて複数の手法を組み合わせる必要がありました。 丸くする：border-radius 斜めに切る：疑似要素やclip-path 内側にえぐる：SVGやCSS Masking（mask-image） たとえば「角を斜めに切り落としたボタン」を作る場合、clip-pathで多角形を指定する方法があります。 /* 四隅を斜めに切り落とす */ button { clip-path: polygon( 10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10p

フロントエンド開発では、UIの挙動を含めてアプリ全体を検証するE2E（End-to-End）テストが重要になっています。しかし、導入や運用の難しさから、実践に踏み出せていない方もいるのではないでしょうか。 本記事では、前後編に分けて、シンプルなウェブアプリを題材に、Playwrightプレイライトを用いたE2Eテストの導入から活用までの流れを解説します。 前編では、Playwrightの導入方法やテストコードの基本的な書き方、テスト実行の流れについて紹介しました。後編となる今回は、失敗したテストの原因を特定するのに役立つトレース機能について解説します。さらに、CI環境でテストを自動実行する方法も紹介します。 本記事の対象読者 Playwrightの基本的な使い方を理解し、次のステップに進みたい方 Playwrightをチーム開発やCI環境に組み込みたいと考えている方 本記事のゴール トレー

昔、Internet Explorerが制作時のサポート対象ブラウザとして求められた時代･･･。HTML/CSS/JavaScriptが他のブラウザと同じように表示されない、動作しない、といったことが頻繁にありました。Internet Explorerは通称IEアイ・イーと呼ばれ、IE11が2013年に登場し、2022年6月にサポートが終了するまで長く使われました。 2013年のIEのシェアは60%ほどあり（参照）、ウェブ業界で「Chromeでこんな新機能が搭載されました！」と発表されても、筆者の周囲でも、IE11非対応を理由に採用を見送った機能がいくつもあります。 この記事では、IE11対応が必須だったころの懐かしい“あるある”を振り返ります。 ※もう少し前の時代を懐かしみたい方は記事『若い世代が知らない2000年代のHTMLコーディングの地獄』をご覧ください。IE6対応がメインだった時

モーダルやツールチップで役立つ! HTMLのcommandとinterestfor属性を使って、JSを減らすスマートなUI開発 HTMLとCSSは進歩していますが、以前はJavaScriptが必須だった機能も、今ではHTMLとCSSだけで実現できることも増えています。HTMLの新属性command属性とcommandfor属性、そしてinterestfor属性を使うとダイアログやポップオーバーをHTMLのみで操作できます。本記事ではHTMLからコマンドを宣言してUIを操作するという新しいアプローチも紹介します。 command / commandfor属性とinterestfor属性を使ってJavaScriptなしで操作する まずはcommand属性およびcommandfor属性、そしてinterestfor属性を使ってJavaScriptなしで実装できるようになった、ダイアログとポップオ