一口サイズで学ぶReact.js：基礎から実践まで
winterlood
概念からユニークなプロジェクトまで一緒に扱いながら、JavaScriptとReactをこの講座で一度に終わらせましょう。 学習は短く、応用は長く、17時間分のAll-in-one講座!
Basic
JavaScript, React, Node.js
一口サイズで学ぶTypeScript（タイプスクリプト）
文法を超えて動作原理と概念の理解まで 学んでも学んでも混乱するTypeScript 今こそしっかり学びましょう！あなたをTypeScriptの魔法使い🧙🏻♀️にします。
TypeScript
TypeScript
学習した受講者のレビュー
学習した受講者のレビュー
5.0
5.0
wjdgksak
80% 受講後に作成
キャプテン版教様タイプスクリプト、ゼロ小型タイプスクリプト、これまでみんな聞いた人としてこれがちゃんですね 講義のクオリティーも値段も安いです。恵者です。 特にジェネリック部分がわかりやすくなってよかったです！
5.0
eko09
89% 受講後に作成
とても良い講義でした。 個人的に講義3弾でreact + TSでプロジェクトを作る方法のような講義が出てきて 1,2編で勉強したことを総合的に適用させる講義は見たいです！ ㅎㅎ
5.0
MJ JI
17% 受講後に作成
老人のオーストラリアを強奪した講義！ 君は真のリアクト講義の先頭!! 二人が食べる 一つが死んでも知らない講義！ 一口サイズに切って食べるリアクトイ・ジョンファン！
受講後に得られること
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
一口サイズに切って食べるReact：https://inf.run/v3XAj> 一口サイズに切って食べるTypeScript：https://inf.run/FpLm4> 一口サイズに切って食べるNext：https://inf.run/v3XAj
フロントエンドの避けられない大勢TypeScript、
今こそしっかり征服する時が来ました! 😎
インフコン2023 "TypeScriptはなぜそうなのか?" 発表者の講義です。
🧐 学んでも学んでも混乱する
TypeScript、今こそしっかり学びましょう
もはや避けられないトレンドとなった「TypeScript(タイプスクリプト)」!
原理をきちんと理解せずに文法だけざっくり学んだのであれば
TypeScriptが提供する強力な機能を適切に活用することは難しいです。
あなたはTypeScriptを本当によく理解していますか?
以下の質問に十分答えられるか確認してみてください。
- TypeScriptにおける「型」とは何ですか？
- 異なる型同士の互換性はどのような基準で決定されますか？
- 基本的に提供される型(any、unknown、neverなど)の動作原理を詳しく説明できますか?
この講義は単純なTypeScriptの文法だけを羅列した講義ではありません。
文法を含め、TypeScriptがなぜそのように動作するのか、そしてどのように設計されているのかを
とても簡単で楽しく学びます。
講義が終わる頃には、皆さんはTypeScriptの魔法使いになっているでしょう。🧙🏻♀️
下の図のような講義と一緒にご覧いただけるハンドブックも提供されます!
難しくて複雑な概念も
簡単で楽しく学んでいきます
TypeScriptは数学の「集合論」をベースに動作する言語なので、
言葉や文章だけでは原理をしっかり理解するのが難しいかもしれません。
そこで、様々な視覚資料や事例を用意しました。
どんなに難しくて複雑な概念でも、簡単で楽しく学んでいきます。
| 
|
確かに理解しにくいかもしれません。そこで、様々な視覚資料と事例を準備しました。どんなに難しくて複雑な概念でも、簡単で楽しく見ていきます。
こんな方におすすめです 🙆♀️
JavaScriptの学習を終えて、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を使用する
このまま終わるのは残念ですよね？そこでボーナスセクションとして用意しました。とてもシンプルなToDoリストを一緒に作りながら、ReactプロジェクトにTypeScriptを適用する方法について見ていきます。
想定質問 Q&A 💬
Q. JavaScriptは知っているのですが、よく分かりません。受講しても大丈夫でしょうか？
はい。全く知らないレベルでなければ受講していただいて大丈夫です。途中でJavaScriptの事前知識が必要になるたびに、講義ノートに私が直接制作したJavaScriptの学習資料を入れておきました。また、文法が難しい場合は受講生コミュニティで質問してサポートを受けることもできます。
Q. Node.jsのバックエンド開発者です。フロントエンド開発者ではないのですが、受講しても大丈夫でしょうか?
はい。最後のボーナスセクション(React + TypeScript)を除いて、すべて受講していただけます。
Q. 講義のPPTや画面をキャプチャしてブログに載せてもいいですか?
はい!自由にご利用いただいて構いません。販売だけはご遠慮ください。🥲 加えて一つお願いがあるとすれば、私の講義リンクを出典として記載していただけると幸いです。
受講前の参考事項 📢
事前知識
- JavaScript ES6バージョン以上（アロー関数など）を使用した経験が必要です。
- ボーナスセクションを受講するには、以前の講義(一口サイズに切って食べるReact)程度のReact事前知識が必要です。
注意事項
- すべての実習コードを直接書きながら学習することをお勧めします。
- 講義で学んだ内容を個人ブログに別途まとめることを強くお勧めします。
- 質問があれば遠慮なく質問掲示板や受講生コミュニティに投稿してください。
知識共有者紹介 ✒️
どんなことでも簡単で面白く説明する方法があると信じる教育者である。リリース1年で、インフラーン、Udemyで約5,000名の受講生を輩出した「一口サイズに切って食べるリアクト」講義を作った。開発者を志望する人々を助けるために、開発者知識共有サイトDEVSTUを作り、約2年間運営している。2022年からはリアクトを勉強する人々のためのオープンチャットルームも開設して運営している。また、ジュニア開発者のためのサービススタートアップのCTOとして2年間勤務した。
経歴事項
- インフコン2023登壇者 - "TypeScriptはなぜそうなのか?"
- 一口サイズに切り分けて食べる書籍出版(インサイト)
- 2022 インフラーンアワード受賞(널리 알렸상)
- 一口サイズに切り分けて学ぶReact 講座出版
- 前) 22Hours CTO | FrontEnd Developer
- 大学生開発者知識共有コミュニティDEVSTU開発及び運営
ポートフォリオ/個人映像
こんな方に
おすすめです
学習対象は
誰でしょう？
TypeScriptを初めて始める方
TypeScriptを学んだことはあるが自信がない方
TypeScriptの原理を理解して使用したい方
フロントエンド開発者
Node.jsバックエンド開発者
前提知識、
必要でしょうか？
JavaScript（ES6）
ボーナスセクションを聞くにはReact.js
37,202
受講生
2,604
受講レビュー
1,600
回答
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
講座掲載日:
最終更新日:
受講レビュー
全体
611件
5.0
611件の受講レビュー
wjdgksak0677受講レビュー 14
∙
平均評価 4.9
- evelo0702
受講レビュー 13
∙
平均評価 3.1
- mamapai
受講レビュー 34
∙
平均評価 5.0
- javascriptgosu
受講レビュー 1
∙
平均評価 5.0
5
81% 受講後に作成リアクト講義に続き受講することになりましたが本当の大ヒットです👍👍👍 1.新しい概念ごとに様々な例を作って一緒に説明してください 2. 質問を早い時間内にわかりやすく答えてください 3. 一緒に提供されるハンドブックにすばやく見たり復習したりする - 特に講義に出てきた例をもう一度見てください👍 4. 本当に一口サイズに切って食べられるように小さく切っておいて、気軽に短くした二つずつ見ていいです！ 5.正確な辞書で、速い速度で教えてください！復習する時は倍速して聞いたのですがディクションが好きで何の問題もありませんでした！ 6. 本当によく構成された定石の基礎講義だと思います！ 私は先延ばしで先生が進んだチャレンジに参加して頑張りましたが、聞かれる方はぜひチャレンジも一緒に参加してください！
- q33as1836
受講レビュー 22
∙
平均評価 5.0
￥5,929
winterloodの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![[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)
![[改訂3版] Node.js教科書 - 基本からプロジェクト実習までCourse Thumbnail](https://cdn.inflearn.com/public/courses/330181/cover/47e0125e-75ad-4946-96d3-54bbc444a188/330181-eng.jpg?f=avif&w=420)