デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い - ICS MEDIA
デザイナーにもお勧め！ CSSもThree.jsもタイムライン編集を可能にするTheatre.jsが凄い ウェブサイトの演出を作る上でアニメーションの実装は欠かせません。一般的には、CSSアニメーションやJavaScriptのライブラリ（GSAPジーサップなど）を用いてコードベースで動きをつけることが多いと思います。ですが、完全にコードだけでアニメーションを調整するのは大変だと思ったことはないでしょうか？ 一度実装したことがある方は共感いただけるかもしれませんが、少し直そうにもコードに戻って調整し、反映されたブラウザ画面を確認して、もう一度コードを直して…と往復していると結構大変です。また、アニメーションさせるプロパティや要素が複数ある場合には、コードを解読する難易度も上がります。 本記事ではそんな悩みを解決できる、GUIからアニメーションを調整できるライブラリ「Theatre.jsシアタ
JavaScriptのユニットテストを始めよう - ユニットテストのメリットと書き方のコツ - ICS MEDIA
プログラミングにおいて、ユニットテストを書いてコードが正しく動くか検証することはとても重要です。ユニットテストを導入する目的といえば品質の向上ですが、それ以外にもメリットがたくさんあります。 この記事ではユニットテストを書くとどんなメリットがあるのか、またユニットテストを書くときのちょっとしたコツを紹介します。 ユニットテストを書くメリット 「TODOアプリ」を作っていると仮定して、実際にコードとテストコードを確認しながらメリットを考えてみましょう。 この記事で紹介するテストコードは以下から確認できます。実際に手元で動かせるのでぜひ試してみてください。 コードを確認する ※上記のテストコードはテストフレームワークのVitestを使用して書かれていますが、記事の内容自体はフレームワークによらない普遍的な考え方をもとにしています。 メリット①書いたコードが意図したとおりに動くかすぐ確認できる
JavaScriptでCSSのカスタムプロパティを扱ってみる | TipLib（ティップリブ）
// ヘッダーの高さを取得する const headerElement = document.getElementById("header"); const headerHeight = headerElement?.offsetHeight ?? 0; // ヘッダーの高さをカスタムプロパティにセットする document.documentElement.style.setProperty("--headerHeight", `${headerHeight}px`); #headerが存在しない場合にoffsetHeightがエラーになるので、オプショナルチェーン（?.）で繋ぎます。 その時にheaderElementがundefinedになるので、Null合体演算子（??）で0を代入します。 特定の要素にカスタムプロパティを設定する
HTMLで簡単に実装できるアニメーションで動くスピナー、カラー・サイズ・スピードのカスタマイズも簡単 -HTML-SpinnerElem
HTMLで簡単に実装でき、カスタマイズも可能なアニメーションで動くスピナーを紹介します。アニメーションGIFだと、カスタマイズはほぼ不可能ですが、このスピナーだとさまざまなカスタマイズができます。 外部ファイルとしてJavaScriptを記述し、あとはHTMLで簡単に実装でき、カスタマイズもHTMLで簡単にカラー・サイズ・スピードを変更できる優れものです。 HTML-SpinnerElem -GitHub HTML-SpinnerElemの特徴 HTML-SpinnerElemのデモ HTML-SpinnerElemの使い方 HTML-SpinnerElemの特徴 HTML-SpinnerElemは、スピナーにアニメーション画像を使用していることにうんざりして、画像なしでHTMLでカスタマイズ可能なスピナーを実現するために作成されたものです。 HTML-SpinnerElem HTMLでカ
[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/6d0f69b54c49382d904de765c0422236d575c6fb/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSlMlRTMlODElQUElRTMlODElOTclNUQlMjAlRTMlODMlOTElRTMlODMlQUYlRTMlODMlQkMlRTMlODIlQTIlRTMlODMlODMlRTMlODMlOTclRTMlODElOTclRTMlODElOUZWaWV3JTIwVHJhbnNpdGlvbnMlMjBBUEklRTMlODElQTdNUEElRTMlODIlOTJTUEElRTMlODElQkYlRTMlODElOUYlRTMlODElODQlRTMlODElQUIlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTczOTE1OTBiYWFjZTA5OTRlOTQ5Nzg5YWY4YWYzNTU0%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBhY2Nlc3MzMTUxZnEmdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWY1MzU2MmY1NWIyOTk5ZTJlMzQ4MDAwNmY2Nzg4ODA4%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Dfc3d15fe1084dea53fb4229c9a89561f)
数値や日付をさまざまな形式の文字列に！ 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ファイルに変換してください。 initializeObserveAnimation initializeObserveAnimation. GitHub Gist: instantly share code, notes, and snippets. gist.github.com
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 インターフェース。これらのプロパティは、画像の固有の幅と高さをそれぞれピクセル単位で返します。これらの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScript - 문자열에서 숫자만 추출
順番の乱れたobjectをkeyでsortする.js
JSXの中にインラインスクリプトを埋め込む - React | nju33