一口サイズでかじり取るTypeScript (TypeScript)
winterlood
¥5,887
29%
¥4,156
初級 / TypeScript
5.0
(622)
文法を超えて動作原理と概念の理解まで、学んでも学んでも混乱しがちなTypeScriptを、今こそしっかり学びましょう!皆さんをTypeScriptの魔法使い🧙🏻♀️にお仕立てします。
初級
TypeScript
概念からユニークなプロジェクトまで一緒に扱いながら、JavaScriptとReactをこの講義で一度に終わらせましょう。 学習は短く、応用は長く、18時間のボリュームを誇るAll-in-one講義!
受講生 14,424名
難易度 初級
受講期間 無制限
学習した受講者のレビュー
5.0
23
私は実際にリニューアル前に受講申請してすでに一度頑張っていました。 それ以来、いろいろな状況で1~2年ほど勉強を手放している。 またリアクトを煮る必要性を感じて帰ってきました。 振り返ってみると今年の芽リニューアルになりましたよ! 昔も全体的に充実した構成だったと思います。 リニューアル版はより分かりやすくなりました より繊細にあれこれ補充してくれた感じがします。 普通こんなに全体的にリニューアルする場合には新しい講義でオープンする場合だけ見たのに 既存の受講生も継続してリニューアル版を見ることができるようにしていただきありがとうございます。 講義や受講生への本気が感じられ、各編ごとに感動しながら見ています。 最後の展開段階だけを残しています。 残りの3講義をよく見て、復習を頑張りながら 私のものでよく作ってみましょう。 本当に本当にありがとうございます。
5.0
지지지지지
今年中にReactを必ず修了したかったのですが...個人的な目標を達成できてとても嬉しいです!!!この講義を購入しようかまだ迷っている方が(まさか...)いらっしゃるかもしれないので、強くお勧めします...大学卒業を控えてフロントに興味を持ち、中途半端な初心者だった私は急いで講義を中断しましたが、とても難しくて何度も聴きました。その後、JavaScriptも知らないのにReactを聴くのは無理だと思い、隣のクラスのヒョビン先生のVanilla JavaScript講義を聴きながら、別途JSの本を購入し、基礎を身につけた状態でこの講義を聴き直したら...本当に理解がスッと入りました!!!!!(もちろん、ジョンファン先生の授業だけでも問題ありませんが、私はもっと念入りに基礎から掘り下げてみたいという欲求が生まれたので...)コードを理解できる日が本当に来るのだろうか...と思いましたが、そんな日が私にも来ました...もちろん、まだ超初心者で、講義で使われた前半の内容を忘れていたり、一人でコードを書くのは難しい部分も間違いなくありますが、このReact講義を聴きながら、全体的なWeb開発の感覚がつかめて、この講義を聴いた時間は後悔していません。何よりも、見やすい視覚的資料+コード+集中力を高めてくれる発音...この講義は絶対に買うべきです。(広告ではありません;)ジョンファン先生、ずっと教えてください...ありがとうございます!それでは、私はこれでおしまいにして、次のTypeScript講義に移ります!!!信頼できるジョンファン先生の講義。
5.0
서지현
本当に素晴らしい授業でした。人生で初めて、最後までやり遂げたオンライン授業です。😊😊 最後までやり遂げられた最大の理由は、授業の質が非常に良かったからです。 講師の発音もとても良く、何より授業の内容が非常に充実しています。 本当に必要な内容で構成されており、親切に説明してくださるので、それに従って実践するのが簡単でした。 基本CRUDの2セット(Todo、感情日記)を試してみましたが、概念も理解でき、今後の実務でも大いに役立つと思いました。 授業制作後、React Router V7のバージョンアップに関する授業アフターサービスも良かったです。 エラーが発生した場合は、コミュニティで検索すると、私と同じようにスペルミスなどの間違いを犯した他のユーザーが投稿した参考記事があるので、役に立ちました。 このように簡単に、わかりやすく説明するのは、講師としての素晴らしい資質だと思います。このようにしっかりとした授業を作ったのを見ると、開発も非常に上手いと思います。~ たくさんの授業を作ってください。私はバックエンド開発者ですが、年末に少し時間が空いたので、Reactを勉強してみようと思い、この授業を選びましたが、この授業を選んだ自分自身を褒めたいと思います。😊😊 講師の先生、幸せに暮らしてください。健康で、2025年も素晴らしい授業をお願いします。~
[JavaScript] 退屈しないようにスピーディーに!確かなJavaScriptコア知識の習得
[Node.js] JavaScriptを駆動するNode.jsの核心概念の習得
[React.js] React.jsの核心概念および使い方の習得
[CS知識] フロントエンド領域を超えたネットワーク、クラウドなどのCS知識
[プロジェクト] Vercelを通じてデプロイされる実践プロジェクト - 感情日記帳
[コミュニティ] 2,000人以上の受講生専用コミュニティへの参加
> 一口チャレンジ8期に申し込む(〜2月22日まで) : https://link.onebitefe.com/r/btok4i
画像をクリックするとロードマップに移動できます。
> ロードマップリンク : https://link.onebitefe.com/r/3wokpi
シリーズ講義リンク
> 一口サイズでかじりつくReact:https://inf.run/v3XAj
> 一口サイズでかじりつくTypeScript: https://inf.run/FpLm4
> 一口サイズでかじりつくNext.js: https://inf.run/v3XAj
AI時代でも結局はReact、一つの講義で完結できます。
一口サイズで食べやすく(理解しやすく)お手伝いします。 🔥
多くの受講生の皆様に愛していただいたおかげで、インサイト出版社と共に講義を本として出版することができました。
改めて、すべての受講生の皆様、そして関心を持ってくださった皆様に心より感謝申し上げます。
React.jsはNode.js環境で駆動するJavaScriptのライブラリです。
したがって、React.jsは結局のところJavaScriptをより上手く活用できるように助けてくれるツールに過ぎません。
AIがコードを代わりに書いてくれる時代になっても、これは変わりません。
JavaScriptとNode.jsを正しく理解していなければ、React.jsを使いこなすことはできません。
この講義では、JavaScriptの基礎からNode.jsを経てReact.jsを学びます。
ですが、ただ学ぶだけでは面白くないですよね! 計3回のプロジェクトを通じてReact.jsを学びます。
こうした過程の中で、皆さんはAIが作成したコードも迷いなく読み、修正できる、
基本のしっかりしたフロントエンドエンジニアへと生まれ変わることでしょう。
この講義はAIが教えるレベルの単純な使い方にとどまりません。
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/

講義は終わりますが、私たちの学習は終わりません。
これからどのような方向性を持って進んでいくべきかについてお話しします。
どんなに複雑で難しい内容であっても!
視覚資料とともに親切かつ分かりやすく説明するために、たゆまぬ努力を重ねました。
すべて自作の画像ですので、キャプチャして学習ブログの投稿に使用していただいても構いません。 😃
復習のために聞き直している場合や、お急ぎの場合は倍速で聞いてみてください!
最大2倍速まで発音がはっきりと聞き取れるよう、格別に気を配りました 😎
(下の1.5倍速で再生される動画を一度聞いてみてください!)
せっかく作成した実習コードを適当に保管してしまうのはもったいないですよね?
いつでも見返せるように、コードをセクションごとにしっかり分けて保管できるよう工夫しました。
コードリポジトリのリンク:https://github.com/winterlood/onebite-react-v2
受講生専用のコミュニティに集まり、お互いに知識や情報を共有しながら共に成長します。
디스코드 채널 참가 : https://discord.gg/YDqhkH8XkNQ. 講義の受講対象はどのようになりますか?
HTML、CSSについて理解がある方が受講するのに最適化された講義です。
ただし、講義の合間に説明があるため、内容を完璧に熟지していなくても大丈夫です!
Q. これから始めようとしています。JavaScriptやNode.jsについてはよく知らないのですが、受講しても大丈夫でしょうか?
はい、大歓迎です! 🙋♂️
本講義では、リアクトを学習する上で欠かせないJavaScriptの知識やNode.jsの知識までお教えします。
そのため、本講義一つでリアクトに必要な基礎知識をまず学習し、リアクトまで習得することができます。
Q. 授業ではどの程度のレベルまで扱いますか?
Reactが誕生した理由から基本的な使い方、実際のプロダクション開発のためのパフォーマンス最適化手法までを扱います。
また、Vercelを利用して実際にデプロイし、Open Graphの設定で締めくくることで、
Webプロジェクトの最初から最後まで開発できるすべての知識を盛り込んでいます。
学習対象は
誰でしょう?
Reactを初めて学ぶ入門者
JavaScriptやNode.jsはよく知らないけれど!React.jsを学んでみたい人
完走チャレンジなどを通じて、多くの受講生と一緒に学習したい人
講義を完走した際に、自慢できるような成果物を作りたい方
HTML & CSSを一度でも書いたことがある方(得意である必要はありません!)
前提知識、
必要でしょうか?
👋 HTML, CSSに関するごく初歩的な知識
37,762
受講生
2,651
受講レビュー
1,623
回答
4.9
講座評価
19
講座
ウェブフロントエンドを一口サイズでかじってみましょうか?!
こんにちは 🙇♂
私は、どんなことでも簡単で楽しく説明する方法があると信じている人間であり、
世界で最も温かい開発者コミュニティを作りたいと思っている人間です。
📚 著書
📹 講義
一口サイズでかじり取るNext.js
一口サイズでかじり取るTypeScript
一口サイズでかじり取るReact
全体
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
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,294件
4.9
1,294件の受講レビュー
受講レビュー 3
∙
平均評価 5.0
受講レビュー 8
∙
平均評価 4.9
5
他サイトで英語で先にリアクトを受講しました。英語を100%理解していない状態で受講してみると、概念を誤って理解したり説明したりして理解できない問題がありました。それでインフラでリアクト講義を探し、より良く見えて聞くようになりました。講義はJavaScriptから再度教えていただき、JavaScriptまで勉強することができてよかったです。リアクトについても概念をよく教えてくれて勉強がたくさんなりました。ひとつ残念なことは、A->Cを説明する際、途中でA->B->C こうしてBまで説明していただいたら理解するのがずっと良かったような部分もいくつかありました。そんなことは講義質問答弁欄で他の方々も質問をたくさん残してくれました。こんな部分だけ補完になれば本当に100点講義のようです。
受講レビュー 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... 😭😭
受講レビュー 5
∙
平均評価 5.0
5
まだ見ていませんが、複数のリアクト講義を購入してみた立場で、この講義がワントップです。 他の講義も熟練したJavaScript開発者の方々が作りました。しかし、問題があります。 熟練した方々は、自分の頭の中ですでにコードがどのように動作しているかについてのイメージが頭にある状況で講義をします。だから、おじさんのように話しながらコードを書いて講義をします。 しかし、初心者の立場では、一体何が起こるのか頭の中でまったく描かれていない状態で、コードだけに従うので、苦しい気持ちはもちろん、概念すらうまくいかないんです。 このレッスンの場合、コードの前にどのような機能を使うと、どのようなことが起こるのかをイメージとして先に解いて概念を説明し、その後にコードを見せると、あのやはりコードを見ながら頭の中でコードが動作するイメージが一緒に描かれます。 ほとんどの講師が開発者です。教育者/教育専攻者ではないので、このような効果的な教育方式に対するスタンダードなしであまりにも多くの講義が量産されていると感じますが、この講義は本当に最高ですね。 講義を見たこともありませんでしたが、すでにタイプスクリプトも購入しています。 クオリティがイ・ジョンドンデ講義値はまたあまりにも恵者です。コーヒーでももう一杯飲むと本も買いました。私のお金を与えて生きる講義に'ありがとう'という表現がおかしくてよく使わないのですが。 それでも、この講義は'非常にありがとう'。 可能であれば、Express.js、Next.Jsのレッスン、そしてTDDのレッスンも提供してください。
受講レビュー 2
∙
平均評価 5.0
知識共有者の他の講座を見てみましょう!
同じ分野の他の講座を見てみましょう!
期間限定セール、あと5日日で終了
¥33,880
30%
¥5,887