C++/Stimulus/Vue.jsでのSPAなリアルタイムチャットを作った話

はじめに

以前、QiitaにC++/StimulusでのWeb開発をまとめた以下の記事を書いた

 

qiita.com

 

qiita.com

 

それからもC++/Stimulusでアレコレ試していて、ふと「Vue.jsとStimulusって併用できるんだろうか?」と思ったので試してみたときの備忘録をまとめてみた

 

作ったもの

github.com

 

 やったこと

 

ソースとコミットを見ていただければわかりますが、基本的にはC++側でHTMLやJavaScriptをブラウザで表示できるように処理しています

 

github.com

 

そこへプラスアルファでチャット用APIを作成しているくらいです

 

フロントエンドはVue.jsで実装を行っています

vue-routerを使い、SPAとして利用できるようにしています

 

github.com

github.com

 

あとはVueコンポーネントでdata-controller="chat"を追加して、Stimulusを使用しているくらいですね

 

github.com

 

やってみて

普通にStimulusとVue.jsが併用できたなぁと……

 

HTMLにdata-controllerを追加することでStimulusは使えるので、Reactとかの仮想DOMでも同じようにStimulusが併用できるんじゃないかと思いますね

 

おそらく、Rails/Vue.jsとかにもStimulusが併用できそう

 

今後

ひとまずは、Rails/Vue.js/Stimulusでのリアルタイムチャット&SPAアプリでも作ってみようかなと思います

 

あと、C++/Stimulus/Vue.js/FireBaseでの爆速リアルタイムチャットアプリとか作ってみたいですねー