[[📗02 templateはHTMLの親戚]] < [[📒Vue.jsクエスト]] > [[📗04 アットマークは耳マーク]]
## Abstract
令和で[[Vue]]を使うなら、[[script setup]]を習得しておきましょう。
## Lesson
`<script setup></script>`の中に[[JavaScript]]のコードを書くことができます。これを[[script setup]]と言います。
```html
<script setup>
// JavaScriptのコード
</script>
```
[[📒Vue.jsクエスト]]では[[TypeScript]]を扱うため、さらに`lang="ts"`を指定します。
```html
<script setup lang="ts">
// TypeScriptのコード
</script>
```
[[script setup]]を使うと、[[📗02 templateはHTMLの親戚]] のコードを以下のようにも表現できます。
```html
<script setup lang="ts">
const result = 1 + 2;
</script>
<template>
1 + 2 = {{ result }}
</template>
```
## Missions
### Mission 1
#😁EASY
現在時刻を表示するコードを書いてください。ただし、[[script setup]]を必ず使ってください。
> [!info]
> 初期表示の時刻で問題ありません。(リアルタイムにカウントされる必要はありません)
%%
回答例
```
<script setup lang="ts">
const now = new Date();
</script>
<template>
現在時刻: {{ now }}
</template>
```
%%
## References
[SFC script setup \| Vue\.js](https://v3.ja.vuejs.org/api/sfc-script-setup.html)