一口サイズで学ぶNext.js(v15)
winterlood
一口シリーズの3作目！世界で最も親切で詳細なNext.js(15+)講座です。App Routerだけでなく、Page Routerまでプロジェクトを通じて学びます。
Basic
Next.js, React, TypeScript
BEST
一口サイズで学ぶReact.js：基礎から実践まで
概念からユニークなプロジェクトまで一緒に扱いながら、JavaScriptとReactをこの講座で一度に終わらせましょう。 学習は短く、応用は長く、17時間分のAll-in-one講座!
JavaScript
JavaScript
React
React
Node.js
Node.js
学習した受講者のレビュー
学習した受講者のレビュー
4.9
5.0
23
88% 受講後に作成
私は実際にリニューアル前に受講申請してすでに一度頑張っていました。 それ以来、いろいろな状況で1～2年ほど勉強を手放している。 またリアクトを煮る必要性を感じて帰ってきました。 振り返ってみると今年の芽リニューアルになりましたよ！ 昔も全体的に充実した構成だったと思います。 リニューアル版はより分かりやすくなりました より繊細にあれこれ補充してくれた感じがします。 普通こんなに全体的にリニューアルする場合には新しい講義でオープンする場合だけ見たのに 既存の受講生も継続してリニューアル版を見ることができるようにしていただきありがとうございます。 講義や受講生への本気が感じられ、各編ごとに感動しながら見ています。 最後の展開段階だけを残しています。 残りの3講義をよく見て、復習を頑張りながら 私のものでよく作ってみましょう。 本当に本当にありがとうございます。
5.0
지지지지지
100% 受講後に作成
今年中にReactを必ず修了したかったのですが...個人的な目標を達成できてとても嬉しいです!!!この講義を購入しようかまだ迷っている方が(まさか...)いらっしゃるかもしれないので、強くお勧めします...大学卒業を控えてフロントに興味を持ち、中途半端な初心者だった私は急いで講義を中断しましたが、とても難しくて何度も聴きました。その後、JavaScriptも知らないのにReactを聴くのは無理だと思い、隣のクラスのヒョビン先生のVanilla JavaScript講義を聴きながら、別途JSの本を購入し、基礎を身につけた状態でこの講義を聴き直したら...本当に理解がスッと入りました!!!!!(もちろん、ジョンファン先生の授業だけでも問題ありませんが、私はもっと念入りに基礎から掘り下げてみたいという欲求が生まれたので...)コードを理解できる日が本当に来るのだろうか...と思いましたが、そんな日が私にも来ました...もちろん、まだ超初心者で、講義で使われた前半の内容を忘れていたり、一人でコードを書くのは難しい部分も間違いなくありますが、このReact講義を聴きながら、全体的なWeb開発の感覚がつかめて、この講義を聴いた時間は後悔していません。何よりも、見やすい視覚的資料+コード+集中力を高めてくれる発音...この講義は絶対に買うべきです。(広告ではありません;)ジョンファン先生、ずっと教えてください...ありがとうございます!それでは、私はこれでおしまいにして、次のTypeScript講義に移ります!!!信頼できるジョンファン先生の講義。
5.0
서지현
100% 受講後に作成
本当に素晴らしい授業でした。人生で初めて、最後までやり遂げたオンライン授業です。😊😊 最後までやり遂げられた最大の理由は、授業の質が非常に良かったからです。 講師の発音もとても良く、何より授業の内容が非常に充実しています。 本当に必要な内容で構成されており、親切に説明してくださるので、それに従って実践するのが簡単でした。 基本CRUDの2セット(Todo、感情日記)を試してみましたが、概念も理解でき、今後の実務でも大いに役立つと思いました。 授業制作後、React Router V7のバージョンアップに関する授業アフターサービスも良かったです。 エラーが発生した場合は、コミュニティで検索すると、私と同じようにスペルミスなどの間違いを犯した他のユーザーが投稿した参考記事があるので、役に立ちました。 このように簡単に、わかりやすく説明するのは、講師としての素晴らしい資質だと思います。このようにしっかりとした授業を作ったのを見ると、開発も非常に上手いと思います。~ たくさんの授業を作ってください。私はバックエンド開発者ですが、年末に少し時間が空いたので、Reactを勉強してみようと思い、この授業を選びましたが、この授業を選んだ自分自身を褒めたいと思います。😊😊 講師の先生、幸せに暮らしてください。健康で、2025年も素晴らしい授業をお願いします。~
受講後に得られること
実際にデプロイされる感情日記帳プロジェクトの開発
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：https://inf.run/v3XAj> 一口サイズに切って食べるTypeScript：https://inf.run/FpLm4> 一口サイズに切って食べるNext：https://inf.run/v3XAj
Reactを一つの講座で完璧にマスターできます。
一口サイズに切って学べるようサポートします。🔥
多くの受講生の皆様に愛していただいたおかげで、インサイト出版社と共に講義を書籍として出版することができました。
改めて、すべての受講生の皆様、関心を寄せてくださった皆様に心より感謝申し上げます。
おかげでインサイト出版社と共に講義を書籍として出版することができました。改めて全ての受講生の皆様、関心をお寄せいただいた皆様に心より感謝申し上げます。
2024リニューアルバージョン
一口サイズに切って食べるReact
世界一親切で、世界一やさしいReact講座を目指して
JavaScriptの基礎から、
React.jsの実践プロジェクトまで
React.jsはNode.js環境で動作するJavaScriptのライブラリです。
したがって、React.jsは結局JavaScriptをより上手く活用できるように助けてくれるツールに過ぎません。
そのため、JavaScriptとNode.jsをしっかり理解していなければ、React.jsを適切に活用することはできません。
この講義はJavaScriptの基礎からNode.jsを経てReact.jsを学びます。
でもただ学ぶだけではまた面白くないですよね！全3回のプロジェクトを通じてReact.jsを学びます。
このような過程の中で、皆さんはしっかりとした基礎力を備えたフロントエンド開発者へと生まれ変わることになるでしょう。
18時間のボリューム
合計3回のReact.jsプロジェクト
この講義はReact.jsの単純な使用法だけを教える講義ではありません。
React.jsを取り巻く様々なCS知識も一緒に扱い、合計3回のプロジェクト
カウンターアプリ、ToDoリスト、感情日記帳を作りながらプログラミング思考力も一緒に養うことができます。
講義構成
📌 セクション1~2. JavaScriptの基礎と応用
React.jsを学ぶ前に、JavaScriptの基礎および応用概念を学びます。
データ型や演算子のような基本的な概念から、
配列メソッドや非同期処理のような応用的な内容も一緒に学びます。
もしJavaScriptを既に知っていたとしても、復習として見直すのに最適です。
| 
|
、配列メソッドや非同期処理のような発展的な内容も一緒に見ていきます。もしJavaScriptを既に知っていたとしても、復習として改めて見直すのに良いです。
📌 セクション 3. Node.js
React.jsはNode.jsをベースに動作する技術です。したがって、Node.jsを知らずにReact.jsを理解することはできません。
セクション3では、Node.jsとは何か、なぜ誕生したのか、どのような機能を持っているのかを実習とともに学びます。
| 
|
そのため、Node.jsを知らずにReact.jsを知ることはできません。セクション3では、Node.jsとは何か、なぜ誕生したのか、どのような機能を持っているのかを実習とともに見ていきます。
📌 セクション 4. React.js 概論
React.jsとは何か、他の技術と比較してどのような差別点を持っているのかを調べ、既存の技術が持っていた限界点をどのように解決したのか詳しく見ていきます。この過程で私たちはReact.jsについてより深く理解することになるでしょう。
| 
|
を調べ、既存の技術が持っていた限界点をどのように解決したのか詳しく見ていきます。この過程で私たちはReact.jsについてより深く理解することになるでしょう。
📌 セクション 5. React.js 入門
新しいReact Appを作成し、ReactのComponent、State、Propsなどの基本的な機能について学びます。
実習とともにすべての基本機能を使ってみて、図解資料とともに視覚的に完璧に理解します。
| 
|
Component、State、Propsなどの基本的な機能について見ていきます。実習とともにすべての基本機能を使ってみて、図資料とともに視覚的に完璧に理解します。
⛳️ セクション 6. React.js プロジェクト 1. カウンターアプリ
最初のReactプロジェクト「カウンターアプリ」を直接作ってみます。
シンプルですが、React.jsの動作原理と設計思想を垣間見ることができる良いプロジェクトです。
カウンターアプリ 最初のReactプロジェクト「カウンターアプリ」を直接作ってみます。シンプルですが、React.jsの動作原理と設計思想を垣間見ることができる良いプロジェクトです。
📌 セクション 7. ライフサイクル
すべての人間が生まれて幼児期、青少年期、青年期、老年期を経て黄昏に至るように、すべてのReactコンポーネントも生まれ、変化し、消えていきます。このようなコンポーネントの生涯周期をライフサイクルと表現します。
コンポーネントのライフサイクルを理解し制御できるようになると、望むタイミングで望む動作を実行させることができるようになります。そのため、セクション7ではライフサイクルについて見ていき、実習と共にこれを制御する方法を学びます。
| 
|
タイミングで望む動作を実行させることができるようになります。したがって、セクション7ではライフサイクルについて見ていき、実習とともにこれを制御する方法を見ていきます。
⛳️ セクション8. React.jsプロジェクト2. Todoリスト
2つ目のReactプロジェクト「Todoリストアプリ」を直接作ってみます。
このプロジェクトを実装しながら、データのCRUD(追加、照会、修正、削除)および検索機能など、
Reactで配列形式のデータを扱う様々な方法を見ていきます。
このプロジェクトを実装しながら、データのCRUD（追加、照会、修正、削除）および検索機能などのReactで配列形態のデータを扱う様々な方法を見ていきます。
📌 セクション9. useReducer - 状態管理ロジックの分離
役割に応じたコードの分離は、常にソフトウェア開発の美徳です。
複雑な状態管理コードを分離できるようにサポートするuseReducerについて学び、
ToDoリストプロジェクトに直接適用して実習します
| 
|
開発の美徳です。複雑な状態管理コードを分離できるようにサポートするuseReducerについて見ていき、Todoリストプロジェクトに直接適用しながら実習します
📌 セクション 10. 最適化
私たちのプロジェクトに不要な演算が存在するなら？思い切って削除すべきですよね！
無駄な演算を削除するReact Appの様々な最適化技法を学び
Todoリストプロジェクトに直接適用しながら実習します
|
|
習します
📌 セクション 11. Context
より簡潔でよりスマートに様々なコンポーネントにデータを供給するContextについて学び、
ToDoリストプロジェクトに直接適用しながら実習します
| 
|
⛳️ セクション12. React.jsプロジェクト3. 感情日記帳 これまで学んだ概念を総動員して最終プロジェクト感情日記帳を直接作ってみます。追加でブラウザの
⛳️ セクション 12. React.js プロジェクト 3. 感情日記帳
これまで学んだ概念を総動員して最終プロジェクト感情日記帳を直接作ってみます。
追加でブラウザのデータベースを使用し、プロジェクトをデプロイしてユーザーがアクセスできるようにします。
デモリンク:https://emotion-diary.winterlood.com/
ます。さらにブラウザのデータベースを使用し、プロジェクトをデプロイしてユーザーがアクセスできるようにします。デモリンク：https://emotion-diary.winterlood.com/
📌 セクション 13. 終わりに
| 
|
講義は終わりますが、私たちの学習は終わりません。
今後どのような方向性を持って進むべきか話し合います。
世界で最も親切な
Reactの講義のための4つの原則
📣 原則1. 必ず易しく親切に、視覚的に説明すること
どんなに複雑で難しい内容でも!
視覚資料とともに親切で分かりやすく説明するために絶えず努力しました。
すべて自分で作成した画像なので、キャプチャして学習ブログの投稿に利用していただいても構いません。😃
資料と共に親切で分かりやすく説明するために絶えず努力しました。すべて自分で作った画像なので、キャプチャして学習ブログの投稿に利用していただいても構いません。😃
| 
|
| 
|
📣 原則2. 倍速で再生しても全て聞き取れるように発音すること
復習のために再度聞いている最中だったり、忙しい場合は倍速で聞いてみてください！
最大2倍速まで発音がしっかり聞き取れるよう特に気を配りました😎
(下の1.5倍速で再生される映像を一度聞いてみてください！)
📣 原則3. コードを探しやすく保存すること
苦労して作成した実習コードを適当に保管するのはもったいないですよね?
いつでも振り返れるように、コードをセクション別にきちんと分けて保管できるよう配慮しました。
コード保管所リンク:https://github.com/winterlood/onebite-react-v2
📣 原則4. 絶え間なくコミュニケーションを取ること
受講生専用コミュニティに集まり、お互いに知識やニュースを共有しながら成長します。
디스코드 채널 참가 : https://discord.gg/YDqhkH8XkN(오픈채팅방은 수업 자료에서 확인하실 수 있습니다)
想定質問 Q&A 💬
Q. 講座の受講対象はどのようになりますか?
HTML、CSSについての理解がある方が聞くのに最適化された講義です。
ただし、講義の途中途中に説明が存在するため、内容の把握が完璧でなくても大丈夫です!
Q. これから始めようとしています。JavaScript、Node.jsはよく分からないのですが、受講しても大丈夫でしょうか?
はい、歓迎します！🙋♂️
本講義はReactを学習するのに必ず必要なJavaScriptの知識とNode.jsの知識までお教えします。
したがって、本講義一つでReactに必要な基礎知識をまず学習し、Reactまで学習することができます。
Q. 授業ではどの程度のレベルまで扱われますか?
Reactが誕生した理由から基本的な使い方、実際のプロダクション開発のためのパフォーマンス最適化技法を扱います。
また、Vercelを利用して実際にデプロイし、Open Graph設定で仕上げることで、
Webプロジェクトの最初から最後まで開発できるすべての知識を盛り込んでいます。
ポートフォリオ及び個人映像
実際にデプロイしてOpen Graph設定で仕上げ、Webプロジェクトの最初から最後まで開発できるすべての知識を含んでいます。ポートフォリオおよび個人映像
こんな方に
おすすめです
学習対象は
誰でしょう？
Reactを初めて触れる入門者
JavaScriptとNode.jsはよく知らないけど！React.jsを学んでみたい人
完走チャレンジなどを通じて多数の受講生と一緒に学習したい人
講座を完走した際に自慢できる成果物を作りたい人
HTML & CSSを一度でも書いた経験がある方(上手である必要はありません!)
前提知識、
必要でしょうか？
👋 HTML、CSSに関するごく基礎的な知識
37,202
受講生
2,604
受講レビュー
1,600
回答
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,272件
4.9
1,272件の受講レビュー
sunjune18284435受講レビュー 27
∙
平均評価 4.7
5
100% 受講後に作成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... 😭😭
- hm52073678
受講レビュー 3
∙
平均評価 5.0
- inchestry
受講レビュー 5
∙
平均評価 5.0
5
64% 受講後に作成まだ見ていませんが、複数のリアクト講義を購入してみた立場で、この講義がワントップです。 他の講義も熟練したJavaScript開発者の方々が作りました。しかし、問題があります。 熟練した方々は、自分の頭の中ですでにコードがどのように動作しているかについてのイメージが頭にある状況で講義をします。だから、おじさんのように話しながらコードを書いて講義をします。 しかし、初心者の立場では、一体何が起こるのか頭の中でまったく描かれていない状態で、コードだけに従うので、苦しい気持ちはもちろん、概念すらうまくいかないんです。 このレッスンの場合、コードの前にどのような機能を使うと、どのようなことが起こるのかをイメージとして先に解いて概念を説明し、その後にコードを見せると、あのやはりコードを見ながら頭の中でコードが動作するイメージが一緒に描かれます。 ほとんどの講師が開発者です。教育者/教育専攻者ではないので、このような効果的な教育方式に対するスタンダードなしであまりにも多くの講義が量産されていると感じますが、この講義は本当に最高ですね。 講義を見たこともありませんでしたが、すでにタイプスクリプトも購入しています。 クオリティがイ・ジョンドンデ講義値はまたあまりにも恵者です。コーヒーでももう一杯飲むと本も買いました。私のお金を与えて生きる講義に＆＃x27;ありがとう＆＃x27;という表現がおかしくてよく使わないのですが。 それでも、この講義は＆＃x27;非常にありがとう'。 可能であれば、Express.js、Next.Jsのレッスン、そしてTDDのレッスンも提供してください。
- samgangjumak
受講レビュー 8
∙
平均評価 4.9
5
76% 受講後に作成他サイトで英語で先にリアクトを受講しました。英語を100％理解していない状態で受講してみると、概念を誤って理解したり説明したりして理解できない問題がありました。それでインフラでリアクト講義を探し、より良く見えて聞くようになりました。講義はJavaScriptから再度教えていただき、JavaScriptまで勉強することができてよかったです。リアクトについても概念をよく教えてくれて勉強がたくさんなりました。ひとつ残念なことは、A->Cを説明する際、途中でA->B->C こうしてBまで説明していただいたら理解するのがずっと良かったような部分もいくつかありました。そんなことは講義質問答弁欄で他の方々も質問をたくさん残してくれました。こんな部分だけ補完になれば本当に100点講義のようです。
- parkhj9291187
受講レビュー 2
∙
平均評価 5.0
￥5,929
winterloodの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)Course Thumbnail](https://cdn.inflearn.com/public/files/courses/338156/cover/01k4c77bftwd8ec4k0yakavbrc?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)
![# [Electron #1] ElectronとReactで作るタイマーアプリ（With Zustand）Course Thumbnail](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?f=avif&w=420)
![[コードファクトリー] [入門] 9時間で終わるコードファクトリーのJavascript無料フルコースCourse Thumbnail](https://cdn.inflearn.com/public/courses/330969/cover/410fe1c7-4457-42c9-9710-296e402089db/Javascript)
