2 minutes
typescript/reactでgithubアカウントを使ったしりとりを作ってみた
お世話になっております。
しゃまとんです😊
いやー、春の陽気になってきましたね〜🌸 そんなこんなで、ずっと敬遠していた Web Frontend の知識の習得やっとくかーという感じで重い腰を上げました。 私の心の中にも春がやってきました。ついに雪解けしました。❄️
まぁ、まったく JavaScript とかに触ってこなかった訳ではないのですが隣の芝生をみると群雄割拠感があって、とりあえず触ってみるかーみたいな気持ちになれなかったんですよね。 最近は React をよく耳にする(している)ような気がして、これまずはやったら良さそうかなという感じがしてきました。 あと typescript が出てきて、型チェックだとか generics とか interface とか… 個人的に慣れ親しんだものを使って frontend の開発ができるようになっているというところもありました。
とりあえず座学 x ハンズオン的なことをしたいなーと思うと、今はなんでもあるんですね。 youtube でこちらのチャンネルの react 入門を見ていきました。
(ちなみにこれは react の入門なので、 javascript ですね) あと、 typescript 入門のコンテンツもあったので初手の部分と気になる箇所を抜粋して視聴しました。
ざっと雰囲気を把握したところで、なんか作ってみないとなーという状態になったのでお題を考えることに。
なんとなく通信して、コンテンツの再レンダリングが走るみたいなのがいいかな〜と思ったので、 Github の API を使って(通信して)、繰り返し情報取るようなもの(再レンダリング)を作ってみるかということで「Githubでしりとりしてみる」を題材にしました。
Github API を利用するライブラリもあるので手軽に通信処理を組み込めますね。
で、なんやかんや試行錯誤して作ったのがコレです。
(最初は npx create-react-app
してなくて途中でゴリッとやり直ししたりしました)
適当に username を設定して、検索数を設定、実行すると定期取得を行ってページが更新されます。 最初の username は一致する Github アカウントがあれば、取得・表示されます。いなければ気にせず検索情報として利用されます。 しりとりっぽい挙動をとりあえず作るために後ろ3文字を取って、ユーザー検索するようにしました。
まだ、エラーハンドリングとか学び切れてないので、引き続きやっていければなーと思います😊
以上です〜👋
■ 参考
デザイン的なのは、こちらのリポジトリものを利用させていただきました。