Vue.jsでjQueryをリプレースする - 超メモ帳（Web式）＠復活

このブログのjQueryをVue.jsにリプレースしてる。
あわせてよみたい

このブログのjQueryをVue.jsにリプレースしてる。

日曜の夜であるな。今日はちょっと遊びすぎて押しちゃってるのでさっさとブログを仕上げて、家事諸々をして風呂入って寝てしまおう。うちの会社は公休日はないので普通に出勤なんだよね。

まぁ、今日はそこそこ遊ぶことができてストレス解消にはなった。この上部にある記事要約のパーツをVue.jsで書き直すプログラミング遊びをしていたのである。

ちなみにソースコードについてはGithubで公開してるので、ソースを読める人は読んでみてもいいかもしれない。

ChatGPTに、ブログのフロントエンドで使ってるのがいまだにjQueryでクソダサいけど、なんか置き換える方法はない？　と尋ねたところ、Vue.jsかバニラJSで置き換えればいいんじゃないと言われたので、今んところVue.jsを勉強してこのブログのフロントエンドのブログパーツを置き換える作業をしている。

Vue.jsについてはUdemyで良さげな講座が新春セールで1500円ぐらいで買うことができたので、それでなんとかモチベーションを保ってるというところがあるかもしれない。こちらの講座であるが、普段は2万ぐらいするのでセールを狙って買うのがいいだろう。

www.udemy.com

とりあえず色々と弄ってみたりして自由自在に使いこなせるぐらいまでは覚えられたらいいなーと思う。Vue.jsに関しては大規模な開発から、ブログパーツを作ったりみたいな小規模な開発もできるので、フロントエンド開発の初学者にはおすすめなのかもしれない。

今回、記事要約のブログパーツを作るのもひとまずvue CLIを使ってプロジェクトを作成してみて作ってみたのだけど、こいつってブログ記事が読み込まれた後に動的にDOMを挿入してるやつなんだよね。Vue.jsで作るとしたらvueは仮想DOMを使って高速なレンダリングができるのに、そのメリットが何もないぞとChatGPTには警告を受けたよね。

まー、静的にブログ記事内にタグを入れることができないんだから仕方あるまい。まさかこれから全過去記事のデータに静的なdivタグなりを押し込むというのも無理筋なので、メリットはないけどページが全部読み込まれた後に、entry-contentのpタグを全部取り出して、そして日本語が含まれてるpタグの上部にAppコンポーネントを押し込んでるって感じだよね。

ソース的にはこんな感じの読み込み方をmain.jsでやってる。

import { createApp } from 'vue'
import App from './App.vue'

function initializeVueApp() {
    const pElements = document.querySelectorAll('.entry-content p');
    let inserted = false;

    for (let i = 0; i < pElements.length; i++) {
        if (pElements[i].innerText.match(/[\u30a0-\u30ff\u3040-\u309f\u3005-\u3006\u30e0-\u9fcf]+/) && !inserted) {
            const mountPoint = document.createElement('div');
            mountPoint.id = `vue-app-mount-point`;
            pElements[i].parentNode.insertBefore(mountPoint, pElements[i]);
            createApp(App).mount(`#vue-app-mount-point`);
            inserted = true; // マウントポイントを挿入したらループを抜ける
            break;
        }
    }
}

document.addEventListener('DOMContentLoaded', initializeVueApp);

まぁ、シンプルにDOMが読み込みおわったタイミングでmountするポイントのdivタグを動的に埋め込んで、そちらにcreateAppしてるだけなんですけどね。

このブログでは記事文中に埋め込んでるアドセンスの広告も動的にDOMを押し込んでる感じなので、これもVueでやれるのかなーと思うけど、その処理はvueのメリットがないからバニラJSに置き換えた方がいいのかなと思う。

あとは画面のサイドバーの新着記事とかのメニューであるとか、画面をダークモードとライトモードに切り替える処理なんかもjQueryで動いてるので、こちらをVue.jsかバニラJSで置き換えて、jQueryで動いてる処理は全部リプレースしておきたいよね。今後jQueryがどうなるのかーというのは分からんけど、メジャーアップデートでvar4になるらしい。

blog.jquery.com

じゃー、そんなに焦らんくてもいいのかーって気もするけど、やっぱ今時のITエンジニアとしてはもうちょっとモダンな開発も覚えたいよね。

参考記事
qiita.com