報告者：G3A113佐藤桃香

活動内容：コード作成

報告者の活動内容：コード作成

次回の活動内容：コード作成

日誌担当：鈴木祥護
プロジェクト名：MiraBa

[本日の目標]

React を用いたアプリ構造への全面移行の準備として、既存コードの問題点の洗い出しと、
React 化に向けたフォルダ構成・コンポーネント化計画を明確化すること。

[活動内容]　[担当者の作業]

現行プロジェクト構造の調査と問題点の特定

• HTML / JS / CSS を直接読み込む旧構造と
  React コンポーネント構造が混在している点を確認。

• opp.js を React で呼び出せない問題や、静的 DOM と React DOM の衝突を整理。

• public フォルダ内のファイル構成（IMG, CSS, JS, JSX）が React 標準と異なっていたため、
  今後の移行に向けた再構成案を作成。

投稿フィード（Voices）処理の React 化準備

• 現行 opp.js の DOM 操作では React で動作しないため、
  投稿レンダリングを Voices.jsx に統合する方針を決定。

• 投稿画像 TK1〜4 の読み込みパス仕様を統一。

• public/IMG 内の画像が正常に認識されない問題を確認し、原因が “import 方式の不一致” であることを特定。

React プロジェクト（Vite）の構築計画策定

• React でアプリを安定稼働させるため、
  Vite を用いて新規プロジェクトを作成する。

• index.html から React を呼び出す方式（root 要素＋ index.jsx）で再構築する設計を作成。

• App.jsx 以下のコンポーネント分割案も作成し、ファイル配置の標準化方針を固めた。

[課題と解決の方向性]

1．静的 JS（opp.js）と React の競合

• 静的に DOM を生成する方式が React と衝突し表示されない。

• React 内部の state に投稿機能を完全移行することで解決予定。

2．画像パス・動画パスの認識不一致

• React 環境では IMG/xxxx の読み込み方法が通常の HTML と異なるため、
  public/IMG/... への統一と、Vite の参照ルールを採用することで解消する。

3．フォルダ階層の混在

• JSX と JS が同階層に混ざり、アプリの依存関係が複雑化していた。

• src / public に明確に分離し整理する工程を明日実行する。

 

[次回の作業]

1．Vite（React）環境の正式構築

• 新規 React プロジェクトを作成し、
  App.jsx / index.jsx / components フォルダを設置。

• 既存デザインを React へ移植する作業を開始。

2．投稿機能の React 完全移行

• Voices.jsx 内で map 処理を用いた投稿表示を実装。

• 写真付き投稿の画像パスを修正し、表示されない問題を解決する。

3．UI セクションの React 再構成

• HeroVideo（動画）

• CatchCopy（キャッチコピー1 & 2）

• Sidebar

• Header
  をコンポーネントとして再構築し、レイアウトの安定化を図る。

4．Firebase（Firestore）との接続準備

• 投稿データを Firestore に保存するため、
  fire.js の設定を React 構造へ移行する下準備を行う。

チームの活動内容
UI、グラフィックの作成
バックエンドの作成
DBの環境構築
DBの構築

投稿担当者の作業内容
UI、グラフィックの作成
TailWindについて学習

残タスク、次回の作業内容
UI、グラフィックの作成
バックエンドの作成
DBの構築

ずっと謎のエラーと格闘してました。鎌田君に聞いてもわからないといわれたでもう無理です。

ジャンケンが弱いものは何も得られない。