React+Express(Node.js)+TypeScriptでWeb版Twitterのクローンアプリを作った雑感
タグ：
JavaScript
React
Node.js
TypeScript
Reactの勉強を兼ねてWeb版Twitterのクローンアプリを作成しました。個人的な夏休みの宿題。
その引っかかったところのメモです。
Next.jsを使う方が簡単に作れると思いますがコンパクトに作りたかったので、生のReact（Create React App）を使います。
サーバー側は何でも良かったのですが、TypeScriptの勉強も兼ねてExpressです。
利用した技術
フロントエンド
- React
- React Hook Form
- axios
- Tailwind CSS
- Material UI
- Atomic Design
もう少し力が付いたらwebpackとBabelを直接触っていきたい。
バックエンド
- Node.js
- Express
- nodemon
- MySQL
- sequelize
共通
- TypeScript
- ESLint
- Prettier
- SSE(Server Sent Event)
SOP(Same Origin Polycy)に対応するため、react-scriptのプロキシ機能を使用し、expressのポートに合わせる
SOPは、同一オリジンでないサイトからjavascriptを読み込むことを防ぐための仕組み
react-scriptのプロキシを使用するとSSE(Server Sent Event)のレスポンスを受け取れない
tweetの更新にSSEを使うと、最新ツイートをリアルタイムで更新してくれて良いなと思ったので使ってみたら反応がない。
他のクライアントが更新した内容について、SSEの通信は成立していてイベントが返ってきているのにそのデータが反映されていない。 参考Reactのプロキシを通すとSSE (Server-sent events)のレスポンスを受け取れない
感想
バックエンド側もTypeScriptで書くためにESModulesでNode.jsを使っていたが、つらみが多くて便利性をあまり感じなかった・・・
ESModulesとCommonJSの互換がもう少し発展するまで、無理して触る必要がない気がする。
バックエンド側で静的型付け使いたいなら、素直にJavaかKotolinかGoとかで良いんじゃないかな？
僕は面白そうなのでRustを勉強します。
フロントエンド側では学びが多かった。TypeScriptにコンパイルして頂くために丁寧に型を定義していく過程で、 受け渡しするデータの形をしっかり設計できたと思う。