【Salesforce】LWCのJavaScript、HTMLを学ぶ

この記事は新社会人のSalesforce学習記録とその他 Advent Calendar 2025の12日目の記事です。

apiやtrack、wireやカスタムイベントのディスパッチを学習します。

JS,htmlの書き方（おさらい）

Javascript

Advent1212.js

import { LightningElement } from 'lwc';

export default class Study1211 extends LightningElement {
   Advent() {
    let a = 10;
    const b = 20;
    }
}

LWCなのでLightningElementをimportしています。
importでは、{}内に必要なものの名前、formの右側に場所を記載するようです。
@apiや@trackなどもここら辺に記載するようです。LWCで使われるものになります。
exportの中では処理を行います。またclassの外に書く場合は、たいていの処理はfunctionとかいう関数の中で使われるようです。書き方は以下の通り。

Advent1212.js

import { LightningElement } from 'lwc';

export default class Study1211 extends LightningElement {
    connectedCallback(){
        this.Advent();
    }

}
function Advent() {
    let a = 10;
    const b = 20;
    }

exportの中から呼び出すことで使用可能です。が、connectedCallback(コンポーネントがDOMに挿入された際に実行)などの{}内に記載する形になります。
ちなみにfunctionは、アロー関数と呼ばれる省略したような書き方もあるようです。

Advent1212.js

const Advent = (a, b) => {
    return a + b;
};

アロー関数内のthisの使われ方が変わっているようでややこしいです。通常の書き方とアロー関数でthisの差している先が変わるようです。

HTML

<〇〇>←タグと呼ばれるものを使用します。タグは閉じなければならず、○○>とペアになります。〇〇には必要なものを入れましょう。

Advent1212.html

<template>
    <lightning-input
        label="クリスマス！"
        onchange={handleChange}>
    </lightning-input>
</template>

ボタンを表示させました、{〇〇}の〇〇には変数名を書くようです。jsで受け取ったり、逆にjsから関数をhtml側にもっていって表示することができるようです。
学習したタグ一覧

タグ	説明
template	必要。もっとも外側につける。
div	まとめ役。いい感じにタグをまとめる。まとめてcssをかけられる。
lightning-input	lwcのやつ。入力。
lighning-button	lwcのやつ。ボタン。
lightnin-card	lwcのやつ。枠がつく。

※上のものは一例です。
lightningとついているものはlwc/Aura限定になるようです。通常のhtmlでは反映されないようです。

デコレーター

本題です。lwcでは、コンポーネント間の通信でデコレーターと呼ばれるものを使用します。@を使用することで使用することができます。
コンポーネントには親コンポーネントになるものと子コンポーネントになるもののように親子関係が存在しています。
親コンポーネントになるか子コンポーネントになるかは特に決まっていません。htmlにc-childを使用したらchildを呼び出している→親になるし、そうでなければ子になります。

カスタムイベントのディスパッチ

子→親へ値を送る場合に使用されるようです。

基本的にこんな感じで値が移動しています。

    dataSend() {
      const present=new CustomEvent('christmas', {
        detail: 'クリスマス'
        });this.dispatchEvent(present);
    }

親コンポーネントはhtmlでc-子JS名、onchristmas={handleNotify}で取得、親jsでは以下のように

handleNotify(event) {
    console.log(event.detail);
}

こんな感じです。

api

こんな感じで値が移動しています。
親html側にc-childをつけます(今回は子をchildという名前にしています)
親JS↓

import { LightningElement } from 'lwc';

export default class oya extends LightningElement {
    currentMessage='Christmas';
    
    handleMessageChange(event){
    this.currentMessage=event.target.value;
    }
}

子JS↓

import { LightningElement,api } from 'lwc';

export default class child extends LightningElement {
@api currentMessage;
}

あとはhtmlを組み合わせればいい感じに動きます。

track

画面の変化などを追跡するためのものですが、なくても動きます。現在はほぼ不要です。

wire

apex側とデータのやり取りをするのに使用されます。