1. LWCって何？

簡単に言うと...

Salesforceの画面を作るための最新の道具
HTMLとJavaScriptを使って部品（コンポーネント）を作れる
レゴブロックのように組み合わせて画面が作れる

なぜLWCを使うの？

早い（高性能）
最新の技術が使える
部品の再利用が簡単
Visualforceより書きやすい

2. はじめの一歩

基本の3つのファイル

hello/
├── hello.html （見た目）
├── hello.js   （動き）
└── hello.css  （デザイン）

最もシンプルな例

hello.html

<template>
    <div>
        こんにちは、{name}さん！
    </div>
</template>

hello.js

import { LightningElement } from 'lwc';

export default class Hello extends LightningElement {
    name = '山田太郎';  // この値が画面に表示されます
}

3. よく使う機能を理解しよう

データを画面に表示する

// 基本的な変数
message = 'こんにちは';

// 計算した結果を表示
get welcomeMessage() {
    return `${this.message}、${this.name}さん！`;
}

ボタンクリックを処理する

<template>
    <lightning-button 
        label="クリックしてね" 
        onclick={handleClick}>
    </lightning-button>
</template>

handleClick() {
    alert('ボタンがクリックされました！');
}

入力フォームを作る

<template>
    <lightning-input 
        label="お名前"
        value={userName}
        onchange={handleInputChange}>
    </lightning-input>
    <p>こんにちは、{userName}さん！</p>
</template>

4. よく使うコンポーネント例

1. シンプルな検索ボックス

export default class SimpleSearch extends LightningElement {
    searchText = '';

    handleSearch(event) {
        this.searchText = event.target.value;
        // 検索処理をここに書きます
    }
}

<template>
    <div class="search-box">
        <lightning-input 
            type="search"
            label="検索"
            onchange={handleSearch}>
        </lightning-input>
    </div>
</template>

2. データテーブル

export default class SimpleTable extends LightningElement {
    data = [
        { id: 1, name: '山田太郎', age: 30 },
        { id: 2, name: '鈴木花子', age: 25 }
    ];

    columns = [
        { label: '名前', fieldName: 'name' },
        { label: '年齢', fieldName: 'age' }
    ];
}

<template>
    <lightning-datatable
        data={data}
        columns={columns}
        key-field="id">
    </lightning-datatable>
</template>

5. 開発の始め方

必要なもの

VS Code（エディタ）
Salesforce CLI（コマンドツール）
Extension Pack for Salesforce（VS Code拡張機能）

基本的な手順

VS Codeを開く
Salesforce組織に接続
新しいコンポーネントを作成
コードを書く
保存してデプロイ

6. よくあるつまずきポイント

1. データが更新されない

// ❌ 悪い例
this.items.push(newItem);

// ✅ 良い例
this.items = [...this.items, newItem];

2. エラーメッセージの表示

try {
    // 何かの処理
} catch (error) {
    // エラーを優しく表示
    this.showToast('エラー', 
        'データの保存に失敗しました。', 
        'error');
}

7. 便利なTips

デバッグ方法

// コンソールで確認
console.log('ここの値を確認:', this.myValue);

// デバッガーを使う
debugger;

データの読み込み表示

<template>
    <div if:true={isLoading}>
        読み込み中...
    </div>
    <div if:false={isLoading}>
        データを表示
    </div>
</template>

8. 学習ロードマップ

初級 (1-2週間)
- HTML/CSS/JavaScriptの基礎
- 簡単なコンポーネント作成
- Lightning Base Componentsの使用
中級 (2-4週間)
- Apexとの連携
- イベント処理
- データテーブル操作
上級 (1-2ヶ月)
- 複雑なコンポーネント作成
- パフォーマンス最適化
- テスト作成

9. 役立つリソース

学習サイト

Trailhead（無料の公式学習サイト）
Developer Guide（公式ドキュメント）
Lightning Component Library（部品カタログ）

サンプルコード

10. 実践的なアドバイス

小さく始める
コピペでOK！（理解しながら）
エラーは友達（学びのチャンス）
コミュニティに質問する
定期的に最新情報をチェック

これで基本は大丈夫！わからないことがあれば、一つずつ解決していきましょう！