Atomic Designで実現する効率的なLWC開発

<template>
    <c-templates_sobject-creator
        record-id={recordId}
        icon="standard:contact"
        title="取引先責任者一括作成"
        sobject-name="Contact"
        columns={columns}
        onsave={handleSave}
    ></c-templates_sobject-creator>
</template>

import { LightningElement, api } from 'lwc';
// レコードの保存処理で使用するApexメソッドのインポート;

export default class Pages_contactCreator extends LightningElement {
    @api recordId;

    columns = [
        { field: 'LastName', label: '姓', type: 'text', placeHolder: '山田' },
        { field: 'FirstName', label: '名', type: 'text', placeHolder: '太郎' },
        { field: 'Email', label: 'メール', type: 'email', placeHolder: 'xxx@example.com' },
        { field: 'Title', label: '役職', type: 'text', placeHolder: '部長' },
        { field: 'MobilePhone', label: '携帯電話', type: 'phone', placeHolder: '000-1234-5678' }
    ];

    async handleSave(event) {
        // レコードの保存処理（省略）
    }

<template>
    <div class="slds-p-vertical_large">
        <div class="slds-box">
                <!-- ヘッダー -->
                <p class="slds-text-heading_medium slds-p-bottom_small">
                    <lightning-icon icon-name={icon} class="slds-m-horizontal_small"></lightning-icon>
                    {title}
                </p>

                <!-- 入力欄 -->
                <c-organisms_table
                    record-id={recordId}
                    columns={columns}
                    sobject-api-name={sobjectName}
                ></c-organisms_table>

            <p class="slds-p-top_medium slds-p-left_small">※一度に作成可能な上限は10件までとなります。</p>
        </div>
    </div>
</template>

import { LightningElement, api } from 'lwc';

export default class Templates_sobjectCreator extends LightningElement {
    @api recordId;
    @api icon;
    @api title;
    @api sobjectName;
    @api columns;
}

<template>
    <!-- 入力欄 -->
    <template for:each={records} for:item="rec" for:index="index">
        <div key={rec._key}>
            <c-molecules_table-row
                record={rec}
                columns={columns}
                index={index}
                onupdate={handleRowUpdate}
                ondelete={handleRowDelete}>
            </c-molecules_table-row>
        </div>
    </template>

    <!-- ボタンエリア -->
    <div class="slds-m-top_small slds-grid slds-grid_align-spread">
        <div class="slds-col slds-size_1-of-2">
            <!-- 行追加ボタン -->
            <template lwc:if={hasMoreRows}>
                <c-atoms_button
                    has-icon="true"
                    icon="utility:add"
                    onbutton_click={handleRowAdd}
                ></c-atoms_button>
            </template>
        </div>

        <!-- 保存ボタン -->
        <div class="slds-col slds-size_1-of-2 slds-grid slds-grid_align-end">
            <c-atoms_button
                has-icon="false"
                label="保存"
                variant="brand"
                onbutton_click={handleSave}
            ></c-atoms_button>
        </div>
    </div>
</template>

import { LightningElement, api } from 'lwc';

export default class Organisms_table extends LightningElement {
    @api recordId;
    @api columns;
    @api sobjectApiName;

    records = [];
    keyIndex = 0;

    get hasMoreRows(){
        return this.records.length < 10;
    }

    connectedCallback(){
        this.createBlankRow();
    }

    // 行の追加・削除処理など（中略）

    async handleSave() {
        this.dispatchEvent(new CustomEvent('save', {
            detail: {
                parentId: this.recordId,
                sobjectApiName: this.sobjectApiName,
                records: this.records
            },
            bubbles: true,
            composed: true
        }));
    }
}

<template>
    <div class="slds-box slds-m-vertical_x-small">
        <p>No.{viewIndex}</p>
        <div class="slds-grid slds-wrap slds-grid_vertical-align-center">
            <!-- 入力欄 -->
            <template for:each={columns} for:item="col" for:index="colIndex">
                <div key={col.fieldName} class="slds-col slds-size_1-of-6 slds-p-horizontal_small">
                    <c-atoms_input
                        label={col.label}
                        type={col.type}
                        placeholder={col.placeHolder}
                        field={col.field}
                        oninput_blur={handleBlur}>
                    </c-atoms_input>
                </div>
            </template>

            <!-- 削除ボタン -->
            <div class="slds-p-top_large slds-p-left_xx-large">
                <c-atoms_button
                    has-icon="true"
                    icon="utility:delete"
                    onbutton_click={handleDelete}
                ></c-atoms_button>
            </div>
        </div>
    </div>
</template>

import { LightningElement, api } from 'lwc';

export default class Molecules_tableRow extends LightningElement {
    @api record;
    @api columns;
    @api index;

    get viewIndex(){
        return this.index + 1;
    }

    handleBlur(event) {
        const newRecord = { ...this.record, [event.detail.label]: event.detail.value };

        this.dispatchEvent(new CustomEvent('update', {
            detail: {
                index: this.index,
                value: newRecord
            }
        }));
    }

    handleDelete() {
        this.dispatchEvent(new CustomEvent('delete', {
            detail: { index: this.index }
        }));
    }
}

<template>
    <template lwc:if={hasIcon}>
        <lightning-button-icon
            icon-name={icon}
            alternative-text={label}
            onclick={handleClick}>
        </lightning-button-icon>
    </template>

    <template lwc:else>
        <lightning-button
            variant={variant}
            label={label}
            onclick={handleClick}>
        </lightning-button>
    </template>
</template>

import { LightningElement, api } from 'lwc';

const ICON_TYPE_ADD = 'utility:add';
const VARIANT_TYPE_DEFAULT = 'default';

export default class Atoms_button extends LightningElement {
    _hasIcon = false;
    @api
    get hasIcon() {
        return this._hasIcon;
    }
    set hasIcon(value) {
        this._hasIcon= (value === 'true');
    }

    @api icon = ICON_TYPE_ADD;
    @api variant = VARIANT_TYPE_DEFAULT;
    @api label;

    handleClick() {
        this.dispatchEvent(new CustomEvent('button_click'));
    }
}

<template>
    <lightning-input
        type={type}
        label={label}
        value={value}
        placeholder={placeholder}
        onblur={handleBlur}>
    </lightning-input>
</template>

import { LightningElement, api } from 'lwc';

const INPUT_TYPE_TEXT = 'text';

export default class Atoms_input extends LightningElement {
    @api label;
    @api value;
    @api placeholder;
    @api type = INPUT_TYPE_TEXT;
    @api field;

    handleBlur(event) {
        this.dispatchEvent(new CustomEvent('input_blur', {
            detail: {
                value: event.target.value,
                label: this.field
            }
        }));
    }
}