Closed psmuler closed 1 year ago
Reactアプリケーションを作成し、Firebaseと統合する手順は以下の通りです。
まず、新しいReactアプリケーションを作成します。コマンドラインで次のコマンドを実行してください。
npx create-react-app task-manager
これにより、新しいReactアプリケーションがtask-manager
ディレクトリに作成されます。
次に、Firebaseをプロジェクトに追加します。Firebaseコンソールで新しいプロジェクトを作成し、その後、以下のコマンドを実行して、Firebase CLIをインストールします。
npm install -g firebase-tools
その後、プロジェクトのルートディレクトリに移動し、firebase init
コマンドを実行して、Firebaseプロジェクトを初期化します。
cd task-manager
firebase init
プロンプトに従って、Firebaseプロジェクトを選択し、FirestoreやAuthenticationなどの機能を有効にします。
次に、Firebase SDKをReactアプリケーションにインストールします。
npm install firebase
Reactアプリケーションのsrc
フォルダ内にfirebase.js
ファイルを作成し、Firebaseの設定を記述します。Firebaseコンソールから取得したAPIキーなどの情報を使用します。
import firebase from 'firebase/app';
import 'firebase/firestore';
import 'firebase/auth';
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID",
};
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
const auth = firebase.auth();
export { db, auth };
これで、ReactアプリケーションでFirebaseのFirestoreやAuthenticationを使用できるようになります。Firebaseを使用してデータの読み書きやユーザー認証を行うために、Reactコンポーネントを作成および更新します。また、前の回答で提供したHTML、CSS、およびJavaScriptのコードを、適切なReactコンポーネントに変換し、Reactの状態管理やイベントハンドラを使用して動作を実装します。
最後に、Reactアプリケーションをビルドし、Firebaseにデプロイします。
npm run build
firebase deploy
これで、ReactアプリケーションがFirebaseにデプロイされ、FirebaseホスティングURLでアクセスできるようになります。
npm run build で作られるのがbuildであり、一方でfirebase initで設定したのがpublicレポジトリからのデプロイのため、以下のエラーが出てしまったようです
task-manager % firebase deploy
=== Deploying to 'task-manager-c5803'...
i deploying storage, functions, hosting
There was an issue deploying your functions. Verify that your project has a Google App Engine instance setup at https://console.cloud.google.com/appengine and try again. If this issue persists, please contact support.
Error: HTTP Error: 404, App does not exist.
Having trouble? Try firebase [command] --help
すみません、その問題を解決するには、次の手順に従ってください。
firebase.json
ファイルを開いて、hosting
のpublic
設定をbuild
に変更してください。また、rewrites
設定を追加して、すべてのリクエストがindex.html
にルーティングされるようにします。firebase.json
ファイルは次のようになります。{
"storage": {
"rules": "storage.rules"
},
"functions": {
"predeploy": "npm --prefix \"$RESOURCE_DIR\" run lint",
"source": "functions"
},
"hosting": {
"public": "build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
あなたが述べたエラーは、Google App Engineが設定されていないためにFirebase Functionsのデプロイに失敗したことを示しています。Firebase Functionsを使用しない場合、firebase.json
ファイルからfunctions
に関する設定を削除してください。Functionsを使用する場合は、プロジェクトにGoogle App Engineインスタンスを設定する必要があります。Google Cloud Console(https://console.cloud.google.com/appengine)でApp Engineを設定するか、またはFirebase ConsoleのFunctionsタブで設定することができます。
変更を保存したら、再度firebase deploy
コマンドを実行してReactアプリケーションをFirebaseにデプロイします。
firebase deploy
これで、デプロイプロセスが正常に完了し、FirebaseホスティングURLでアプリケーションにアクセスできるはずです。
firebaseのデプロイに成功しました。前の回答で提供したHTML、CSS、およびJavaScriptのコードを、適切なReactコンポーネントに変換し、Reactの状態管理やイベントハンドラを使用して動作を実装してください。
以下に、前回提供したHTML、CSS、およびJavaScriptのコードをReactコンポーネントに変換したものを示します。
まず、src
ディレクトリ内にcomponents
ディレクトリを作成し、その中にTaskTable.js
ファイルを作成します。
次に、TaskTable.js
ファイルに以下のコードを追加します。
import React, { useState } from 'react';
import './TaskTable.css';
const TaskTable = ({ tasks }) => {
const [draggedTask, setDraggedTask] = useState(null);
const onDragStart = (e, task) => {
e.dataTransfer.setData('text/plain', task);
setDraggedTask(task);
};
const onDragOver = (e) => {
e.preventDefault();
};
const onDrop = (e, i, j) => {
e.preventDefault();
const updatedTasks = [...tasks];
const index = updatedTasks[i][j].indexOf(draggedTask);
if (index !== -1) {
updatedTasks[i][j].splice(index, 1);
}
updatedTasks[i][j].push(draggedTask);
setDraggedTask(null);
};
const renderTasks = (i, j) => {
return tasks[i][j].map((task) => (
<span
key={task}
className="item"
draggable="true"
onDragStart={(e) => onDragStart(e, task)}
>
{task}
</span>
));
};
return (
<table className="task-table">
<tbody>
{tasks.map((row, i) => (
<tr key={i}>
{row.map((cell, j) => (
<td
key={j}
onDragOver={onDragOver}
onDrop={(e) => onDrop(e, i, j)}
>
{renderTasks(i, j)}
</td>
))}
</tr>
))}
</tbody>
</table>
);
};
export default TaskTable;
components
ディレクトリ内にTaskTable.css
ファイルを作成し、以下のスタイルを追加します。.task-table {
border-collapse: collapse;
width: 100%;
height: 100%;
background-color: #121212;
}
.task-table td {
width: 20%;
height: 20%;
padding: 8px;
border: none;
text-align: center;
vertical-align: middle;
}
.item {
display: inline-block;
padding: 4px;
margin: 2px;
border: 1px solid #444;
border-radius: 4px;
background-color: #222;
color: #ddd;
font-size: 14px;
}
App.js
ファイルを編集し、以下のコードに置き換えます。
import React from 'react';
import TaskTable from './components/TaskTable';
import './App.css';
const tasks = [
// この部分にJSONデータを変換した2次元配列を設定する
];
function App() {
return (
<div className="App">
<header
続けてください
すみません、途中で送信してしまいました。以下にApp.js
の続きを示します。
import React from 'react';
import TaskTable from './components/TaskTable';
import './App.css';
const tasks = [
// この部分にJSONデータを変換した2次元配列を設定する
];
function App() {
return (
<div className="App">
<header className="App-header">
<h1>Task Manager</h1>
</header>
<main className="App-main">
<TaskTable tasks={tasks} />
</main>
</div>
);
}
export default App;
App.css
ファイルを編集して、アプリケーションのスタイルを設定します。.App {
text-align: center;
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-header {
background-color: #282c34;
min-height: 15vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(15px + 5vmin);
color: white;
}
.App-main {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px;
}
これで、Reactコンポーネントに変換されたHTML、CSS、およびJavaScriptのコードが完成しました。tasks
配列に適切なJSONデータを変換した2次元配列を設定することで、アプリケーションが期待通りに動作するはずです。
tasks
配列に与えられたJSONデータから2次元配列へ変換する部分を実装してください
以下に、与えられたJSONデータから2次元配列へ変換するコードを示します。jsonToTasks
という関数を定義し、それをApp.js
で使用します。
src
ディレクトリ内にutils
ディレクトリを作成し、その中にjsonToTasks.js
ファイルを作成します。
次に、jsonToTasks.js
ファイルに以下のコードを追加します。
export const jsonToTasks = (jsonData) => {
const tasks = new Array(5).fill(null).map(() => new Array(5).fill(null).map(() => []));
jsonData.forEach((item) => {
const i = 5 - item.importance;
const j = item.urgency - 1;
tasks[i][j].push(item.name);
});
return tasks;
};
App.js
ファイルを編集し、以下のコードに置き換えます。import React from 'react';
import TaskTable from './components/TaskTable';
import { jsonToTasks } from './utils/jsonToTasks';
import './App.css';
// 与えられたJSONデータ
const jsonData = [
// JSONデータをここに配置する
];
// JSONデータを2次元配列に変換する
const tasks = jsonToTasks(jsonData);
function App() {
return (
<div className="App">
<header className="App-header">
<h1>Task Manager</h1>
</header>
<main className="App-main">
<TaskTable tasks={tasks} />
</main>
</div>
);
}
export default App;
これで、与えられたJSONデータを2次元配列に変換してtasks
配列に設定し、TaskTable
コンポーネントに渡すことができます。jsonData
変数に適切なJSONデータを設定することで、アプリケーションが期待通りに動作するはずです。
jsonデータは独立したファイルを読み込めるようにしましょう。
JSONデータを独立したファイルに格納し、それを読み込む方法を説明します。この例では、src
ディレクトリ内にdata
ディレクトリを作成し、その中にtasks.json
ファイルを作成します。
src
ディレクトリ内にdata
ディレクトリを作成します。
次に、data
ディレクトリ内にtasks.json
ファイルを作成し、以下のようにJSONデータを格納します。
[
{
"name": "タスク1",
"detail": "タスク1の詳細",
"urgency": 1,
"importance": 1,
"parent": null
},
{
"name": "タスク2",
"detail": "タスク2の詳細",
"urgency": 2,
"importance": 3,
"parent": null
}
// その他のタスクデータ
]
App.js
ファイルを編集し、以下のコードに置き換えます。import
文を使って、tasks.json
ファイルをインポートしています。import React from 'react';
import TaskTable from './components/TaskTable';
import { jsonToTasks } from './utils/jsonToTasks';
import jsonData from './data/tasks.json';
import './App.css';
// JSONデータを2次元配列に変換する
const tasks = jsonToTasks(jsonData);
function App() {
return (
<div className="App">
<header className="App-header">
<h1>Task Manager</h1>
</header>
<main className="App-main">
<TaskTable tasks={tasks} />
</main>
</div>
);
}
export default App;
これで、JSONデータが独立したファイルに格納され、App.js
でインポートされています。アプリケーションは期待通りに動作するはずです。
上のコードをreact web appに書き直してfirebaseに載せていきたいと思います。create react app から始めてください