diff --git a/articles/1ad6e51eed13ae.md b/articles/1ad6e51eed13ae.md index e549737..a30242b 100644 --- a/articles/1ad6e51eed13ae.md +++ b/articles/1ad6e51eed13ae.md @@ -53,14 +53,6 @@ https://github.com/kawamataryo/sky-follower-bridge/pull/7 ## Before リファクタリング前のコードは以下のようになっていました。 -`insertAdjacentHTML`で条件に合わせたDOMを構築、`addEventListener`でアクションボタンのclickイベントと、hoverイベントを登録しています。 - -Reactiveな動作は主にボタンに集中しています。 - -![](/images/1ad6e51eed13ae/button.gif) - -このボタンの挙動を実現するためにDOM APIで直接クラスの付け変えやテキストの書き換えを行なっているのですが、UIとイベントの関連が分かりにくく、書いた本人ながらあまり触りたくないコードです😅 - ```ts:src/lib/domHelpers.ts export const insertBskyProfileEl = ({ dom, profile, statusKey, btnLabel, abortController, followAction, unfollowAction }: { @@ -152,6 +144,15 @@ export const insertBskyProfileEl = ({ dom, profile, statusKey, btnLabel, abortCo } ``` +`insertAdjacentHTML`で条件に合わせたDOMを構築、`addEventListener`でアクションボタンのclickイベントと、hoverイベントを登録しています。 + +Reactiveな動作は主にボタンに集中しています。 + +![](/images/1ad6e51eed13ae/button.gif) + +このボタンの挙動を実現するためにDOM APIで直接クラスの付け変えやテキストの書き換えを行なっているのですが、UIとイベントの関連が分かりにくく、書いた本人ながらあまり触りたくないコードです😅 + + ## After VanJSでのリファクタリング後です。