小 中 大
■ ■ ■ ■ ■ ■ ■

Home > 2025年 > 2月 > 9日

Vue.jsでコードを書き直してみたけどバニラJSが良い時もある技術的な話といえばそんな感じ.

2025年02月09日

Logging

おはようございます.何もしていないわけではないけど毎日小銭が入ってきた頃を思うといまは前に戻った感じがあります、やっぱり無いよりある方が良いですね.さてHxH-moji.comサービスのバニラJSコードをVue.jsへ置き換えてみたのだけどもレンダリングが遅くなってこれは駄目だなと思ったので元の状態に戻しました.

たまにバックのソースコードがどんな感じに動いているのかを調べている人がいるのだけど、そんなに大したソースコードが動いているわけではないのでお恥ずかしいですね.最近やっと名前付けを変更してソースコードを見たらわかる感じにしたつもりでいます.

因みに下記がレンダリングが遅くてボツにしたコードです.本当ならVue.jsでサクサクと動くコードを作りたいのですがVue.jsはまだまだ初心者さんレベルです..あまりVue.jsもReactもあまり分からないのが現状です、業務で使用することはあるものの一から作るとなるとあんまり上手く作れないです.

トホホ・・・.

この頃思うのは広告掲載だけで何とか回るものを作りたいなとサブスクは個人ではちょっと荷が重い.重いもありますが何せ審査が通りそうにないECサービスはまだ手を付けていないのはそんな理由です.自分のテンション上がるのを待って作りたいと思います.

const { createApp, ref, onMounted, nextTick } = Vue;

const app = createApp({
    setup() {
        const canvas = ref(null);
        const languageInput = ref('');
        const fontsize = ref(16);
        const alertMessage = ref('');
        const mobileText = ref('');
        const isMobile = ref(window.innerWidth <= 768);

        const fetchText = async (flg) => {
            try {
                const body = new FormData();
                body.append('txt', languageInput.value);

                const response = await fetch("/common/jpcvn", {
                    method: "POST",
                    headers: { "X-CSRF-TOKEN": document.querySelector("[name='token']").value },
                    body: body
                });
                const resultdata = await response.json();
                drawCanvas(resultdata.txt);
                mobileHxH(resultdata.txt);

                canvas.value.toBlob((blob) => {
                    const formData = new FormData();
                    formData.append("upload_data", blob, "canvas_image.png");
                    formData.append("name", document.getElementsByName("name")[0].value);
                    formData.append("sns_name", document.getElementById("sns").value);
                    formData.append("text_data", resultdata.txt);
                    if (!flg) formSave(formData);
                }, "image/png");
            } catch (error) {
                console.error(error);
            }
        };

        const drawCanvas = async (text) => {
            await nextTick();
            if (!canvas.value) return;  // canvasがnullの場合は処理を中止
            const ctx = canvas.value.getContext("2d");
            ctx.clearRect(0, 0, canvas.value.clientWidth, canvas.value.clientHeight);

            const background = new Image();
            background.src = "/images/paper_00107.jpg";
            background.onload = () => {
                ctx.drawImage(background, 0, 0, canvas.value.clientWidth, canvas.value.clientHeight);
                ctx.fillStyle = "rgba(0, 0, 0)";
                ctx.font = `${fontsize.value}px HUNTERxHUNTER`;
                const lines = textChange(text, fontsize.value);
                lines.forEach((line, i) => {
                    ctx.fillText(line, 3, 10 + fontsize.value * (1.1618 * i + 1));
                });
            };
        };


        const textChange = (t, f) => {
            let n = parseInt(350 / f);
            let s = t.split("");
            let LLine = 0;
            for (let i = 0; i < s.length; i++) {
                if (LLine && (LLine + 1) % n === 0) {
                    if (s[i] !== "\n") s[i] += "\n";
                    LLine = 0;
                } else {
                    LLine++;
                    if (s[i] === "\n") LLine = 0;
                }
            }
            return s.join("").split("\n");
        };

        const formSave = async (formData) => {
            alertMessage.value = '';
            try {
                const response = await fetch("/common/image_save", {
                    method: "POST",
                    headers: { "X-CSRF-TOKEN": document.querySelector("[name='token']").value },
                    body: formData,
                });
                const result = await response.json();
                if (result.ret === "ok" && result.url) {
                    window.location.href = result.url;
                } else {
                    alertMessage.value = result.txt;
                }
            } catch (error) {
                console.error(error);
            }
        };

        const mobileHxH = (tt) => {
            if (isMobile.value) {
                mobileText.value = tt;
            }
        };

        const adjustTextareaRows = () => {
            isMobile.value = window.innerWidth <= 768;
        };

        onMounted(() => {
            adjustTextareaRows();
            window.addEventListener("resize", adjustTextareaRows);
        });

        return {
            canvas,
            languageInput,
            fetchText,
            alertMessage,
            mobileText,
            isMobile,
            fontsize
        };
    }
});

app.mount('#app');

明日へ続く

著者名  @taoka_toshiaki

※この記事は著者が40代前半に書いたものです．

Profile
高知県在住の@taoka_toshiakiです、記事を読んで頂きありがとうございます.
数十年前から息を吸うように日々記事を書いてます．たまに休んだりする日もありますがほぼ毎日投稿を心掛けています😅．
SNSも使っています、フォロー、いいね、シェア宜しくお願い致します🙇.
SNS::@taoka_toshiaki

OFUSEで応援を送る

投稿日時 2025年02月09 06:00日

タグ

```, コード, サブスク, ソースコード, テンション, トホホ, バニラコード, ボツ, ももあまり, レンダリング, 下記, 中止, 何せ審査, 元, 処理, 名前付け, 小銭, 業務, 現状, 荷,