一口サイズで学ぶReact.js：基礎から実践まで
winterlood
概念からユニークなプロジェクトまで一緒に扱いながら、JavaScriptとReactをこの講義で一度に終わらせましょう。 学習は短く、応用は長く、17時間分のAll-in-one講義！
Basic
JavaScript, React, Node.js
BEST
一口サイズで学ぶTypeScript(TypeScript)
文法を超えて動作原理と概念の理解まで、学んでも学んでも混乱するTypeScript。今、きちんと学んでみましょう！皆さんをTypeScriptウィザード🧙🏻♀️にします。
学習した受講者のレビュー
受講後に得られること
タイプスクリプト
TypeScriptの必要性と特徴
型システムについての深い理解
型を集合として理解する
ReactとTypeScriptを使う
画像をクリックするとロードマップに移動できます。
> ロードマップリンク:https://link.onebitefe.com/r/5cdagw
シリーズ講義リンク
> 一口サイズに切って食べるReact :https://inf.run/v3XAj
> 一口サイズに切って食べるTypeScript : https://inf.run/FpLm4
> 一口サイズに切って食べるNext : https://inf.run/v3XAj
フロントエンドの避けられないトレンド、TypeScript、
今こそしっかりマスターする時が来ました! 😎
Infcon 2023 "TypeScriptはなぜそうなのか?" 発表者の講義です。
🧐 学んでも学んでも混乱する
TypeScript、今こそしっかり学びましょう
もはや避けられないトレンドとなった「TypeScript」!
原理をしっかり理解せずに文法だけ適当に学んだなら
TypeScriptが提供する強力な機能を適切に活用することは難しいです。
皆さんはTypeScriptを本当によく理解していますか?
以下の質問に十分答えられるか確認してみてください。
- タイプスクリプトで言う「型」とは何ですか？
- 異なる型間の互換性はどのような基準で決定されますか?
- TypeScriptが基本的に提供する型（any、unknown、never など）の動作原理について詳しく説明できますか？
この講義は単純なTypeScriptの文法だけを並べた講義ではありません。
文法を含め、TypeScriptがなぜそのように動作するのか、そしてどのように設計されているのか
とても簡単で楽しく学んでいきます。
講義が終わる頃には、皆さんはTypeScriptの魔法使いになっているでしょう。🧙🏻♀️
下の図のような講義と一緒にご覧いただけるハンドブックも提供されます!
難しくて複雑な概念も
簡単で楽しく学んでいきます
TypeScriptは数学の「集合論」を基盤として動作する言語であるため、
言葉や文章だけでは原理をしっかり理解するのが難しいかもしれません。
そこで、様々な視覚資料と事例を準備しました。
どんなに難しく複雑な概念でも、簡単で楽しく見ていきます。
| 
|
こんな方におすすめです 🙆♀️
JavaScriptの学習を終えて、TypeScriptを初めて学ぼうとしている方
TypeScriptを学んだことはあるけれど、まだ混乱する点が多い方
正確なTypeScriptの概念と動作原理を理解したい方
リアクト(React)とTypeScriptを一緒に使ってみたい方
講座の特徴 ✨
🎨
いつでもどこでも
ビジュアル資料に本気な方
きれいで、美しく、素敵なビジュアル資料で学習すると、集中力も高まり、記憶にも長く残ると信じています。
すべて自作の画像なので、キャプチャして学習ブログの投稿に使っていただいても構いません。😃
| 
|
| 
|
🖌️
タブレット板書と一緒に
視覚的に学習
より簡単で速く理解するには、やはり視覚的な資料が最高ですよね?そのため、この講義の撮影のために板書用タブレットを購入しました。板書と共にTypeScriptをしっかり掘り下げていきます。
🗄️
実習コードはセクションごとに
きれいに整理
苦労して作成した実習コードを適当に保管するのはもったいないですよね?いつでも振り返れるように、コードをセクション別にきちんと分けて保管できるよう配慮しました。
📗
いつでも復習できる
無料講義教材
復習のために講義を最初から聞く手間を省くため、無料講義資料を提供します。
🌏
講義の後も一緒に!
受講生専用コミュニティ
学習に終わりはありません。
この講義が終わっても受講生専用コミュニティに集まって
お互いに知識と様々なニュースを共有しながら成長しましょう🌱
[0セクション2チャプター：受講生コミュニティに参加する]で
受講生専用オープンチャットのリンクとパスワードを確認してください
学習内容 📚
| 
|
| 
|
📌 SECTION 1. TypeScript概論
技術をよく理解するには、それがどのような背景で誕生したのかを知る必要があります。したがって1セクションでは、TypeScriptの誕生背景を見ながら、TypeScriptが解決しようとした問題は何か、どのような特徴を持つのかを詳しく見ていきます。
| 
|
| 
|
📌 SECTION 2~3. TypeScript基礎固め
最も基本的なTypeScriptの文法を見ていきます。同時に、TypeScriptが言う型とは正確に何なのか、そして型同士がどのような関係を結び、どのように動作するのかを見ていきます。
📌 SECTION 4~6. TypeScript文法を見てみる
関数型定義、関数オーバーロード、インターフェース、クラスなど、TypeScriptの様々な機能と文法を見ていきます。
📌 SECTION 7~9. 魔法使いのように型を操る
TypeScriptの最もユニークで強力な機能である型操作機能について見ていきます。ジェネリック、インデックスアクセス型、マップ型、Keyof演算子、条件付き型など、非常に多様なTypeScriptの型操作構文について学びます。
📌 SECTION 10. ユーティリティタイプを利用する
TypeScriptが基本的に提供する様々なユーティリティタイプについて見ていきます。また、見てきたユーティリティタイプを今まで学んだ知識を使って直接実装してみます。
📌 SECTION 11. (Bonus +) ReactでTypeScriptを使用する
이대로 끝나면 아쉽죠? 그래서 보너스 섹션으로 준비했습니다. 아주 간단한 투두 리스트를 함께 만들어 보며 리액트 프로젝트에 타입스크립트를 적용하는 방법에 대해 살펴봅니다.
想定される質問 Q&A 💬
Q. JavaScriptは知っているけど、よく分かりません。受講しても大丈夫ですか?
はい。全く知らないレベルでなければ、受講していただいて大丈夫です。途中でJavaScriptの事前知識が必要になるたびに、講義ノートに私が直接制作したJavaScript学習資料を入れておきました。また、文法が難しい場合は、受講生コミュニティで質問してサポートを受けることもできます。
Q. Node.jsバックエンド開発者です。フロントエンド開発者ではないのですが、受講しても大丈夫ですか?
はい。最後のボーナスセクション（React + TypeScript）を除いて、すべて受講できます。
Q. 講義のPPTや画面をキャプチャしてブログに載せてもいいですか?
はい!自由にお使いいただいて大丈夫です。販売だけはご遠慮ください。🥲 追加でひとつお願いがあるとすれば、私の講義リンクを出典として記載していただけると嬉しいです。
受講前の注意事項 📢
事前知識
- JavaScript ES6バージョン以上（アロー関数など）を使用した経験が必要です。
- ボーナスセクションを受講するには、前回の講義(一口サイズに切って食べるReact)程度のReact事前知識が必要です。
注意事項
- すべての実習コードを直接書きながら学習することをお勧めします。
- 講義で学んだ内容を個人ブログに別途まとめることを強くお勧めします。
- 質問があれば遠慮なく質問掲示板や受講生コミュニティに投稿してください。
講師紹介 ✒️
何でも簡単で楽しく説明する方法があると信じる教育者である。リリース1年で Inflearn、Udemyで約5,000人の受講生を輩出した「一口サイズに切って食べるReact」講座を作った。開発者を目指す人々を助けるために開発者知識共有サイトDEVSTUを作り、約2年間運営している。2022年からはReactを勉強する人々のためのオープンチャットルームも開設して運営している。また、ジュニア開発者のためのサービススタートアップのCTOとして2年間勤務した。
経歴事項
- Infcon 2023 スピーカー - 「TypeScriptはなぜそうなのか？」
- 一口サイズに切って食べる書籍出版(インサイト)
- 2022 Inflearn アワード受賞(널리 알렸상)
- 一口サイズで学ぶReact 講座リリース
- 前) 22Hours CTO | FrontEnd Developer
- 大学生開発者知識共有コミュニティDEVSTU開発及び運営
ポートフォリオ/個人映像
こんな方に
おすすめです
学習対象は
誰でしょう？
タイプスクリプトを初めて始める方
TypeScriptを学んでみたけれど、自信がない方
タイプスクリプトの原理を理解し、使いこなしたい方
フロントエンド開発者
Node.js バックエンド開発者
前提知識、
必要でしょうか？
ジャバスクリプト(ES6)
ボーナスセクションを聞くには React.js
35,875
受講生
2,393
受講レビュー
1,540
回答
4.9
講座評価
13
講座
웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!
안녕하세요 🙇♂
저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자
세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.
📚 도서
📹 강의
한 입 크기로 잘라먹는 Next.js
한 입 크기로 잘라먹는 타입스크립트
한 입 크기로 잘라먹는 리액트
カリキュラム
全体
64件 ∙ (10時間 31分)
講座資料（こうぎしりょう）:
授業資料
11. 基本タイプ
06:31
12. プリミティブ型とリテラル型
10:32
13. 配列とタプル
11:38
14. オブジェクト
09:05
16. Enum タイプ
09:07
17. AnyとUnknown タイプ
06:59
18. Void と Never タイプ
06:47
19. TypeScriptを理解する
03:21
20. タイプは集合だ
07:41
22. オブジェクト型の互換性
12:54
23. 代数タイプ
15:04
24. 型推論
13:15
25. 型アサーション
16:32
26. 型の絞り込み
12:24
27. 非交差ユニオン型
24:19
講座掲載日:
最終更新日:
受講レビュー
全体
578件
5.0
578件の受講レビュー
wjdgksak0677受講レビュー 14
∙
平均評価 4.9
- evelo0702
受講レビュー 13
∙
平均評価 3.1
- mamapai
受講レビュー 33
∙
平均評価 5.0
- q33as1836
受講レビュー 22
∙
平均評価 5.0
- theeastsea
受講レビュー 2
∙
平均評価 4.5
期間限定セール
￥33,880
30%
￥6,077
winterloodの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
開発者のためのJavaScriptCourse Thumbnail](https://cdn.inflearn.com/public/files/courses/337877/cover/01jyvwkxfmyxtq5ny0e5fmwmqp?f=avif&w=420)
![[Code Factory] [初級] NestJS REST API バックエンド完全征服マスタークラス - NestJS CoreCourse Thumbnail](https://cdn.inflearn.com/public/courses/331985/cover/f0501069-2139-4112-aafa-a9b3a2932860/331985-eng.png?f=avif&w=420)
