Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
LWCでローカルコンポーネント開発 / Local development on LWC
Search
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Yuichi Maekawa
November 13, 2020
Programming
1
1.3k
LWCでローカルコンポーネント開発 / Local development on LWC
Salesforce Developers Meetup #24
Yuichi Maekawa
November 13, 2020
Tweet
Share
More Decks by Yuichi Maekawa
See All by Yuichi Maekawa
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
16
9.4k
やらないことを決める
kaelaela
1
1.2k
ハイインテグリティコミットメントを実現するスクラム開発の進化 / Evolution of Scrum for High Integrity Commitment
kaelaela
1
890
アルプのロードマップ変遷 / Alp Roadmap History
kaelaela
0
2.9k
ApexでPofEAA / PofEAA by Apex
kaelaela
2
500
Zap Your DX!
kaelaela
1
590
Clasp使ってGASを快適に開発する / Let's play Clasp
kaelaela
0
650
Clean ArchitectureとEffで変更に強いAPIを設計する
kaelaela
8
4.1k
こんなに違う!ScalaとKotlin
kaelaela
2
2.2k
Other Decks in Programming
See All in Programming
なぜSQLはAIぽく見えるのか/why does SQL look AI like
florets1
0
450
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
petamoriken
0
200
AgentCoreとHuman in the Loop
har1101
5
230
今から始めるClaude Code超入門
448jp
8
8.5k
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
tasshi
0
200
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
masahiro_nishimi
5
330
AI によるインシデント初動調査の自動化を行う AI インシデントコマンダーを作った話
azukiazusa1
1
700
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
kamina_zzz
0
400
Unicodeどうしてる? PHPから見たUnicode対応と他言語での対応についてのお伺い
youkidearitai
PRO
1
1.1k
IFSによる形状設計/デモシーンの魅力 @ 慶應大学SFC
gam0022
1
300
AIフル活用時代だからこそ学んでおきたい働き方の心得
shinoyu
0
130
副作用をどこに置くか問題:オブジェクト指向で整理する設計判断ツリー
koxya
1
600
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
128
55k
From Legacy to Launchpad: Building Startup-Ready Communities
dugsong
0
140
Making the Leap to Tech Lead
cromwellryan
135
9.7k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
300
Odyssey Design
rkendrick25
PRO
1
490
Heart Work Chapter 1 - Part 1
lfama
PRO
5
35k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.2k
RailsConf 2023
tenderlove
30
1.3k
State of Search Keynote: SEO is Dead Long Live SEO
ryanjones
0
110
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.4k
Embracing the Ebb and Flow
colly
88
5k
Transcript
LWCで ローカルコンポーネント開発 Salesforce Developers Meetup #24 2020/11/13 Maekawa Yuichi
Maekawa Yuichi Twitter: @_kaelaela Software Engineer@ サブスクリプションビジネスの効率化 収益最大化プラットフォーム https://scalebase.com/
Webアプリ開発での一般的な問題 - 画面の複雑化 - 状態管理の複雑化 - 依存関係の複雑化 ↓ ソースコードの肥大化、保守性の低下 これらはSalesforceのパッケージ開発でも同じことが起こる
Lightning Web Component Web Components - 再利用可能でカプセル化された独自HTMLタグ作成のためのWeb標準API コンポーネント開発により、カプセル化、関心の分離、再利用性を高める システムの複雑化をコンポーネントで減速させ、開発を加速させる Web
Components x Salesforce = LWC
Salesforce開発の困るところ... ソースコードをSalesforce上にデプロイしないと見れない deployが長いとTwitterを見てしまうのが人の性 手元でsave & buildしてチェックして開発速度を上げたい
local dev server
Local development(Beta) Local開発環境にサーバーを立ててdeployし、即座に変更を反映、確認ができる 導入 - Sfdxプラグインをインストール - ローカルサーバーを起動 - 開発後保存すると即座にlwcフォルダ内コードがデプロイされる
これだけ!
@salesforce/lwc-dev-serverプラグイン プラグインをinstall $ sfdx plugins:install @salesforce/lwc-dev-server ローカルサーバーの起動 $ sfdx force:lightning:lwc:start
tips package.jsonにscriptを追加しておくと楽
tips
open http://localhost:3333
コンポーネント作成手順 - lwcフォルダの下にフォルダ作成 - HTMLで<templace>を使ってレイアウト作成 - jsでコンポーネントロジックを書く - Local dev
serverで動作チェック - Sandboxとか用意するといい - 使いたいページで<c-XXX>で導入 以上
HTML
JS
使うページのHTML
localhost:3333
Thank you! アプリケーション開発に起こりがちなコードの肥大化 - コンポーネント開発で乗り切ろう Salesforce開発のスピードをあげたい - Local dev serverを使おう
Component開発 - HTML/JSを書いて<c-xxx>で使うだけ!