はじめに
StimulusというシンプルなJavaScriptフレームワークをC++のWeb開発で使用した時のアレコレです
実際に作ったものは以下
実際にできたもののデモ
チュートリアル
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とかと組み合わせて爆速なチャットアプリを作ってみようかな？