Build a shop with wcstackwcstackでショップを作る

What you'll build作るもの

This is the shop at the end of Part 1, running. Search, filter by category, add to the cart, change quantities — it is a single index.html.

Part 1の終わりにできあがるショップが動いているところです。検索、カテゴリでの絞り込み、カートへの追加、数量の変更。これがすべてindex.html1枚です。

Before you start始める前に

• A text editor and a modern browser. Each step is a single index.html. Save it and open it — double-clicking the file works, and so does any local server.
• HTML and a little JavaScript: objects, arrays, functions. No framework experience is needed, and none of it carries over by accident — wcstack has no virtual DOM, no hooks and no components to learn first.
• Node.js is optional. You need it only for the checker, npx @wcstack/lint, which step 7 introduces.

• テキストエディタと最近のブラウザ。各ステップはindex.html1枚です。保存して開くだけで、ファイルのダブルクリックでも、ローカルサーバーでも動きます。
• HTMLと少しのJavaScript(オブジェクト、配列、関数)。フレームワークの経験はいりません。仮想DOMもフックも、先に覚えるコンポーネントもありません。
• Node.jsは任意です。必要なのは、ステップ7で紹介する検査器npx @wcstack/lintを使うときだけです。

How each step works各ステップの読み方

Every step starts with its page running live, so you see the goal before the code. Then come the code changes — only what changed, starting from your page of the previous step — and How it works, which explains the new ideas in a few paragraphs. Try it suggests one change to make yourself, and Common mistakes shows what goes wrong and how it looks. If you lose track, the complete file of each step is at the bottom of its page.

どのステップも、そのページが動いている様子から始まるので、コードより先にゴールが見えます。続いてコードの変更(前のステップの自分のページからの差分だけ)と、新しい考え方を数段落で説明する「しくみ」があります。「やってみよう」は自分で試す変更を1つ挙げ、「よくある間違い」は何がどう壊れるかを見せます。迷ったら、各ページの最後にそのステップのファイル全体があります。

The text is in English and Japanese. Switch with EN / 日本語 in the header; the code is the same in both.

本文は英語と日本語で書かれています。ヘッダーのEN / 日本語で切り替えられます。コードはどちらも同じです。

Part 1 — The basicsPart 1 — 基本

Seven steps, with nothing but @wcstack/state. Each takes ten to fifteen minutes.

@wcstack/stateだけを使う7つのステップです。1つにつき10〜15分ほどです。

1. 1 Show a product商品を1つ表示する One file, one script tag. Show a product from state and count clicks. ファイル1つ、scriptタグ1つ。stateの商品を表示し、クリックを数える。 <wcs-state>data-wcstextContent:|toFixedonclick:
2. 2 List the catalog商品一覧を並べる Repeat a card for every product and mark the one that is sold out. 商品ごとにカードを繰り返し、売り切れの商品に印を付ける。 for:.name{{ }}class.NAME:hidden:disabled:
3. 3 Put products in the cartカートに商品を入れる Handlers learn which row was clicked; a list changes when you assign a new array. ハンドラがどの行が押されたかを知る。リストは新しい配列を代入して変える。 (event, index)concatcart.length
4. 4 Change quantities数量を変える Write to one cell with a path, and learn the one rule: assign to the path. パスで1つのセルに書き込み、ただ1つの規則「パスに代入する」を学ぶ。 cart.0.quantitytoSpliced|le
5. 5 Add up the cartカートを集計する Line totals, item count, shipping and total as getters; a message for the empty cart. 小計・品数・送料・合計をgetterで。空のカートにはメッセージを。 get "cart.*.lineTotal"()$getAllif:else:
6. 6 Search and filter検索と絞り込み Two-way bindings carry input into state; a getter on every product decides what shows. 双方向バインディングが入力をstateへ運び、各商品のgetterが表示を決める。 value:radio:|not
7. 7 Check your pageページを検査する Catch mistyped paths, unknown filters and array mutations before you reload. パスの打ち間違い、存在しないフィルタ、配列の破壊的変更を、再読み込みの前に見つける。 npx @wcstack/lintwcstack-intellisense

Part 2 — Connect to the outsidePart 2 — 外の世界とつなぐ

Five steps that load the catalog from a JSON file and keep the cart across reloads and tabs. What you add are tags — <wcs-fetch> and <wcs-storage> — and a few getters; no fetch(), localStorage or try / catch in your code. Start from your page of step 6.

商品一覧をJSONファイルから読み、カートを再読み込みやタブをまたいで残す5つのステップです。加えるのはタグ(<wcs-fetch>と<wcs-storage>)といくつかのgetterで、コードにfetch()・localStorage・try / catchは出てきません。ステップ6の自分のページから始めます。

1. 8 Load the catalog from a file商品一覧をファイルから読む A tag loads the products into state; a getter in front of them keeps the rest of the page unchanged. タグが商品をstateに読み込み、その前に置いたgetterがページの残りをそのままに保つ。 <wcs-fetch>value:loading:@typedef
2. 9 When loading fails読み込みに失敗したら Show the error and try again — by binding an output and writing an input. エラーを表示し、もう一度試す。出力をバインドし、入力に書くだけで。 error:trigger:
3. 10 Keep only ids in the cartカートにはIDと数量だけ A line remembers what the customer chose; row getters look up the rest in the catalog. 行はお客さんが選んだものだけを覚え、残りは行getterで商品一覧から引く。 get "cart.*.product"()?.
4. 11 Keep the cart across reloads再読み込みしてもカートを残す Bind a getter that reads every line, and let the stored cart win at load. すべての行を読むgetterをバインドし、読み込み時には保存済みのカートを勝たせる。 <wcs-storage>#init=elementget / set
5. 12 Check the page againもう一度ページを検査する The mistakes of Part 2 lose data after a reload; the checker reports them before. Part 2の間違いは再読み込みの後でデータを失う。検査器はその前に報告する。 wcs/input-nested-writewcs/storage-init-seed

Part 3 — Grow into an appPart 3 — アプリに育てる

Four steps that turn the page into an app: pages for every product, a component, tests, and a published site. From here on you need Node.js and a local server (npx serve -s .). Start from your page of step 11.

ページをアプリにする4つのステップです。商品ごとのページ、部品、テスト、公開したサイト。ここから先はNode.jsとローカルサーバー(npx serve -s .)が必要です。ステップ11の自分のページから始めます。

1. 13 Product pages with a routerルーターで商品ページを作る The URL picks the page and becomes state; links stay plain links, and Back and Forward work. URLがページを選んでstateになる。リンクは素のリンクのまま、「戻る」と「進む」も働く。 <wcs-router>:id(int)typedParams:<base href>
2. 14 Split out a component部品に分ける The card becomes a custom element: the page mounts a row on it and hears its event. カードをカスタム要素にする。ページは行をマウントし、そのイベントを聞く。 bind-componentstate: .onadd-to-cart:
3. 15 Test itテストする Mount the real page in Node, click, and check the cart — in about a second. 本物のページをNodeでマウントし、クリックし、カートを確かめる。1秒ほどで。 @wcstack/testingvitesthappy-dom
4. 16 Publish it公開する Pin the version, let the browser verify it, and put the shop on GitHub Pages with its deep links working. バージョンを固定し、ブラウザに検証させ、深いリンクの動くショップをGitHub Pagesに置く。 wcstack/autointegrity404.html

Looking for every option rather than a path through them? The state page is the complete reference.

道筋よりも、すべての機能の一覧が欲しいときは、stateのページが完全なリファレンスです。