慣れきったVisualforce Page開発からなかなか抜けられなかった筆者が、新規アプリを作るぞというタイミングで一念発起してLWC開発をスタートさせたのですが、最初は思うようにいかずに本当にイライラした毎日を過ごしておりました。
最近になってやっと、書き方のお作法みたいなものが分かってきたのですが、分かってしまうと「俺はいったい何にハマっていたんだろうか…」という感じで痛みを忘れてしまいます。
LWCの開発ってどうやるんだっけ？という初学者向けに書いてみます。(自分が忘れてしまったときの備忘録でもあります)

フロントエンドの書き方

Visualforce時代は、Lightning Design Systemを使うことがよくありました。

これを使うためにはVisualforce pageに

というタグを記入します。
コードも基本的にはHTMLで記述があるためコピペで使えるし、便利だなってなるんですよね。
ただ、これはLWCでは使えません。
なぜ…ってなるけど、仕様上仕方がないのです。

では、LWCでLDSをどうやって使えばよいのだろうか？と思ったら、ここを見ればよいのです。

フィルタで Lightning Web Componentを選び、コンポーネントをフィルタしましょう。
左上のQuick Find欄にboxとかlistとか入れると、それっぽいのが出てきます。

試しにLightning buttonを選択してみるとこんな画面になります。

https://developer.salesforce.com/docs/component-library/bundle/lightning-button/example

Exampleタブでは、htmlファイルの書き方とjsの書き方が表示されます。
Documentationタブでは、細かいtipsが書かれているので、こんな拡張した使い方が出来るよ、みたいなことが書いてあるのでそこを見るとよりうまい使い方がわかると思います。

載ってないコンポーネントもあるよね？

そうなんです。SLDSにはあるのにLWCのコンポーネントページには存在しないものがあったりします。
これどうするんだよ…ってなるのですが、そこはググってみましょう。
日本語だとあまり情報がない場合が多いので、「SLDSのコンポーネント名 + LWC」でググると、実装してみた系のblogがヒットします(運がよければ)
ということで、こちらについては若干の努力が必要なのですが、ぜひ探してみてください。

私の場合はActivity Timelineの実装をしたかったのですが
https://www.lightningdesignsystem.com/components/activity-timeline/#site-main-content

activity timeline LWC

で検索してみると、githubがヒットします。
神か…と思いながらコードを読み解き実装するという感じでやりました。

ということで、かんたんに使えるものとそうじゃないものがまだ混在してはいるのですが(SLDSのほうが先に行っているらしいので)、こんなふうに情報取得していくと実装が楽になると思いますよという話でした。