Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
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

こんにちは
です。

24,551

受講生

1,353

受講レビュー

629

回答

4.9

講座評価

17

講座

안녕하세요.
코딩 교육 크리에이터 짐코딩 입니다 🙂

유튜브에서 코딩 교육 "짐코딩 GYM CODING"채널을 운영하고 있으며,
인프런 교육 플랫폼에서 프로그래밍 지식을 공유하고 있습니다.

제 강의의 특징은 이제 막 시작하시는 분들을 위하여
설명하고자 할 때는 최대한 쉽게,
알려드리고자 할 때는 최대한 알차게 설명드립니다.

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

📨 이메일 bruce.lean17@gmail.com
🏋️‍♀️ 헬스타그램 @helinlee.gram
🧑‍💻 코딩스타그램 @gymcoding

カリキュラム

全体

68件 ∙ (16時間 38分)

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

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

受講レビュー

全体

46件

5.0

46件の受講レビュー

  • 크하함님의 프로필 이미지
    크하함

    受講レビュー 4

    平均評価 5.0

    5

    11% 受講後に作成

    대학교 졸업 작품 프로젝트로 웹 페이지를 만들어야 했었는데 뷰를 쓸지 리엑트를 쓸지 고민하다 뷰가 빠르게 개발할수 있다는 얘기를 듣고 막연하게 여기저기 뒤져보다 우연히 유튜브로 알게되어 뷰 기본+실전 편을 모두 수강하여 졸업작품 진행 및 해당 프로젝트로 취업에 성공했지만 아직 뷰에 대하여 모르는 점이 많았는데 이번 강의를 통하여 궁금한 부분 및 공식문서를 확인하며 공부할수 있는 능력을 더 키울수 있을거 같아 만족스럽습니다. 앞으로도 더욱 좋은 강의 기다리겠습니다!

    • 짐코딩
      知識共有者

      저도 프로그래밍을 시작할 때 혼자 공부하는 데 많은 어려움이 있었어요! 그런데 스스로 학습할 수 있는 패턴?을 찾고 나서 이후에 어떠한 기술을 학습하던 자신감이 생긴 것 같아요! 이번 강의를 통해 수강생분들에게 기술적인 것은 물론이고 스스로 학습할 수 있는 힘을 안겨드리고 싶었는데요! 이러한 부분을 알아주시고 또 만족하셨다니 매우 감개무량하네요 🥹 감사합니다 💪

  • Wonder.B님의 프로필 이미지
    Wonder.B

    受講レビュー 3

    平均評価 5.0

    5

    24% 受講後に作成

    정말..한마디로 갓짐입니다. 저는 이해가 어려운 부분은 꼭 짚고 넘어가야하는 편인데, 반복해서 설명해주는 정성과 더불어 주 내용뿐 아니라 모를 수 있는 사소한 부분을 곁다리로 알아보게끔 해주셔서 지식이 더욱 넓혀지는게 가장 좋았어요. 저번 강의들부터 생각했지만 초보자의 시선에서부터 현업자의 시선까지 시간 들여 고루 알려주려 노력하시는 것이 이번에도 여실히 보여 감사했습니다. 학원을 다닐때는 따라치느라 급급했다면 짐코딩님 강의를 들으면서부터는 학습이라는 것을 제대로 하고 있습니다! 앞으로도 좋은 강의들 부탁드립니다^^

    • 짐코딩
      知識共有者

      다른 강의보다 정말 신경 많이 쓰고 힘들게 준비했던 강의 같아요 🥹 수강생분들 한분한분 생각하며 말씀하신 것처럼 초보자분들의 입장에서 정말 쉽고 반복적으로 또 현업자의 분들에게 많은 도움을 드릴 수 있도록 내용은 깊고 알차게! 알아주시니 감개무량 하네요 🙏 감사합니다~!! 🙂

  • hiperbono님의 프로필 이미지
    hiperbono

    受講レビュー 1

    平均評価 5.0

    5

    52% 受講後に作成

    이번 강의 역시 좋아요! 짐코딩님의 강의를 하나씩 듣기 시작했는데 이번 강의를 들을 때 도움이 많이 되고 실무에서도 유용하게 사용할 수 있을거 같습니다. 강의도 재미있고 딕션도 너무 좋아서 지루하지 않게 들을 수 있습니다. 항상 수고하시고 감사합니다 :-)

    • 짐코딩
      知識共有者

      와우~! 정성스런 수강후기 남겨주셔서 감사합니다 🙂💪

  • Gichul Roh님의 프로필 이미지
    Gichul Roh

    受講レビュー 14

    平均評価 4.7

    5

    52% 受講後に作成

    인프런 내 Vue 강의 전부 수강하고 퍼블리셔에서 현재 실무에서 Vue 프론트엔드 개발자로 활동하고 있습니다. 아마 Vue2, Vue3 강의 중에서 실무급에 가장 근접한 강의라 생각합니다. 짐코딩 님의 강의는 처음 수강하게 되었는데, 타 강의자보다 좀 더 친절하게 가르치려고 노력한 흔적이 곳곳에서 보입니다. Quasar가 익히 타 프레임워크보단 괜찮다는 건 들었었는데, 본 강의 다 듣고 저도 사이드 프로젝트로 본 강의의 스택을 중심으로 진행해봐야겠습니다. 아무쪼록 많은 좋은 강의 부탁드립니다.

    • 짐코딩
      知識共有者

      웹 개발 시작하시는 분들을 위해서 쉽고 현업에서 계신 분들을 위해서 알차게 구성하려고 정말 노력한 강의인데요 알아주시니 감개무량합니다 😭 완강하시느라 고생 많으셨습니다! 감사합니다 💪

  • 경이님의 프로필 이미지
    경이

    受講レビュー 4

    平均評価 5.0

    5

    20% 受講後に作成

    귀한 Vue3 강의올려주셔서 감사합니다 ㅎㅎ vue3 강의가 많이 없는데 그 중 짐코딩님 vue3강의 기본편부터 실전편까지 다 들었어요 ! 다 듣고 아 더 안나오나 할때쯤 이렇게 활용법 강의가 나와서 바로 결제했습니다 ㅋㅋ ! 역시 믿고 듣는 짐코딩 뷰강의 .. 너무 소중해요 이렇게 잘 가르치시는분 찾기 쉽지 않은데 항상 믿고 듣습니다 ! 혹시.. nuxt 강의는 올려주실 생각은 없으신가요 ?ㅎㅎㅎ,,,

    • 짐코딩
      知識共有者

      제 강의를 소중히 생각해 주셔서 감사드립니다!!😃 Nuxt 강의도 최대한 빨리 준비해 보도록 할게요! 💪 감사합니다 🙂

¥19,351

gymcodingの他の講座

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

似ている講座

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