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

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