【Salesforce】Lightning Web Components (LWC) 入門


## 1. LWCって何？ 

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

### なぜLWCを使うの？
-  早い（高性能）
-  最新の技術が使える
-  部品の再利用が簡単
-  Visualforceより書きやすい

## 2. はじめの一歩 

### 基本の3つのファイル
```plaintext
hello/
├── hello.html （見た目）
├── hello.js   （動き）
└── hello.css  （デザイン）
```

### 最もシンプルな例
```html:hello.html
<template>
    <div>
        こんにちは、{name}さん！
    </div>
</template>
```

```javascript:hello.js
import { LightningElement } from 'lwc';

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

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

### データを画面に表示する
```javascript
// 基本的な変数
message = 'こんにちは';

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

### ボタンクリックを処理する
```html
<template>
    <lightning-button 
        label="クリックしてね" 
        onclick={handleClick}>
    </lightning-button>
</template>
```

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

### 入力フォームを作る
```html
<template>
    <lightning-input 
        label="お名前"
        value={userName}
        onchange={handleInputChange}>
    </lightning-input>
    <p>こんにちは、{userName}さん！</p>
</template>
```

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

### 1. シンプルな検索ボックス
```javascript
export default class SimpleSearch extends LightningElement {
    searchText = '';

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

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

### 2. データテーブル
```javascript
export default class SimpleTable extends LightningElement {
    data = [
        { id: 1, name: '山田太郎', age: 30 },
        { id: 2, name: '鈴木花子', age: 25 }
    ];

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

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

## 5. 開発の始め方 

### 必要なもの
1. VS Code（エディタ）
2. Salesforce CLI（コマンドツール）
3. Extension Pack for Salesforce（VS Code拡張機能）

### 基本的な手順
1. VS Codeを開く
2. Salesforce組織に接続
3. 新しいコンポーネントを作成
4. コードを書く
5. 保存してデプロイ

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

### 1. データが更新されない
```javascript
// ❌ 悪い例
this.items.push(newItem);

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

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

## 7. 便利なTips 

### デバッグ方法
```javascript
// コンソールで確認
console.log('ここの値を確認:', this.myValue);

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

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

## 8. 学習ロードマップ 

1. **初級** (1-2週間)
   - HTML/CSS/JavaScriptの基礎
   - 簡単なコンポーネント作成
   - Lightning Base Componentsの使用

2. **中級** (2-4週間)
   - Apexとの連携
   - イベント処理
   - データテーブル操作

3. **上級** (1-2ヶ月)
   - 複雑なコンポーネント作成
   - パフォーマンス最適化
   - テスト作成

## 9. 役立つリソース 

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

### サンプルコード
- [LWC Recipes](https://github.com/trailheadapps/lwc-recipes)
- [LWC Examples](https://github.com/trailheadapps/lwc-recipes)

## 10. 実践的なアドバイス 

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

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