Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
BEST
Programming

/

Front-end

クエサー(Quasar)完璧マスター:Vueフロントウェブをすばやく作成したい場合(Based Vue3)

Vue.jsでウェブ開発を行い、クエサー(Quasar)を利用したい方のための講義です。社内でフロントウェブをすばやく構築する必要がある方、または自分だけの素敵なUIを作成しなければならない方ですか?このレッスンを通じて簡単かつ迅速にフロントウェブを作成できます。

  • gymcoding
quasar
vue
프론트엔드
웹개발
front-end
Quasar
Vue.js

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

こんなことが学べます

  • Typography、Color、Breakpointなどのクエーサー"正しく"使い方

  • フォーム処理&有効性チェック、多言語処理など実務で必要な知識!

  • Grid System、レイアウトを活用したコンポーネントの並べ替え&配置

  • Quasar Utils&Plugins、SEO、Deploymentなどのクエーサーを正しく学習

  • Instagram、Youtube、Login Page クローンコーディングによる実戦感覚!

すばやく&正しくUIを描きたいですか?
最新Vue3のためのクエーサー完全征服!

Vue.jsベースのUIフレームワーク
クエーサー(Quasar) 一度に終わる

Vue.jsベースのUI Framework、 Quasarを知っていますか?


簡単、迅速、便利
希望のUIを開発したい場合は!

当初はVue3 + Quasar + Firebaseを活用して本物のコミュニティサイトを作成する講義を準備していました。

ところで、クエーサーを利用してUIを作っていた中、受講生の方々がUI構築についていろいろ質問をいただきました。

なぜなら、初期のWebアプリケーションを構築する際に使用するフレームワークの参加度が高いほど高いほど、そのフレームワークを「正しく」知って使用する場合と、そうでない場合には開発生産性も、メンテナンスの面でも大きな違いがあるからです。

それで、異王講義を準備するのですが、

  • 個人のウェブサイトを作成する方が素早く、素敵なUIを開発できるように
  • 現業にいる開発者の方がこの講義を通じて成功したフロントウェブを開発できるように

クエーサーのフレームワークを一度に終わらせる講義を準備することになりました。


なぜ、クエーサーのフレームワークですか?

  • 現在、最新のVue3を安定的にサポートするフレームワークです。
  • コンポーネントAPI仕様(Prop、Event、Slots)は非常に優れています。
  • コンポーネントだけでなく、ユーティリティ、プラグイン、ビルドなどのフロント開発を全体的にサポートするオールインワンフレームワークです。

私も今回私が使うコミュニティクエイサーとして開発する予定ですよ~! 😊


クエーサーパーフェクトマスター
カリキュラムを見てください📖

  • 公式文書を一緒に調べることで、受講生の方々が自ら進むことができる力を育てます。
  • ✅ 事前の知識が必要な部分は、別途のガイドを提供することで正しく理解できるように支援します。
  • ✅授業の途中で面白い機能、クローンコーディングを通じて楽しさと実戦感覚を身につけるように準備しました。

クエーサーを始めよう

  • クエーサーとは何か!
  • Quasar CLIで始める - 4つの方法
  • プロジェクト構造 - Scaffolding 構造を見る

クエーサーの基礎

  • Typography, Colors, Spacing - フォント、色、間隔を活用する
  • Breakpoints - レスポンシブWebを簡単に作成
  • Dark Mode(ダークモード)機能の作成

Grid & Layout

  • Flex Grid - 目的のUIを作成するための最初のボタン!
  • Web Layout, Multiple Layout - Web レイアウト, マルチレイアウト
  • Instagramのプロフィールページを作る

Login & Form, Utils & Plugins

  • ログイン、会員登録ページを作成する
  • QForm - フォームハンドリング、柔軟性チェック
  • Quasar Utils & Plugins

多言語処理

  • Quasar Language Packs - クエーサー社の内部コンポーネント多言語を適用
  • i18n - カスタムコンポーネント多言語の適用

YouTubeページのクローンコーディング

  • YouTubeのページを作成

Deployment & SEO

  • Deployment - SPAをデプロイする
  • Meta Pluginを活用した簡単SEO最適化

クエーサーで完成する簡単で迅速なUI構築🙌

クエーサーフレームワークを通じて、自分で簡単で迅速にUIを構築できるようにすることに重点を置いた講義です。

ジムコーディングYouTubeで講義プレビュー(EP 01〜07)


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

こんにちは、ジムコーディングです。私は現在、実用的なコーディングチャンネル「ジムコーディングGYM CODING」 YouTubeチャンネルを運営しています。

「Vue.js 3本物のコミュニティサイトを作る講義」を立ち上げる前に、受講生の方々が自分で好きなUIを自由に作れるように、Quasar Framework講義を立ち上げました。

Youtube |


Q&A 💬

Q. Vue.js 知識がない状態で受講してもいいですか?

この講義はVue3を知っている状態で受講するのに適しています。

そして、YouTubeのジムコーディングチャンネルでさまざまな開発関連の知識を得ることができます 🙂

Q.講義に使用されたソースコードは提供されますか?

各授業回差別にそのコードをダウンロードできるように提供しています。

Q. サーバー連動に関する内容も扱いますか?

いいえ、本講義はサーバー連動はせずクエイサーに集中して実務でUIをしっかりと素早く作れるように準備した講義です。


プログラミング初心者ガイド📢

プログラミングを始めたばかりの方が、本講義をスムーズ受講できるよう、フロントエンド開発ガイドをご案内いたします。

他にもYouTube のジムコーディングGYM CODINGチャンネルで様々な開発知識に触れることができますので、関心のある方にはお申し込みいただければ幸いです。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • 現在Vue3で迅速にWebプロジェクトを構築する必要がある開発者!

  • VueベースのきれいなUIを"高速"、"簡単に"作りたい方!

  • Quasar Frameworkを基礎から "きちんと"使いたい方!

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

  • HTML&CSS

  • JavaScript

  • Vuejs3

こんにちは
です。

24,578

受講生

1,354

受講レビュー

629

回答

4.9

講座評価

17

講座

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

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

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

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

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

カリキュラム

全体

27件 ∙ (5時間 56分)

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

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

受講レビュー

全体

40件

5.0

40件の受講レビュー

  • PrivilegeEscalate님의 프로필 이미지
    PrivilegeEscalate

    受講レビュー 5

    平均評価 5.0

    5

    100% 受講後に作成

    저처럼 백엔드하다가 프론트의 필요성이 느껴지는데 css 가 굉장히 하기싫은분께서는 vue1,2 를 포함하여 퀘이사강의까지 풀코스로 수강하시는 것을 강추드립니다, 저 또한 vue1, vue2 를 모두 듣고 퀘이사강의까지 풀코스로 들었습니다. 3개 모두 수강하고 복습하는데까지 2주 약간 안걸렸는데요, 수강 후기는 아래와 같습니다. 우선 강사분이 수강생분들을 굉장히 많이 생각하시는게 느껴집니다. 퀘이사에는 빌트인 컴포넌트들이 너무 많아 잘못하면 단순히 공식문서에서 튜토리얼만 따라하는 형식의 강의가 될 수 있었는데, 지루해질만하면 배운 내용을 토대로 이벤트퀘스트처럼 간단한 토이프로젝트를 진행하는부분이 너무 좋았습니다. 덕분에 자주쓰는 속성들을 인지할 수 있었습니다. 사실 퀘이사 공식문서가 죄다 영어여서 참고하기가 어려웠는데, 강사분도 공식문서에서 API 를 참고하며 코드를 작성하는 과정이 저에게는 혼자 공식문서를 참고하는 방법을 알게된 것 같아 도움이 굉장히 많이 되었습니다. 완강할때쯤 되면 강사분이 뭐 만들기전에 잠깐 멈추고 공식문서에서 ctrl +k, 혹은 ctrl + f 로 혼자 공식문서를 뒤지고있는 자신을 모습을 볼 수 있을 것입니다. 후기같은거 처음써봐서 아무말 대잔치가 되어버렸는데... 정리하면 강의의 완성도가 너무 높습니다.. 다음 강의도 나오는것으로 알고있는데 언제나오죠?

    • 짐코딩
      知識共有者

      정성스런 후기 남겨주셔서 너무너무 감사드립니다~! 🙂 강의를 기획, 촬영, 편집 그리고 검토할 때 듣는 사람의 입장에서 한번더 생각하려고해요. 커리큘럼, 팁, 코드, 속도, 발음 등등 알아주시니 감개무량하네요 👍 다음 강의는 6월 안쪽으로 출시해보려고 해요! ㅎㅎ 감사합니다 🙂

  • blue star님의 프로필 이미지
    blue star

    受講レビュー 17

    平均評価 5.0

    5

    100% 受講後に作成

    프론트엔드로 나를 업그레이드 하려고 짐코딩 선생님의 VUE 기본 , 실전편, 퀘이사 강의까지 모두 완강하였습니다~ 처음 습득하는 지식인지라 과정이 길고 힘들었지만 그래도 선생님의 초보자를 위한 섬세한 설명 덕분에 완강하게 되어 감사하고 기쁨 기쁨합니다~ 퀘이사 강의는 페이지를 빨리 만들수 있는 너무나 좋은 장점이 있고 컴퍼넌트들도 예쁘고, 익숙해지는데 더많은 훈련이 필요하겠지만 그래도 배우기수월 했어요~ 실습하는내내 참 재미있게 잘 배웠습니다~ 선생님의 빠른 답변 또한 좋았습니다~ 강의에 대한 열정도 칭찬 드려요~ 이렇게 좋은 강의 만들어 주셔서 감사합니다~ ^^

    • 짐코딩
      知識共有者

      와우~!! 좋은 말씀 너무너무 감사드립니다! 완강하시느라 수고많으셨습니다! 🎉 감사합니다 🙂

  • Estelluan님의 프로필 이미지
    Estelluan

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    비전공, 비관련 직무이지만, 업무상 프론트엔드 개발을 할 수 있으면 큰 도움이 될 것같아 퇴근 후 틈틈이 공부중인 직장인입니다. 짐코딩님 무료강의를 잘 듣고 있었는데, 마침 관심을 가지고있던 퀘이사에 대한 내용이라 부리나케 수강했습니다. 일단 퀘이사에 대한 한국어로된 자료를 얻는데 어려움이 있었는데, 강의를 올려주셔서 너무 감사하고, 어려울 수 있는 개념에 대해 쉬운 표현으로 치환하여 이해시켜 주시는 강의방식이 정말 좋았습니다. 이 강의 덕분에 퀘이사에 대해 많은 이해를 할 수 있었습니다.

    • 짐코딩
      知識共有者

      퇴근 후... 대단하십니다! 완강하시느라 고생 많으셨어요. 감사합니다~!! 🙂 🎉

  • 공유계정님의 프로필 이미지
    공유계정

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    100만원 짜리 강의 느낌.

    • 짐코딩
      知識共有者

      와우~! 감사합니다~!! 🙂 🎉

  • 상은쓰님의 프로필 이미지
    상은쓰

    受講レビュー 7

    平均評価 5.0

    5

    100% 受講後に作成

    500점짜리 강의!! 강의가 정말 재미있고 유익했습니다! 🤗 특히, 공식 문서를 참고해 설명해 주신 부분이 인상적이었습니다. 👍 덕분에 강의가 끝난 후에도 혼자서 공식 문서를 활용해 학습을 이어나갈 수 있는 자신감을 얻을 수 있었습니다. 또한 다크 모드, 인스타, 유튜브 등 만들기 강의에서 작업 과정을 상세히 보여주신 덕분에 효율적인 작업 방식을 배울 수 있어서 좋았습니다! 퀘이사를 이용해 다양한 사이트를 뚝딱뚝딱 만들 생각에 벌써 드릉드릉 하네요! 항상 좋은 강의 감사합니다!! 💪

    • 짐코딩
      知識共有者

      수강평을 읽으면서 미소가 저도 모르게 절로 나오네요 😙 단순히 스펙을 공유하는 것 보다 공식문서를 함께 살펴봄으로써 수강생분들이 스스로성장할 수 있도록 하는 바람이 컸는데요. 제 강의가 도움이 된 것 같아 매우 뿌듯합니다. 덕분에 더욱 좋은 콘텐츠를 만들 수 있을 거 같아요. 감사합니다! 🙇‍♀️

¥10,433

gymcodingの他の講座

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

似ている講座

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