강의

N
챌린지

멘토링

N
클립

로드맵

Programming

/

Front-end

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

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

（4.9）受講レビュー 84件

受講生 2,349名

難易度 初級

受講期間 無制限

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です。

インフラン認証

キャリア認証

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メンター

🙋‍♂️ もっと見る

もっと見る

カリキュラム

全体

15件 ∙ (1時間 52分)

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

受講レビュー

全体

84件

4.9

84件の受講レビュー

  • dindine님의 프로필 이미지
    dindine

    受講レビュー 1

    ∙

    平均評価 5.0

    5

    33% 受講後に作成

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

    • gymcoding
      知識共有者

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

  • hubhy4600님의 프로필 이미지
    hubhy4600

    受講レビュー 11

    ∙

    平均評価 5.0

    5

    100% 受講後に作成

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

    • gymcoding
      知識共有者

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

  • kukaeden님의 프로필 이미지
    kukaeden

    受講レビュー 531

    ∙

    平均評価 5.0

    5

    27% 受講後に作成

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

    • gymcoding
      知識共有者

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

  • nojm737372님의 프로필 이미지
    nojm737372

    受講レビュー 16

    ∙

    平均評価 5.0

    5

    36% 受講後に作成

    よく聞いています。

    • gymcoding
      知識共有者

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

  • krdopd3428님의 프로필 이미지
    krdopd3428

    受講レビュー 2

    ∙

    平均評価 5.0

    5

    60% 受講後に作成

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

    • 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

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

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

VueでNodebird SNSを作成する

zerocho

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

中級以上

中級以上

Vue.js, Node.js, AWS

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

VueでNodebird SNSを作成する

zerocho

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

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

Michael Kwon

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

初級

初級

Vue.js, PWA, supabase

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

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

Michael Kwon

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

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

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

gymcoding

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

初級

初級

Vue.js, Vue 3, TailwindCSS

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

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

gymcoding

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

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

初級

初級

Vue.js, Django, Vuetify

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

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

bestdjango

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

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

bokchi

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

入門

入門

HTML/CSS, JavaScript, Vue.js

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

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

bokchi

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

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

無料