[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita
2024年6月11日リリースのChrome126から、View Transitions APIがパワーアップし、別ページへの遷移でも使うことができるようになったので紹介したいと思います。 View Transitions APIとは View Transitions APIは、画面遷移をなめらかに行うことができる機能です。 この機能を使うと、以下の動画で紹介されているように、ページ遷移にアニメーションをつけることができます。 まずはView Transitions APIの特徴から紹介したいと思います。 特徴1：異なるDOM要素間でアニメーションできる アニメーション前後のDOM構造が異なっていても、アニメーションを行うことが可能です。 例えば、<div>がアニメーションで変化しつつ<img>要素になる、といったアニメーションが可能です。 特徴2：アニメーションがCSSで自由自在 アニメー
![[JSなし] パワーアップしたView Transitions APIでMPAをSPAみたいにする - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/40f0bdd895644cfec9e8497e08ce9c0883edb8d0/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSlMlRTMlODElQUElRTMlODElOTclNUQlMjAlRTMlODMlOTElRTMlODMlQUYlRTMlODMlQkMlRTMlODIlQTIlRTMlODMlODMlRTMlODMlOTclRTMlODElOTclRTMlODElOUZWaWV3JTIwVHJhbnNpdGlvbnMlMjBBUEklRTMlODElQTdNUEElRTMlODIlOTJTUEElRTMlODElQkYlRTMlODElOUYlRTMlODElODQlRTMlODElQUIlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWFhYTFiMTIzMDhkZDMyYmMzOTg1Zjg5MjVhYWZiOWI4%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBhY2Nlc3MzMTUxZnEmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWMzODc4MWE1MWNmYzRiZGJlNTcyYzdjM2RkZDMxNDE0%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D3626912c51af4270ad5c67dd51388c1e)
数値や日付をさまざまな形式の文字列に！ toLocaleString()を使ってスマートに変換しよう - ICS MEDIA
数値や日付をさまざまな形式の文字列に！ toLocaleString()を使ってスマートに変換しよう ウェブアプリケーションなどでは外部のAPIからデータを取得して表示することがあるでしょう。しかしながら、APIの値を必ずしもそのまま表示せず、ユーザーにとって分かりやすい文字列に加工することもあります。たとえば、数値をカンマ区切りにしたり、日付データを特定のフォーマットに変換したりといったことはみなさんも経験があるのではないでしょうか？ そのような数字や日付を変換するのに便利なのが、JavaScriptのtoLocaleString()メソッドです。このメソッドを使うことで、数値や日付をさまざまな形式に変換できます。この記事では、toLocaleString()メソッドの使い方と、その応用例を紹介します。 サンプルを別ウインドウで開く コードを確認する toLocaleString()メソ
令和のHTML / CSS / JavaScriptの書き方50選
Web制作の技術は日々進化しており、会社やプロジェクトによっては昨今の環境に適さない書き方をしているケースも時折見受けられます。 そこで今回は「2024年のWeb制作ではこのようにコードを書いてほしい！」という内容をまとめました。 質より量で、まずは「こんな書き方があるんだ」をこの記事で伝えたかったので、コードの詳細はあまり解説していません。なので、具体的な仕様などを確認したい方は参考記事を読んだりご自身で調べていただけると幸いです。 1. HTML 画像周りはサイトパフォーマンスに直結するので、まずはそこだけでも取り入れていただきたいです。また、コアウェブバイタルやアクセシビリティも併せて理解しておきたい内容です。 Lazy loading <img>にloading="lazy"属性を付けると画像が遅延読み込みになり、サイトの読み込み時間が早くなります。
スクロール連動アニメーションの実装例 – TAKLOG
スクロールに連動して要素が画面内に入った際にアニメーションを行う実装のメモです。 スクロール連動アニメーションのコードと実装例スクロール連動アニメーションの実装例 JavaScriptの実装はGitHub Gistに纏めています。コードにはTypeScriptを使用していますので、TypeScriptを利用していないWeb制作現場で使用する場合はChatGPTなどに依頼してJSファイルに変換してください。
2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
JS：複数の画像読み込みが完了した時点で処理をしたい
Promiseオブジェクトを使うと「画像読み込み完了後に関数の戻り値を返す」などの非同期処理完了後の動作をJavaScriptで記述できる。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="main.js"></script> <title>画像を読み込んだあとに処理をする（複数画像） </title> <style> *{ margin: 0; padding: 0; } body{ margin: 50px; } </style> </h
JavaScriptで日付が新しい順・古い順, あいうえお順のSort処理を実装してみた！
こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！ 今回は、JavaScriptで日付が新しい順・古い順, あいうえお順のSort処理を実装する機会があったので、その知見と学びについて共有します。 前提: 基本のSort処理Logicを振り返る 本題の日付が新しい順(降順)・古い順(昇順), あいうえお順のSort処理の実装についての解説に入る前に、基本のSort処理Logicを振り返りましょう。 昇順と降順に関しては、以前にこちらの記事で説明しています。 JavaScriptで配列の要素を昇順や降順での並び替え・Sort処理するには、次のどちらかのメソッドを使用すればOKです。 Array.prototype.sort() 指定配列をSortします(破壊的変更) Array.prototype.toSorted() 指定配列のコピーをSortして実行結果として、返却し
[React Router] URLクエリストリングを取得する
React Router(v5)を使っていて、http://localhost:3000/books?hoge=1111&fuga=aiueoというようなURLのクエリストリング?hoge=1&fuga=aiueoを取得する方法をいくつか試してみました。なお、TypeScriptで実装しています。 自力で取得する searchには?hoge=1111&fuga=aiueoというような文字列がセットされています。この文字列を操作して無理やり取得してみました。何かものすごく制約がない限り、これは採用しないと思います。 import React from 'react'; import { useLocation } from 'react-router-dom'; interface QueryString { [key: string]: string; } const Books: Rea
![[React Router] URLクエリストリングを取得する](https://cdn-ak-scissors.b.st-hatena.com/image/square/bafed6bc63654302211967641a742ada89013840/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--tc6ZDmcZ--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BReact%252520Router%25255D%252520URL%2525E3%252582%2525AF%2525E3%252582%2525A8%2525E3%252583%2525AA%2525E3%252582%2525B9%2525E3%252583%252588%2525E3%252583%2525AA%2525E3%252583%2525B3%2525E3%252582%2525B0%2525E3%252582%252592%2525E5%25258F%252596%2525E5%2525BE%252597%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aurawa72%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9saDMuZ29vZ2xldXNlcmNvbnRlbnQuY29tL2EtL0FPaDE0R2c1VEpfbHBhTExxQlZQT2luTmo4OXEwTV83WndVNXNGNGlpa3RsTVE9czk2LWM%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
「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
今からでも遅くないconsoleを使いこなそう - Qiita
はじめに この記事では、consoleメソッドについて紹介を行っていきます。consoleメソッドには例えばconsole.log()などが挙げられます。web開発においてconsole.log()を使用する方は多いかもしれません。しかしconsoleにはconsole.log()以外にも様々なメソッドがあるので、状況に合わせて使い分けることで少しでも快適なデバック、開発ライフを目指しましょう。 弊社Nucoでは、他にも様々なお役立ち記事を公開しています。よかったら、Organizationのページも覗いてみてください。 また、Nucoでは一緒に働く仲間も募集しています！興味をお持ちいただける方は、こちらまで。 consoleについて consoleオブジェクトを用いることで変数の値などをコンソール上に出力することができます。主に出力の確認であったり不具合の原因特定などのデバックするために
これは知っておくとかなり便利！ details要素にname属性を与えると、連動して開閉するアコーディオンを実装できます
<details>要素でアコーディオンを簡単に実装できますが、懸念点は複数のウィジェットが個別に開閉してしまうことです。1つ目を開いて、2つ目を開くと、1つ目は開いたままです。1つ目を閉じるには、1つ目をクリックして閉じる必要がありました。 しかし、<details>要素にname属性を与えると、すべてのウィジェットを連動して開閉させることができます。1つのウィジェットだけを開くことができる排他的アコーディオンをHTMLとCSSだけで実装する方法を紹介します。 Exclusive Accordion by Bramus 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 アコーディオンの実装 1つのウィジェットだけを開くことができる排他的アコーディオン 排他的アコーディオンのポリフィル アコー
JavaScriptの小技集 - Qiita
はじめに 初投稿です。 知ってたら便利になる小技が無かったのでまとめました。 「小技が知りたい...だけど検索しても出てこない...！」 そういう時に役立ちます。 比較的古いバージョンのJSでは一部の小技が使えないかもしれません。 随時追加予定です。他に小技をご存じの方はコメント欄にGO。 おことわり この記事は、あくまで"こんなやり方もあるよ"と紹介しているだけなので、何でもかんでもこれらの小技を使うと、かえってコードの可読性を下げる可能性があります。コードサイズと可読性を天秤にかけてどちらが良いかを都度確認しましょう。 記事内の間違った部分の指摘等はこの記事のコメントや編集リクエストでして下さい。 当方コードゴルファーなので、バイト数短縮小技も入れていることをご了承ください（一応該当する節には＊をつけています）。 配列 配列の重複した値を削除1 const meta = ["foo",
画像がJavaScript/jQueryで読み込まれているかどうかを確認する
この投稿では、画像が JavaScript で読み込まれているかどうかを確認する方法について説明します。画像がロードされているかどうかを確認するということは、画像が完全にダウンロードされ、ブラウザによってレンダリングされたかどうかを判断することを意味します。 1.使用する complete 属性 画像が完全にロードされたかどうかを判断するには、 complete の属性 HTMLImageElement インターフェース。この属性は、次の値を返すブール型プロパティです。 true 画像が完全にロードされている場合、および false さもないと。これを一緒に使用する必要があります naturalWidth また naturalHeight プロパティも、 HTMLImageElement インターフェース。これらのプロパティは、画像の固有の幅と高さをそれぞれピクセル単位で返します。これらの
【JavaScript】Cookieをsplit()で配列にするとCookie名で値の取得ができなくなる
こんにちは、Ryohei（@ityryohei）です！ 本記事では、JavaScriptでCookieをsplitで配列に分割すると、Cookie名を指定しても値が取得できないケースがあったので、事例と対処法をご紹介しています。 では、解説してきます。 原因は半角スペース Cookieは仕様上一つのテキストデータとしてブラウザ側に保存されています。具体的には下記のように保存されます。 testUser1={"name":"testUser1"}; testUser2={"name":"testUser1"}; testUser3={"name":"testUser1"} 上記のCookieを取り扱いやすくする方法として、split()を使用して配列化する方法があります。Cookieの配列化は基本的に下記の流れで行います。 ⓵document.cookieでCookieを取得する⓶取得したC
文字列の日付を降順にソートする方法 - Qiita
[ { "id": "1", "title": "【参加メモ】 『SCRUM BOOT CAMP THE BOOK 増補改訂版』読書会 第1回目", "date": "2021/10/25", "url": "https://note.com/maiamea/n/n5cd7a8c0cbf7" }, { "id": "2", "title": "【参加メモ】 『SCRUM BOOT CAMP THE BOOK 増補改訂版』読書会 第2回目", "date": "2021/10/27", "url": "https://note.com/maiamea/n/n792779910e0b" }, { "id": "3", "title": "【参加メモ】 『SCRUM BOOT CAMP THE BOOK 増補改訂版』読書会 第3回目", "date": "2021/10/29", "url":
javascript オブジェクトの配列内の日付をソートする
const arr = [ {id: 2, date: new Date(2020, 1, 2)}, {id: 1, date: new Date(2020, 1, 1)}, {id: 3, date: new Date(2020, 2, 28)}, {id: 5, date: new Date(2025, 1, 1)}, {id: 4, date: new Date(2020, 2, 29)}, ]; console.log( arr.sort( (x, y) => (x.date.getTime()) - (y.date.getTime()), ) ) console.log(arr); const arr = [ {id: 2, date: new Date(2020, 1, 2)}, {id: 1, date: new Date(2020, 1, 1)}, {id: 3, date
WP REST APIでキーワード検索をしたら非同期で検索結果を表示
// ボタンクリックでイベント開始 document.getElementById("search-button").addEventListener("click", async () => { const searchInput = document.getElementById("search-input"); const searchResults = document.getElementById("search-results"); // 文字列の両端の空白を削除 const keyword = searchInput.value.trim(); // キーワードなしの場合無反応 if (keyword.length === 0) { return; } const targetSiteUrl = 'https://jobtips.net/'; // APIで取得したいURLを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
順番の乱れたobjectをkeyでsortする.js
JSXの中にインラインスクリプトを埋め込む - React | nju33
反復処理の制御｜イベントループとプロミスチェーンで学ぶJavaScriptの非同期処理
