目次
プロジェクトの作成方法
ざっくりアプリケーションの雛形を作成します。
※ このやり方は 2022/03 としてはやや古いやり方です。最新版は、公式レシピ含め、Windows11 で正常に動作しなかったため、説明を諦めます。
$ npx create-lwc-app account-book
⚡⚡⚡⚡⚡ Lightning Web Components ⚡⚡⚡⚡⚡
? Do you want to use the simple setup? Yes
? Package name for npm account-book
? Select the type of app you want to create Standard web app
? Do you want a basic Express API server? Yes
create package.json
create .eslintrc.json
create .eslintignore
create .prettierignore
create .prettierrc
create .gitignore
create .husky\pre-commit
create src\client\modules\jsconfig.json
create lwc.config.json
create lwc-services.config.js
create jest.config.js
create README.md
create src\client\index.html
create src\client\index.js
create src\client\modules\my\app\app.css
create src\client\modules\my\app\app.js
create src\client\modules\my\app\app.html
create src\client\modules\my\greeting\greeting.css
create src\client\modules\my\greeting\greeting.js
create src\client\modules\my\greeting\greeting.html
create src\client\modules\my\app\__tests__\app.test.js
create src\client\modules\my\greeting\__tests__\greeting.test.js
create src\client\resources\lwc.png
create src\client\resources\favicon.ico
create scripts\server.js
create src\server\api.js
プロジェクトディレクトリが作成されたので
$ cd account-book
$ npm run watch
これで localhost の 3001 ポートでサーバが起動します。
http://localhost:3001/
ディレクトリ構成は、以下のようになっています。
通常のLWCが Salesforce 前提ですが、OSS 版は Salesforce は無いので、サーバはほぼ自作する必要があります。
- プロジェクトルート
- scripts : 開発サーバ設定が記載されています（基本的に触りません）
- src : ソースディレクトリルート
- client : LWC のソース本体です
- modules : LWC モジュール/コンポーネントを配置します
- module1 : モジュール名を指定します。Salesforce 版 LWC で言う所の「
c-」部分です。
- component1 : LWC コンポ－ネントディレクトリです。
- component1.html : テンプレート
- component1.css : スタイル
- component1.js : コントローラソース
- component2
- ...
- module2
- ...
- resources
- index.html : 一番最初に表示される HTML ファイルです。基本的に
<div id="main"></div> 位しか書いていません。
- index.js : 一番最初の画面が表示された祭に実行される JavaScript です。LWC アプリを起動する役割があります。
- server : バックエンドサーバソースです。
express で作成することになります。
Tips
デフォルトでは、何のスタイルも自動適用されません。
そこで、共通のスタイルを適用するため、次のような手段を用います。
src/styles/common.css を作成する。src/client/modules/common/BaseElement を作成する。（※1）- コンポーネント作成時は、この
BaseElement を継承する。(※2)
※1
import { LightningElement } from 'lwc';
export default class CssCommonElement extends LightningElement {
_commonCss() {
let _bootstrap = '../styles/common.css';
const styles = document.createElement('link');
styles.href = _bootstrap;
styles.rel = 'stylesheet';
return styles;
}
connectedCallback() {
this.template.appendChild(this._commonCss());
}
}
※2
import BaseElement from 'common/basBaseElemente';
export default class AddBrand extends BaseElement { }
バックエンドサーバ（Express）で REST API を作成する
デフォルトでは、Express JS サーバは REST API を作成する形ではセットアップされない。
そこで、REST API モードとするために設定を行う
これは src/server/api.js で次のように記述する。
const express = require('express');
const app = express();
app.use(express.json());
NodeJs で SQLite3 をセットアップ
デフォルトでは、データベースすらセットアップされていない。
そこで、データベースを使えるようにセットアップを行う。
npm install sqlite3 -i で sqlite3 をインストールする- 後述のような共通 DB アクセスライブラリ(
DBCommon)を作成する ※1
- データベースアクセスクラス（DAO）を作成していく ※2
こんな感じにしておけば色々使いやすいかも知れない。
※1
const sqlite3 = require("sqlite3")
let database
class DBCommon {
static init() {
database = new sqlite3.Database("data.sqlite3")
}
static get() {
return database
}
}
DBCommon.init();
exports.DBCommon = DBCommon;
※2
const common = require("./DBCommon");
const sqlite3 = require("sqlite3")
function createTable() {
const db = common.DBCommon.get();
return new Promise((resolve, reject) => {
try {
db.serialize(() => {
db.run(
`create table if not exists Brand (
id integer primary key AUTOINCREMENT,
name varchar(512) not null,
account varchar(32) not null,
description text default null
)`
)
});
return resolve();
} catch (error) {
return reject(error);
}
});
}
createTable();
class BrandTable {
static async select(id, db = common.DBCommon.get()) {
return new Promise((resolve, reject) => {
db.get(`select id, name, account, description from Brand where id = ?`, id, (err, row) => {
if (row) {
resolve(row);
} else {
reject(err);
}
});
});
}
static async insert(brand, db = common.DBCommon.get()) {
db.run(
`insert into Brand (name, account, description) values ($name, $account, $description)`,
{ $name: brand.name, $account: brand.account, $description: brand.description }
);
}
}
exports.BrandTable = BrandTable;
通信用アダプタ
こんな通信用クラスを用意しておくと便利です。
function jsonSending(method, url, sendBody) {
return new Promise((resolve, reject) => {
let req = new XMLHttpRequest();
req.open(method, url);
req.onload = function() {
if (req.status === 200) {
resolve(JSON.parse(req.responseText));
} else {
window.console.log(req);
reject(new Error(req.statusText));
}
};
req.onerror = function() {
window.console.log(req);
reject(new Error(req.statusText));
};
req.setRequestHeader('Content-Type', 'application/json');
req.send(JSON.stringify(sendBody));
});
}
export default class Ajax {
static async get(url) {
return new Promise((resolve, reject) => {
let req = new XMLHttpRequest();
req.open('GET', url, true);
req.onload = function() {
if (req.status === 200) {
resolve(JSON.parse(req.responseText));
} else {
reject(new Error(req.statusText));
}
};
req.onerror = function() {
reject(new Error(req.statusText));
};
req.send();
});
}
static async post(url, sendBody) {
return jsonSending('POST', url, sendBody);
}
static async put(url, sendBody) {
return jsonSending('PUT', url, sendBody);
}
}
参考情報
－ExpressJs : https://expressjs.com/ja/ 軽量な Javascript Web フレームワーク
- LWC : https://lwc.dev/
- テンプレートエンジン : https://developer.salesforce.com/docs/platform/lwr/guide/lwr-templates.html
