一口サイズで学ぶTypeScript(TypeScript)
winterlood
文法を超えて動作原理と概念の理解まで、学んでも学んでも混乱するTypeScript。今、きちんと学んでみましょう!皆さんをTypeScriptウィザード🧙🏻♀️にします。
초급
TypeScript
概念からユニークなプロジェクトまで一緒に扱いながら、JavaScriptとReactをこの講義で一度に終わらせましょう。 学習は短く、応用は長く、17時間分のAll-in-one講義!
# 実際にデプロイされる感情日記プロジェクト開発
JavaScript、Node.js、Web動作方式 All-in-One
React クリーンなコード作成、パフォーマンス最適化テクニック
画像をクリックするとロードマップに移動できます。
> ロードマップリンク:https://link.onebitefe.com/r/3wokpi
シリーズ講義リンク
> 一口サイズに切って食べるReact :https://inf.run/v3XAj
> 一口サイズに切って食べるTypeScript : https://inf.run/FpLm4
> 一口サイズに切って食べるNext : https://inf.run/v3XAj
Reactは、一つの講座で完璧にマスターできます。
一口サイズに切り分けて学べるようサポートします。🔥
多くの受講生の皆様に愛していただいたおかげで、インサイト出版社と共に講義を書籍として出版することができました。
改めて、すべての受講生の皆様、関心を持ってくださった皆様に心より感謝申し上げます。
React.jsは、Node.js環境で動作するJavaScriptのライブラリです。
したがって、React.jsは結局JavaScriptをより効果的に活用できるようにサポートするツールに過ぎません。
そのため、JavaScriptとNode.jsを正しく理解していなければ、React.jsを適切に活用することはできません。
このコースはJavaScriptの基礎からNode.jsを経てReact.jsを学びます。
でも、ただ学ぶだけではつまらないですよね!合計3回のプロジェクトを通じてReact.jsを学びます。
このような過程の中で、皆さんはしっかりとした基礎力を備えたフロントエンド開発者へと生まれ変わることになるでしょう。
この講座は、React.jsの単純な使い方だけを教える講座ではありません。
React.jsを取り巻く様々なCS知識も一緒に扱い、合計3つのプロジェクト
カウンターアプリ、Todoリスト、感情日記帳を作りながら、プログラミング思考力も一緒に養うことができます。
React.jsを学ぶ前に、JavaScriptの基礎と応用概念を見ていきます。
データ型や演算子のような基本的な概念から、
配列メソッドや非同期処理のような応用的な内容も一緒に見ていきます。
もしJavaScriptをすでに知っていたとしても、復習として改めて見直すのに良いです。
React.jsはNode.jsをベースに動作する技術です。したがって、Node.jsを知らずにReact.jsを理解することはできません
セクション3では、Node.jsとは何か、なぜ誕生したのか、どのような機能を持っているのかを実習とともに学びます。
React.jsとは何か、他の技術と比較してどのような差別化要素を持っているのかを学び、既存の技術が持っていた限界点をどのように解決したのか詳しく見ていきます。この過程で、私たちはReact.jsについてより深く理解することになるでしょう。
新しいReact Appを生成し、ReactのComponent、State、Propsなどの基本的な機能について見ていきます。
実習とともにすべての基本機能を使ってみて、図資料とともに視覚的に完璧に理解します。
最初のReactプロジェクト「カウンターアプリ」を直接作ってみます。
シンプルですが、React.jsの動作原理と設計思想を垣間見ることができる良いプロジェクトです。

すべての人間が生まれて幼児期、青少年期、青年期、老年期を経て黄昏に至るように、すべてのReactコンポーネントも生まれ、変化し、消えていきます。このようなコンポーネントの生涯周期をライフサイクルと表現します。
コンポーネントのライフサイクルを理解し制御できるようになると、望むタイミングで望む動作を実行させることができるようになります。そのため、セクション7ではライフサイクルについて見ていき、実習とともにこれを制御する方法を学びます。
2つ目のReactプロジェクト「ToDoリストアプリ」を直接作ってみます。
このプロジェクトを実装しながら、データのCRUD(追加、照会、修正、削除)および検索機能など、
Reactで配列形式のデータを扱う様々な方法を見ていきます。

役割に応じたコードの分離は、常にソフトウェア開発の美徳です。
複雑な状態管理コードを分離できるように支援するuseReducerについて見ていき、
ToDoリストプロジェクトに直接適用して実習します
私たちのプロジェクトに不要な演算が存在するなら?思い切って削除すべきですよね!
無駄な演算を削除するReact Appの様々な最適化技法を見てみて
Todoリストプロジェクトに直接適用しながら実習します
より簡潔でよりクリーンに様々なコンポーネントにデータを供給するContextについて見ていき
Todoリストプロジェクトに直接適用しながら実習します
これまで学んだ概念を総動員して最終プロジェクト感情日記帳を直接作ってみます。
追加でブラウザのデータベースを使用し、プロジェクトをデプロイしてユーザーがアクセスできるようにします。
デモリンク:https://emotion-diary.winterlood.com/

Online Classesは終わりますが、私たちの学習は終わりません。
今後どのような方向性を持って進むべきか、お話しします。
どんなに複雑で難しい内容でも!
視覚資料とともに親切で分かりやすく説明するために絶えず努力しました。
すべて自分で作成した画像なので、キャプチャして学習ブログの投稿に利用していただいても構いません。😃
復習のために再度聞いている方や、お忙しい方は倍速で聞いてみてください!
最大2倍速まで発音がよく聞こえるように特に気を配りました😎
(下記の1.5倍速で再生される映像を一度聞いてみてください!)
苦労して作成した実習コードを適当に保管するのはもったいないですよね?
いつでも振り返れるように、コードをセクション別にきちんと分けて保管できるよう配慮しました。
コード保管庫リンク:https://github.com/winterlood/onebite-react-v2
受講生専用コミュニティに集まり、お互いに知識やニュースを共有しながら成長します。
Discordチャンネル参加:https://discord.gg/YDqhkH8XkNQ. この講座の受講対象者はどのような方ですか?
HTML、CSSについての理解がある方が聞くのに最適化された講義です。
ただし、講義の途中途中に説明が存在するため、内容の把握が完璧でなくても大丈夫です!
Q. これから始めようとしています。JavaScript、Node.jsはよく知らないのですが、受講しても大丈夫でしょうか?
はい、ようこそ!🙋♂️
本講義では、Reactを学習するのに必ず必要なJavaScriptの知識とNode.jsの知識までお教えします。
したがって、本講義一つでReactに必要な基礎知識をまず学習し、Reactまで学習することができます。
Q. 授業ではどのレベルまで扱われますか?
Reactが誕生した理由から基本的な使い方、実際のプロダクション開発のためのパフォーマンス最適化技法を扱います。
また、Vercelを利用して実際にデプロイし、Open Graph設定で仕上げることで
Webプロジェクトの最初から最後まで開発できるすべての知識を含んでいます。
学習対象は
誰でしょう?
Reactを初めて触れる入門者
JavaScriptとNode.jsはよく分からないけど!React.jsを学んでみたい人
オンライン講座完走チャレンジなどを通じて、多くの受講生と一緒に学習したい人
講座を完走した際に自慢できる成果物を作りたい人
HTML & CSSを一度でも書いた経験がある方(上手である必要はありません!)
前提知識、
必要でしょうか?
👋 HTML、CSSに関する非常に基礎的な知識
36,006
受講生
2,411
受講レビュー
1,542
回答
4.9
講座評価
13
講座
웹 프론트엔드 한 입 크기로 잘라먹어 볼까요?!
안녕하세요 🙇♂
저는 무엇이든 쉽고 재미있게 설명할 방법이 있다고 믿는 사람이자
세상에서 가장 따뜻한 개발자 커뮤니티를 만들고자 하는 사람입니다.
📚 도서
📹 강의
한 입 크기로 잘라먹는 Next.js
한 입 크기로 잘라먹는 타입스크립트
한 입 크기로 잘라먹는 리액트
全体
98件 ∙ (18時間 33分)
講座資料(こうぎしりょう):
7. 1.4) 変数と定数
11:52
8. 1.5) データ型
11:46
9. 1.6) 型変換
08:28
10. 1.7) 演算子 1
13:37
11. 1.8) 演算子 2
08:48
12. 1.9) 条件文
10:29
13. 1.10) 繰り返し文
08:01
14. 1.11) 関数
11:33
15. 1.12) 関数式とアロー関数
06:30
16. 1.13) コールバック関数
11:24
17. 1.14) スコープ
06:41
18. 1.15) オブジェクト 1
13:09
19. 1.16) オブジェクト 2
04:20
20. 1.17) 配列
04:12
22. 2.2) 段落評価
12:30
23. 2.3) 構造分解代入
07:40
31. 2.11) 同期と非同期
11:41
全体
1,189件
4.9
1,189件の受講レビュー
受講レビュー 27
∙
平均評価 4.7
5
I actually bought the lecture for a thousand won on April Fool's Day, just in case... like a lottery ticket... but I feel like I really won the lottery. I feel bad that I'm studying such a good lecture at almost a free price... The lecture is so kind and the examples are explained in a way that's easy to understand, so it's really great. Thank you so much, I love you... 😭😭
受講レビュー 3
∙
平均評価 5.0
受講レビュー 8
∙
平均評価 4.9
5
他サイトで英語で先にリアクトを受講しました。英語を100%理解していない状態で受講してみると、概念を誤って理解したり説明したりして理解できない問題がありました。それでインフラでリアクト講義を探し、より良く見えて聞くようになりました。講義はJavaScriptから再度教えていただき、JavaScriptまで勉強することができてよかったです。リアクトについても概念をよく教えてくれて勉強がたくさんなりました。ひとつ残念なことは、A->Cを説明する際、途中でA->B->C こうしてBまで説明していただいたら理解するのがずっと良かったような部分もいくつかありました。そんなことは講義質問答弁欄で他の方々も質問をたくさん残してくれました。こんな部分だけ補完になれば本当に100点講義のようです。
受講レビュー 5
∙
平均評価 5.0
5
まだ見ていませんが、複数のリアクト講義を購入してみた立場で、この講義がワントップです。 他の講義も熟練したJavaScript開発者の方々が作りました。しかし、問題があります。 熟練した方々は、自分の頭の中ですでにコードがどのように動作しているかについてのイメージが頭にある状況で講義をします。だから、おじさんのように話しながらコードを書いて講義をします。 しかし、初心者の立場では、一体何が起こるのか頭の中でまったく描かれていない状態で、コードだけに従うので、苦しい気持ちはもちろん、概念すらうまくいかないんです。 このレッスンの場合、コードの前にどのような機能を使うと、どのようなことが起こるのかをイメージとして先に解いて概念を説明し、その後にコードを見せると、あのやはりコードを見ながら頭の中でコードが動作するイメージが一緒に描かれます。 ほとんどの講師が開発者です。教育者/教育専攻者ではないので、このような効果的な教育方式に対するスタンダードなしであまりにも多くの講義が量産されていると感じますが、この講義は本当に最高ですね。 講義を見たこともありませんでしたが、すでにタイプスクリプトも購入しています。 クオリティがイ・ジョンドンデ講義値はまたあまりにも恵者です。コーヒーでももう一杯飲むと本も買いました。私のお金を与えて生きる講義に'ありがとう'という表現がおかしくてよく使わないのですが。 それでも、この講義は'非常にありがとう'。 可能であれば、Express.js、Next.Jsのレッスン、そしてTDDのレッスンも提供してください。
受講レビュー 2
∙
平均評価 5.0
期間限定セール、あと6日日で終了
¥716,237
29%
¥6,049
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!