HTML だけで Shadow DOM を構築するための宣言型 Shadow DOM
HTML だけで Shadow DOM を構築するための宣言型 Shadow DOM 2024.10.19 宣言型 Shadow DOM は `<template>` 要素を使用して Shadow DOM を構築する方法です。宣言型 Shadow DOM を使用することで、従来の JavaScript を使用した Shadow DOM の構築方法と比較して、サーバーサイドレンダリング（SSR）に対応しているため、パフォーマンスの向上や SEO 対策に期待されます。 Shadow DOM は Web Components を構成する 3 つの技術の 1 つです。Shadow DOM はコンポーネントのカプセル化を実現します。Shadow DOM で定義されたスタイルは Shadow DOM の外部に影響を与えず、また外部のスタイルの影響を受けません。 Shadow DOM は再利用可能なコン
すぐ消えてしまう要素をDevToolsで確認するTips集
はじめに こんばんは！ 皆さんは以下のようなすぐ消えてしまう要素をDevToolsで確認したいときはどうしますか？ 常に表示されるようにわざわざコードを修正してから、DevToolsで要素を確認したりしていませんか？DevToolsをうまく使うことで、わざわざコードの修正をせずとも簡単に要素の確認をできるのでそのちょっとしたTipsのご紹介です！ ① CSSイベントでの確認方法 まずはCSSイベントで要素の表示制御を行っているパターンでの確認方法です。以下のようにCSSイベントのhoverで表示制御をしている要素を例にDevToolsで確認する方法を見ていきましょう！ import "./style.css"; export const Index = () => { return ( <div> <button className="myButton">Button</button> <
JavaScriptで実現するFLIPアニメーションの原理と基礎 - ICS MEDIA
アニメーション実装のテクニックのひとつにFLIPと呼ばれるものがあります。FLIPアニメーションは2つの状態をなめらかにつなげるテクニックで、とくに移動や拡大といった動きに有効です。FLIPアニメーションを用いると、次のようなアニメーションを実装できます。 本記事では、ライブラリに依存しないFLIPアニメーションの原理を理解し、実装する方法を紹介します。 FLIPアニメーションとは FLIPとは、First, Last, Invert, Playをまとめた造語です。これらはFLIPアニメーションの手順を説明したものになります。 First：アニメーションを開始するときの状態 Last：アニメーション終了時の状態 Invert：変化量を計算し、Lastの状態に適用してFirstの状態を復元します Play：Invert量を徐々に減らしてLastの状態に近づけていきます FLIPのおもしろい点
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い - ICS MEDIA
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコードだけでアニメーションを調整するのは大変だと思ったことはないでしょうか？ 一度実装したことがある方は共感いただけるかもしれませんが、少し直そうにもコードに戻って調整し、反映されたブラウザ画面を確認して、もう一度コードを直して…と往復していると結構大変です。また、アニメーションさせるプロパティや要素が複数ある場合には、コードを解読する難易度も上がります。 本記事ではそんな悩みを解決できる、GUIからアニメーションを調整できるライブラリ「Theatre.jsシアタ
axiosやfetchに替わるKyのススメ - Qiita
Kyとは Kyは、Sindre Sorhusが開発したJavaScript向けの軽量かつ多機能なHTTPクライアントです。ネーミングの意図はよくわかりませんが、AxiosやネイティブのFetch APIに代わる、より効率的で使いやすい選択肢として設計されています。 Kyの利点 軽量で効率的: Kyのコアは非常に小さく（約2 KB）、パフォーマンスが重要なアプリケーションにとっては特に大きなメリットとなります。 Promiseベース: Fetch APIと同様に、KyはPromiseを基盤としており、async/await構文との組み合わせが容易です。 シンプルなAPI: Kyが提供するAPIは非常にシンプルなので、学習コストが抑えられます。 再試行機能: Kyには、失敗したリクエストの再試行する機能が組み込まれており、エラーハンドリングの実装コストを減らします。 JSON処理: Kyは自動
Poku
🐷 What's Poku?A cross-platform test runner that brings the JavaScript essence back to testing. ⚡️ Quick Tutorials
HTMX入門【はじめからそうやって教えてくれればいいのに！】
はじめに この記事の内容は、以下の動画でも解説しています。アニメーションでわかりやすくなっているので、ぜひ見てみてください。他にもWebに関する解説動画を投稿しているので、気になる人はチャンネル登録よろしくお願いします！ HTMXとは？ HTMX とは、一言で言うと、JavaScriptを書かずに動的なページを簡単に作成できるライブラリのことです。 htmx is a library that allows you to access modern browser features directly from HTML, rather than using javascript. （訳）htmx は、JavaScript を使用するのではなく、HTML から最新のブラウザー機能に直接アクセスできるようにするライブラリです。 </> htmx ~ Documentation ...と言っても
数値や日付をさまざまな形式の文字列に！ toLocaleString()を使ってスマートに変換しよう - ICS MEDIA
数値や日付をさまざまな形式の文字列に！ toLocaleString()を使ってスマートに変換しよう ウェブアプリケーションなどでは外部のAPIからデータを取得して表示することがあるでしょう。しかしながら、APIの値を必ずしもそのまま表示せず、ユーザーにとって分かりやすい文字列に加工することもあります。たとえば、数値をカンマ区切りにしたり、日付データを特定のフォーマットに変換したりといったことはみなさんも経験があるのではないでしょうか？ そのような数字や日付を変換するのに便利なのが、JavaScriptのtoLocaleString()メソッドです。このメソッドを使うことで、数値や日付をさまざまな形式に変換できます。この記事では、toLocaleString()メソッドの使い方と、その応用例を紹介します。 サンプルを別ウインドウで開く コードを確認する toLocaleString()メソ
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
新たなJavaScript日付操作ライブラリ「Tempo」登場 ー ネイティブなDateと直接連携、小さく、速く、使いやすく
先日リリースされた「[Tempo](https://tempo.formkit.com/)」が、全く新しいJavaScriptの日付／時刻ライブラリとして非常に注目を集めている。 先日リリースされた「Tempo」が、全く新しいJavaScriptの日付／時刻ライブラリとして非常に注目を集めている。 JavaScriptの日付ライブラリにはmoment.js、day.js、date-fnsなどがあるが、これらと異なるのは、ネイティブのDateオブジェクトを直接対象としていることである。 従来の日付ライブラリは、独自の日付プリミティブを提供することが一般的であったが、TempoではネイティブのJavaScript Dateオブジェクトと直接連携し、Intl.DateTimeFormatを活用することで、タイムゾーンやロケールのファーストクラスサポートを提供するだけでなく、ライブラリのサイズ削減
「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove
JavaScriptで要素をドラッグして移動する簡単な方法 - Qiita
要素をドラッグして移動することは、JavaScriptにおいて頻出パターンです。 しかし、それを簡単に実現するコードは意外と知られていません。 <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove = function(event){ if(event.buttons){ this.style.left = this.offsetLeft + event.movementX + 'px' this.style.top = this.offsetTop + event.movementY + 'px' this.style.position = 'absolute' this.draggable = false this.setPointe
私のJavaScriptの情報収集法 2024年版
個人的なJavaScriptの情報収集の方法についてまとめてみます。 JSer.infoなどをやっているので、JavaScriptの情報については色々な情報源を見るようにしています。 JSer.infoの範囲の中での情報源については、次の記事でまとめています。 JSer.info 13周年: JavaScriptの情報源を整理する - JSer.info この記事では、少しスコープを広げてJavaScriptの情報収集についてまとめてみます。 かなりスコープが広がってしまうので、万人向けの方法ではなく、個人的な情報収集方法としてまとめています。 この記事では、膨大な情報の中から見つけるというアプローチをとっているので、人によって向き不向きがあると思います。 情報収集の方法 情報の元となる情報源はさまざまなサイトや人になると思います。 しかし、そのサイトや人ごとに見ていくというのはかなり大変
【JavaScript】querySelector よりもパワフルに DOM からノードを取得しよう！【XPath】 - Qiita
const getNodesByXPath = (xpath) => { const result = document.evaluate( xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); return [...Array(result.snapshotLength)].map((_, i) => result.snapshotItem(i)); }; const nodes = getNodesByXPath('//div'); nodes; // [div, div, div, ...] 3. XPath とは 3.1. 概要 XPath とは XML 文書（HTML 含む）のさまざまなノードを指し示すことができるパス文字列のことです。 XPath は XML Path Language の略
htmxとは何なのか？ その背景にある思想について - Qiita
先日、Qiitaに投稿された一つの記事が注目を集めました。 元記事では、htmxというJavaScriptライブラリが英語圏で認知を獲得しているとして、インストールの仕方から使い方について公式のドキュメントの全体にわたって簡単に説明が行われています。 さまざまなプラットフォームでこの記事に対する反応を観察してみると、どちらかというと懐疑的な見方のほうが優勢のように見受けられます。ただ、多くのコメントは誤解に基づいているように見受けられました。「JSが要らない」といった元記事のミスリードによるところも大きそうですが1、なぜhtmxが大きく支持を得つつあるのかを理解するには、背景情報を含めて理解することが必要です。 htmxは、最近の複雑化するフロントエンド技術に対する単なる逆張りではありません。これまで30年ほどのあいだウェブ上のシステムを支え続けた「ハイパーメディア」の持つ強力さに今一度目
JavaScriptの組み込みAPIのIntlが凄いので紹介してみた。
はじめに 明けましておめでとうございます。 (一週間遅れ) この記事はJavaScriptの組み込みAPI Intl の紹介と解説です。 Intl とは？ MDN から引用すると Intl オブジェクトは、 ECMAScript の国際化 API の名前空間で、言語に依存した文字列の比較、数値の書式化と、日付の書式化を提供します。 Intl オブジェクトは、いくつかのコンストラクターに加え、国際化コンストラクターや他の言語に関する関数に共通する機能へのアクセスを提供します 用はi18nの書式版です。 例を出すより見たほうが早いので実際に機能解説します。 (先に言っておきますが、実はこれバックエンド無しで自然言語処理が出来る優れものです。) 用語解説 localesって何？そもそもnewって何？って人がいるかもしれないので locales https://developer.mozilla.
JavaScriptの小技集 - Qiita
はじめに 初投稿です。 知ってたら便利になる小技が無かったのでまとめました。 「小技が知りたい...だけど検索しても出てこない...！」 そういう時に役立ちます。 比較的古いバージョンのJSでは一部の小技が使えないかもしれません。 随時追加予定です。他に小技をご存じの方はコメント欄にGO。 おことわり この記事は、あくまで"こんなやり方もあるよ"と紹介しているだけなので、何でもかんでもこれらの小技を使うと、かえってコードの可読性を下げる可能性があります。コードサイズと可読性を天秤にかけてどちらが良いかを都度確認しましょう。 記事内の間違った部分の指摘等はこの記事のコメントや編集リクエストでして下さい。 当方コードゴルファーなので、バイト数短縮小技も入れていることをご了承ください（一応該当する節には＊をつけています）。 配列 配列の重複した値を削除1 const meta = ["foo",
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript｜importの書き方が多いのでまとめてみた - Qiita
「SafeTest」がすごい ー Netflix内で利用されている、新しいフロントエンドテストライブラリ
