Skip to main content
Version: 5.1

Intermission

一息つきましょう！本当にここまでのチュートリアルを全部見てくれた方：おめでとうございます ！もし、このページまで読み飛ばして、タダで祝ってもらおうとしたのなら：チッ、チッ！

一度に多くの新しいコンセプトを吸収する可能性があったので、すべてを完全に吸収できなくても、悪く思わないでください。React、GraphQL、Prisma、サーバレス関数......本当にたくさんありますね！フレームワークを作っている私たちでさえ、1日に何度もググって、これらをどう連携させるかを考えています。

ある匿名のTwitterユーザは言いました："地球上で最も賢い人間と歴史上最も愚かな人間の気分を1日のうちで切り替えるのが好きなら、プログラミングはあなたに向いている職業かもしれない！"

What's Next?​

第5章からは Storybook と Jest に注目し、ブログに新しい機能を追加していきます：コメント機能です。 Storybook はコンポーネントを構築するための新しい方法を紹介します。また、テストを追加し、Jest で実行して、期待通りに動作していることを確認します。 コメントのモデレータに特別な役割を与えることで、 authorization （認可）もカバーします。

ここまでのチュートリアルを終えた方は、第5章に進むことができます。 ただし、この先では、前半で構築できなかった完全なテストスイートといくつかの Storybook コンポーネントを扱う予定です。 第5章の最初と同じスタート地点に立つには、この example repo（サンプルリポジトリ） から始めることができます（強くお勧めします）。このリポジトリは第4章の終わりから始まっていますが、すでに追加のスタイル、最初のテストスイート、いくつかの Storybook コンポーネントがあらかじめ構築されています。

Using Your Current Codebase​

以下の例で使用しているのと同じCSSクラスを使用したい場合は、あなたのリポジトリに Tailwind を追加しなければなりません：

yarn rw setup ui tailwindcss

しかし、この後に続くスクリーンショットは、あなたがブラウザで見ているものに近いものではありません（Storybook で構築した、独立したしたコンポーネントを除く）ので、example repo から始めるとよいかもしれません。また、私たちが追加した良いテストスイートも見逃すことになりますよ！

もし、 まだ 自分のリポジトリで続けるつもりで、Netlify のようなサービスにデプロイしたのなら、 schema.prisma のデータベースプロバイダを postgresql に変更したことでしょう。 もしそうなら、ローカルの開発環境も同様に変更されていることを確認してください。 Local Postgres Setup を参照してください。 もし、代わりに example repo を使うなら、古き良き SQLite （前半のビルドで使っていたもの）を使うことができます。

準備ができたら開発サーバを起動しましょう：

yarn rw dev

最初のチュートリアルをまだ見ていない人、あるいはRedwoodの古いバージョン（0.41以前）で見た人は、this repo（このリポジトリ）をクローンすると、これまでに作ったものをすべて含み、さらに少しスタイルを追加して、見られるものにしてあります。サンプルのリポジトリにはスタイルアップのための TailwindCSS が含まれており、スタイルアップのためのフックを追加するために <div> が1つ2つ追加されています。

git clone https://github.com/redwoodjs/redwood-tutorial
cd redwood-tutorial
yarn install
yarn rw prisma migrate dev
yarn rw g secret

これはリポジトリをチェックアウトし、すべての依存関係をインストールし、ローカルデータベース（SQLite）を作成し、いくつかのブログ投稿でそれを埋めることになります。最後のコマンド（ yarn rw g secret ）の後、出力された文字列をコピーして、プロジェクトのルートにあるファイル .env に追加する必要があります：

.env
SESSION_SECRET=JV2kA48ZU4FnLHwqaydy9beJ99qy4VgWXPkvsaw3xE2LGyuSur2dVq2PsPkPfygr

これは dbAuth で使用するセキュアクッキーの暗号化キーです。

そうしたら yarn rw dev して開発サーバを起動します。ブラウザで新しいブログアプリが開かれるはずです：

image

トイレ休憩して、飲み物をとってきて、さあ始めましょう！