Hatena Blog Tags
はてなブログ トップ
カスタムデータ属性
このタグでブログを書く

カスタムデータ属性

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
Multi Vitamin & Mineral•先月

「カスタムデータ属性（data-*）」と「script タグへの JSON 埋め込み」のススメ【JavaScript で扱うデータを HTML に埋める方法2選】

ブラウザに表示されているデータは HTML 上にあり、 JavaScript から取得できるます。これはいいんです。が、ブラウザに表示されないが、JavaScript で扱いたいデータがあった場合は HTML のどこに書くのがよいのでしょう？ というのが今回のテーマです。 方法はいくつかあるのですが、私が良さそうと思った2つの方法を書いています。 結論 今回取り上げる問題 表示データ＝取得したいデータ（問題のないパターン） 表示データ≠取得したいデータ（問題のあるパターン） その1 : カスタムデータ属性（data-*）の利用（対応要素がある場合） カスタムデータ属性（data-*）と利用例 …

#JavaScript#カスタムデータ属性#JSON#HTML

関連ブログ

30代未経験からフロントエンドエンジニアへ•8 日前

【JavaScript】タブ切り替えメニュー：ページ内に複数設置可能

だいぶ久しぶりの更新となってしまいましたが、 今回はJavaScriptでTabメニューの実装をしていきます。 仕様 タブは3つ以上ある クリックすると切り替わる 表示されているタブは色が付く 同じタブモジュールをページ内に複数設置することが可能 ポイントとしては、「同じタブモジュールをページ内に複数設置することが可能」という部分ですね。 実装にあたりいろいろググったのですが、JavaScriptで複数設置を想定した記事が少なく、 その条件をクリアするのが難しかったです。また、tabと本文についてはJavaScriptのカスタムデータ属性を使い紐付けています。 実際に書いたコード See th…

sato136の日記•9 日前

学習記録

メモ投稿機能（フロント側） メモ投稿機能 ... 非同期通信によりリロードせずにメモを投稿できる機能 【目的】 ・非同期通信についてAjaxを理解する ・必要なコード・用語を覚える 【学習概要（実装について大まかに何をしたか）】 ①送信ボタンをクリックした際のイベントハンドラーを定義 ②クリックした際のリクエスを送信 【実装の手順】 前回の続きから ２．リクエストを送信する ２−１．XMLHttpRequestのオブジェクトを生成 ＜用語・コード＞ XMLHttpRequest ... Ajaxを可能にするためのオブジェクトでサーバーにHTTPリクエス トを非同期で行うことができる。さまざまな…

虎の穴開発室ブログ•先月

Hotwire に トースト通知 機能を作る

皆さん、こんにちは。おっくんです。 今回は、先日公開したHotwire の記事で作ったアプリケーションに トースト通知 を追加してみます。 toranoana-lab.hatenablog.com 最終的には、こんなものを作成します。 実行環境 macOS 10.15.17 Redis 5.0.7 Ruby 3.0.0 作るもの Hotwire を使ってみよう ~ 簡単なチャット 検索画面 更新通知 を 作る ~ で定義したアプリケーションの要件は以下の通りでした。 簡単な 1 部屋 1 画面だけのチャットアプリ 書き込みを検索できる機能 書き込みの検索結果を表示している間に新しい投稿があった…

みかづきブログ・カスタム•先月

BlenderでつくったglbファイルをA-Frameに読み込んでマテリアルの色を編集する 📦

こちらの記事のA-Frameバージョンです。blog.kimizuka.org ❶ Blenderでモデルをつくる ❷ glbファイルを書き出す ❸ glbを読み込むHTMLをつくる ❹ マテリアルを取得して色を変えてみる ❺ カスタムデータ属性で色を変更可能にする ❶ Blenderでモデルをつくる とりあえずキューブをつくりました。というか、Blenderを起動するとそこにあります。 カメラとライトを消してキューブだけにしてあります。 ❷ glbファイルを書き出す File > Export > glTF 2.0 (.glb/gltf) で書き出せます。 ファイル名はcube.glbと名付…

IT関連雑記帳•3 か月前

Puppeteerでカスタムデータ属性の値を取得する方法

Puppeteerでdata-*のようなカスタムデータ属性の値を取得するには、以下のようにevaluateを使用します。このやり方、知っている人には当たり前の話すぎるのか分かりませんが、Google先生に聞いてもほとんど見つかりませんでした。構文をすぐに忘れてしまいそうなので、自分用にメモしておきます。（メモしたことすら忘れるかもしれませんが……） HTML（抜粋） <tr> <td>hogehoge</td> <td> <input id="xxxx" type="text" value="99999999" maxlength="10"> </td> <td> <a href="https…

tom-256.log•4 か月前

変更に強いE2Eテストにするためにカスタムデータ属性を使う

概要 壊れやすいE2Eテストとは E2Eテストのテストシナリオを書くときに、下記のようなセレクタの使い方をすると壊れやすくなる。 CSSの変更やJSのイベントに紐づくセレクタ(id,classなど) 例：同じclass属性を持つ要素が増えたときにテストが通らなくなる。 相対的なセレクタ 例：ある要素の子の要素の子の要素のフォームにxxxを入力するなど 操作するセレクタに一つでも変更があるとテストが通らなくなる。 textContentに対するセレクタ 表示するテキストが変更されたときテストが通らなくなる。 例： <button>Sign in</button>が <button>Login</…

男子プログラマーになりたいやつ•5 か月前

JavaScript カスタムデータ属性、要素の追加・複製挿入・削除

JavaScript DOM編 vol.3 JavaScript備忘録 Vol.14 目次 カスタムデータ属性 要素の追加 要素の複製・挿入 要素の削除 今回もJavaScriptの記事になっています。 カスタムデータ属性 まずは最初の段階のindex.htmlとmain.jsの中身です index.html <!DOCTYPE html> <html lang = 'ja'> <head> <meta charset="utf-8"> <title>JavaScript DOMPractice</title> </head> <body> <h1 id='target'>プログラマー</h1…

明日も晴れの日にするために•5 か月前

テックキャンプ　就活23日目

学習時間：8：30 学習内容:確かな力が身につくJavaScript超入門/Java 解決したことや学んだ単語：forEachメソッド、カスタムデータ属性 ,for文、while文、Scannerクラス、do-while文、break文,continue文、無限ループ、多重ループ、バブルソート 振り返り： javascriptの教本ではカスタムデータ属性を使い、クリックすることでサムネイル画像の表示を切り替える実装を行った。表示する画像を切り替えるには<img>要素のsrc属性を書き換えればよく、具体的には「取得した要素.属性 ＝ 値；」のような記述となる。ただしブール属性の値を書き換えるには…

Kintarou'sBlog•6 か月前

【Rails】ユーザーが選択した要素の情報をパラメーターに送る

こんにちは😊Kintarouです。 現在エンジニア転職を目指してTECH CAMPにてプログラミング学習中です👨‍🎓 夢はフリーランスエンジニアになって働く人が働きやすいシステムを作ること！ と、愛する妻と海外移住すること🗽 プログラミングや読んでいる本のことなど、ブログに書いていきます！ twitter : https://twitter.com/ryosuke_angry 今回はユーザーが選択した要素の情報をパラメーターに送る方法についてまとめます！ 今回参考にさせて頂いたサイト様🙇‍♂️ Action View フォームヘルパー - Railsガイド Rails セキュリティガイド - …

30代未経験からフロントエンドエンジニアへ•7 か月前

【JavaScript】複数のモーダルを設置する方法

今回は、自身のポートフォリオで実装している「複数のモーダルを設置する方法」を解説していきます。モーダル一つだけというのはよく見かけますが、複数の場合の記事が少なかったので初心者の方でも実装できるように分かりやすく解説していきたいと思います。また、今回はjQueryは使用しません。 なぜなら、私がJavaScriptの理解を深めたいからです笑 jQueryはとても便利なのですが、やはりベースとなるJavaScriptの理解は重要なので今回はvanilla JSで実装していきます。 処理の流れ・考え方 モーダル表示・非表示の基本的な考えは「classの切り替え」です。簡単に流れをまとめると....…

カエデ＠30代無職&未経験からフロントエンドエンジニア•8 か月前

ファクトリ関数 [JavaScript]

もりけん塾（@terrace_tech）にて、JavaScriptを勉強しています。 今回は、ファクトリ関数について調べていきたいと思います。 ファクトリ関数を学ぶ必要がある理由 私は以前、JavaScriptを新しく勉強している人の意見で「クラスによる新しい書き方があるから、ファクトリ関数などの古い書き方は覚えなくてもいいと思う」というものを目にしたことがあります。 その時感じたのは、果たして新しい書き方だけを学ぶだけで本当に充分なのだろうか、という気持ちでした。 きっと実際の現場に入っていくと、クラス以外にもこういった何年も前からある書き方のコードにも触れる機会があるのではないかということ…

misokatsu_sandのブログ•9 か月前

Webエンジニア目指して#26

どうもEmonda ALR購入マンです。オークションでディスクブレーキ仕様がめっちゃ安く落とせそうで気軽に入札したら通ってしまった… 防犯面で気疲れしそうで早々に売るか迷いました さて本題、時間かけすぎてしまいました。書ききってから投稿しようという意気込みが邪魔してましたね。結局一つの投稿で山盛りになってるという なんか見返したらいつの間にか説明みたいな書き方になってて、手段が目的になっちゃってるので次回は以降さらっと書くようにしたいです はい、というわけで前回に引き続きProgateのJQuery上級編やっていきます 要素の値を取得 textメソッド var sample_text = $(…

Beeeat’s log•9 か月前

Rails の View(ERB) でカスタムデータ属性を設定したい時の方法

Rails の ERB で View のコードを書いている時にカスタムデータ属性( custom data attributes )を使いたい時がある． developer.mozilla.org HTML なら素直にdata-*という形式で書けば良いが， Rails ではどのように書くかを調べてみても中々見つけられなかった． そんな中，幸運にもチームメンバーが知っており，設定方法を教えてもらったため今回はそれについてまとめておく． 設定方法 例えばdata-delayというカスタムデータ属性を作りたい場合，ERB では以下のように data: { delay: 属性名 } という形式で書けば…