25春ハッカソン 16班 「Circuledge」 のフロントエンドリポジトリです。
わからないことがあれば、このドキュメントをまず読んでみてください。それでも解決しなければ、いつでも気軽に @Pina641 (GitHub: Kaki256) に声をかけてください！
- Vue.js (v3): ユーザーが見る画面やボタンなど、UIを構築するためのメインの骨格です。
- Vite: 開発用のサーバーを起動したり、最終的にコードを一つにまとめたりする高速なツールです。
- TypeScript: JavaScriptに「型」という安全装置を追加したものです。コードの間違いを早期に発見し、バグを減らしてくれます。
- Pinia: アプリ全体で共有したい情報（ログインしているユーザー情報や、表示中のノート一覧など）を管理するための道具箱です。
- Vue Router: ページのURL（例えば、
/notes,/notes/:noteId/editなど）と、表示するコンポーネントを紐付ける役割を担います。 - ESLint & Prettier: 全員のコードの書き方を統一し、綺麗に保つためのものです。
まずは、自分のパソコンでこのプロジェクトを動かせるようにしましょう。以下の手順を上から順番に実行してください。
もし、以下のツールが自分のPCに入っていない場合は、先にインストールしておきましょう。
- Node.js
- Git
- Visual Studio Code (VS Code)
- VS Codeの拡張機能:
Vue - Official(Vueファイルの色付けなどをしてくれる) とESLint,Prettier - Code formatterをインストールしておくと、開発がとても楽になります。
- VS Codeの拡張機能:
まず、このプロジェクトのコード一式を自分のPCにダウンロードしてきます。 ターミナル（WindowsならPowerShellやGit Bash、Macならターミナル）を開いて、開発用ファイルを置きたいディレクトリに移動し、以下のコマンドを実行してください。
git clone https://github.com/traP-jp/circuledge-frontend.gitダウンロードしたフォルダに移動します。
cd circuledge-frontendプロジェクトで使う道具（ライブラリ）を、自分のPCにインストールします。package.jsonというファイルに書かれたリストを元に、自動で全部インストールしてくれます。
npm install下の開発用の起動コマンドを実行しましょう。
npm run dev成功すると、ターミナルに以下のようなメッセージが表示されます。
VITE v5.x.x ready in xxx ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
ブラウザ（Google Chromeなど）を開き、ターミナルに表示された http://localhost:5173/ というアドレスにアクセスしてください。プロジェクトの画面が表示されれば、環境構築は成功です！🎉
チームで開発する上で、コードがごちゃごちゃにならないように、決まった手順で作業を進めましょう。
作業を始める前に、必ずメインのブランチ（main）を最新の状態にします。
git switch main
git pull origin mainmainブランチから、自分が作業するための「コピー」を作ります。このコピーをブランチと呼びます。
ブランチ名は、「何をするブランチか」 が分かりやすいように、以下のルールで作成しましょう。
ルール: feature/あなたの名前/機能名, fix/あなたの名前/修正内容, ...
以下のコマンドでブランチを作成し、そのブランチに移動します。
git switch -c feature/あなたの名前/機能名VS Codeでコードを編集し、機能を追加したり、バグを修正したりします。 ファイルを保存するたびに、Prettierが自動でコードを綺麗に整形してくれます。もしESLintがエラー（赤い波線）を出していたら、内容を確認し、修正しましょう。
作業がある程度キリの良いところまで進んだら、変更内容を記録（コミット）します。
# 1. 変更したファイルを全て記録の対象に追加する
git add .
# 2. 「どんな変更をしたか」というメッセージを付けて記録する
git commit -m "feat: ノートカードのコンポーネントを作成"コミットメッセージは、feat: (機能追加) や fix: (バグ修正) のように、接頭辞を付けると分かりやすいです。
自分のPCで記録した変更を、GitHub上のリポジトリに送信（プッシュ）します。
git push origin feature/あなたの名前/機能名GitHubのサイトに行き、「Pull Request」を作成します。 これは、「私の変更を、メインのブランチに取り込んでください！」 というお願いです。
- タイトルと説明を分かりやすく書く。
- 関連するGitHub Issueがあればリンクする。
- レビュアーに
@Pina641や@yasakoを指定する。
レビューでOKが出たら、リーダーがあなたのコードをmainブランチにマージします。これであなたの仕事は完了です！お疲れ様でした！
このプロジェクトのフォルダ構成と、それぞれの役割は以下の通りです。
├── .github/ # GitHub Actionsのワークフロー設定などを置きます。
├── .vscode/ # VS Codeエディタ用の設定ファイル置き場です。
│ └── settings.json # チームでフォーマッタ(Prettier)などの設定を統一するために使います。
├── public/ # ビルド時に変換されず、そのまま配置される静的ファイル(画像など)を置きます。
│ └── favicon.ico # ブラウザのタブに表示されるアイコンです。
└── src/ # ✨メインの開発フォルダ。コードのほとんどはここに書きます✨
├── main.js # Vueアプリケーションを初期化し、起動する起点となるファイルです。
├── App.vue # 全てのページの親となる、最も外側のコンポーネントです。
├── api/ # バックエンドとのAPI通信に関するコードを格納します。
│ ├── client.ts # 実際にAPIを叩く関数
│ └── mock.ts # バックエンド開発を待つためのダミーデータ
├── assets/ # CSSや画像など、ビルド時に最適化されるアセットファイルを置きます。
│ └── main.css # アプリケーション全体に適用されるグローバルなスタイルを記述します。
├── components/ # 再利用可能なUI部品(コンポーネント)を置くフォルダです。
│ ├── layout/ # ヘッダー、フッター、サイドバーなど、ページの骨格となるレイアウト部品。
│ │ └── TheHeader.vue
│ └── note/ # ノート機能に特化した部品。
│ ├── NoteCard.vue
│ └── NoteEditor.vue
├── router/ # ページのURLと表示するコンポーネントを紐付ける設定(ルーティング)を管理します。
│ └── index.js # Vue Routerの設定ファイルです。
├── stores/ # アプリケーション全体で共有するデータ(状態)を管理するPiniaストアを置きます。
│ └── notes.js # ノートに関するデータを管理するストアの例です。
└── views/ # 各ページそのものを表すコンポーネントを置きます。「ページコンポーネント」とも呼ばれます。
├── HomeView.vue # トップページ (例: /notes)
└── NoteDetailView.vue # ノート詳細ページ (例: /notes/1)
├── .eslintrc.cjs # ESLint (コード静的解析ツール) の設定ファイルです。
├── .gitignore # Gitのバージョン管理から除外するファイルやフォルダを指定します。
├── index.html # アプリケーションがブラウザで読み込まれる際の起点となるHTMLファイルです。
├── package.json # プロジェクト名、バージョン、依存ライブラリなどの情報が書かれています。
├── package-lock.json # 依存ライブラリのバージョンを固定し、環境差異をなくすためのファイルです。
├── README.md # このファイル。プロジェクトの全体像や開発手順を記します。
├── tsconfig.json # TypeScriptのコンパイラ設定です。
└── vite.config.ts # ビルドツールViteの設定ファイルです。パスのエイリアスなどを設定できます。
package.jsonに書かれている便利なコマンドです。
npm run dev: 開発サーバーを起動します。（一番よく使う）npm run build: 最終的に本番環境にデプロイするための完成品ファイルを作成します。npm run preview:buildで作成した完成品を、ローカルで確認できます。npm run lint: ESLintを実行して、コードに問題がないかチェックします。
わからないこと、困ったことがあったら、一人で悩まずに、すぐにチームに相談してください。特に @Pina641 はそのためにいます！