Todoリストを作りながらTypescriptとReactを触ってみよう ~Typescript入門~

No video

Todoリストを作りながらTypescriptとReactを触ってみよう ~Typescript入門~

Рет қаралды 34,470

Күн бұрын

#入門 #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
※アフィリエイトリンクになります。

Пікірлер: 23

@RK-zs2tg 10 күн бұрын

Shinさんの動画、めちゃめちゃ分かりやすいです！TypeScripe X Reactの動画もっと見たいです！体調に気をつけて、これからも頑張ってください。

@nobnob8723 Жыл бұрын

ShinさんのUdemy動画のほうで何度もmapやfilterの使い方についてレクチャーいただいていたので、理解して実装することができました

@manhu623 2 жыл бұрын

いつもわかりやすい動画ありがとうございます。 Typescriptの勉強として見てみました。ここで一つ報告です。「フィルター関数を用いて、タスクの削除を行っていますが、それによってIdが重複します。」 ①Todo.idを何かしらの仕組みでIdになるように設定する。 ②削除する際に、削除したタスク以降で、idを1減らす。といった改善が必要だと考えられます。

@programming_tutorial_youtube 2 жыл бұрын

RUさん、コメントありがとうございます。確かにその通りでございます。 idに関しては配列の長さで指定するとエラーの原因になるのでuuid等を設定してあげるといいかもしれません。とにかくidが重複しなければいいですね。あとはuseStateの中のタスク配列をそのまま編集するという行為は破壊的な処理になるので、別で配列をコピーしてあげてそこを編集する、、といったディープコピーをする必要もあるかもしれません。そのあたりの詳細は別記事等で学んでみるとさらに学びが深まると思います。

@helloworld0808 11 ай бұрын

UUIDをidに付与してidの重複を防ぐ場合は、こんな感じで書くとよいかもしれません const handleSubmit = (e: React.FormEvent): void => { e.preventDefault(); const newTodo: Todo = { inputValue: inputValue, id: crypto.randomUUID(),　//

@roprim8969 Жыл бұрын

こちらのチャンネルでReactのチュートリアルを始めさせていただいて、そこから更にTypescriptもやらせていただいています。テンポよく大変聞きやすく、それでいて無駄がなく、さらにこの情報量に対して非常にコンパクトに動画がまとまっていて、大変分かりやすかったです。こんなに高品質な動画はなかなかないです！というかこのチャンネル自体全体的に非常に参考になります。前提とするコンテキストが多くて初学者には難しいかもしれませんが、ある程度jsを使い慣れていてReactのチュートリアルをこなしている方なら（＋前回のtypescript入門動画を見ている方なら）問題なくついていける内容です。 Udemyの方も拝見しましたが、こちらの方では更にボリューミーな動画を手頃な価格で提供されていたので、こちらの方も検討したいと思います。また、もし可能であれば、ESLint+Prettierの環境構築や適切な設定の解説動画をリクエストしたいです。特に、React×Typescript環境で組み合わせたものが見てみたいです。 ReactとTypescriptで環境を混ぜるごとに設定が分からなくて苦労したので...

@hunterhunterdesu Жыл бұрын

詰まることなく進めることができました。とてもわかりやすかったです。ありがとうございました!

@two-block2306 10 ай бұрын

分かりやすく、楽しく学べました!! チャンネル登録しました。

@programming_tutorial_youtube 10 ай бұрын

どうもチャンネル登録ありがとうございます！これからも動画更新がんばりますね

@chimoha3187 2 жыл бұрын

現在Reactを勉強していますが、とても参考になります。今まで色んな動画を見てきましたが、ダントツで一番分かりやすいです。特にシンプルにまとめられているところが、こちらもアウトプットしやすく助かります。コメントなんてした事なかったですが、素晴らしすぎてどうしてもお礼を書き込みたかった次第です。 Udemyの方でもReactのレクチャーをされているようなので受講してみます！又、現在Reduxで苦戦しているので、今後の動画であげる候補にしていただけたら幸いです！

@programming_tutorial_youtube 2 жыл бұрын

Chimohaさん、コメントありがとうございます。とても励みになる言葉感謝です UdemyではTypescriptではなくReact単体なのでお気をつけくださいませ。今後新しく講座を出すかもしれません。 Reduxですね。Reduxは状態管理で非常に難しい分野だと思います。それについても少し視野に入れさせて頂きます。コメントありがとうございました

@zinzin-ko3fu Жыл бұрын

ハマったので、書いときます。作成ボタンをクリックしても、テキストボックスが空にならない件について理由は、inputタグのvalueにinputValueがセットされていないためです。 handleChange(e)} className="inputText" value={inputValue} />

@two-block2306 10 ай бұрын

助かりました！ inputTextにid振って、 handleSubmitの最後にこれ追加して無理やり解決してた。。流石です。 const inputElement = document.getElementById("inputTextのid") as HTMLInputElement; inputElement.value = ""

@hasbullaBJJ Жыл бұрын

いつも勉強になります！

@python3343 2 жыл бұрын

typescriptって難しいけどこれみればだんだん学べそう！あとgithubの使い方教えてほしいです

@programming_tutorial_youtube 2 жыл бұрын

そうですね。機会があればそれも動画化するかもしれません。

@improveskills 9 ай бұрын

いつもためになる動画ありがとうございます！ 1つだけ、App.cssに追加が必要かもと思いご共有です🙇 .App { flex-direction: column; /* ←こちら追加で動画内と同じくタイトル・フォーム・リストが縦並びになるかと思います! */ }

@thurendous Жыл бұрын

ありがとうございます。一つ質問ですが、このままの実装だと自分の場合はinputのonchhangeイベントを発火させないと、そのまま文字が書かれてる状態で連続エンターを押すと空っぽの配列要素がどんどんインプットされてしまいました。これはインプットを一度リセットしたほうがよさそうでしょうか

@animelife5166 Жыл бұрын

自分用メモ・handleEditが分からん・type Todoはオリジナルの型作成みたいな感じ？・...todosみたいにスプレッドにするのはオブジェクト型の時らしい。プリミティブ型ではいらないみたい。・ほんとにhandleEditが分からん。追記追加したTodoが編集できないのでそれを出来るようにするためhandleEdit作ってる。やり方としてはもっかいtodosをmapで展開して、if文のとこで今回編集したいものとtodosの中のものを一致させる。それでtodosのもののinputValueを今回編集したいもののinputValueに代入することで内容を反映させる。 →でも、そもそもhandleEditが呼ばれるのがonChangeだから、編集しないと呼ばれないはず...。handleEditはそもそもTodoを編集できるようにするための関数なのに、編集しないと呼ばれないってことにならない？？・return todoにする理由が分からん。