C++でStimulusを使う！

13307 ワード
C++ JavaScript Stimulus cpp-httplib webpack C++ テキストリンク

はじめに

StimulusというシンプルなJavaScriptフレームワークをC++のWeb開発で使用した時のアレコレです

実際に作ったものは以下

Ctimulus

実際にできたもののデモ

チュートリアル

cpp-httplibで基礎構築

まず、cpp-httplibを使い、C++でのWeb開発環境を構築します

main.cpp
#include <iostream>
#include <httplib.h>
#include <fstream>
#include <sstream>
#include <string>

const std::string load_assets(const std::string& path) {

    std::ifstream file(path.c_str(), std::ios::in);

    std::stringstream stream;

    stream << file.rdbuf();

    file.close();

    std::string assets(stream.str());

    return assets;
}

int main() {

    httplib::Server svr;

    std::string body = load_assets("./assets/index.html");

    std::string indexjs = load_assets("./assets/index.js");

    svr.Get("/", [&](const httplib::Request& req, httplib::Response& res) {
        res.set_content(body, "text/html");
    });

    svr.Get("/index.js", [&](const httplib::Request& req, httplib::Response& res) {
        res.set_content(indexjs, "text/javascript");
    });

    svr.listen("localhost", 3000);

    return 0;
}

後は以下のようにビルドします

g++ main.cpp httplib.h

Stimulus

次にmain.cppと同じ階層にassetsディレクトリを作成し、各ファイルを作成します

assets/webpack.config.js
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'index.js',
        path: `${__dirname}`
    }
}
package.json
{
  "scripts": {
    "build": "webpack --display-error-details"
  },
  "dependencies": {
    "stimulus": "^1.1.1",
    "webpack": "^4.29.4",
    "webpack-cli": "^3.2.3"
  }
}
assets/index.html
<html>
    <body>
        <h1> Ctimulus </h1>
        <div data-controller="post">
            <input data-target="post.content" data-action="input->post#content">

            <div data-target="post.preview"></div>
        </div>
        <script src="./index.js" type="text/javascript"></script>
    </body>
</html>
assets/src/index.js
import { Application } from "stimulus"
import { definitionsFromContext } from "stimulus/webpack-helpers"

const application = Application.start()
const context = require.context("./controllers", true, /\.js$/)
application.load(definitionsFromContext(context))
assets/src/controllers/post_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
    static get targets() {
        return [ "content", "preview" ]
    }

    content() {
        this.previewTarget.innerHTML = this.contentTarget.value
    }
}

あとは、assetsディレクトリ以下で、yarn installとyarn buildを実行すればOKです

yarn install
yarn build

ローカルサーバを起動

main.cppがある階層に戻って以下のように実行します

./a

これで、localhost:3000にアクセスすると以下のように動作します

おわりに

ひとまずはこんな感じでC++でStimulusを使えるようになりました！
今後は、Firebaseとかと組み合わせて爆速なチャットアプリを作ってみようかな？