フルスタック奮闘記

やっと担当していた案件が落ち着いてきたので、ブログの再開です。
GCPでRAGを組むにあたって、フロントも一緒に実装したいなーという欲が出てきたので、しばらくReact回りも含めたお勉強

とりあえず流れとしてはこんな感じを想定。

①コードを綺麗にすることはあまり考えずまずは作る
②backendをpythonにしてみる
③リファクタリング（reduxとか部品化とか）
④ディレクトリの最適化について考える
⑤GCPにデプロイする形に修正する。

⑤以外は、firebaseを使って実装を進めていこうと思います。
udemyで勉強をしたので、超簡易的にudemyを仮想的に作っていく、という題材で進めます。

フロントはド初心者なので、勉強という意味を込め、細かいところや詰まったところはなるべく残しておく予定。

では、スタート

基礎的なところから

まずはViteを使ってプロジェクトを作成。

npm create vite@latest

npm run devコマンドで開発したアプリをローカルで実行することが出来る。
ブラウザで表示されているページは、npm createコマンドで作成された、index.htmlとなる。

このソースを見ると、main.tsxを参照している。

  <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>

main.tsxはというと、さらにApp.tsxを参照している。

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

App.tsxの下のコードはindex.htmlの'root'要素を<App />コンポーネントに置き換えるよ、というDOMの操作を意味している。

ReactDOM.createRoot(document.getElementById('root')!)

rootの置き換えは１プロジェクト１つらしいので、npm createコマンドではこのようなリソースの作られ方をしているのだろう。
というわけで、実際のフロント部分を作るにあたっては、App.tsxをいじっていくことになる。

余談①
<React.StrictMode>は、開発モード（react run dev）だと２回レンダリングされる。これによって状態の誤りなどを検知しやすくしてくれる。（恩恵はまだ感じたことがないので、そういうものと理解。）
これは本番環境(npm run build)では１回レンダリングされるだけになる。

余談②
npm run devやnpm run buildとはなんだろうか？
package.jsonの中身を見てみる。

 "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"

npm run devを実行するとviteコマンドが実行される。
npm run buildを実行すると tscとvite buildが実行されることになる。

tscコマンドはtypescriptをjavascriptファイルにトランスパイルするコマンドで、具体的な動きとしてはtsconfig.jsonに書くことになる。
（一度javascriptにしないとhtmlが認識してくれない。）

とりあえず一通りにお作法として初心者なりに理解したことを記載