フルスタックリアクトライブコーディング - シンプルなショッピングモールを作る
jaenam
開発から配布まで！ 一つのサービスを完成するための険しい旅をろ過なくお見せします。 初めて使ってみる技術を盛り込んで左衝ウドルウダン湯湯ながらもなんとか迷っていくことができますよ！
Basic
React, GraphQL, Firebase
BEST
vue.js本番プロジェクト（Twitterクローン）
vue.js + firebase + tailwindcssを使って本番プロジェクトを作成してください。この講義を受講した場合は、どのサイトでも作成できます。
学習した受講者のレビュー
受講後に得られること
vue3
tailwind css
firebase authentication
firebase firestore
firebase storage
firebase hosting
vue 3 + tailwind css + firebaseを使用して
Twitterを直接フォローしてください！ 💪
✔️講義の紹介
いつまで入門書だけを読んで、TODO list作り講義だけ聞くのですか？基本が重要ではないという言葉ではありません。開発分野は無限に新しい技術が出て、毎回新しい技術を習得するのに多くの時間と努力を要しなければなりません。そこに最も効率的な学習方法を見つける必要が遅れないことがあります。その点で最も効率的な学習方法はクローンコーディングです。基本的な文法を理解し、データベースと接続し、画面に振り分けることは誰でも講義を聞いて本を読むと難しくないようにすることができます。しかし、実際のプログラミングでは、講義で見られなかった数多くの不安な問題に遭遇します。私と一緒にするクローンコードで「なぜ私が望むように動作しないのですか？」悩み、解決していく数百数千回の経験を通じて、開発に興味を少し感じてほしいです。
✔️この講義だけの特別な点
- 私が学習者だった時、最も無力な瞬間は講義者の目詰まりのないコーディング、すでに頭の中にすべて入っていてキーボードで打ち出すだけでいいようだった瞬間でした。私はあなたと一緒に作られているコーディングをするためにゼロベース（もちろん、時間を節約するためにいくつかの画像やカラーセットのような部分はあらかじめ用意しておきました）で講義を撮影しました。
- 完全なソースコードをサポートしています。各講義ごとにコミットをしておいて、しばらく逃した部分も問題なく従うことができます。
- 365日24時間の質問に答えます。講義を聞いて詰まったのですが、講義者が解決してくれないと、その講義を頑張ることはできません。どれだけ切実な瞬間か、私はよく知っています。 24時間以内にできるだけ早く回答いたします。
デモサイト
https://twitter-clone-inflearn-76b0d.web.app/
羽毛リンク
https://github.com/jinsyu/twitter-clone-inflearn
予想される質問 🙋♀️🙋♂️
Q-1. vue.js 3バージョン実際のプロジェクトに直接投入できますか？
A-1.バージョン2と大きく変わった点はありません。すべての点でバージョン3に進まない理由はありません。あえて旧バージョン講義を聞く必要はないでしょう？このレッスンを聞くなら、vue.js 3は完璧に学ぶことができます。
Q-2.講義の難易度はどのくらいですか？
A-2. vue.jsとjavascriptの基本文法（非同期関数）、css（flex）について知っていれば無理なく受講可能です。
Q-3.なぜハーピルクローンプロジェクトを作るのですか？
A-3.非専攻者として長年の勉強した経験に照らしてみると、クローンプロジェクトを作ってみたときに最大の実力向上を得ました。決められたプロジェクトを最初から最後まで作ってみながら、いろいろな問題状況に挫折することもありますが、直接私の手で解決し、ついに完成させた時の達成感はすごいです。基本文法書をご覧いただく場合はできるだけ薄いことで、基本文法講義を聞く場合は、できるだけ短い講義を聞き、本番プロジェクトを作ってみることを強くお勧めします。
Q-4.プログラミングの入門者です。いくつかのプログラミング言語、フレームワークの中でvue.js、firebase、tailwind cssを使った理由はありますか？
A-4.上記の3つのフレームワークを使用している場合は、作成できません。強力でありながら最も簡単な方法です。よくわからない場合は、私だけを信じて従ってください。
こんな方に
おすすめです
学習対象は
誰でしょう？
基本学習を終えて本番プロジェクトを作成したい方
vue.js 3 学びたい方
前提知識、
必要でしょうか？
javascript 基本文法
vue.js 基本
非同期文法の理解（async-await）
실용주의 프로그래밍을 지향하는 프리랜서 개발자 입니다.
python, js, golang, c#, django framework, djangorestframework, flask, telegram bot, aws, vue.js, firebase, tailwind css... 닥치는대로 개발하고 있습니다.
특별히 배우고 싶거나 만들고 싶은 프로젝트가 있으시면 jinsyu.com@gmail.com으로 연락주세요.
カリキュラム
全体
54件 ∙ (9時間 44分)
2. 基本プログラムのインストール
11:09
3. サイドメニューを作る
18:40
4. プロフィールボタンを作成する
07:25
6. ホームページツイートセクション
10:33
7. ホームページツイートを作成
12:25
8. ホームページのトレンドを作成
16:20
10. コンポーネントの取り外し
02:29
11. 通知ページの作成
10:58
12. メモページの作成 - メモリスト
08:41
14. プロフィールページ
20:54
15. ツイートコンポーネント
03:28
16. vue routerの作成
06:59
17. メニュールーターを接続する
08:34
18. レイアウトの作成
11:38
19. 会員登録ページ
11:51
20. ログインページ
02:56
24. ログイン
10:55
25. input validation
04:21
26. vuex
16:32
27. navigation guard
16:48
29. tweet 入力
12:46
31. ツイートにユーザー情報を追加する
10:37
32. ツイートモーダルポップアップ
16:02
33. ツイートモーダルレスポンシブ修正
05:06
35. コメントモーダルポップアップ
16:24
37. コメントを入力する
09:57
38. リツイートコレクションを追加
11:19
39. リツイート分岐処理
11:19
40. リツイートの有無を表現する
02:10
41. 「いいね」を実装する
06:07
42. ツイートページを作成
19:43
43. ツイート情報を取得する
06:23
51. 通知ページ
09:39
52. メモページ
25:51
53. ツイートを削除
07:03
講座掲載日:
最終更新日:
受講レビュー
全体
21件
似ている講座
同じ分野の他の講座を見てみましょう！
![初めてのFlutter（Flutter）基礎から実戦まで [フルスタック Part4] （簡単で堅実に段階別で多様なプロジェクトまで）Course Thumbnail](https://cdn.inflearn.com/public/courses/331245/cover/1f8c5bb8-8aad-4542-b3bc-977cda51c846/331245.png?f=avif&w=420)
![フォローして学ぶリアクト、ファイアベース - チャットアプリケーションを作る[2023.12リニューアル]Course Thumbnail](https://cdn.inflearn.com/public/course-326181-cover/d012cab3-58e1-45cd-899e-03f86c7b1df1?f=avif&w=420)
![Flutter + FirebaseでNetflix UIクローンをコーディングする[ランダムフラッター]Course Thumbnail](https://cdn.inflearn.com/public/courses/324976/course_cover/1355e898-fc20-4579-a88f-82340b849595/netflix-flutter-eng.png?f=avif&w=420)
