ブログこのサイトについて自己紹介お問い合わせフロントエンドエンジニアが「Web」「Youtube」「3D」「お金」「お買い物情報」など、興味があることについて深堀っていくブログです。Homewebのことdata属性を取得して特定の関数を実行するためのプラグインdata属性を取得して特定の関数を実行するためのプラグイン2022年6月28日2022年7月3日webのことプラグインTypescriptJavascriptTwitterFacebookHatenaPocketJavascriptでたくさん書かずとも、HTMLのdata属性を指定することでそのプラグインのオプションを変えて実行することができます。最近はReacとかVueとかがあるのであまり需要がなさそうな気もしますが、サクッとランディングページなどの静的ページで使いたいプラグインがある場合や個人的に自作のプラグインとあわせて使うと効果的な場面がありそうなので作ってみました。Functionに変換されます。ObjectはJSON.parse('')で変換されます。keyは'(シングルクオート)で囲います。FunctionはOptionのfunctionsもしくはGlobalにその名前の関数が存在していた場合に関数に変換されます。})プラグイン実行で返ってくるdataはPartial<Test>となります。HTMLタグのdataから取得するため、存在が担保できないためPartialにしています。Functions}コード解説data属性は下記条件で変換されます。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プラグイン作るのも色々と楽しいので少しづついろんなものを作っていきたいです。microCMSでページング「react-paginate」を使っての実装方法2021年9月21日おすすめの本Javascriptを勉強する際に読んでおくと良いなと思った本たちです。リーダブルコードは綺麗なコードを書く考え方が身に付きます。いまでもその考え方が根付いています。bloom」2021年9月20日フロントエンドやデザインを教えるメンター(Menta)はじめました。2021年9月6日サイトのことWebのこと、Youtubeのこと、3Dのこと、お金のこと、お買い物情報など、興味があることを深堀って記事にしてます。