クライアントで動くJavaScriptをコンポーネント内に書いた場合のデメリット
DiscussionClosed
最近Astroを導入し始めたAstro初心者です。
Webフレームワークはほとんど触ってこなかったので断片的な知識しかなく、経験者の皆さんが考える最適解をお聞きしたいです。
AstroでWebサイトを構築する場合、クライアントで動くJavaScriptの記載場所は何通りかあると思います。
1. importする
例えば以下のようにLayout.astroで別のJavaScriptファイルimportして使い、別のファイルで管理する場合もあります。
Layout.astro
---
// Layout.astro
---
<!doctype html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<title>テスト</title>
<meta name="description" content="">
</head>
<body>
<p>テスト</p>
<script>
import "../assets/js/script";
</script>
</body>
</html>
2. コンポーネントファイル内に書く
またコンポーネントファイル内に書いてしまう場合もあると思います。
Message.astro
---
// Message.astro
---
<div class="message">
<div class="message-header">
<p>テスト</p>
<button class="delete" aria-label="delete"></button>
</div>
<div class="message-body">
<p>テキストテキストテキスト</p>
</div>
</article>
<style lang="scss">
.message-header {
p {
color: red;
}
}
</style>
<script>
const deleteBtn = document.querySelector('.delete');
deleteBtn.addEventListener('click', (e) => {
const body = e.currentTarget.closest('.message');
body.remove();
});
</script>
場合によったり、1と2の併用というパターンもあると思いますが、クライアントで動くJavaScriptの記載場所については2のコンポーネント内に書いた場合のデメリットは何かありますでしょうか？
今後Astroを導入していくにあたって、JavaScriptの記載場所はルール化していきたいと思っています。
説明がつたなく、伝わらない部分があるかもしれませんが、よろしくお願いいたします。
1
コンポーネントでも export は利くので好きな方でよいのでは？みたいなところあります。
ただ、.ts だけで済ませた方がいい場合もあるので .astro で コンポーネント（やその関連関数/IF）以外の export は微妙かな感はあります。
Like!
@juner さん
ご回答ありがとうございます。
確かに好みによるのかもしれませんね。
コンポーネント以外のページファイルなどに書くのは私も微妙だと思っていたので、書くとしてもコンポーネントに留めておいて、共通処理はtsファイルの方に書くなどしてみます。
Like!