このワークショップでは、Next.js / Stripeとuse-shopping-cartを利用して、カート機能を持つWebアプリ開発を体験できます。

完成イメージ

商品一覧

注文ページ

必須環境

ワークショップまたはセルフペースでの勉強に利用する場合、以下の環境が準備できているかを事前に確認しましょう。
特にターミナルな(所謂「黒い画面」)は、ライブラリのインストールやアプリのビルドで頻繁に登場します。

  • Node.js verion12以上がインストールされている
  • Visual Studio CodeなどのIDEがインストールされている
  • ターミナルを利用したCLIコマンドの実行ができる
  • インターネットに接続でき、npm installでファイルのダウンロードができる

推奨環境

また、以下のコマンドや操作ができると、より快適にワークショップを進めることができます。

ワークショップの進め方

全てのステップで、「画像付きの手順」や「実行するコマンド」または「追加するコード」を指示しています。

画像付きの手順

基本的にはStripeダッシュボード上での操作がメインです。
必要に応じて直接アクセスするリンクを記載している場合もありますので、あわせてご利用ください。

実行するコマンド

npmnextコマンドをライブラリのインストールや開発環境の立ち上げに利用します。

npm run devを実行しましょう」や「npm run devと入力し、[Enter]キーを押しましょう」などと記載していますので、ターミナルにコマンドをコピー&ペーストまたは直接入力して実行しましょう。

なお、混乱を避けるため、コマンド例ではすべて%$を省略しています。

追加・変更・削除するコード

原則として、変更するファイルのコードは差分を含めて全て記載しています。
ただし、あまりにも長いコードになる場合は//中略などで省略しています。

「作成したファイルに、以下のコードを追加します。」のように追加や書き換えを指示している場合、その下にあるコードを対象のファイルに丸ごと書き写しましょう。

全て追加の例

import Stripe from 'stripe'

export default async function handler(req, res) {
  res.status(200).end()
}  

pages/api/checkout_session.jsを以下のように変更します。」などと記載している場合、下記の例のようにコードの左側に[+]や[-]が表示されています。

変更がある例

export default async function handler(req, res) {
-  return res.status(405).end()
+  res.status(200).end()
}  

[-]の行は元のコードから削除してください。
[+]の行は新しく追加するコードです。前後のコードを目印に追加しましょう。

なお、Zennでは、[+]や[-]を含む形でコピーしても、ペースト時には両記号は除外されています。

ワークショップ主催者・メンター向けの情報

「4時間ワークショップ向け」に作成したコンテンツのため、タスク量が非常に多いです。
ただし、いくつかのステップで複数の方法を紹介しているなど、スキップ可能な項目もいくつか存在します。

このコンテンツを利用してワークショップを企画される場合は、事前に一度全てのステップをテストランしていただき、イベント時間に応じて省略する内容を検討することをお勧めします。

または、 https://twitter.com/hide__dev までリプライ等でご連絡頂ければ、オンラインまたは現地でメンターとして参加することも可能です。お気軽にご連絡ください。

ライセンス

本資料は、クリエイティブ・コモンズ[表示 4.0 国際 (CC BY 4.0)]ライセンスです。

https://creativecommons.org/licenses/by/4.0/deed.ja

ライセンスの条件に従う範囲内であれば、商用利用を含め、自由に複製または改変することができます。

なお、差し支えなければ、どんなイベントで利用したかについてを、以下のページに共有をお願いします。

https://zenn.dev/stripe/scraps/508964ca5e6117

今後の資料作成の励みになりますので、ご協力いただけますと幸いです。