開発メモ

Jump to bottom

Suzukin edited this page Jan 8, 2024 · 20 revisions

導入時

FastAPI https://fastapi.tiangolo.com/ja/
Pydantic https://docs.pydantic.dev/latest/
SQLAlchemy https://www.sqlalchemy.org/
TypeScript+React手動導入 https://typescript-jp.gitbook.io/deep-dive/browser
React+Bootstrap https://react-bootstrap.netlify.app/docs/getting-started/introduction
webpack 5入門 https://ics.media/entry/12140/
webpack output https://qiita.com/suimenkathemove/items/7ea5f79b4c621ea51f1a
babelとは https://qiita.com/mzmz__02/items/e6fbe5e30cc3fd13788f
npxとは https://newsite-make.com/node-npx-npx-yarn/#npx
Mido https://mido.readthedocs.io/en/latest/index.html
Carla https://kx.studio/Applications:Carla

FastAPI

pythonのWebフレームワーク
starletteという別のフレームワークを継承しており機能が利用できる
平行処理と async/await

今回は、Pydanticというバリデーション用ライブラリでエンドポイントの引数を定義する。

React

Vue.jsと異なり、単方向データバインディング指向
- データ→画面への反映の実装だけでなく、画面の変更→データの変更のための実装が必要になる
公式のチュートリアルのほか、Qiitaの記事が入門しやすい
- useStateでコンポーネントの状態を管理する
- useEffectでデータの変更をフックできる
- useContextはPropで渡さなくても親子間でデータを共有できる

(参考)Reactを使うのかVueを使うのか

useEffectのテクニック

第二引数に空の配列を渡すとレンダー時のみ実行できる。

https://qiita.com/k-penguin-sato/items/9373d87c57da3b74a9e6

webpack

https://webpack.js.org/

バンドルツール。javascript,HTML,CSS,imageをそれぞれ単一のモジュールに包括（バンドル）することができる
バンドルすることでリクエストを減らせる
通常のscriptタグによる導入で起こるjsの変数の競合を回避できる
ビルド時間の短さ、成果物の容量の少なさが他のバンドルツールよりも抜きんでている

Babel

トランスパイラツール。最新のECMAScriptを下位のECMAScriptに変換する
ECMAScript2015以上のコードが動作しない環境(IE11)向けに、ECMAScript5に変換する

tips