はじめに
こんにちは！！ Watanabe Jin (@Sicut_study)です！
こちらの記事が嬉しいことに多くの方に見ていただきました。
そこでReactが多くの初心者の方に注目されているんだなということを実感させられました。
私の記事では何度も言っている通り
というのが大事になってきます。そこで 「Reactアプリ100本ノック」 というのに挑戦していこうかと思います。徐々に難易度を挙げていってどこまでお題を作りきれるかの腕試しでやっていただければと思います。
今回はReactというよりは、サーバーよりのことが多くなるかと思いますが選択肢が増えるであろうソケット通信について学びます
Reactアプリ100本ノックルール
- 主要なライブラリやフレームワークはReactである必要がありますが、その他のツールやライブラリ（例: Redux, Next.js, Styled Componentsなど）を組み合わせて使用することは自由
- TypeScriptを利用する
- 要件をみたせばデザインなどは自由
前回のお題
13. Chat
問題
簡単なリアルタイムのチャットツールを作ります
目的
LINEなどで利用されるソケット通信を使ったツールを作り、仕組みについて学びます
socket.ioの使い方を学ぶことで、選択肢が広がります
達成条件
- リアルタイムでチャットができること
- 入力フォームとボタンがある
- 送信を押すと、別のウィンドウで開いたアプリに送信内容が表示される
- ソケット通信にはSocket.ioを用いる
実際に解いてみた
利用技術
フロントエンド
- React
- TypeScript
- Vite
- tailwind
- socket.io-client
バックエンド
- express
- nodemon
- socket.io
解答時間 : 0.5時間
サーバーに関しては以下の動画をみて実装しました
ここまでのお題を解いてきた方ならフロント側は難しくないかと思います。
もう少し難易度をあげるならLINE風のUIにしてみるのもよいかもしれません
ソケット技術は色々幅が広がるので今回はサーバー側の実装が必要なお題にしてみました！
次のお題
Comig Soon...
おわりに
React100本ノックの記事を地道に上げていこうと思いますので、一緒に挑戦したい方は @Sicut_study をフォローいただけるととてもうれしく思います。
ここまで読んでいただけた方はいいねとストックよろしくお願いします。
@Sicut_study をフォローいただけるととてもうれしく思います。
今週もプログラミング頑張りましょう！
おすすめ記事
About Me
Webエンジニア転身して1年間本気で勉強
転職ドラフトで高額オファーを複数獲得
そこでの経験からアウトプットやマインドセットの発信に強みがある
エンジニアをやりながら、起業に挑戦中
アイデア作りやパブリックスピーキングを得意としてる
■ Twitter
https://twitter.com/Sicut_study
■ Instagram
https://www.instagram.com/himariajin
■ Youtube
https://www.youtube.com/channel/UCBFrGAJhPuuaoLwUIHBILsA
■ TikTok
https://www.tiktok.com/@sicut_study
■ プログラミングコーチングJISOU
https://projisou.jp
■ 登壇依頼などご依頼はこちらから
himaria.jin.watanabe@gmail.com
参考