[勉強メモ] Zero to Hero in Lightning Web Components #1

Posted at 2025-08-15

はじめに

こんにちは、とりあしです。

繁忙期で更新できず、Salesforceが全然触れてなかったため、なんとか勉強のメモだけでも残そうと思い、記事にしてみました。
※2025年8月現在、Salesforce開発とは全く別業種での仕事をしています。転職準備中。

Udemyで学んでいるLWCの講座「Zero to Hero in Lightning Web Components」の勉強のメモを書き綴ります。

HTML&CSS JavaScriptは全くの未経験なので間違っていたらご指摘くださると幸いです！

セクション1：Introduction
セクション2：HTML & CSS

HTMLの基本のタグ

<div>
HTML文書内の分割を定義するタグ
ブロックレベル

<p>
段落やテキストにパディングを入れたり出来る
テキストの上下にスペースが出来る。divは出来ない。
ブロックレベル

<h1>-<h6>
見出し

<a>
アンカータグ。リンクを埋め込む時に使用する。

<img>
画像を埋め込む時に使用する
終了タグはない

<ul>
リスト表示

<!DOCTYPE html>
index.htmlがHTML5の文書であることを示すための記述

タグには開始タグと終了タグがあって、属性は必ず開始タグで使用される。

<a href = "https://google.com">Go to Google<a>
hrefが、属性
googleのリンクが、値

<img src = "https://pisum.photos/200"/>

データ属性を作るには、divを定義する必要がある

<div data-name="toriashi">ユーザー名</div>
これをjavascriptで参照できる？

ブロックレベル
ブラウザの幅いっぱいに要素が配置される

<diV>
<p>
<h1>-<h6>
<ul>
<header>
<article>

インラインレベル

<span>
<img>
<a>
<label>
<strong>

ここだけ日本語字幕なし。後で要再学習。

属性セレクタ

p{color:blue;}

IDセレクタ

<div id="username">I am toriashi</div>

#username{color:red;}

クラスセレクタ

<p class="username">I am toriashi</p>

.username{color:blue;}

Salesforceが提供しているデザインシステム
これを利用してLightingExperience風デザインで作成できるみたい

Margin：外側
Border：境界線
Padding：内側
Content：本体

<div class="abc">I am Content</div>

.abc{
    padding:16px;
    border:2px solid;
    margin:16px;
}

IDとClassの使い分け