かめ。ブログ

data属性を取得して特定の関数を実行するためのプラグイン

2022年6月28日
2022年7月3日

目次

Javascriptでたくさん書かずとも、HTMLのdata属性を指定することでそのプラグインのオプションを変えて実行することができます。

最近はReacとかVueとかがあるのであまり需要がなさそうな気もしますが、サクッとランディングページなどの静的ページで使いたいプラグインがある場合や
個人的に自作のプラグインとあわせて使うと効果的な場面がありそうなので作ってみました。


Install

npm

npm install process-data-attr-as-func

yarn

yarn add process-data-attr-as-func

Example

Document

HTML

<ul class="menu">
  <li class="menu-item" data-color="red">menu1</li>
  <li class="menu-item" data-color="yellow">menu2</li>
  <li class="menu-item" data-color="pink">menu3</li>
  <li class="menu-item" data-color="blue">menu4</li>
</ul>

dataオブジェクトの指定方法

<p 
  data-num="1"
  data-str="test"
  data-boo="true"
  data-obj="{'test': 1}"
  data-ary="[1, 2, 3]"
  data-func="testFunction"
>
</p>

それぞれ変換Number, String, Boolean, Array, Object, Functionに変換されます。
Array, ObjectはJSON.parse('')で変換されます。keyは'(シングルクオート)で囲います。
FunctionはOptionのfunctionsもしくはGlobalにその名前の関数が存在していた場合に関数に変換されます。

Typescript

import { ProcessDataAttrAsFunc } from 'process-data-attr-as-func'

interface Test {
  color: string
}

const body = new ProcessDataAttrAsFunc<Test>(
  'body',
  (element, props: Partial<Test>) => {
    element.style.backgroundColor = props.color!
  }
)

const menu = new ProcessDataAttrAsFunc<Test>(
  '.menu-item',
  (element, props: Partial<Test>) => {
    element.style.backgroundColor = props.color!
  }
)

プラグイン実行で返ってくるdataはPartial<Test>となります。 ※ HTMLタグのdataから取得するため、存在が担保できないためPartialにしています。

Vanilla

html

<script src="../js/process-data-attr-as-func.min.js"></script>

javascript

const body = new ProcessDataAttrAsFunc(
  'body',
  (element, props) => {
    element.style.backgroundColor = props.color
  }
)

const menu = new ProcessDataAttrAsFunc(
  '.menu-item',
  (element, props) => {
    element.style.backgroundColor = props.color
  }
)

Options

Option Name

Description

Type

default

element

タグ

HTMLElement string

-

plugin

関数

(element: HTMLElement, value: Partial) => void

-

functions

dataで取れた文字列がここのオブジェクトに存在していた場合、その関数をオプションとして渡します

{ [key: string] : () => void }

{}

export type Functions = { [key: string] : () => void }
export type PluginType<T> = (element: HTMLElement, value: Partial<T>) => void
export interface ProcessDataAttrAsFuncOptions<T> {
  element: HTMLElement
  plugin: PluginType<T>
  functions?: Functions
}


コード解説

data属性は下記条件で変換されます。

#convertFromString(value: string): Value {
  // 数値の場合
  if(/^[+,-]?([1-9]\d*|0)(\.\d+)?$/.test(value)) {
    return parseFloat(value)
  }
  // 配列 or オブジェクトの場合
  if(/^(\[|\{)/g.test(value)) {
    try {
      return JSON.parse(value.replace(/\'/g,'\"'));
    } catch(e) {
    }
  }
  // Booleanの場合
  if(value === 'true' || value === 'false') {
    return value === 'true'
  }
  // 関数の場合
  const functions = this.#functions || globalThis
  if (typeof functions[value] === 'function') {
    return functions[value]
  }

  return value
}

https://github.com/kamem/process-data-attr-as-func/blob/master/src/process-data-attr-as-func/ProcessDataAttrAsFunc.ts

まとめ

過去に作っていたプラグインをしっかりと作り直してみました。
最初に書いた通り、自作のプラグインと親和性が高そうなのでそこについても今後書いていこうと思っています！

「スクロールでcssを変えるプラグイン」と合わせて使うと・・。
htmlにdata属性を与えることで様々な効果を生み出すことができるプラグインにすることができると思ってるので
そのプラグインと合わせて手軽に面白いアニメーションができるような仕組みにしていきたいな考えています！

https://github.com/kamem/scroll-parallax-effect

プラグイン作るのも色々と楽しいので少しづついろんなものを作っていきたいです。

関連する記事

目次