ICS MEDIA
@icsweb

ウェブの最新技術を紹介するメディア「ICS MEDIA」の公式アカウントです。新着記事や記事の予定、裏話などをつぶやきます。感想や要望など、お待ちしています！

 Minato-ku, Tokyo
ics.media
Joined January 2014
29 Photos and videos
新着記事のお知らせ Three.js Conf Paris 2026参加レポート - ICS MEDIA 日本語： ics.media/entry/260925/?utm_… 英語：ics.media/en/entry/260925/?u… #threejsconf #threejsparis

Three.js Conf Paris 2026参加レポート - ICS MEDIA

2026年9月10日・11日の2日間、パリで「Three.js Conf Paris2026」が開催されました。JavaScriptの3Dライブラリー「Three.js」のはじめてのカンファレンスです。ICSは日本から渡仏し、現地のイベントに参加しました。

ics.media
2
4
2,397
新着記事のお知らせ Three.jsでの3Dガウシアンスプラッティング入門 - ICS MEDIA 日本語：ics.media/entry/260917/ 英語：ics.media/en/entry/260917/

Three.jsでの3Dガウシアンスプラッティング入門 - ICS MEDIA

2026年9月8日に公開されたThree.jsのr186で、3D GaussianSplattingガウシアン・スプラッティング（以下、3DGS）をライブラリの機能で表示できるようになりました。

ics.media
4
10
1,343
フロントエンドカンファレンス関西に、ICSの池田が「HTMLを着たCanvas 2D」というタイトルで登壇することになりました。 ぜひお申し込みくださいませ。 2026.frontend-conf.osaka.jp/ 日時：2026/10/12 (月・祝) 10:00 ～ 20:00 (予定) 場所：コングレスクエア グラングリーン大阪 #fec_kansai

フロントエンドカンファレンス関西2026

Frontend, Unbounded. フロントエンドは、みんなの話やで。2026年10月12日(月・祝)、大阪にて日本最大級のフロントエンドカンファレンス関西2026を開催！

2026.frontend-conf.osaka.jp
3
4
729
新着記事のお知らせ useStateとuseEffectだけじゃもったいない！ ユーザー体験を改善するReactの便利機能 - ICS MEDIA ics.media/entry/260903/

useStateとuseEffectだけじゃもったいない！ ユーザー体験を改善するReactの便利機能 - ICS MEDIA

ウェブ開発で圧倒的なシェアを誇るReact。

ics.media
1
8
83
6,106
この記事で紹介した各機能の搭載バージョン v16.6 (2018年) 　<Suspense> v18.0 (2022年) 　useTransitionとuseDeferredValue v19.0 (2024年) 　useOptimisticとuse v19.2 (2025年) 　<Activity>
364
新着記事のお知らせ 新API「HTML-in-Canvas」を紹介 - CanvasにHTMLを描くAPIは何を解決するのか？ - ICS MEDIA ics.media/entry/260825/?utm_…

新API「HTML-in-Canvas」を紹介 - CanvasにHTMLを描くAPIは何を解決するのか？ - ICS MEDIA

波打つ入力フォームや発光するボタン、ウェブページ全体の派手なグリッチ表現やトランジション……。最近SNSでこうしたウェブページデモを見かける機会が増えてきました。こうしたデモの多くに利用されている新しい技術がHTML-in-Canvasと呼ばれるAPIです。

ics.media
20
89
7,649
Vue Fes Japan 2026に、ICSから2名が登壇します！ 池田 「JSがこんなに減る！ HTML・CSS最新技術2026」 vuefes.jp/2026/speaker/ics-i… northprint 「v-ifとフラグ地獄からの脱出 — Pinia で作る画面遷移ステートマシン」 vuefes.jp/2026/speaker/north… 開催は10月24日。ぜひお申し込みください！ #vuefes

池田 泰延

JSがこんなに減る！ HTML・CSS最新技術2026

vuefes.jp
10
27
2,072
新着記事のお知らせ Storybookとは？ UIコンポーネントを効率よく開発・確認するウェブのツール - ICS MEDIA ics.media/entry/260806/?utm_…

Storybookとは？ UIコンポーネントを効率よく開発・確認するウェブのツール - ICS MEDIA

Reactなどで作るコンポーネントは、渡すデータによって見た目が変わります。たとえば次のようなパターンは、普段の開発用データでは確認できないことがあります。

ics.media
4
15
1,227
新着記事のお知らせ メニューUIの誤操作を減らせ！ CSSで作るヒットエリア「セーフ・トライアングル」 - ICS MEDIA ics.media/entry/260803/

メニューUIの誤操作を減らせ！ CSSで作るヒットエリア「セーフ・トライアングル」 - ICS MEDIA

ウェブサイトのメニューUIには、「セーフ・トライアングル」と呼ばれる手法があります。フロントエンドエンジニアがメニューを実装するときに意識すれば、階層メニューのマウス操作でのユーザビリティーを高められます。

ics.media
8
24
2,875
ICS MEDIAの今月の改善を紹介。 カードのホバーで、記事のデモをプレビュー再生できるようにしました。 ICS MEDIAのこだわりとして、作例はオリジナルで作っています。ぜひお探しのデモを見つけてみてくださいませ。 ics.media
3
12
1,418
新着記事のお知らせ AIがChromeを自分で見る時代へ。Chrome DevTools for agents入門 - ICS MEDIA ics.media/entry/260727/?utm_…

AIがChromeを自分で見る時代へ。Chrome DevTools for agents入門 - ICS MEDIA

Chrome DevTools foragentsを利用すると、AIエージェントがChromeに表示された画面を確認しながらコードを修正できます。スクリーンショットやコンソール、Lighthouseを使った検証も可能です。

ics.media
2
9
47
4,728
DevTools MCPを使っている人も多いと思いますが、Chrome DevTools for agentsは今年5月に正式リリースされたものです。 DevToolsのCLIを使えば、MCPよりも少ないトークン使用量でAIエージェントを利用できます。
3
531
次の記事をメンテナンスしました。 新しいCSSを使えば、生CSSで複雑なアニメーションもシンプルに書けます。 例：sibling-index()、モーションパス UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ - ICS MEDIA 日本語記事：ics.media/entry/15970/?utm_s… 英語記事：ics.media/en/entry/15970/?ut…

UI改善にキラリと役立つ！ SVGアニメーションの作り方まとめ - ICS MEDIA

SVGアニメーションを用いると、さまざまなサイズのディスプレイで印象的なマイクロインタラクションを実現できます。マイクロインタラクションはUI改善にも役立ちます（参考記事『SVGで始めるマイクロインタラクション入門』）。

ics.media
6
15
1,140
次の記事をメンテナンスしました。 WebPはもちろんのこと、今はAVIF画像形式がすべてのブラウザで利用できます。 古い画像形式PNG/JPEG（もしくはWebP）から、新しいAVIFに移行すればいいのか、解説しています。 ics.media/entry/201001/?utm_…

次世代画像形式のWebP、そしてAVIFへ。変わり続ける技術に対応するweb制作の黄金解 - ICS MEDIA

AVIF（AV1 Image FileFormat）という画像形式をご存知でしょうか。長い間、ウェブサイトの静止画は大部分がJPEG/GIF/PNGのいずれかでした。その後WebPが普及しましたが、いま注目したい形式がAVIFです。

ics.media
11
39
2,637
新着記事のお知らせ JavaScriptの日付処理が変わる！ DateからTemporalへ | ICS MEDIA 英語記事： ics.media/en/entry/260715/?u… 日本語記事： ics.media/entry/260715/?utm_…

JavaScript date handling with Temporal - ICS MEDIA

Anyone who has worked with dates in JavaScript has probably written new Date(2026, 3, 15) intending to create a date in March, only to get April instead. Zero-based months are just one quirk of the...

ics.media
8
27
2,589
新着記事のお知らせ 文字の変化を気持ちよく見せる! テキストアニメーションのJavaScriptライブラリまとめ - ICS MEDIA ics.media/entry/260709/

文字の変化を気持ちよく見せる! テキストアニメーションのJavaScriptライブラリまとめ - ICS MEDIA

テキストの見た目や動きは、ページの印象を大きく左右する要素です。HTMLやCSSのみでもある程度調整できますが、文字列の切り替えや、文字の形がなめらかにつながる変化（モーフィング）のような表現は、自作すると実装や調整に手間がかかります。

ics.media
6
20
1,499
新着記事のお知らせ スクロール完了をawaitで待てる！ 進化したJSのスクロール関数 - ICS MEDIA ics.media/entry/260702/?utm_…

スクロール完了をawaitで待てる！ 進化したJSのスクロール関数 - ICS MEDIA

JavaScriptには、scrollTo()メソッドやscrollBy()メソッドなど、目的のところまでスクロールする関数があります。これらの関数と一緒に使われることが多いのがbehaviorプロパティに"smooth"を設定して、目的地まで滑らかにアニメーションさせる方法です。

ics.media
10
30
2,393
過去記事のメンテナンスのお知らせ CreateJSのコードを、生Canvas Context2Dに書き換えました。 JavaScript開発に役立つ重要なランダムの数式まとめ - ICS MEDIA ics.media/entry/11292/?utm_s…

JavaScript開発に役立つ重要なランダムの数式まとめ - ICS MEDIA

プログラムで使うことの多い「乱数」。ゲーム開発やビジュアルアート、ウェブサイトのアニメーションにおいて乱数は非常に重要で、さまざまな用途で利用されています。プログラムで一般に乱数と聞くと、すべての数値が同じ頻度（分布）で出現する「一様乱数」と呼ばれる乱数をイメージする方が多いと思います。

ics.media
2
4
891
新着記事のお知らせ HTMLのセマンティクスを意識して、壊れにくいテストコードを書こう - ICS MEDIA 日本語版： ics.media/entry/260624/ 英語版：ics.media/en/entry/260624/ #Playwright #Vitest #a11y

HTMLのセマンティクスを意識して、壊れにくいテストコードを書こう - ICS MEDIA

AIがアプリケーションコードもテストコードも書く時代、UIを操作するE2Eテストは「通るか」だけでなく、「何を操作しているかが読み取れるか」という視点も重要です。

ics.media
3
10
1,364
新着記事のお知らせ gapに線をひきたい! gridとflexに罫線を入れられる新しいCSS - ICS MEDIA ics.media/entry/260618/

gapに線をひきたい! gridとflexに罫線を入れられる新しいCSS - ICS MEDIA

Chrome・Edge 149（2026年6月）で利用できるようになったCSS Gap Decorationsを紹介します。

ics.media
6
24
1,383
Load more