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！（理解しながら）
- エラーは友達（学びのチャンス）
- コミュニティに質問する
- 定期的に最新情報をチェック
これで基本は大丈夫！わからないことがあれば、一つずつ解決していきましょう！