강의

N
챌린지

멘토링

N
클립

로드맵

Programming

/

Front-end

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

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

（4.9）受講レビュー 84件

受講生 2,346名

難易度 初級

受講期間 無制限

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

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

4.9

5.0

딘딘은

33% 受講後に作成

vuetify入門用として良い講義のようです。講師様の声のトーンや発音も適切で快適に聞いて良かったです。残念な部分はどうしても時間が過ぎているのか各セッティングごとにバージョンが違って生じる問題なのですが、この部分は仕方ないようです。良い講義無料でご提供いただきありがとうございます！

5.0

쿠카이든

27% 受講後に作成

Vuetifyについてたくさん学びました！

5.0

krdopd

60% 受講後に作成

必要な内容だけをとってください。

受講後に得られること

  • Vue CLIによるVuetifyプロジェクトの設定

  • Vuetify Grid Systemでレイアウトをキャッチする

  • Vuetify Typography、Breakpoints、Colorなどの基本学習

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

Vuetify Admin Templateを作成する基本編

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

講義紹介📖

Vuetify GridSystem、Typography、Breakpoints、Colorsなど！
Vuetifyを使用する前に知っておくべき基本について説明します😃

講義反応📝

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

講義のキーワード

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

知識共有者の紹介✒️


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

予想される質問 Q&A 💬

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

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

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

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

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

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

こんな方に
おすすめです

学習対象は
誰でしょう？

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

  • Material DesignでWeb開発をしたい人

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

  • HTML

  • CSS

  • Javascript

  • Vue

こんにちは
gymcodingです。

インフラン認証

キャリア認証

36,925

受講生

2,911

受講レビュー

1,682

回答

4.9

講座評価

18

講座

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

非開発者の方でもついてこられるよう、最大限分かりやすく、そして実務者の方も満足できるよう深く教えます。
現在13年目のフルスタックエンジニアであり、ITスタートアップを自ら運営している代表です。

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

現在は教育に集中しながらも、自社サービスを直接開発することで現場の感覚を維持しています。

その現場での経験を、初心者でも理解できる言葉で解き明かすこと、それが私の講義で行っていることです。

🏆 検証された成果

🥇 インフラン 2026 クロード・コード 講義 BEST 1 - クロード・コード完璧マスター

🏆 インフラン Awards 2025 ベストセラー - React完璧マスター

🔥 インフラン 2025 '今最もHOTな講義' - Claude Code 完璧マスター

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

👨‍💻 経歴

  • 13年目のフルスタックエンジニア・現職ITスタートアップ代表

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

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

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

  • Inflearnナレッジ共有者

     

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

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

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

企業教育 (B2B)

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

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

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

🙋‍♂️ もっと見る

もっと見る

カリキュラム

全体

15件 ∙ (1時間 52分)

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

受講レビュー

全体

84件

4.9

84件の受講レビュー

  • hubhy4600님의 프로필 이미지
    hubhy4600

    受講レビュー 11

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

    これだけ繰り返し熟達しても反応型および簡単なランディングページ外周は全部打ち出せますね。

    • gymcoding
      知識共有者

      ありがとう〜！ クエーサー！楽しみにしています👍

  • dindine님의 프로필 이미지
    dindine

    受講レビュー 1

    ∙

    平均評価 5.0

    5

    33% 受講後に作成

    vuetify入門用として良い講義のようです。講師様の声のトーンや発音も適切で快適に聞いて良かったです。残念な部分はどうしても時間が過ぎているのか各セッティングごとにバージョンが違って生じる問題なのですが、この部分は仕方ないようです。良い講義無料でご提供いただきありがとうございます！

    • gymcoding
      知識共有者

      ありがとうございます〜！ 💪

  • krdopd3428님의 프로필 이미지
    krdopd3428

    受講レビュー 2

    ∙

    平均評価 5.0

    5

    60% 受講後に作成

    必要な内容だけをとってください。

    • gymcoding
      知識共有者

      お役に立ててよかったです〜！

  • kukaeden님의 프로필 이미지
    kukaeden

    受講レビュー 528

    ∙

    平均評価 5.0

    5

    27% 受講後に作成

    Vuetifyについてたくさん学びました！

    • gymcoding
      知識共有者

      ありがとうございます〜！

  • nojm737372님의 프로필 이미지
    nojm737372

    受講レビュー 16

    ∙

    平均評価 5.0

    5

    36% 受講後に作成

    よく聞いています。

    • gymcoding
      知識共有者

      ありがとうございます〜！

gymcodingの他の講座

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

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

gymcoding

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

入門

入門

React, AI, claude

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

gymcoding

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

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

gymcoding

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

初級

初級

Vue.js

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

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

gymcoding

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

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

gymcoding

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

初級

初級

Webpack

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

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

gymcoding

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

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

gymcoding

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

初級

初級

Vue.js

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

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

gymcoding

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

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

gymcoding

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

初級

初級

React, react-query, react-router

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

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

gymcoding

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

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

gymcoding

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

入門

入門

HTML/CSS

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

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

gymcoding

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

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

gymcoding

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

中級以上

中級以上

Vue.js, Nuxt.js, pinia

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

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

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

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

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

gymcoding

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

初級

初級

HTML/CSS, TailwindCSS, JavaScript

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

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

gymcoding

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

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

gymcoding

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

初級

初級

JavaScript, ES6

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

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

gymcoding

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

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

gymcoding

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

初級

初級

promise, async-await, asynchronous-programming

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

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

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 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

クエサー（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

Vuetify Admin Templateを作成する - 本番編 (Based Vue2)講義サムネイル

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

gymcoding

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

初級

初級

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

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

初級

初級

Vue.js, Vuetify

Vuetify Admin Templateを作成する - 本番編 (Based Vue2)講義サムネイル

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

gymcoding

カカオ、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

Do it!プログレッシブウェブアプリを作成講義サムネイル

Do it!プログレッシブウェブアプリを作成

easyspub

グローバル企業の次世代モバイル戦略、PWA（プログレッシブWebアプリ）を学ぼう！

初級

初級

PWA, Web Application, Vue.js

Do it!プログレッシブウェブアプリを作成講義サムネイル

Do it!プログレッシブウェブアプリを作成

easyspub

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

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

Michael Kwon

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

初級

初級

Vue.js, PWA, supabase

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

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

Michael Kwon

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-Django-Bootstrap 뚝딱ブログ講義サムネイル

Vue-Django-Bootstrap 뚝딱ブログ

bestdjango

人気3総士（Vue + Django + Bootstrap）を活用して、簡単かつ素敵な自分のブログを作ることができます。 レスポンシブは基本、スマートフォンでも見ることができます。

初級

初級

Vue.js, Django, Bootstrap

Vue-Django-Bootstrap 뚝딱ブログ講義サムネイル

Vue-Django-Bootstrap 뚝딱ブログ

bestdjango

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

ホドルマンの腹痛開発ショー (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

最新の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

無料