ワラベンチャー

使っているのは Vue3 と Vuetify3。

例えば、青い長方形を描くとき：

<template>
    <div
        style="
            width: 100px;
            height: 200px;
            background-color: blue;
        ">
    </div>
</template>
        

👆　上記のように書くことができる。これがインライン・スタイル。
インラインは本当は１行に書くことだが、細かいことは気にしない。

以下のようにも書ける：

<template>
    <div class="blue-rectangle-1">
    </div>
</template>

<style scoped>
    div.blue-rectangle-1 {    /* 青い長方形１ */
        width: 200px;
        height: 100px;
        background-color: blue;
    }
</style>
        

👆　グッド。これはスタイルシートを使った書き方。

スタイルシートの中では、TypeScript の変数を使うこともできるとされている。しかし：

<template>
    <div class="blue-rectangle-2">
    </div>
</template>

<script setup lang="ts">
    const apple: number = 250;
</script>

<style scoped>
    div.blue-rectangle-2 {    /* 青い長方形２ */
        width: v-bind(apple)px;
        height: 100px;
        background-color: blue;
    }
</style>
        

👆　今はバッド。その設定が無視されることがある。手元の環境で動作が確実になるまで、使わない方針。

スタイルの中で TypeScript の変数を使いたくなったときは：

<template>
    <div
        :style="`
            width: ${apple}px;
            height: 100px;
            background-color: blue;
        `">
    </div>
</template>
        

👆　インライン・スタイルで書くことができる。

しかし、HTMLを書くところにコードが増えていくと読みづらくなる。
以下のようにも書ける：

<template>
    <div
        :style="getRectangle4()">
    </div>
</template>

<script setup lang="ts">
    function getRectangle4() : any {
        return {
            width: `${apple}px`,
            height: "100px",
            backgroundColor: "blue",
        }
    }
</script>
        

👆　インラインに関数を書くことができる。
欠点としては、あとで apple の値を変更してもスタイルに反映（リアクティブ）してくれないことだ。

リアクティブさせるには、以下のようにも書ける：

<template>
    <div
        :style="getRectangle5">
    </div>
</template>

<script setup lang="ts">
    import { computed } from "vue";

    const getRectangle5 = computed<
        any
    >(() => {
        return {
            width: `${apple}px`,
            height: "100px",
            backgroundColor: "blue",
        };
    });
</script>
        

👆　グッド。この書き方でリアクティブが利く。
戻り値の型と、（関数ではなく）ラムダ式を使っているので、いきなり複雑に見えるが、この形をそっくり真似するだけでもいける。

リアクティブを利かせながら、引数を渡すこともできる：

<template>
    <div
        :style="getRectangle6(100)">
    </div>
</template>

<script setup lang="ts">
    import { computed } from "vue";

    const getRectangle6 = computed<
        (banana: number) => any
    >(() => {
        return (banana: number)=>{
            return {
                width: `${apple}px`,
                height: `${banana}px`,
                backgroundColor: "blue",
            }
        };
    });
</script>
        

👆　グッド。［［［スタイル］を返すラムダ式］を返すラムダ式］を書いているので、複雑だが、この形をそっくり真似するだけでもいける。

ソースコードはこちら（＾▽＾）！

• 📖 デスクトップアプリ版のソースコード
• 📖 ウェブアプリ版のソースコード
• 📖 このワラベンチャーのソースコード