0Pricing
Vue Academy icon

Vue Academy

HTMLFrontendWebBeginner

Vue.jsを使用してインタラクティブで効率的なユーザーインターフェースをVue Academyで作成します。

🤖 AI 搭載📚 42 コース👥 100,000+ ユーザー⭐ 4.9 評価
コース概要

Vue.js: リアルUIを構築するための進化的フレームワーク

Vue.jsは、コンポーネント駆動のユーザーインターフェースを構築するために設計された進化的JavaScriptフレームワークです。既存ページに埋め込まれた単一のインタラクティブウィジェットから、Nuxtを使用した完全なサーバーレンダリングアプリケーションまで対応します。Composition API、きめ細かいリアクティビティシステム、TypeScriptの第一級サポートにより、新しいプロジェクトと古いフロントエンドから移行するチームの両方に実用的な選択肢です。このトラックはVue 3を端から端まで網羅し、テンプレート構文から本番環境へのデプロイまでをカバーしています。

学習内容

Composition APIとscript setup構文、Vueディレクティブ、計算プロパティ、リアクティビティの基礎を学びます。トラックはコンポーネント通信、スロット、provide/inject、共有ロジックのためのコンポーザブルをカバーします。PiniaとVuexの両方でアプリケーション状態を管理し、Vue Routerを使用したルーティング(高度なパターンを含む)、フォーム検証、WebSocketsを通じたリアルタイムデータとともにREST APIを使用します。後のコースではTypeScript統合、国際化、Storybook、Vitestによるテスト、パフォーマンス最適化、Nuxt 3によるサーバーサイドレンダリング、ApolloによるGraphQL、Progressive Web Apps、およびVueセキュリティプラクティスに対応しています。

学習パス

42のコースがA1からC1までをカバーしています。A1およびA2コースはVue CLI、テンプレート構文、データバインディング、ディレクティブ、フォーム、およびコンポーネントの基礎を確立します。B1コースは完全なエコシステムを構築します。ライフサイクルフック、トランジション、Pinia、Vuex、Vue Router、TypeScript、i18n、および非同期データです。B2はNuxt 3によるサーバーサイドレンダリング、GraphQL、WebSocket、コンポーネントテスト、レンダー関数、PWAサポート、およびコンポーネントライブラリの公開により難易度を上げます。C1キャップストーンコースはマイクロフロントエンドアーキテクチャ、高度なComposition APIパターン、Suspenseを使用したSSRストリーミング、大規模でのVueパフォーマンス、およびFastifyと認証で構築されたフルスタックアプリケーションに取り組みます。

仕組み

各コースは短く焦点を絞ったレッスンに分割されており、組み込みコードエディターで完了し、リアルタイムフィードバックを得ます。行き詰まったときはAIチューターが利用でき、アプリを離れることなく、自分のペースで構文演習、コンポーネントチャレンジ、アーキテクチャの問題を進められます。

学習を始める →

学び方

🎯
インタラクティブレッスン
リアルタイムフィードバック付きの実践的なコード演習
🤖
AIチューター
わからないときは、AIが即座にサポート
💻
組み込みエディタ
ブラウザで直接コードを書いて実行
🏆
認定資格
コース完了時に認定資格を取得
カリキュラム

42コース

Vue Academyラーニングパスのすべてのコース

01

Vue.js入門

A13レッスン

Vue.jsとは何かを理解し、環境を構築して、最初のリアクティブアプリケーションを作り始めます。

02

Vue CLIとプロジェクト構成を理解する

A13レッスンPRO

CLIでVueプロジェクトをスキャフォールドし、生成されたファイル構成とツールを理解します。

03

テンプレート構文とデータバインディング

A13レッスンPRO

補間、ディレクティブ、条件分岐、ループ、バインディングを含む、Vueの宣言的なテンプレート構文を使いこなします。

04

Vue 3 Composition APIの基礎

A24レッスンPRO

setup()、ref、reactiveを使い、Options APIからVue 3のComposition APIへ移行して、最新のVue開発を学びます。

05

Vue 3のScript Setup構文

A24レッスンPRO

Vue 3の シュガー構文を使い、より簡潔で扱いやすいコンポーネントを記述します。

06

Vueディレクティブ徹底入門

A24レッスンPRO

Vueに組み込まれたすべてのディレクティブを使いこなし、独自のカスタムディレクティブも作成します。

07

Vueのフォームとバリデーション

A24レッスンPRO

v-model、ネイティブバリデーション、VeeValidateライブラリを使って、堅牢なフォームを構築します。

08

コンポーネントの基礎と通信

A23レッスンPRO

再利用可能なVueコンポーネントを構築し、props、カスタムイベント、スロットで連携させます。

09

リアクティビティと算出プロパティ

A23レッスンPRO

Vueのリアクティビティシステムを理解し、算出プロパティとwatcherを効果的に活用します。

10

Vueコンポーネントのライフサイクル

B14レッスンPRO

Vue 3コンポーネントのライフサイクルフックを使いこなし、それぞれのフェーズが実行されるタイミングを理解します。

11

Vueのトランジションとアニメーション

B14レッスンPRO

Vueの と を使い、滑らかな入場・退出トランジションとリストアニメーションを追加します。

12

Vueスロットの発展

B14レッスンPRO

名前付きスロット、スコープ付きスロット、動的なスロットコンテンツを使い、再利用性の高いコンポーネントAPIを構築します。

13

ProvideとInject

B14レッスンPRO

Vueのprovide/inject機構を使い、prop drillingなしで深くネストされたコンポーネント間にデータを共有します。

14

Vue 3 Composables

B14レッスンPRO

Vue 3における主要なコード再利用パターンであるcomposablesとして、再利用可能な状態付きロジックを記述します。

15

Vueのエラーハンドリング

B14レッスンPRO

適切なエラーバウンダリ、フォールバックUI、グローバルエラーハンドリングを備えた、堅牢なVueアプリケーションを構築します。

16

Piniaによる状態管理

B14レッスンPRO

Vuexに代わる、よりシンプルでTypeScriptを第一に考えたVue 3公式の状態管理ライブラリ、Piniaを学びます。

17

Vue 3とTypeScript

B14レッスンPRO

TypeScriptを使い、型付きprops、emits、composablesを備えた完全に型安全なVue 3コンポーネントを記述します。

18

Vueの国際化(i18n)

B14レッスンPRO

vue-i18n v9、ロケール切り替え、適切な複数形処理を使って、多言語対応のVueアプリケーションを構築します。

19

VueとStorybookの統合

B14レッスンPRO

Storybookを使い、Vueコンポーネントを分離してドキュメント化・開発し、storiesとインタラクティブなコントロールを作成します。

20

Vue Routerによるルーティング

B13レッスンPRO

Vue Routerを使い、ルート、パラメータ、ナビゲーションガードを備えたクライアントサイドナビゲーションをVueアプリに追加します。

21

Vuexによる状態管理

B13レッスンPRO

Vuexを使い、state、mutations、actions、getters、modulesで共有アプリケーション状態を管理します。

22

APIと非同期データの扱い

B13レッスンPRO

Axios、ライフサイクルフック、堅牢なエラーハンドリングを使い、Vueアプリでリモートデータを取得・管理します。

23

Vueアプリのデプロイと保守

B13レッスンPRO

ホスティングプラットフォームと監視機能を使い、Vueアプリケーションを本番環境で構築、デプロイ、保守します。

24

Vueエコシステムとこれから

B14レッスンPRO

最先端のVueツール、Vapor mode、そしてVue開発の未来を形作る新たなパターンを探ります。

25

Vue Routerの高度なパターン

B24レッスンPRO

route meta、スクロール動作、トランジション、プログラムによるナビゲーションなど、Vue Routerの高度な機能を使いこなします。

26

Nuxt 3によるサーバーサイドレンダリング

B24レッスンPRO

Nuxt 3のファイルベースルーティング、サーバールート、SSR/SSG機能を使い、フルスタックVueアプリケーションを構築します。

27

VueとGraphQL、Apollo

B24レッスンPRO

Apollo Clientを使い、クエリ、ミューテーション、リアルタイムサブスクリプション向けにGraphQLをVueアプリへ統合します。

28

VueとWebSocketsによるリアルタイムアプリ

B24レッスンPRO

WebSocketsとSocket.ioを使い、チャット、ダッシュボード、コラボレーション向けのリアルタイム更新アプリケーションを構築します。

29

Vitestによるコンポーネントテスト

B24レッスンPRO

VitestとVue Test Utilsを使い、モックとカバレッジレポートを活用してVueコンポーネントを確実にテストします。

30

Vueのパフォーマンス最適化

B23レッスンPRO

遅延ロード、コード分割、メモ化、ボトルネックのプロファイリングによって、Vueアプリケーションを高速化します。

31

Vueアプリケーションのテスト

B23レッスンPRO

Vue Test UtilsによるユニットテストとエンドツーエンドテストでVueアプリをテストし、十分なカバレッジを実現します。

32

高度なパターンとベストプラクティス

B23レッスンPRO

mixin、カスタムディレクティブ、プラグイン、スケーラブルなプロジェクト構成など、高度なVueパターンを適用します。

33

VueのRender FunctionsとJSX

B24レッスンPRO

Vueのh() render functionとJSXを使い、テンプレートを超えた動的でプログラムによるコンポーネント生成を学びます。

34

VueによるプログレッシブWebアプリ

B24レッスンPRO

オフライン対応、サービスワーカー、ネイティブアプリのようなインストール機能を備えたPWAへVueアプリを変換します。

35

Vueのセキュリティベストプラクティス

B24レッスンPRO

実践的な防御パターンを使い、XSS、CSRFなどのWeb脆弱性からVueアプリケーションを守ります。

36

Vueコンポーネントライブラリの公開

B24レッスンPRO

Viteのlibrary modeを使い、再利用可能なVueコンポーネントライブラリを構築、ドキュメント化してnpmに公開します。

37

Vue 3プラグイン開発

B24レッスンPRO

グローバルコンポーネント、ディレクティブ、composables、アプリ全体の設定を追加する、インストール可能なVueプラグインを作成します。

38

Vueによるマイクロフロントエンド

C14レッスンPRO

Module Federationを使い、大規模なVueアプリケーションを独立したマイクロフロントエンドとして設計します。

39

Composition APIの高度なパターン

C14レッスンPRO

複雑なVueアプリケーションのために、高度なリアクティビティパターン、ステートマシン、composableファクトリを使いこなします。

40

Vueパフォーマンス最適化の発展

C14レッスンPRO

v-memo、遅延ロード、リアクティブシステムのチューニングを使い、Vueアプリケーションのパフォーマンスを計測・最適化します。

41

Vue SSRストリーミングとSuspense

C14レッスンPRO

ストリーミングSSRとVue Suspenseを実装し、段階的なページ読み込みとCore Web Vitalsの改善を実現します。

42

Fastifyと認証によるフルスタックVue

C14レッスンPRO

Vue 3フロントエンド、Fastifyバックエンド、JWT認証を備えた本番対応のフルスタックアプリケーションを構築します。

よくある質問

よくある質問

Vue Academyコースは無料ですか?

はい。Vue Academyコースは無料で始められ、インタラクティブレッスンをすべて無料で完了できます。オプションのPRO登録で、高度なAIツールと共有可能な認定資格がアンロックされます。

HTMLを学ぶのに事前経験は必要ですか?

いいえ。コースは基礎から始まり、より高度なトピックへと進むので、HTMLの事前経験がなくても始められます。

CoddyKitでHTMLをどのように学びますか?

実践しながら学びます。短いインタラクティブレッスンは、わかりやすい説明と、リアルタイムで実行される実践的なコード演習が組み合わさっており、24時間対応のAIチューターがわからないときにいつでもサポートします。

Vue Academyを完了すると認定資格がもらえますか?

はい。PRO学習者は試験を受けて、Vue Academyコースの完了を証明する共有可能な認定資格を取得できます(認証コード付き)。

スマートフォンでHTMLを学べますか?

はい。CoddyKitはウェブとネイティブiOS・Androidアプリで利用でき、どのデバイスでもHTMLを学習でき、進捗がすべてのデバイスで同期されます。

Vue Academyを今すぐ始める

AI搭載レッスンでプログラミングをマスターする数千人の学習者に参加しましょう。

無料で始める →すべてのコースを見る