강의

멘토링

커뮤니티

BEST
Programming

/

Front-end

Vue 3 & Firebase 10 コミュニティ作成フルスタック - 「活用編」 (with Pinia、Quasar、Tiptap、VueUse)

Vue3& Firebase(v10)を活用してコミュニティを作る講義でVue3実践活用法、Firebase基礎から実戦、最新のWeb技術活用法、知識共有者経験共有など多様な方面で開発者として一段階成長できるようにします!

  • gymcoding
실습 중심
vue
quasar
vue.js
풀스택
firebase
Vue.js
Firebase
Quasar
Vue 3
algolia

学習した受講者のレビュー

受講後に得られること

  • Vue3 Composition API(コンポーザブル、動的&非同期コンポーネントなど)の実務活用法!

  • Firebase(v10)を完全な初心者から実践まで、そしてデプロイまで!

  • Quasar を使用して、簡単にすばやく美しい UI を作成する方法!

  • VueUse、TiptapEditor などの人気のライブラリを活用!

  • IntersectionObserver、RelativeTimeFormat などの最新技術の活用方法!

  • Algolia Search を使用して全体的なテキスト検索を実行します。

Vue3の基礎を学びましたか?
今ちゃんと活用する番です! ✨

Inflearn受講後のイベント開催中🎉

こんにちは🙂Vue3&Firebase10コミュニティを作る講義受講後期イベントを行っています。
該当講義を受講してから丁寧に受講後期を作成していただければ 講義無料クーポン1個をお渡しします。

(先着順30名)

最新技術を活用した
Vue 3 & Firebase 10 コミュニティを作成 📖

こんにちは!今回の講義はVue3とFirebaseを活用してコミュニティWebを作る講義で、今回の講義を受講したらVue3 Composition API実務活用法!そしてFirebaseの基礎から本番まで一度に私のものにすることができる講義です。

フロントエンドWebを開発する際にはエディタ、無限スクロール、検索機能、デバッグなど様々な知識が必要です。この講義では、実務経験からわかる様々なウェブ技術まで習得し、開発者として一段階成長できる講義です。


実戦はいつも重要だから💻

実際、今回の講義は私が以前にローンチした「Vue3完璧マスター(基本編/実戦編)」以前から企画していた講義です。なぜなら、どのようなスキルを身につけるときに学ぶことも重要ですが、学んだスキルを活用して何かを作ってみることも本当に重要だからです。

私たちが運転免許を取得して車を運転してみると、思ったより簡単ではないでしょう。実際に運転するときは、運転を学ぶときになかった様々な困難があるからです。

Web開発も同様です。 Vue.jsというスキルを学び、何かを作ってみないと成長は遅れるでしょう。そしてVue3を学び、実際に何かを作ろうとしても簡単ではありません。実際にウェブを開発する際には核心となる技術も重要ですが、その周辺のフロントエンドエコシステム技術や経験からわかるスキルのようなものもとても重要です。実際のWebアプリケーションを作ろうとした方々はたくさん共感してくれます。

「いざサイトを制作しようとすると難しさがありましたよ…」

そこでVue3&Firebaseを活用したコミュニティ作り講義をローンチすることになりました。今回の講義は先ほどお話したようにVue3実務活用法、Firebase基礎から実戦まで!そして、実際のWebアプリケーションを作成するときに発生する可能性があるさまざまな問題を解決することができる講義です。


この講義だけの特長 ✨

📌 Firebaseは知らないかもしれません!完全基礎から実戦そして配布まで一度に学べます。

フロントエンド開発者にとって、Firebaseは本当に魅力的な技術です。

私たちがWeb技術を勉強したり、実際にWebアプリを作成するときにバックエンドが必要な場合があります。このようなときにFirebaseを活用すれば、会員登録、データベース管理、ファイルアップロード、プッシュ通知などのサービスを簡単に実装できます。

📌 Fallthrough プロパティ、動的&非同期コンポーネント、コンポーザブル関数など、実戦でしっかり理解しています!

講義を通して、Pinia(with Setup Stores文法)、Quasar、VueUse、Tiptap Editor、Algolia Searchなど、実際のWebアプリケーションを作成するために必要なさまざまな技術を習得できます。 Dynamic Component(動的コンポーネント)、Async Component(非同期コンポーネント for 遅延ロード)、Composables 関数の実装など、Vue3 実務活用法を正しく学習できます。

📌受講生の皆さんが自分でこなす力を育てます。絶対後悔しないでしょう!

今回の講義は、単にどんな技術をお知らせする講義ではありません。

  • バグが発生したときにBreakpointを使用してデバッグする方法
  • また、私がどのようなスキルを身につけるとき、勉強法はどうなるのか
  • そしてFirebaseを学ぶときに公式文書をどのように見るか

講義で私の経験と考えを共有します。受講生の方々に自分でこなす力を差し上げるためです。今回の講義をご覧いただくと感じますよ!公式文書をどのように見ているのか、講義がなくても受講生の方が自分でできるように、詳細かつ繰り返してお知らせします。慣れるようにですよ!


学習内容📚

セクション 0. はじめに

  • 一緒に開発環境を整理し、プロジェクトを作成する

セクション 1. Auto Page&Layout の設定

  • Page&Layout ルーティングが自動的に設定できるようにライブラリを設定する
  • ライブラリを設定し、知識共有者の洞察を共有する

セクション2. Quasar活用UIの作成

  • Quasarを活用して簡単かつ迅速にWebレイアウト、コミュニティUIのマークアップ
  • router-link vs router.push() 違い
  • 動的コンポーネント、非同期コンポーネントを活用したパフォーマンスの向上
  • $attrs, $slots Vue 組み込みオブジェクトの活用
  • Fallthrough プロパティと inheritAttrs オプションについて
  • マルチvモデル、VueRouterネストレイアウト

セクション3. Firebaseを始めよう

  • プロジェクトで使用する Firebase サービスと公式ドキュメントの表示方法の説明
  • Firebaseプロジェクトの作成とインストール

セクション 4. Firebase Authentication

  • Firebaseを活用した電子メール会員登録、Googleログイン、ユーザー情報管理
  • Pinia Setup Stores 文法を利用したユーザー状態管理
  • 知識共有者の勉強法の共有

セクション 5. VueUse & 共通機能

  • VueUse ライブラリを活用した非同期状態管理と Pinia 状態の維持
  • Local & Global Error Handling
  • Tiptap Editorの作成(さまざまなTiptap Extensionsを活用)

セクション 6. Firebase Cloud Firestore

  • コミュニティとコメント機能CRUDの実装
  • setDoc vs addDocの違いなど、Firebaseの使用経験からわかるヒントを共有する
  • クエリ、並べ替え、その他の投稿など、少し複雑な機能の実装

セクション 7. Web API & 高度化

  • IntersectionObserver 活用無限スクロール機能
  • Intl.RelativeTimeFormat活用相対時間表示
  • パラメータURL連携
  • ナビゲーションガード&クライアントセキュリティ
  • いいね、ブックマーク、視聴回数増加機能を実装

セクション8. Firebase Storage

  • Tiptap EditorからFirebase Storageイメージをアップロードする
  • 画像アップロード時にUUID、Image Resizerを活用

セクション 9. Firebase Cloud Functions

  • Cloud Functions & Emulator のインストール
  • 機能を活用した高度な機能の実装
  • Firebase Emulatorを使用したローカルテスト
  • 投稿とコメントの作成者を表示する

セクション 10. Algolia Search

  • Algolia Search Extensionのインストール
  • Algolia 検索機能プロジェクトの適用

セクション 11. Firebase セキュリティルールとデプロイ (Hosting)

  • Firebaseセキュリティルールの設定
  • Firebase Hostingのデプロイ

こんな方におすすめですよ🙋

  • Vue3活用法を学び、開発者として一段階成長したい方!
  • Firebaseを活用して実際のWebアプリケーションを作成したい人!
  • 最新のWeb技術、ライブラリなど、Webアプリを作成する際に必要な技術を学びたい方!

講義を聞いた後、あなたは😎

  • コンポジブル関数を簡単に分離するなど、Vue3を自信を持って活用できます。
  • Firebaseを活用して独自のWebサービスを作成して展開することができます。
  • どんな技術を学んでも公式文書を見て、自分で学習は力を持つようになります。

予想される質問 Q&A 💬

Q. Quasar Frameworkを知っておくと受講できますか?

いいえ:)

Quasar Frameworkを知らなくても受講に支障はありません。 QuasarはコミュニティUIを作成するためのツールとして使用され、講義を見てゆっくりフォローしてください!そして、講義中途半端なクエーサーを知らない方のために基本知識を説明しながら進めます。 🙂

また、Quasarを知らなくても受講するのに支障はありませんが、分かるほど見えると言いますか?もちろんクエーサーを知っていれば視野がより広くなるでしょう!

ジムコーディングYouTubeチャンネルのクエーサーの無料講義でもご覧になれます。

クエーサー無料講義YouTubeリンク

Q. Firebase を知っていなければ受講できますか?

いいえ:)

本講義はFirebaseを学び、コミュニティを作る講義でFirebaseを全く知らなくても受講するのに支障はありません。本講義ではFirebaseの基礎から実戦だけでなく公式文書を見て自分で勉強する方法など開発者として一段階成長できるように努めた講義です。

Q. Vue3を知っていなければ受講できますか?

はい、そうです:)

この講義はVue3を知っていなければ受講できません。以下のリンクは私が発表したVue3レッスンです。受講評、カリキュラム、そして味見の講義をご覧になり、大丈夫になりたい方は受講していただきありがとうございます。


講義ロードマップ📢

以下の順番での学習をお勧めします!


ジムコーディングと一緒に
実用的なコーディング学習💪

こんにちは、コーディング教育クリエイタージムコーディングです。
YouTube の「ジムコーディングGYM CODING」チャンネルを運営しています!

多くの方々が以前にローンチしたVue3パーフェクトマスター講義を愛していただき、Vue3活用編であるVue3&Firebaseコミュニティ講義をローンチすることになりました!
私の講義に関心をお寄せいただきありがとうございます。


こんな方に
おすすめです

学習対象は
誰でしょう?

  • Vue3 Composition API を正しく活用する方法を学びたい方!

  • Firebase を基礎から正しく学び、Web を作成したい方!

  • 理論は学んだが、実際にサイトを作成しようとしたときに困難に直面したことがある方!

  • 知識共有者の考え、経験を得て一緒に成長したい方!

前提知識、
必要でしょうか?

  • HTML、CSS

  • JavaScript

  • Vue3

こんにちは
です。

26,116

受講生

1,566

受講レビュー

660

回答

4.9

講座評価

18

講座

안녕하세요.

코딩 교육 크리에이터 짐코딩 입니다 🙂

유튜브에서 코딩 교육 "짐코딩 GYM CODING"채널을 운영하고 있으며,

인프런 교육 플랫폼에서 프로그래밍 지식을 공유하고 있습니다.

제 강의의 특징은 이제 막 시작하시는 분들을 위하여

설명하고자 할 때는 최대한 쉽게,

알려드리고자 할 때는 최대한 알차게 설명드립니다.

항상 수강생 입장에서 생각하는 코딩 교육 크리에이터가 되겠습니다.

감사합니다.

📹짐코딩 유튜브 채널 운영 | 구독자 25,000+

💻 짐코딩 클럽 | gymcoding.co

🔗 GitHub: https://github.com/gymcoding

🧑‍💻 인스타그램 @gymcoding

📨 이메일 bruce.lean17@gmail.com

カリキュラム

全体

68件 ∙ (16時間 38分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

47件

5.0

47件の受講レビュー

  • dmb050087997님의 프로필 이미지
    dmb050087997

    受講レビュー 6

    平均評価 5.0

    5

    11% 受講後に作成

    I had to create a web page for my college graduation project, and I was wondering whether to use Vue or React, and then I heard that Vue can be developed quickly, so I vaguely searched around and happened to find it on YouTube, so I took the Vue Basics + Practice course and successfully completed my graduation project and got a job with the project, but there were still many things I didn't know about Vue. I'm satisfied because I think I'll be able to further develop my ability to study by checking the official documentation and parts I'm curious about through this lecture. I'll be waiting for better lectures in the future!

    • gymcoding
      知識共有者

      I also had a lot of trouble studying on my own when I started programming! But after I found a pattern that I could learn on my own?, I think I gained confidence in learning any technology after that! Through this lecture, I wanted to give students the power to learn on their own as well as the technical aspects! I am very touched that you recognized this and were satisfied with it. 🥹 Thank you 💪

  • leehyesu955241님의 프로필 이미지
    leehyesu955241

    受講レビュー 3

    平均評価 5.0

    5

    24% 受講後に作成

    Really.. in a word, it's great. I'm the type that has to go over parts that I don't understand, but the best part was that you explained it repeatedly and gave me side stories that I didn't know about, so my knowledge expanded even more. I thought about it from the previous lectures, but I was grateful that you took the time to teach everything from a beginner's perspective to a professional's perspective. When I went to the academy, I was in a hurry to keep up, but since I started listening to Jimcoding's lectures, I've been learning properly! Please continue to give great lectures^^

    • gymcoding
      知識共有者

      It seems like a lecture that I really put a lot of effort and prepared hard for compared to other lectures 🥹 As you said, thinking of each and every student, The content is deep and informative so that it can be really easy and repetitive for beginners, and also helpful to those in the field! I am deeply touched that you understand 🙏 Thank you~!! 🙂

  • hiperbono4518님의 프로필 이미지
    hiperbono4518

    受講レビュー 1

    平均評価 5.0

    5

    52% 受講後に作成

    This lecture is also good! I started listening to Jim Coding's lectures one by one, and this lecture was very helpful and I think I can use it in my work. The lecture is fun and the diction is so good that I can listen to it without getting bored. Thank you for your hard work as always :-)

    • gymcoding
      知識共有者

      Wow~! Thank you for leaving such a thoughtful review 🙂💪

  • gichulroh6344님의 프로필 이미지
    gichulroh6344

    受講レビュー 14

    平均評価 4.7

    5

    52% 受講後に作成

    I have taken all of the Vue lectures in Inflearn and am currently working as a Vue front-end developer at a publisher. I think this is probably the closest lecture to the practical level among the Vue2 and Vue3 lectures. This is the first time I have taken Jimcoding's lecture, and I can see traces of his efforts to teach more kindly than other lecturers. I have heard that Quasar is better than other frameworks, and after taking all of these lectures, I will also proceed with the stack of this lecture as a side project. Please give me many good lectures.

    • gymcoding
      知識共有者

      For those who are just starting out with web development, I tried really hard to make the lecture easy and for those who are in the field, I am so touched that you recognized it 😭 Thank you for your hard work! Thank you 💪

  • e12402508님의 프로필 이미지
    e12402508

    受講レビュー 4

    平均評価 5.0

    5

    20% 受講後に作成

    Thank you for uploading the precious Vue3 lectures. There aren't many Vue3 lectures, but I listened to all of Jimcoding's Vue3 lectures, from the basics to the practical ones! After listening to them all, I was wondering if there would be any more, but this lecture on how to use them came out, so I paid for it right away. LOL! As expected, I trust and listen to Jimcoding's Vue lectures... They are so precious. It's not easy to find someone who teaches this well, so I always trust and listen! By any chance... Do you have any plans to upload a Nuxt lecture? LOL,,,

    • gymcoding
      知識共有者

      Thank you for cherishing my lecture!!😃 I will prepare the Nuxt lecture as soon as possible! 💪 Thank you 🙂

¥20,394

gymcodingの他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

同じ分野の他の講座を見てみましょう!