はてなブックマーク

フロントエンド開発では、UIの動作を含めてアプリ全体を検証するE2E（End-to-End）テストの重要性が高まっています。一方で、E2Eテストは導入や運用のハードルが高いと感じられがちです。本記事では、Playwrightを使って無理なくE2Eテストを始める方法を解説します。 PlaywrightプレイライトはMicrosoftが開発するE2Eテストツールです。テストはTypeScript（およびJavaScript）で記述できるため、ウェブ開発で馴染みのある言語の知識をそのまま活かせます。 主要なブラウザを単一のAPIでテストできる点や、テストを高速に実行できる点が評価されています。私たちICSでも、Playwrightの導入経験があります。既存機能に改訂の影響が出ていないことを確認する、いわゆるリグレッションテストの目的で活用しています。 本記事では、前後編に分けて、シンプルなウェブ

CSS Anchor Positioning（CSSアンカー位置指定）は、要素の位置やサイズを「特定の要素（アンカー）」を基準にコントロールできる仕組みです。その中心となるanchor()関数では位置を、anchor-size()関数ではサイズを相対的に指定できます。主要ブラウザでも対応が進み、2026年中には全モダンブラウザで使用可能になるでしょう。 この記事では、anchor()/anchor-size()関数を使った具体的な表現手法や活用テクニックを、デモとともに紹介します。 1. 相対的な位置指定（anchor()関数） anchor()関数を使うと、要素同士の相対的な位置関係をもとにレイアウトを指定できます。別の要素をアンカーとして登録し、その位置を参照して座標を決めるイメージです。 引数には、アンカー要素のどの位置を参照するかの値（top、left、center、start、パ

ウェブサイトのアニメーションにはユーザーの操作に反応するマイクロインタラクションと呼ばれるものがあります。マイクロインタラクションを加えると状態変化を滑らかな動きとしてユーザーへ伝えられ、ユーザビリティやユーザー体験の向上につながります。 本記事ではMotion（旧：Framer Motion）とReactを使ったマイクロインタラクションの作り方を紹介します。よく使う、ボタン・モーダル・アコーディオン・セグメントボタンなど8種類のUIコンポーネントを題材にしています。各サンプルにはかんたんなコードの解説も行っていますので、Motionの機能を確かめながらそのまま活用できます。 サンプルを別ウインドウで開く Motionとは Motionはアニメーションライブラリです。かつてはFramer Motionという名前でReact専用のライブラリでしたが、2024年11月より「Motion」として

3Dを用いたウェブサイトでは、パーティクルを使った表現をよく目にします。メインのビジュアルにパーティクルのアニメーションを重ねることで、サイトの視覚的な印象を強めることができます。 この記事では、パーティクル表現を用いたウェブサイトの事例を紹介しつつ、数ある表現手法の中でも3D空間を漂うパーティクル表現をThree.jsを使って実装します。なお、本記事のデモにはThree.js r181とTypeScriptを使用しています。 事例紹介 サイト『Heidelberg Materials』では、パーティクルを使って3Dオブジェクトが描画されています。さらに周囲にも無数のパーティクルがゆっくりと漂っています。3Dオブジェクトにマウスを合わせるとパーティクルが一瞬散るエフェクトも見られます。 ▼ サイト『Heidelberg Materials』 サイト『Utsubo』では、走るチーターの周辺に

3DコンテンツをJavaScriptであつかうThree.jsでは、3Dシーンに印象的な効果を加えるポストプロセスの機能があります。 ポストプロセスとは、レンダリングされた画像や映像に後からエフェクトを加える処理です。グリッチやノイズなどの演出を加えたり、色を変化させたり、独特のにじみを加えたりと、さまざまな種類があります。 この記事ではポストプロセスを使い3Dシーンにエフェクトを追加する方法を紹介します。以下のデモはオリジナルの3Dシーンにポストプロセスを加えたものです。見た目の大幅な変化とは裏腹に、実装は意外とシンプルなので試したことのない方はぜひチャレンジしてみてください。 サンプルを別ウインドウで開く コードを確認する ポストプロセスの事例 まずはポストプロセスが効果的に使われているウェブサイトを紹介します。 『WindLand - By Neotix』は、Three.jsを使った

Figma Drawは、イラストやアイコン、グラフィックなどの制作に特化したFigmaの描画機能セットです。ブラシやパターンに加え、強化されたベクター編集機能も備えています。 前回の記事『ブラシやパターン作成が可能に！Figma Drawでひろがるデザイン表現』では、Figma Drawの手描き感を出せるブラシやパターン等を紹介しました。 今回は続編として、Figma Drawのベクター編集モードを中心に紹介します。また、おまけとして新たに増えた3種類のエフェクトについても紹介します。 ベクター編集モード シェイプビルダー ペイント オフセットベクトル バリアブル幅のストローク エフェクト ガラス ノイズ テクスチャー より高機能になったベクター編集モード Figma Drawでは、ロゴやベクターイラスト制作に役立つ新しい機能が増えています。Figma Drawモードの状態でベクターレイヤ

参考記事：『次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解』 HTMLでの実装方法 HTMLページでは、imgタグでHDR画像を配置するだけです。 <img src="photo_HDR.avif" alt="" /> 先ほどの写真の書き出し時に［互換性を優先］を選択しましたが、ファイルがSDR・HDRの両方のデータをもつので、ブラウザが自動的に対応した写真を表示してくれます。 CSSでの制限方法 HDR画像は輝度が強く、ページ内で浮きやすい存在です。一覧画面では控え、詳細表示するときだけHDR表示するのが無難です。CSSで明るさの上限を切り替えられます。 CSSのdynamic-range-limitプロパティはHDRの“伸び”をどこまで許容するかを要素ごとに指示できます。次のように画面によって、HDR可否を制御するのがいいでしょう。 /* 一覧

リスト項目のホバー演出は、その要素がクリック可能であることを伝えるだけでなく、操作の気持ちよさや、コンテンツの世界観を表現することにも役立ちます。今回の記事では、HTMLとCSSだけで実装可能なリスト項目のホバー演出のアイデアを紹介します。 ▼ 今回紹介する実装例一覧 サンプルを別ウインドウで開く 1. 横にアイコンが表示される サンプルを別ウインドウで開く コードを確認する ホバー時に、アイコンに指定しているCSSのscaleプロパティの値を0から1に変化させることで、拡大しながら現れるようにしています。初期状態でscale: 0に指定しておくことで、アイコンを非表示のように隠しておけます。 2. カーソルが変化する サンプルを別ウインドウで開く コードを確認する ホバー時に表示されるカーソルをオリジナル画像に変更しています。CSSを以下のように指定すると、カーソル位置やクリック範囲を細

フロントエンド開発ではfetch()メソッドなどを使ってREST APIにリクエストを送る処理を書くことがあります。リクエストを送られた先で動くのがバックエンドです。この記事ではバックエンドの仕組みをよく知らない若手フロントエンドエンジニア向けに、前後編に分けてハンズオン形式で仕組みを解説します。 前編では簡単なREST APIを作成してフロントエンドから呼び出すところまで実装しました。後編である今回はメモアプリを作りながら、データベースへの保存・更新・取得・削除を実装します。前編と比べると少し難しくなりますが、その分バックエンドの基本的な流れを学べます。 完成したアプリのデモは以下から確認できます。このアプリは全体に公開されています。個人情報や誹謗中傷など、不適切な内容は書き込まないでください。 アプリの起動には時間がかかる場合があります。読み込み中の表示になる場合は1分ほど待ってから再

フロントエンド開発では、よくfetch()メソッドやaxios等でREST APIにリクエストを送る処理を書くことがあります。リクエストを送ったあとにサーバー側で動くのがバックエンドですが、仕組みをよく知らない方もいるのではないでしょうか？ この記事では前後編に分けて、フロントエンド開発をはじめた若手エンジニアに向けてハンズオン形式でバックエンドの仕組みを解説します。 前編である今回は、「こんにちは！」という文字を返す簡単なREST APIを実装して画面から呼び出します。 バックエンドって？ 一般的に、フロントエンドが「見た目・操作」を担当するなら、バックエンドは「データの保存・処理・提供」を担当します。 ECサイトを例にすると、以下のように役割が分かれていることが多いです。 フロントエンド：商品一覧やカート画面など、ユーザーが直接目にする部分を担当 バックエンド：商品情報、在庫、ユーザー

CSSの仕様の策定を行っているCSS Working Group（CSSWG）では、CSSにif()関数を追加する提案が出されています。このif()関数は文字通りCSSにおける分岐を行う関数です。仕様策定中ではありますが、すでにChrome・Edge 137（2025年5月リリース）より利用可能となっています。この新しいif()関数の特性、もたらすメリット、そしてデメリットについて解説します。 ▼Chrome・Edge 137以降のブラウザでご確認ください サンプルを別ウインドウで開く コードを確認する if()関数の基本的な使い方 CSSのif()関数の基本的な使い方について解説します。if()関数はCSSの値を条件分岐するので値部分に記述します。 /* --colorの値がprimaryなら赤、それ以外は青 */ .hoge { background-color: if( style(

ウェブサイトにおけるクリエイティブ表現は、ユーザーの目を惹きつけ、コンテンツの印象を高める重要な要素です。前回の記事：『p5.jsの表現力を活かしたクリエイティブなWebサイト事例集』では、p5.jsを活用してクリエイティブな表現を実現しているウェブサイトを紹介しました。本記事では次のステップとして、実際にp5.jsを活用しウェブサイトのヒーローエリアを実装する作例と実装時の注意点を紹介します。本記事では、三角関数を用いた周期的なアニメーション、p5.jsによるマウスインタラクション、そしてp5.jsを全画面に展開したWebページの実装例を学べます。 作例とコードの解説 今回用意した作例では、波のようなビジュアル表現と、マウス操作によってビジュアルが変化する表現を組み合わせています。カーソル移動やクリックによってビジュアルが変化します。なおTypeScriptでコードを記述し、Viteを使

HTMLのdialog要素を利用すると、モーダルダイアログをシンプルに実装できます。dialog要素は、2022年頃から主要ブラウザで利用可能です。 モーダルとは、表示している間は他の操作をできなくするUIを指します。dialog要素の登場以前は、次のような制御を自前で用意する必要がありました。 画面の最前面にモーダルUIを表示 モーダルUIが表示されている間、ほかの操作を制限 モーダルUI開閉時に、フォーカス位置を調整 こうした複雑さについては記事『HTMLでモーダルUIを作るときに気をつけたいこと』でも解説しています。苦労してきたフロントエンドエンジニアは多いでしょう。 HTML標準のdialog要素を利用すれば、シンプルかつ一貫した方法でモーダルダイアログを扱えるようになります。本記事では、dialog要素の基本的な使い方を紹介します。 本記事で紹介すること： dialog要素の基本

美しいグラデーションづくりで鍵になるのは、色そのものと、色と色をつなぐ「補間」です。たとえ2色のシンプルなグラデーションでも、補間の仕方しだいで中間色がくすみ、意図しない印象になってしまいます。 CSSグラデーションでは色の補間方法を指定できます。 本記事ではCSSで扱えるグラデーションの基本をおさらいしたあと、「色の混ぜ方（補間方法）」の違いを作例で比較します。 CSSのグラデーションの種類 まず、グラデーションの種類を整理しましょう。グラデーションは概念的に4種類に分けられます。このうちCSSで実装できるのは線形、放射、円錐（扇形）グラデーションの3種類です。 線形グラデーション：linear-gradient()関数 放射グラデーション：radial-gradient()関数 円錐（扇形）グラデーション：conic-gradient()関数 フリーグラデーション・メッシュグラデーショ

Google DocsやFigmaのような複数人が同時編集できるアプリケーションを作るためには「ロックフリー」な共同編集の技術が必要です。誰かが文字を入力するたびにサーバーの更新完了を待つわけにはいきませんが、だからといって各自が好き勝手にデータを書き換えてしまうとテキストが混ざったり他のユーザーのアイテムを消してしまったり、さまざまな問題が発生するためです。 この問題を解決するための代表的なアルゴリズムがCRDTで、CRDTをベースに共同編集機能を提供するメジャーなJSライブラリがYjsです。CRDTとYjsについては以前の記事『共同編集を支える技術とライブラリの活用』でも紹介しており、ICSではYjsを利用した開発も行っています。 このYjsの有力なライバルとして、2024年に正式リリースされたのがLoro（ロロ：スペイン語でオウム）です。後発だけに、これまで実装が難しかった便利な機能

ウェブサイトにおけるダイナミックなクリエイティブ表現の裏側には、多くの場合JavaScriptライブラリの力があります。有名なものにThree.jsがありますが、HTML Canvasを利用したライブラリであるp5.jsの表現力も決して劣りません。本記事では、まだあまり知られていないp5.jsを使ったウェブサイトを通して、p5.jsのウェブ制作への活用方法を紹介します。 p5.jsの表現力を活かしたウェブサイト/アプリケーション紹介 p5.jsは、ProcessingをベースにしたJavaScriptライブラリで、ビジュアル表現やインタラクションの実装を得意とします。描画はHTMLの<canvas>タグに出力されるため、既存のコンポーネントやフレームワークとも統合できます。 本記事では、p5.jsの活用事例のうち、Awwwardsで評価されたものを紹介します。 ※Awwwardsとは、優れ

Notoファミリーは「すべての言語で文字化けのない世界」を掲げて開発されたフォント群です。通常のフォントでは、該当する文字（グリフ）が存在しない場合、代替として四角い記号が表示されます。この四角い記号は「□」のような形で表示され、見た目が豆腐のブロックに似ていることから「豆腐（Tofu）」と呼ばれています。そんな中、Notoファミリーは、豆腐のないフォント＝No Tofuを意味して「Noto」と命名されたことは有名なエピソードです。 「Noto Sans JP」は数多くのウェブで利用されています。今年4月のWindowsにもNoto Sans JPが搭載され大きな話題となりました。しかしNotoフォントは2014年の登場から11年以上経過し、複雑な状態になっているのも事実です。 Noto Sans JP、Noto Sans Japanese、Noto Sans CJK JPなどたくさんの名

ウェブの見た目を整えるのにCSSはなくてはならないものですが、そのCSSの記述方法やツールは多種多様です。そしてそれらは進化したり、変化したりしています。本記事ではSassとCSSの関係性の変化を題材に、他のCSSツールにも応用できるような中長期的なCSSとの向き合い方、そしてネイティブの利点について解説します。 CSSを書く手法の変化について スタイリングを記述する手法やツールは変化しています。この記事ではスタイリングを記述する手法のことをCSSを書く手法と呼びます。中には直接CSSを書かないものもありますが、最終的にはCSSとして表現されるので含むことにします。 HTML1.0が登場した1993年にまだCSSはなく、タグや属性を用いてスタイリングしていました。その後、1996年にCSSが勧告され文書構造とスタイリングが分離し、スタイリングはCSSが担当するようになります。なお、この頃の

CSSのclip-pathを使うと要素を好きな形に切り抜けます。コンテンツを斜めに切り抜いたり、画像を丸く切り抜いたり、おそらくみなさんも見たことがある表現なのではないでしょうか？ clip-pathでは形を切り抜くための関数が利用できます。2025年4月ごろにリリースされたChrome 135、Edge 135、Safari 18.4にはshape()関数が追加されました。shape()関数を使うとより自由度の高い切り抜きが可能になります。 今回の記事ではclip-pathとshape()関数でどんな表現ができるかをご紹介します！ clip-pathとは まずはclip-pathについて簡単に確認しましょう。 冒頭でも紹介した通り、clip-pathでは要素を切り抜くためのクリッピング領域を作ります。circle()、rect()、path()、polygon()などの関数を使うことで、

UIのインタラクションの実装で、height: 0 → autoなど、数値とキーワード値とをアニメーションさせたいと思ったことはないでしょうか。 一見可能そうに見えるものの、従来はCSSのみではアニメーションが不可能でした。代替手段として数値同士を変更してトランジションを実装したり、JavaScriptでの実装を行うほかありませんでした。 height: autoの代わりに、offsetHeightを取得してアコーディオンの開閉アニメーションを実装する例 Chrome 129、Edge 129（2024年9月）で登場した、CSSのinterpolate-sizeプロパティとcalc-size()関数により、固有キーワード値のアニメーションが可能になりました。本記事ではinterpolate-sizeとcalc-size()がどのようなものなのか、作例とともに紹介します。 ※本記事の作例は、

みなさんはGPGPUという言葉を知っていますか？　GPGPUとは「General Purpose computing on GPU」、つまり「GPUによる汎用計算」という意味です。GPUは3Dの高速描画のために作られたものですが、GPGPUは数値シミュレーションなどの汎用計算にも活用する技術のことです。 WebGPUは、WebGLの後継として現在策定・実装が進んでいるブラウザ向けの次世代の描画・計算APIです。WebGPUが登場したことにより、JavaScriptの開発者もブラウザ上でGPGPUができるようになりました。 WebGPUについて、詳しくは記事『WebGPUがついに利用可能に - WebGL以上の高速な描画と、計算処理への可能性』で解説しているので参考ください。 本記事では、WebGPUの描画機能には一切触れず、計算機能であるコンピュートシェーダーだけに焦点を当てて紹介します。

ウェブ技術を用いたクリエイティブコーディング環境にはさまざまなものがありますが、プロトタイピングや2D表現には、Canvas 2DをラップしたJavaScriptライブラリ「p5.js」が非常に便利です。この記事ではp5.jsの強み、便利な関数と作例を紹介し、自分で作成した作品の公開方法について解説します。 p5.jsとは p5.jsは、ウェブ上でグラフィカルな表現ができるJavaScriptライブラリで、基礎的なプログラミングの知識さえあれば手軽に創作を始められるのが魅力です。 またp5js.orgが提供しているウェブエディターを使うと、環境構築なしにブラウザ上でクリエイティブコーディングが始められます。たった数十行のみのコードでもメディアアート作品のような出力が得られる、とても興味深いライブラリです。今回はp5.js Web Editorを使って簡単なアニメーションを制作しましょう。

JavaScriptのSetを使っていますか？　多用はしていなくても[...new Set(array)]で配列の重複をなくしたり、set.has()で存在チェックを行うコードはきっと見たことがあるはずです。 2025年6月に正式仕様がリリースされるES2025で、このSetをさらに便利にする「集合演算」の新しいメソッドが追加されました。2024年にBaseline(2024 Newly available)になっており、すでに主要ブラウザーすべてで利用可能です。 この記事では新しく追加されたメソッドをよくある利用例とともに紹介します。今まで配列のforEachやfilterを多用していたような処理がより簡潔に書けるようになるだけでなく、コードの意図が明確になり、読みやすさや保守性も向上します。 Setの新機能 新機能の説明の前に、Setの基本を確認しておきましょう。すでにご存知の方は読み

スクロールの状態変化でスタイル切替が可能に！ CSSコンテナークエリーのscroll-state()入門 @container scroll-state()は、CSSコンテナークエリーの一種です。従来はJavaScriptを使って実装していた、「スクロールされたらヘッダーのスタイルを切り替える」等のインタラクションをCSSだけで実装できるようになります。 本記事では、scroll-state()の使い方とできることを作例で紹介します。 コンテナークエリーは、記事『要素の幅でレスポンシブ対応を行える！コンテナークエリーの使い方』で紹介しています。コンテナー幅でのレイアウト制御にかかわらず、インタラクティブなUI構築にも役立ちます。コンテナークエリーの可能性の広さを感じ取っていただけたら嬉しいです。 ※本記事の作例は、Chrome 133・Edge 133（2025年2月）以上でご覧ください。

CSSの新機能「@scopeアットルール」。このルールを使えば、CSSセレクターに適用されるスタイルのスコープ（範囲）をHTMLの特定の一部分に限定できます。さらに、その開始点（ルート）や終了点（リミット）も柔軟に設定できます。 この記事では、CSSのスコープを制御できる@scopeの基本的な使い方や注意点を解説します。 @scopeを使用すると、以下のようなメリットがあります。 クラス名を複雑にしなくてすむ スタイルの衝突を防ぎやすくなる 保守性が高まる .titleや.buttonなどのよく使うクラス名も、スコープごとにスタイルを分けられます。その結果、複雑なクラス名を増やさずにすみ、意図しないスタイルの上書きも防ぎやすくなります。また、スコープを設定することで影響範囲が明確になり、あとからスタイルを修正したり追加したりしやすくなります。 @scopeの使い方は大きく2通りに分けられま

2025年4月にリリースされたChrome 135、Edge 135からHTMLとCSSのみでカルーセルUIがつくれるようになりました。新たに追加された::scroll-button()、::scroll-marker疑似要素を使用して、ボタンやインジケーターが実装可能です。 ▼HTML・CSSだけで実装したカルーセル カルーセルUIといえば、いちから自前で用意するのではなくSwiper.jsなどのJSライブラリを採用してきたコーダーも多いのではないでしょうか？　ICS MEDIAでもカルーセルUIを作成できるJSライブラリをまとめた記事があります。 『カルーセルUIを実現するJSライブラリまとめ - 導入手間や機能の比較紹介』 本記事では、新しいCSSでどのようなカルーセルが実現可能になるのか紹介します。 ご注意：本記事のデモは、Chrome 135・Edge 135以上で閲覧ください。

WebGPUは、ウェブ上で動作する新世代のグラフィックスAPIです。従来のWebGLに代わるものとして設計されており、より低レベルで効率的にGPUへアクセスできるようになっています。たとえば記事『WebGPUがついに利用可能に』で紹介したように、WebGLより高いパフォーマンスが期待できます。 Three.jsはウェブで3D表現を作るためのJavaScriptライブラリです。2010年代のWebGL黎明期からThree.jsが多くのウェブサイトで使われており、3Dの代表的なライブラリとも言えます。 Three.jsでは、WebGPU対応が進んでいます。WebGPU対応のレンダラー「WebGPURenderer」が存在し、従来のWebGLRendererとほぼ同じ使い勝手で利用できます。Three.js利用者は低レベルコードを書くことなく、WebGPUの利点を活かせるようになっています。We