Skip to main content
Version: 5.1

Redwood File Structure

作成されたファイルとディレクトリを見てみましょう（ここでは設定ファイルを除外しています）。

info

今すぐにこのディレクトリ構造を覚えようとしなくても大丈夫です。これはあなたが方向性を掴むための簡単な概要に過ぎません。一行もコードを書いていない段階で何十ものファイルを見るのは気が重くなりますが、ここには素晴らしい組織的な構造があります。約束します。今のところ、これらをすべて無視しても構いません。

├── api
│   ├── db
│   │   └── schema.prisma
│   ├── dist
│   ├── src
│   │   ├── directives
│   │   │   ├── requireAuth
│   │   │   └── skipAuth
│   │   ├── functions
│   │   │   └── graphql.js
│   │   ├── graphql
│   │   ├── lib
│   │   │   ├── auth.js
│   │   │   ├── db.js
│   │   │   └── logger.js
│   │   └── services
│   └── types
│
├── scripts
│   └── seed.js
│
└── web
    ├── public
    │   ├── favicon.png
    │   ├── README.md
    │   └── robots.txt
    └── src
        ├── components
        ├── layouts
        ├── pages
        │   ├── FatalErrorPage
        │   │   └── FatalErrorPage.js
        │   └── NotFoundPage
        │       └── NotFoundPage.js
        ├── App.js
        ├── index.css
        ├── index.html
        └── Routes.js

トップレベルには api 、 scripts 、 web という3つのディレクトリがあります。Redwood はバックエンド （ api ） とフロントエンド（ web ）をコードベース内のそれぞれのパスに分離しています（Yarn はこれらを "workspaces" と呼んでいます 。Redwoodでは、これらを "サイド "と呼んでいます）。今後パッケージを追加する際には、どのワークスペースに入れるかを指定しなければなりません。たとえば、次のように（これらのコマンドは実行しないでください。構文を見ているだけです）：

yarn workspace web add marked
yarn workspace api add better-fs

scripts には、コマンドラインから実行する必要がある、APIサイドやWebサイドに直接関係しないNodeスクリプトを格納します。 この中にある seed.ts というファイルは、アプリを実行するために必要なデータ（管理者ユーザやサイト設定など）をデータベースに登録するために使用されます。

The /api Directory​

api の中には4つのディレクトリがあります：

  • db には、データベースのplumbingが格納される（plumbing＝配管、コンポーネント間結合などの意味）：

    • schema.prisma にはデータベースのスキーマ（テーブルとカラム）が格納される

    最初のテーブルを追加した後は dev.db という名前の SQLite データベースファイルと migrations という名前のディレクトリが作成されます。 migrations には、時間の経過とともに変化するデータベーススキーマのスナップショットとして動作するファイルが格納されます。

  • dist にはapiサイドでコンパイルされたコードが格納される。開発中は無視することができる

  • src には、バックエンドのすべてのコードが格納される。api/src にはさらに5つのディレクトリが格納される

    • directives には、クエリへのアクセスや値の変換を制御するための GraphQL schema directives が格納される
    • functions には、Redwood が自動生成する graphql.ts ファイルに加えて、アプリに必要な lambda functions が格納される。このファイルは、GraphQL APIを使用するために必要
    • graphql にはスキーマ定義言語（Schema Definition Language）で記述された GraphQL スキーマが格納される（ファイル名の末尾は .sdl.ts ）
    • lib には、いくつかのファイルが格納される。 auth.ts は認証機能を追加するためのプレースホルダとして始まり、そのためのいくつかの基本的な関数を持っている。 db.ts はデータベースと通信するためのPrismaデータベースクライアントをインスタンス化し、 logger.ts はロギングをいい感じに設定する。この api/src/lib ディレクトリは、他の場所に属さないAPIサイドのコードに使用することができる
    • services には、データに関連するビジネスロジックが格納される。GraphQLのデータに対してクエリやミューテーションを行う場合（ resolvers （リゾルバ）として知られている）、そのコードはここで完結するが、アプリケーションの他の場所で再利用できる形式になっている

  • そして最後に types には自動的にコンパイルされたGraphQLの型が格納される。開発中は無視することができる

バックエンドは以上です。

The /web Directory​

  • public には、Reactコンポーネントで使用されないアセットが格納される（最終的なアプリのルートディレクトリにそのままコピーされる）

    • favicon.png は、ページを開いたときにブラウザのタブに表示されるアイコン（最初はRedwoodJSのロゴ）
    • README.md では、静的アセットに public フォルダを使用する方法とそのタイミングを説明している。またWebpackを使用してコンポーネント内にアセットをインポートする際のベストプラクティスについても説明している。このREADME.mdファイルはGitHubで読むことができる
    • robots.txt は、ウェブインデクサーに対する許可を制御するために使用する

  • src にはいくつかのサブディレクトリが格納される

    • components には、従来の React コンポーネントと、 Redwoodの Cells （セル）が格納される（詳細は後述）
    • layouts には、コンテンツをラップして Pages （ページ）をまたいで共有されるHTMLやコンポーネントが格納される
    • pages にはコンポーネントが格納される。これはオプションで Layouts の内側にラップされ、与えられたURLの "ランディングページ" になる（URLの /articles/hello-world はあるページに、 /contact-us はまた別のページにマッピングされる）。新しいアプリには2つのページが含まれている：
      • NotFoundPage.tsx は、他のルートが見つからない場合に配信される（下記 Routes.tsx 参照）
      • FatalErrorPage.tsx は、リカバリ不能エラーがキャッチされず、アプリケーションが本当にもうどうしようもなくなった場合にレンダリングされる（通常は空白ページ）
    • App.tsx は、Redwoodアプリを起動して実行するためのブートストラップコード
    • index.css はカスタムCSSを記述するのに適した場所ですが、多くのオプションがある（私たちは TailwindCSS 推しです。信じられないかもしれませんが、アプリをやっていく上でカスタムCSSを記述する必要はないかもしれません！）
    • index.html は、標準的なReactの出発点
    • Routes.tsx は、URL を Page にマップするアプリのルート定義

チュートリアルを進めていく中で、これらのディレクトリやファイルに出入りすることになります（新しいのもいくつか作成します）。