Todoリストを作りながらTypescriptとReactを触ってみよう ~Typescript入門~
Вставка
- Опубліковано 5 вер 2024
- #入門 #Typescript #react #Javascript #webアプリ #todo #型
【Reactでツイッタークローンを自作してみたい方はこちら】
shincode.info/2...
＼ShinCode_Camp開校しました／
プログラミング講座＆副業・起業＆就職・転職が学べるプラットフォーム🚀
🎁月額2500円で全講座が見放題
🎁分からない箇所は質問し放題
🎁7日間無料キャンペーン実施中
🎁コミュニティ機能付き
🎁いつでも解約可能etc...
↓↓↓↓↓
code-s-school-...
-----------------------------------------------------------------------------------------------------------------------------
【この動画を視聴するメリット】
・Typescriptを理解できる
・ReactにおけるTypescriptの使い方が分かる
・ReactでTodoリストが作れる
・hooksのuseStateの使い方が分かる
【信頼性】
・Udemy講師
・講師レビュー評価94.6%
・Udemy受講生延べ300人突破
・Webアプリ/サイト開発数：150以上
★チャンネル登録はこちらから★
/ @programming_tutorial_...
★無料Slackコミュニティ開設しました★
t.co/HCsoL7hlft
プログラミングに関するご相談やお悩みはこちらで回答します。
★今回のソースコード★
github.com/Shi...
★運営者SNS★
Twitter： / shin_engineer
★この動画で使用している機材★
キーボード(Keychron K6 赤軸)：amzn.to/3F4zca5
マウス(Logicool G ロジクール G ゲーミングマウス)：amzn.to/3DZaaYB
マイク(サンワダイレクト USBマイク PCマイク)：amzn.to/30AVwJF
マイクスタンド(Luling Arts マイクスタンド マイクアーム スタンド)：
amzn.to/3se5onZ
※アフィリエイトリンクになります。
ShinさんのUdemy動画のほうで何度もmapやfilterの使い方についてレクチャーいただいていたので、
理解して実装することができました
こちらのチャンネルでReactのチュートリアルを始めさせていただいて、そこから更にTypescriptもやらせていただいています。
テンポよく大変聞きやすく、それでいて無駄がなく、さらにこの情報量に対して非常にコンパクトに動画がまとまっていて、大変分かりやすかったです。こんなに高品質な動画はなかなかないです！というかこのチャンネル自体全体的に非常に参考になります。
前提とするコンテキストが多くて初学者には難しいかもしれませんが、ある程度jsを使い慣れていてReactのチュートリアルをこなしている方なら（＋前回のtypescript入門動画を見ている方なら）問題なくついていける内容です。
Udemyの方も拝見しましたが、こちらの方では更にボリューミーな動画を手頃な価格で提供されていたので、こちらの方も検討したいと思います。
また、もし可能であれば、ESLint+Prettierの環境構築や適切な設定の解説動画をリクエストしたいです。
特に、React×Typescript環境で組み合わせたものが見てみたいです。
ReactとTypescriptで環境を混ぜるごとに設定が分からなくて苦労したので...
Shinさんの動画、めちゃめちゃ分かりやすいです！TypeScripe X Reactの動画もっと見たいです！体調に気をつけて、これからも頑張ってください。
いつもわかりやすい動画ありがとうございます。
Typescriptの勉強として見てみました。
ここで一つ報告です。
「フィルター関数を用いて、タスクの削除を行っていますが、それによってIdが重複します。」
①Todo.idを何かしらの仕組みでIdになるように設定する。
②削除する際に、削除したタスク以降で、idを1減らす。
といった改善が必要だと考えられます。
RUさん、コメントありがとうございます。
確かにその通りでございます。
idに関しては配列の長さで指定するとエラーの原因になるのでuuid等を設定してあげるといいかもしれません。とにかくidが重複しなければいいですね。
あとはuseStateの中のタスク配列をそのまま編集するという行為は破壊的な処理になるので、別で配列をコピーしてあげてそこを編集する、、といったディープコピーをする必要もあるかもしれません。そのあたりの詳細は別記事等で学んでみるとさらに学びが深まると思います。
UUIDをidに付与してidの重複を防ぐ場合は、こんな感じで書くとよいかもしれません
const handleSubmit = (e: React.FormEvent): void => {
e.preventDefault();
const newTodo: Todo = {
inputValue: inputValue,
id: crypto.randomUUID(), //
詰まることなく進めることができました。とてもわかりやすかったです。ありがとうございました!
ハマったので、書いときます。
作成ボタンをクリックしても、テキストボックスが空にならない件について
理由は、inputタグのvalueにinputValueがセットされていないためです。
handleChange(e)}
className="inputText"
value={inputValue}
/>
助かりました！
inputTextにid振って、
handleSubmitの最後にこれ追加して無理やり解決してた。。
流石です。
const inputElement = document.getElementById("inputTextのid") as HTMLInputElement;
inputElement.value = ""
現在Reactを勉強していますが、とても参考になります。
今まで色んな動画を見てきましたが、ダントツで一番分かりやすいです。
特にシンプルにまとめられているところが、こちらもアウトプットしやすく助かります。
コメントなんてした事なかったですが、素晴らしすぎてどうしてもお礼を書き込みたかった次第です。
Udemyの方でもReactのレクチャーをされているようなので受講してみます！
又、現在Reduxで苦戦しているので、今後の動画であげる候補にしていただけたら幸いです！
Chimohaさん、コメントありがとうございます。
とても励みになる言葉感謝です
UdemyではTypescriptではなくReact単体なのでお気をつけくださいませ。今後新しく講座を出すかもしれません。
Reduxですね。Reduxは状態管理で非常に難しい分野だと思います。それについても少し視野に入れさせて頂きます。
コメントありがとうございました
分かりやすく、楽しく学べました!!
チャンネル登録しました。
どうもチャンネル登録ありがとうございます！
これからも動画更新がんばりますね
いつも勉強になります！
typescriptって難しいけどこれみればだんだん学べそう！
あとgithubの使い方教えてほしいです
そうですね。
機会があればそれも動画化するかもしれません。
いつもためになる動画ありがとうございます！
1つだけ、App.cssに追加が必要かもと思いご共有です🙇
.App {
flex-direction: column; /* ←こちら追加で動画内と同じくタイトル・フォーム・リストが縦並びになるかと思います! */
}
ありがとうございます。一つ質問ですが、このままの実装だと自分の場合はinputのonchhangeイベントを発火させないと、そのまま文字が書かれてる状態で連続エンターを押すと空っぽの配列要素がどんどんインプットされてしまいました。これはインプットを一度リセットしたほうがよさそうでしょうか
自分用メモ
・handleEditが分からん
・type Todoはオリジナルの型作成みたいな感じ？
・...todosみたいにスプレッドにするのはオブジェクト型の時らしい。プリミティブ型ではいらないみたい。
・ほんとにhandleEditが分からん。
追記
追加したTodoが編集できないのでそれを出来るようにするためhandleEdit作ってる。
やり方としてはもっかいtodosをmapで展開して、if文のとこで今回編集したいものとtodosの中のものを一致させる。
それでtodosのもののinputValueを今回編集したいもののinputValueに代入することで内容を反映させる。
→でも、そもそもhandleEditが呼ばれるのがonChangeだから、編集しないと呼ばれないはず...。handleEditはそもそもTodoを編集できるようにするための関数なのに、編集しないと呼ばれないってことにならない？？
・return todoにする理由が分からん。
idを配列の長さで設定すると、削除後に何か追加した時、同じIDのものが存在する場合がありませんか?
uuid使えたらそれが一番良さそうですね
私なら関数の引数の型はtodo にしちゃうな。
todoを直接渡す方が簡単にかけるけど不要なものまで渡してしまうので
動画の書き方の方が好まれると思う
会社によっては今後の拡張性重視でtodoを渡す方が良いってところもあるし
Web系は専門外だからひょっとしたらtodoを渡す方が主流とかあるかもしれんけど
基本は必要なものだけを渡すのがよいとされる