강의

N
챌린지

멘토링

N
클립

로드맵

BEST
Programming

/

Front-end

Vuetify Admin Templateを作成する - 本番編 (Based Vue2)

Vue&Vuetifyで実務で開発されている人のための便利なヒント！ 😃

（5.0）受講レビュー 22件

受講生 502名

難易度 初級

受講期間 無制限

Vue.js
Vue.js
Vuetify
Vuetify
Vue.js
Vue.js
Vuetify
Vuetify

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

5.0

5.0

coffeeman

100% 受講後に作成

vuetifyについて知りました。ありがとうございます。

5.0

toki moki

100% 受講後に作成

楽しい受講でした 次はココ... nuxt3 + vuetify3 お願いします。 vuetifyを勉強しましたが、quasarをもう一度勉強するのはとても嫌です。

5.0

어차

100% 受講後に作成

高速で生産性の高い高品質のUIをfront経験のない私にも始められるように多くのお役に立ちました。 良い講義ありがとうございます

受講後に得られること

  • 私の味においしくスタイルをカスタマイズする

  • マルチレイアウト＆amp; Lazy Loading 設定

  • Validation、カスタムコンポーネント、Vuexアプリケーションなどの実践的なヒント！

美容パイで作るアドミンサイト、
実用的なジムコーディングと一緒にしてください🏋️‍♀️

Vuetify Admin Templateを作る本編

デモページを確認してください。 (リンク)

講義紹介📖

Vuetify SASS Variables、Navサブメニュー設定！だけでなく
Vueで開発時のLazy Loading、Form Validation、カスタムコンポーネント、Vuex適用など実務ヒント大放出！

講義反応📝

幸いなことに、多くの人が講座に満足していました😃
（講義速度が早く感じられる方は0.75倍速でご覧いただくことをお勧めします🙂）

講義のキーワード

＃実用的な＃コーディングコンテンツ

知識共有者の紹介✒️


実用的なコーディングコンテンツを作っていくYouTube のジムコーディングチャンネルです。
YouTube | フェッヘットGymスターグラム| Codingスターグラム

予想される質問 Q&A 💬

Q. ソースコードを提供しますか？

フェッヘットを通じて提供されます。

Q. 講義の速度が速すぎると思います。

講義速度に関するフィードバック映像をご確認ください。

Q. この講義を学んだらどんなことができますか？

Material Designの素敵なAdminサイトを作成できます！

こんな方に
おすすめです

学習対象は
誰でしょう？

  • Vueでウェブサイトを開発しようとしている人

  • Vuetifyの導入を検討している開発者

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

  • HTML

  • CSS

  • Javascript

  • Vue

  • ジムコーディングVuetify基本編

こんにちは
gymcodingです。

インフラン認証

キャリア認証

38,450

受講生

3,132

受講レビュー

1,792

回答

4.9

講座評価

18

講座

こんにちは！ 👋
コーディング教育クリエイターのジムコーディングです 😊

非開発者の方でもついてこられるよう、最大限分かりやすく、そして実務者の方も満足できるよう深く教えます。
フルスタック開発歴15年で、現在はYouTubeやInflearnでプログラミング・AIの知識を共有しています。With 15 years of experience as a full-stack developer, I am currently sharing programming and AI knowledge on YouTube and Inflearn.Với 15 năm kinh nghiệm phát triển Full-stack, hiện tại tôi đang chia sẻ kiến thức về lập trình và AI trên YouTube và Inflearn.

KT・起亜などの大企業サービス開発から、Cafe24のEコマースプラットフォーム、スマートシティIoTデータプラットフォーム、そして教育会社を運営しながら自ら作り上げた自社サービスまで、フロントエンド・バックエンド・AWSインフラのすべてを直接設計し、構築してきました。

これまでに積み上げてきた開発経験を、今は分かち合うことに注いでいます。
AI時代に不可欠な知識を、分かりやすく深くお伝えします。

🏆 検証された成果

🥇 インフラン 2026 クロード・コード講義 BEST 1

🏆 インフラン Awards 2025 ベストセラー選定

🔥 インフラン 2025 '今最もホットな講義' - Claude Code

🎬 YouTube チャンネル登録者数 5万人以上 · 累計再生回数 360万回以上

👨‍💻 経歴

  • 15年目のフルスタックエンジニア・現職IT企業代表

  • フロントエンド: React · Vue · TypeScript

  • バックエンド: Node.js · Java · Spring · Python

  • インフラ: AWS · Serverless · Lambda アーキテクチャ設計

  • Inflearn 知識共有者

     

スタートアップ（起業家）

  • 特許・商標の出願・登録経験

  • 政府の創業支援事業に多数選定（スマートベンチャーキャンパス「最優秀」など）

企業教育 (B2B)

  • マルチキャンパス - 企業実務者向け 'Claude Code' オフライン教育

  • 新韓カード開発者教育 - マルチキャンパス主管、オンラインライブ

  • 韓国ソフトウェア人材開発院 特講・官公庁 ITメンター

🙋‍♂️ もっと見る

もっと見る

カリキュラム

全体

14件 ∙ (2時間 22分)

講座掲載日: 
最終更新日: 

受講レビュー

全体

22件

5.0

22件の受講レビュー

  • fordev님의 프로필 이미지
    fordev

    受講レビュー 6

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

    楽しい受講でした 次はココ... nuxt3 + vuetify3 お願いします。 vuetifyを勉強しましたが、quasarをもう一度勉強するのはとても嫌です。

    • gymcoding
      知識共有者

      お疲れ様でした！ありがとう〜！ 🙂

  • comganet님의 프로필 이미지
    comganet

    受講レビュー 15

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

    vuetifyについて知りました。ありがとうございます。

    • gymcoding
      知識共有者

      ありがとう〜！ 🙂🎉

  • zubi938님의 프로필 이미지
    zubi938

    受講レビュー 5

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

    講義がストールな内容だけで構成されているのでとても良いです。 最後に、プロジェクトに必要なものをここで見つけてうれしいです。

    • gymcoding
      知識共有者

      ありがとうございます。楽しい週末になってください〜！ 💪

  • aircha님의 프로필 이미지
    aircha

    受講レビュー 24

    ∙

    平均評価 4.6

    5

    100% 受講後に作成

    高速で生産性の高い高品質のUIをfront経験のない私にも始められるように多くのお役に立ちました。 良い講義ありがとうございます

    • gymcoding
      知識共有者

      ありがとうございます！お疲れ様でした〜！ 🙂

  • capvirus1451님의 프로필 이미지
    capvirus1451

    受講レビュー 2

    ∙

    平均評価 5.0

    5

    85% 受講後に作成

    頭にすっぽり入る

    • gymcoding
      知識共有者

      よろしくお願いします〜!!! 🙂💪

gymcodingの他の講座

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

Claude Code 完全マスター：AI開発ワークフローの基礎から実践まで

gymcoding

探索 → 計画 → 実装 → コミット。検証済みのAI開発ワークフローをClaude Codeでマスターしましょう。 MCP、サブエージェント、プロンプトエンジニアリングまで、23のミッションで学び、3つの実践プロジェクトを完成させます。

入門

入門

React, AI, claude

Claude Code 完全マスター：AI開発ワークフローの基礎から実践まで

gymcoding

入門者のための、HTML&CSS ウェブ開発入門講義サムネイル

入門者のための、HTML&CSS ウェブ開発入門

gymcoding

HTMLとCSSを学ぶことで、ウェブサイトの制作に必要な基本的な知識を学ぶことができます。コーディングに初めて触れる際に恐れがないように、本当に分かりやすく説明した講義です。

入門

入門

HTML/CSS

入門者のための、HTML&CSS ウェブ開発入門講義サムネイル

入門者のための、HTML&CSS ウェブ開発入門

gymcoding

フロントエンドウィング：Vue、Reactを学ぶ前に必ず知っておくべき知識講義サムネイル

フロントエンドウィング：Vue、Reactを学ぶ前に必ず知っておくべき知識

gymcoding

この講義を通じて、Webpack、NPMなどのフロントエンド開発者になる前に必ず知っておくべき知識をしっかりと固めることができます。

初級

初級

Webpack

フロントエンドウィング：Vue、Reactを学ぶ前に必ず知っておくべき知識講義サムネイル

フロントエンドウィング：Vue、Reactを学ぶ前に必ず知っておくべき知識

gymcoding

React を完全にマスター: 基本概念から Lean Canvas プロジェクトまで講義サムネイル

React を完全にマスター: 基本概念から Lean Canvas プロジェクトまで

gymcoding

React を初めて学習しますか? この講座で React の基礎を学び、LinCanvas プロジェクトを通じて実務経験を積んでください。そうすれば、自信を持ってフロントエンド開発者として就職できます!

初級

初級

React, react-query, react-router

React を完全にマスター: 基本概念から Lean Canvas プロジェクトまで講義サムネイル

React を完全にマスター: 基本概念から Lean Canvas プロジェクトまで

gymcoding

クエサー（Quasar）完璧マスター：Vueフロントウェブをすばやく作成したい場合（Based Vue3）講義サムネイル

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

gymcoding

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

初級

初級

Quasar, Vue.js

クエサー（Quasar）完璧マスター：Vueフロントウェブをすばやく作成したい場合（Based Vue3）講義サムネイル

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

gymcoding

TailwindCSS を完全にマスター: ポートフォリオから管理まで!講義サムネイル

TailwindCSS を完全にマスター: ポートフォリオから管理まで!

gymcoding

1つの講義でTailwindCSSの入門から実践までを完了! 2つのプロジェクトでレイアウト構成からレスポンシブデザイン、ダークモードまで完璧に学んでください。

初級

初級

HTML/CSS, TailwindCSS, JavaScript

TailwindCSS を完全にマスター: ポートフォリオから管理まで!講義サムネイル

TailwindCSS を完全にマスター: ポートフォリオから管理まで!

gymcoding

Vue3パーフェクトマスター：基礎から本番まで - 「本編」講義サムネイル

Vue3パーフェクトマスター：基礎から本番まで - 「本編」

gymcoding

Vue.js 3で本番プロジェクトを開発し、Composition APIの使い方を理解しています。さらに、このコースを受講すると、「Vue Router v4」と「Pinia」、「Boostrap」のスキルを取得できます。

初級

初級

Vue.js

Vue3パーフェクトマスター：基礎から本番まで - 「本編」講義サムネイル

Vue3パーフェクトマスター：基礎から本番まで - 「本編」

gymcoding

Next.js完璧マスター (v15): Notion基盤開発者ブログ作り (with CursorAI)講義サムネイル

Next.js完璧マスター (v15): Notion基盤開発者ブログ作り (with CursorAI)

gymcoding

最新のNext.js v15 App Routerを学習しながら、Notion基盤の実用的な開発者ブログを一緒に構築する講義です。さらにCursor AI活用法など様々なインサイトも得ることができます。

初級

初級

React, Blog, Next.js

Next.js完璧マスター (v15): Notion基盤開発者ブログ作り (with CursorAI)講義サムネイル

Next.js完璧マスター (v15): Notion基盤開発者ブログ作り (with CursorAI)

gymcoding

非同期プログラミング: Promise、async/await を徹底的に理解する講義サムネイル

非同期プログラミング: Promise、async/await を徹底的に理解する

gymcoding

この講義では、JavaScript 非同期プログラミングにおける Promise と async/await の概念と動作原理を明確に説明し、実務で非同期処理を熟練して扱うことができるように支援します。

初級

初級

promise, async-await, asynchronous-programming

非同期プログラミング: Promise、async/await を徹底的に理解する講義サムネイル

非同期プログラミング: Promise、async/await を徹底的に理解する

gymcoding

入門者のための、ES6+の最新のJavaScript入門講義サムネイル

入門者のための、ES6+の最新のJavaScript入門

gymcoding

周辺でコーディングを初めて始める方々をたくさん見ました。 キャリアの方はJavaScriptが簡単だと言いますが、初めて接する方は難しく感じるしかありません。 だから今回の講義はコーディングに入門される王初歩の方々のために簡単！ちょっと！内容を用意しました。 💪🙂

初級

初級

JavaScript, ES6

入門者のための、ES6+の最新のJavaScript入門講義サムネイル

入門者のための、ES6+の最新のJavaScript入門

gymcoding

最新のVue 3完全ガイド：プロジェクト設定＆仕様総定理講義サムネイル

最新のVue 3完全ガイド：プロジェクト設定＆仕様総定理

gymcoding

"Vue 3 完全マスター" 後続の講義で最新の Vue 3 バージョンのプロジェクト設定と最新のスペックを習得する講義です。

初級

初級

Vue.js, Vue 3, TailwindCSS

最新のVue 3完全ガイド：プロジェクト設定＆仕様総定理講義サムネイル

最新のVue 3完全ガイド：プロジェクト設定＆仕様総定理

gymcoding

ポートフォリオ サイトを作成して公開まで！: Web 開発入門活用編講義サムネイル

ポートフォリオ サイトを作成して公開まで！: Web 開発入門活用編

gymcoding

HTML&CSS、JavaScript を学んだら、それらを利用して自分でポートフォリオ サイトを作成し、公開してみましょう。実際に使ってみると、私たちのスキルを向上させるのに大いに役立ちます。

入門

入門

HTML/CSS, JavaScript, github-pages

ポートフォリオ サイトを作成して公開まで！: Web 開発入門活用編講義サムネイル

ポートフォリオ サイトを作成して公開まで！: Web 開発入門活用編

gymcoding

[最新]Vue川の終わりの王：Nuxt 3完璧マスター講義サムネイル

[最新]Vue川の終わりの王：Nuxt 3完璧マスター

gymcoding

Vueベースでパフォーマンスに優れたWebをすばやく作成するのに役立つNuxtフレームワーク講義です。

中級以上

中級以上

Vue.js, Nuxt.js, pinia

[最新]Vue川の終わりの王：Nuxt 3完璧マスター講義サムネイル

[最新]Vue川の終わりの王：Nuxt 3完璧マスター

gymcoding

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

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

gymcoding

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

中級以上

中級以上

Vue.js, Firebase, Quasar

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

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

gymcoding

Vue3完全マスター：基礎から実践まで - 「基本編」講義サムネイル

Vue3完全マスター：基礎から実践まで - 「基本編」

gymcoding

Vue.js 3でウェブ開発ができるよう、公式ドキュメントに基づいてVue 3の仕様を詳しく、かつ深く掘り下げて解説します。

初級

初級

Vue.js

Vue3完全マスター：基礎から実践まで - 「基本編」講義サムネイル

Vue3完全マスター：基礎から実践まで - 「基本編」

gymcoding

Vuetify Admin Templateの作成 - 基本編 (Based Vue2)講義サムネイル

Vuetify Admin Templateの作成 - 基本編 (Based Vue2)

gymcoding

Vuetifyの基礎を学び、素晴らしいMaterial Design Adminのウェブサイトを作成することができます😃

初級

初級

Vue.js, Vuetify

Vuetify Admin Templateの作成 - 基本編 (Based Vue2)講義サムネイル

Vuetify Admin Templateの作成 - 基本編 (Based Vue2)

gymcoding

似ている講座

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

Vuetify Admin Templateの作成 - 基本編 (Based Vue2)講義サムネイル

Vuetify Admin Templateの作成 - 基本編 (Based Vue2)

gymcoding

Vuetifyの基礎を学び、素晴らしいMaterial Design Adminのウェブサイトを作成することができます😃

初級

初級

Vue.js, Vuetify

Vuetify Admin Templateの作成 - 基本編 (Based Vue2)講義サムネイル

Vuetify Admin Templateの作成 - 基本編 (Based Vue2)

gymcoding

VueでNodebird SNSを作成する講義サムネイル

VueでNodebird SNSを作成する

zerocho

VueとNuxtフレームワークを使用してSNSサービスを作成します。サービスに必要なフルスタックの知識を学びます。

中級以上

中級以上

Vue.js, Node.js, AWS

VueでNodebird SNSを作成する講義サムネイル

VueでNodebird SNSを作成する

zerocho

カカオ、Google SNSログイン(springboot3, vue3)講義サムネイル

カカオ、Google SNSログイン(springboot3, vue3)

bradkim

Spring Bootを活用してカカオ、Googleログインを実装します。JWTトークンベースのログインが実装されます。Vue 3を通じて簡単な画面を構成します。

初級

初級

OAuth, oauth2, JWT

カカオ、Google SNSログイン(springboot3, vue3)講義サムネイル

カカオ、Google SNSログイン(springboot3, vue3)

bradkim

Vue3とSupabaseで求人求人サイトを作る講義サムネイル

Vue3とSupabaseで求人求人サイトを作る

Michael Kwon

独自のフルスタックアプリケーション開発からプログレッシブWebアプリ（PWA）まで！

初級

初級

Vue.js, PWA, supabase

Vue3とSupabaseで求人求人サイトを作る講義サムネイル

Vue3とSupabaseで求人求人サイトを作る

Michael Kwon

Vue.js - DjangoインターロックWebプログラミング（実践編）講義サムネイル

Vue.js - DjangoインターロックWebプログラミング（実践編）

bestdjango

クライアントプロフェッショナルFWのVue.jsとサーバープロフェッショナルFWであるDjangoを一緒に活用して、アップグレードされたWebプログラミングをしましょう。 Vue側のVueRouterとVuexを使わなくても、Django側のDRFを使わなくても、簡単にできる。

初級

初級

Vue.js, Django, Vuetify

Vue.js - DjangoインターロックWebプログラミング（実践編）講義サムネイル

Vue.js - DjangoインターロックWebプログラミング（実践編）

bestdjango

Vue.jsとUIを一度に学習/Nuxt3 + OpenWeatherMapでリアルタイム天気アプリ作成講義サムネイル

Vue.jsとUIを一度に学習/Nuxt3 + OpenWeatherMapでリアルタイム天気アプリ作成

gis

Nuxt UI, Nuxt SEO, Nuxt Server Api, Pinia, PWA, Firebase, Email Login, Google Login を 簡単に学べます~~

初級

初級

Vue.js, PWA, Firebase

Vue.jsとUIを一度に学習/Nuxt3 + OpenWeatherMapでリアルタイム天気アプリ作成講義サムネイル

Vue.jsとUIを一度に学習/Nuxt3 + OpenWeatherMapでリアルタイム天気アプリ作成

gis

Vue.js - DjangoインターロックWebプログラミング講義サムネイル

Vue.js - DjangoインターロックWebプログラミング

bestdjango

Vue.jsとDjangoフレームワークを使用してWebプログラミングを行うことができます。

初級

初級

Vue.js, Django

Vue.js - DjangoインターロックWebプログラミング講義サムネイル

Vue.js - DjangoインターロックWebプログラミング

bestdjango

最新のVue 3完全ガイド：プロジェクト設定＆仕様総定理講義サムネイル

最新のVue 3完全ガイド：プロジェクト設定＆仕様総定理

gymcoding

"Vue 3 完全マスター" 後続の講義で最新の Vue 3 バージョンのプロジェクト設定と最新のスペックを習得する講義です。

初級

初級

Vue.js, Vue 3, TailwindCSS

最新のVue 3完全ガイド：プロジェクト設定＆仕様総定理講義サムネイル

最新のVue 3完全ガイド：プロジェクト設定＆仕様総定理

gymcoding

企画者様 この程度ウェブ開発は学んでみてはいかがでしょうか？ [理論+実習]講義サムネイル

企画者様 この程度ウェブ開発は学んでみてはいかがでしょうか？ [理論+実習]

bokchi

忙しい企画者の方々のための急速に進行する開発講義です。 より多くの説明では、Webフロントエンド、バックエンド、DBを直接開発し、全体的な開発プロセスを学ぶことができます。

入門

入門

HTML/CSS, JavaScript, Vue.js

企画者様 この程度ウェブ開発は学んでみてはいかがでしょうか？ [理論+実習]講義サムネイル

企画者様 この程度ウェブ開発は学んでみてはいかがでしょうか？ [理論+実習]

bokchi

ホドルマンの腹痛開発ショー (SpringBoot、Vue.JS、AWS)講義サムネイル

ホドルマンの腹痛開発ショー (SpringBoot、Vue.JS、AWS)

hodolman888675

単にアプリケーションを 1 つ作成するだけではありません。Spring Boot を活用したバックエンドから Vue.js モダン フロントエンド スタックを連携したサービスの完成まで、A から Z までご紹介します。

中級以上

中級以上

Spring Boot, JPA, AWS

ホドルマンの腹痛開発ショー (SpringBoot、Vue.JS、AWS)講義サムネイル

ホドルマンの腹痛開発ショー (SpringBoot、Vue.JS、AWS)

hodolman888675