画像をクリックするとロードマップに移動できます。
> ロードマップリンク:https://link.onebitefe.com/r/5cdagw
シリーズ講座リンク
> 一口サイズで学ぶReact:https://inf.run/v3XAj
> 一口サイズで学ぶTypeScript: https://inf.run/FpLm4
> 一口サイズで学ぶNext: https://inf.run/v3XAj
AI時代においてもフロントエンドで避けられない主流のTypeScript、
今こそしっかりと習得する時が来ました!😎
🧐 何度学んでも混乱しがちな
TypeScript、今こそしっかり学びましょう
今や避けては通れない主流となった「TypeScript(Typescript)」!
原理をきちんと理解しないまま文法だけを大まかに学んだのであれば
AIが生成したTypeScriptコードさえも適切に扱えません。
TypeScriptを本当にしっかり理解できていますか?
以下の質問に十分答えられるか確認してみましょう。
- TypeScriptでいう'型'とは何ですか?
- 異なる型同士の互換性は、どのような基準で決まるのでしょうか?
- デフォルトで提供される型(any、unknown、neverなど)の動作原理を詳しく説明できますか?
この講義は、AIが教えてくれる程度の文法の羅列にとどまりません。
文法だけでなく、TypeScriptがなぜそのように動作するのかをとてもわかりやすく、楽しく学びます。
講義が終わったら!
皆さんはもう、AIが書いたコードの型エラーもどんどん見つけ出せる
本物のTypeScriptの魔法使いになっていることでしょう。🧙🏻♀️
下の図のような講義と一緒にご覧いただけるハンドブックもご用意しています!
難しく複雑な概念も
簡単かつ楽しく見ていきます
TypeScriptは数学の'集合論'を基盤として動作する言語であるため、
言葉や文章だけでは原理を確実に理解するのが難しい場合があります。
そこで、さまざまな視覚資料や事例をご用意しました。
どれほど難しく複雑な概念でも、わかりやすく楽しく見ていきます。
このような方におすすめです 🙆♀️
JavaScriptの学習を終えて、TypeScriptを初めて学ぼうとしている方
TypeScriptを学んだことはあるものの、まだ分からないことが多い方
TypeScriptの正確な概念と動作原理を理解したい方
React(React)とTypeScriptを一緒に使ってみたい方
講義の特徴 ✨
🎨
いつでもどこでも
ビジュアル資料にこだわるタイプ
すっきりしていて、きれいで、素敵なビジュアル資料で学習するとより集中しやすく、記憶にも長く残ると信じています。
すべて自分で作成した画像なので、キャプチャして学習ブログの投稿にお使いいただいても大丈夫です。😃
🖌️
タブレットでの板書とともに
視覚的に学習
より簡単かつスピーディーに理解するには、やはり視覚的な資料が一番ですよね?そこで、この講義の撮影のために板書用タブレットを購入しました。板書を交えながら、TypeScriptを徹底的に掘り下げていきます。
🗄️
実習コードはセクションごとに
きれいに整理
せっかく書いた演習コードを適当に保管するのはもったいないですよね?いつでも振り返れるよう、コードをセクションごとにきちんと分けて保管できるよう工夫しました。
📗
いつでも復習できる
無料の講義テキスト
復習のために講義を最初から受講し直す手間を省けるよう、無料の講義資料をご用意しています。
🌏
講義の後も一緒に!
受講生専用コミュニティ
学習に終わりはありません。
この講義が終わっても受講生専用コミュニティに集まり、
互いに知識やさまざまな情報を共有しながら成長しましょう 🌱
[0 セクション 2 チャプター:受講生コミュニティに参加する]で
受講生専用オープンチャットのリンクとパスワードをご確認ください
学習内容 📚
📌 SECTION 1. TypeScript概論
技術をよく理解するには、それがどのような背景から生まれたのかを知る必要があります。そこで、SECTION 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の学習資料を入れてあります。 また、文法が難しい場合は受講生コミュニティで質問して、助けを得ることもできます。
JavaScript学習資料(『ひと口サイズで味わうReact』からの抜粋)
Q. Node.jsバックエンド開発者です。フロントエンド開発者ではないのですが、受講してもよいでしょうか?
はい。最後のボーナスセクション(React + TypeScript)を除き、すべて受講していただけます。
Q. 講義のPPTや画面をキャプチャしてブログに掲載してもよいですか?
はい!ご自由にお使いいただいて構いません。ただし、販売だけはご遠慮ください。🥲もう一つお願いがあるのですが、私の講義へのリンクを出典として記載していただけると幸いです。
受講前の参考事項 📢
前提知識
- JavaScript ES6バージョン以上(アロー関数など)を使用した経験が必要です。
- ボーナスセクションを受講するには、前の講座(ひとくちサイズで学ぶReact)程度のReactに関する事前知識が必要です。
add_shortcode('course','328340','list')
注意事項
- すべての実習コードを実際に手を動かして書き写しながら学習することをおすすめします。
- 講義で学んだ内容を個人ブログに別途まとめることを強くおすすめします。
- 質問があれば、遠慮せずに質問掲示板や受講生コミュニティに投稿してください。
知識共有者の紹介 ✒️
何事も簡単で楽しく説明する方法があると信じる教育者である。リリースからわずか1年で、InflearnとUdemy合わせて約5,000人の受講生を輩出した「一口サイズに切って食べるReact」講座を制作した。開発者を目指す人々を支援するため、開発者向け知識共有サイトDEVSTUを立ち上げ、約2年間運営している。2022年からは、Reactを学ぶ人々のためのオープンチャットも開設して運営している。また、ジュニア開発者向けサービスを提供するスタートアップで、2年間CTOを務めた。
経歴
ポートフォリオ/個人動画