コンテンツにスキップ
OMU-AIKIDO Docs

開発を始める

この章では、アプリのコードの詳細について説明します。 実装はGitHubで管理されています。

フォークやプルリクエストはいつでも歓迎しています！

プロジェクトについて

このプロジェクトはAstro.jsを使用して構築されているフルスタックアプリケーションです。

使用しているツールなど

npm パッケージ管理
volta Node.jsバージョン管理
Astro.js フレームワーク
GitHub ソースコード管理
Catppuccin カラーパレット
Clerk 認証
Turso libSQLデータベース
Drizzle ORM
ts-ics iCalendar生成
CloudFlare Pages ホスティング

ディレクトリ構造

プロジェクトのディレクトリ構造は以下の通りです。

  • ディレクトリdb
    • relations.ts
    • schema.ts
  • ディレクトリpublic
    • favicon.ico
    • robots.txt
  • ディレクトリsrc
    • ディレクトリcomponents
      • ディレクトリroot/
        • …
      • ディレクトリui/
        • …
    • ディレクトリlayouts
      • baselayout.astro
      • auth-layout.astro
      • non-auth-layout.astro
    • ディレクトリlib
      • drizzle.ts
      • ディレクトリquery/
        • …
    • ディレクトリpages
      • ディレクトリaccount/
        • …
      • ディレクトリadmin/
        • …
      • ディレクトリapps
        • ディレクトリrecord/
          • …
        • …
      • dashboard.astro
      • index.astro
      • news.astro
    • ディレクトリstyles
      • global.css
    • class.ts
    • const.ts
    • middleware.ts
    • type.d.ts
    • utils.ts
    • zod.ts
  • astro.config.mjs
  • drizzle.config.ts
  • env.d.ts
  • package.json
  • package-lock.json
  • tsconfig.json
  • worker-configuration.d.ts
  • wrangler.json
  • README.md
  • LICENSE

開発環境のセットアップ

必要なツール

  1. Gitをダウンロードします

    Gitはソースコードのバージョン管理ツールです。 Gitの公式サイトからダウンロードしてください。

  2. Voltaをインストールします。

    VoltaはNode.jsバージョン管理ツールで、プロジェクトごとに適切なNode.jsのバージョンを自動で有効にします。
    詳細はVoltaの公式サイトをご参照ください。

  3. Node.jsをインストールします。

    Terminal window
    # Node.jsのバージョンを指定してインストール
    volta install [email protected]
    # npmのバージョンを指定してインストール
    volta install npm@11

  4. プロジェクトをクローンします:

    Terminal window
    git clone 'https://github.com/omu-aikido/omu-aikido-app.git'

    このコマンドでプロジェクトのソースコードがダウンロードされます。

  5. プロジェクトのルートディレクトリに移動し、依存関係をインストールします:

    Terminal window
    npm install

    このコマンドでpackage.jsonに記載のパッケージが一括で導入されます。

  6. プロジェクトの環境変数を設定します:

    .env.development
    .dev.vars.development

    必要な情報は次の通りです:

    • PUBLIC_CLERK_PUBLISHABLE_KEY
    • CLERK_SECRET_KEY
    • TURSO_DATABASE_URL
    • TURSO_AUTH_TOKEN

    各キーファイル例:

    PUBLIC_CLERK_PUBLISHABLE_KEY=your_public_clerk_key
    CLERK_SECRET_KEY=your_clerk_secret_key
    TURSO_DATABASE_URL=your_turso_database_url
    TURSO_AUTH_TOKEN=your_turso_auth_token

    これで環境変数の設定ファイルが作成されます。

  7. ローカル開発サーバーを起動します:

    Terminal window
    npm run dev

    サーバーが起動すると、ターミナル上にURLが表示されるので、ブラウザでアクセスし動作確認を行ってください。

これで開発環境の初期設定は完了です。