ワラベンチャー

コーディング・スタイルだぜ！　の部

インライン・スタイルの書き方を決めておこうぜの章だぜ！


きふわらべ２
きふわらべ
使っているウェブ・フレームワークは
Vue3
系列の Vuetify3 だぜ。
きふわらべのお父ん２
きふわらべのお父ん
じゃあ、まず、インライン・スタイルって何かの説明からするか。
きふわらべのお父ん２
きふわらべのお父ん
👇 例えば、以下のような青い長方形を描きたいときは……、


きふわらべのお父ん２
きふわらべのお父ん
👇 Vue では HTML を以下のように書くかな。
📄 a .vue file:
<template>
    <div
        style="width: 100px; height: 200px; background-color: skyblue; border: solid 4px blue;">
    </div>
</template>


きふわらべのお父ん２
きふわらべのお父ん
👆 上記が本来の、１行で書くスタイルという意味の、インライン・スタイルだぜ。
きふわらべのお父ん２
きふわらべのお父ん
👇 しかし修正の手間を減らそうと考えて、以下のように複数行に書いても、インライン・スタイルだぜ。

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


ひよこ２
ひよこ
👆 １回や２回書くぐらいならインライン・スタイルでもいいんだけど、
もう５回も同じの書くようになると嫌になってくるんで、

👇 そういうときはスタイル・シートに切り出すのよ。

📄 example.vue ：
<template>
    <div class="blue-rectangle-1">
    </div>
    <div class="blue-rectangle-1">
    </div>
    <div class="blue-rectangle-1">
    </div>
    <div class="blue-rectangle-1">
    </div>
    <div class="blue-rectangle-1">
    </div>
</template>

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

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


きふわらべのお父ん２
きふわらべのお父ん
👇 また、 Vue では、スタイルシートの中で TypeScript の変数を使うこともできる。しかし……、


📄 example.vue ：
<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 の変数を使いたくなったらどうすんのよ？
きふわらべのお父ん２
きふわらべのお父ん
👇 こう書く。


📄 example.vue ：
<template>
    <div
        :style="`
            width: ${apple}px;
            height: 100px;
            background-color: skyblue;
            border: solid 4px blue;
        `">
    </div>
</template>


きふわらべのお父ん２
きふわらべのお父ん
インライン・スタイルを v-bind 形式で書くことで、それができる。
ひよこ２
ひよこ
本来、画面構成を見たいテンプレートに、スタイルの複数行が並び始めたら、読みにくいわねぇ。
きふわらべのお父ん２
きふわらべのお父ん
👇 だったらこう書く。


📄 example.vue ：
<template>
    <div
        :style="getRectangle4()">
    </div>
</template>

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

👆　インラインに関数を書くことができる。


ひよこ２
ひよこ
関数呼出しじゃあ、リアクティブされないわねぇ。
きふわらべのお父ん２
きふわらべのお父ん
👇 リアクティブさせるには、こう書く。


📄 example.vue ：
<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: 'skyblue',
            border: 'solid 4px blue',
        };
    });
</script>

👆　グッド。この書き方でリアクティブが利く。
スタイル、これは any型だが、
その any 型のスタイルを返すようなラムダ式を computed() 関数に渡している。
いきなり複雑に見えるが、この形をそっくり真似するだけでもいける。

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

きふわらべのお父ん２
きふわらべのお父ん
👆 いきなり難しい書き方になったが、形を覚えて真似して書けだぜ。
ひよこ２
ひよこ
この getRectangle5 っていう ComputedRef 型の変数って、どうやって引数渡すの？
きふわらべのお父ん２
きふわらべのお父ん
👇　こう書く。

📄 example.vue ：
<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: 'skyblue',
                border: 'solid 4px blue',
            }
        };
    });
</script>

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


きふわらべのお父ん２
きふわらべのお父ん
👆 さらに難しい書き方になったが、形を覚えて真似して書けだぜ。
ひよこ２
ひよこ
こんな複雑な構文、コーディング初心者には読むことも、書くこともできないんじゃない？
きふわらべのお父ん２
きふわらべのお父ん
だから毎回、真似して書けだぜ。

こんなのがすらすら読み書きできるようになれば、関数型プログラマーの素質があるな。
わたしはラムダ計算が好きなんですらすら書けるけど。
きふわらべ２
きふわらべ
そんな素質なくても、これからはＡＩがコーディングしてくれるぜ。
だから、形を真似して当てはめられればいいんだぜ！

ソースコード

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