Vueを学ぶ - コーディング講座
Vueを学ぶ - コーディング講座 — スマートフォンでコンポーネントを作りながらVue.jsを学べます
Vueを学ぶ - コーディング講座は、iOSとAndroidで利用できる無料で始められるアプリです。HTMLとJavaScriptを少し知っている初心者や、Options APIからComposition APIへ移行する開発者に、Vue.jsを教えます。42コース、156レッスンを収録し、最初のテンプレートからPinia、Vue Router、Nuxt 3まで学べます。さらに、single-file componentsをお使いのデバイス上でコンパイルできるため、20のガイド付きプロジェクト、ミッション、Vue Labをサーバーなしで実行できます。
- 価格
- 無料、Proへのアップグレードあり
- プラットフォーム
- iOSとAndroid
- 言語
- 22
- 年齢レーティング
- 4+
- バージョン
- 82.6.0
- 必要環境
- iOS 15.1以降
- App Store
- 3.0 ★ (2)


コンポーネントは、実際に壊してみると、より理解しやすくなります。
Vue Labでは、毎日壊れたコンポーネントが出題され、バグを見つけます。ライブコントロールでコンポーネントのpropsを調整したり、クリックするたびにstateがどのように変化するかを確認したりできます。single-file componentsはスマートフォン上でコンパイルされるため、プレビューが目の前で壊れたり直ったりします。何が起きたのかを示すエラーカードも表示されます。
概要
Vueを学ぶ - コーディング講座は、iOSとAndroidで利用できる無料アプリです。template syntaxとdata bindingから、Composition API、Pinia、Vue Router、TypeScript、Nuxt 3、Vitestによるテスト、full-stack appsまで、42コースと156レッスンを通してVue.jsを学べます。single-file componentsはデバイス上でコンパイルされるため、ガイド付きプロジェクト、コーディングミッション、実践的なVue Labをサーバーなしでスマートフォン上で実行できます。さらに、ProではAI mentorがコードやエラーを解説します。
アプリの内容
画面イメージ





コース
Vueコースで学べる内容
アプリ独自のコース一覧にある42コース、156レッスン。最初のテンプレートからサーバーレンダリング、プロダクション向けのパターンまで学べます。
Vue.jsを始める
Vue.js、Vue CLI、プロジェクト構成、テンプレート構文、データバインディングの基礎を学びます。
リアクティビティとComposition API
Vue 3 Composition APIの基礎、script setup構文、リアクティビティとcomputedプロパティ、Vueディレクティブを学びます。
Components and Forms
コンポーネントの基礎と通信、スロット、provideとinject、フォームとバリデーション、コンポーネントのライフサイクルを学びます。
Reuse and Polish
Vue 3のcomposables、トランジションとアニメーション、エラーハンドリング、render関数とJSXを学びます。
State and Routing
Piniaによる状態管理、Vuex、Vue Routerを使ったルーティングと高度なルーターパターン、APIと非同期データの扱い方を学びます。
TypeScript, i18n and Tooling
Vue 3でのTypeScript、国際化、Storybookとの統合、Vueアプリのデプロイと保守について学びます。
Nuxt 3、テスト、リアルタイム
Nuxt 3によるサーバーサイドレンダリング、Vitestによるコンポーネントテスト、Apolloを使ったGraphQL、WebSocketsによるリアルタイムアプリを学びます。
Production Patterns
パフォーマンス、セキュリティのベストプラクティス、プラグイン開発、コンポーネントライブラリの公開、プログレッシブWebアプリ、マイクロフロントエンドを学びます。
使い方
アプリでのVue学習の進み方
各コースにはレベルが設定されています。無料の最初のコース以降の各レッスンも、まず無料プレビューから始まるため、先に進むか決める前に、そのテーマがどのようなものか確認できます。
Introduction to Vue.jsから始める
最初のコースは無料で、Vueとは何か、環境のセットアップ、Hello Vueアプリケーションから始まります。コースにはA1からC1までのタグが付いているため、どこから始め、次に何を学ぶのかが明確です。
スマートフォンでコンポーネントを作成・実行する
single-file componentを編集すると、すぐにプレビューできます。ガイド付きプロジェクトでは、アプリを一歩ずつ成長させられます。App Studioでは、用意されたblueprintsからrouterとstoreを備えた複数画面のアプリを構築できます。
Vue Labで練習する
毎日のバグを探し、Style Labで目標デザインを再現し、speed-build duelsで時間を競い、またはOptions APIのコンポーネントをComposition形式に書き換えましょう。
内容
アプリに含まれるもの
42
コース、156レッスン
template syntaxとdirectivesから、lifecycle、slots、provideとinject、composablesを経て、Nuxt 3、GraphQL、PWAs、micro-frontendsまで学べます。
20
ガイド付きプロジェクト
アプリを一歩ずつ成長させられます。single-file componentsはお使いのデバイス上ですぐにコンパイルされ、プレビューが壊れたときにはエラーカードが表示されます。
28
コーディングミッション
簡単なものから難しいものまでさまざまな演習を用意しています。routerとstoreを備えた複数画面のアプリを作れるApp Studioのblueprintsも含まれます。
ラボ
Vue Lab
reactivity inspector、毎日のバグ探し、12段階のStyle Lab、speed-build duels、Options APIからComposition APIへ移行するdojo、そして画像カードとして共有できるMy Componentsライブラリを利用できます。
面接
Vueの面接対策問題
フロントエンド開発者の面接に向けた問題を、クイズ、フラッシュカードの復習セッション、いつでも開けるチートシートとともに収録しています。
AI
AI mentor(Pro)
概念やエラーについて質問したり、コードの解説を受けたり、学びたいテーマのカスタムレッスンを生成したりできます。
背景
Vue.jsとは何ですか?初心者はまず何を学ぶべきですか?
Vueは、コンポーネントからインタラクティブなWebインターフェースを構築するためのJavaScriptフレームワークです。コンポーネントとは、それぞれがtemplate、logic、styleの一部を持つ、小さく再利用可能なパーツです。初心者にとっての魅力は、無理なく始められることです。プレーンなHTMLと少しのJavaScriptから始め、学びながら構造を加えていけます。学習の順番としては、templatesとdata binding、次にreactivityとcomponents、その後にComposition API、そしてrouting、state management、server renderingへ進むのがよいでしょう。
Reactivity中心となる考え方
データの一部を変更すると、それに依存する画面が自動的に更新されます。どの値がreactiveなのか、computed propertiesとwatchersが何を加えるのかを理解すれば、Vueの初期段階で感じる混乱の多くを解消できます。
Options APIとComposition APIコンポーネントを書く2つの方法
以前からあるOptions APIでは、dataやmethodsなど、種類ごとにコードをまとめます。script setupを使うComposition APIでは、機能ごとにコードをまとめられ、再利用可能なcomposablesも簡単に作れます。現在も両方を使うチュートリアルやコードベースは多いため、どちらも読めることは役立つスキルです。
Pinia、Vuex、ルーター実際のアプリに加わるもの
アプリに複数の画面ができると、画面間を移動するためのroutingと、複数のコンポーネントで使うデータを共有するstoreが必要になります。Piniaは現在のVue向けstoreで、Vuexは以前使われていたstoreです。既存のプロジェクトには、今もVuexを使っているものが数多くあります。
Nuxtとserver rendering検索と速度が重要になるとき
NuxtはVueを基盤としてページをサーバーでrenderingし、初回読み込みと検索での見つけやすさを向上させます。通常は、components、routing、stateに慣れてから学ぶ第2段階のテーマです。
適しています
向いている方・向いていない方
次のような方におすすめです
- HTMLとJavaScriptを少し知っていて、最初のフレームワークを学びたい方
- Options APIからComposition APIへ、またはVuexからPiniaへ移行しようとしている方
- Vue.js開発者の面接や、初めてのフロントエンド職に向けて準備している方
- コンポーネントについて読むより、壊れたコンポーネントを直しながら学びたい方
- 通勤時間に取り組める短いセッションを求めている方
次のような方には適していません
- HTMLもJavaScriptも見たことがない方 — まずはJavaScriptコースから始めてください
- スマートフォンから本番アプリをリリースしたい方 — その作業には今でもノートパソコンが適しています
- すべて無料だと思っている方:最初のコースとプレビューは無料ですが、Proですべてのカリキュラムを利用できます
- 公式のVue.js教材を求めている方 — このアプリは独立した学習アプリです
ご質問
よくある質問
スマートフォンでVue.jsを学ぶ最適な方法は何ですか?
読むだけでなく、コンポーネントを実行しながら学びましょう。Vueを学ぶ - コーディング講座はデバイス上で単一ファイルコンポーネントをコンパイルするため、20のガイド付きプロジェクト、28のミッション、Vue Labのすべてをスマートフォンで実行できます。42コースにわたる短いレッスンで、テンプレート構文からNuxt 3まで学べます。まずは無料の最初のコースから始められます。
このアプリではComposition APIとPiniaを学べますか?
はい。Vueを学ぶ - コーディング講座には、Vue 3 Composition APIの基礎、script setup構文、composables、Piniaによる状態管理のコースがあり、既存のプロジェクト向けに従来のVuexも扱います。Vue LabのOptions to Composition API dojoでは、従来のコンポーネントを現代的なスタイルに書き換える練習ができます。
VueのOptions APIとComposition APIの違いは何ですか?
Options APIでは、data、methods、computedなど、種類ごとにコンポーネントのコードをまとめます。一方、script setupを使うComposition APIでは機能ごとにまとめられ、再利用可能なcomposablesを簡単に作れます。Vueを学ぶ - コーディング講座ではscript setupを使ったComposition APIを学べ、Vue LabのOptions to Composition API dojoで従来のコンポーネントを現代的なスタイルに書き換えられます。
Vueを学ぶ前にJavaScriptを知っておく必要はありますか?
HTMLとJavaScriptを少し知っていると、大いに役立ちます。Vueを学ぶ - コーディング講座は、基礎を知っていて最初のフレームワークを学びたい初心者向けです。そのためVueの概念を最初から説明しますが、JavaScript自体は教えません。変数や関数が初めてなら、先にJavaScriptコースを受講してください。
Vue Labとは何ですか?
Vue LabはVueを学ぶ - コーディング講座の練習エリアです。リアクティビティインスペクター、壊れたコンポーネントを使う毎日のバグハント、CSSで目標のデザインを再現するStyle Labのレベル、スピードビルド対戦、Options to Composition API dojo、そして作成したものを保存するMy Componentsライブラリがあります。
Nuxt 3とサーバーサイドレンダリングにも対応していますか?
はい。Vueを学ぶ - コーディング講座の上級コースでは、Nuxt 3によるサーバーサイドレンダリング、Suspenseを使ったSSRストリーミング、Fastifyと認証を使ったフルスタックVueを、VitestによるコンポーネントテストやWebSocketsによるリアルタイムアプリとともに学べます。
Vue.jsの面接対策に役立ちますか?
はい。Vueを学ぶ - コーディング講座には、フロントエンド開発者の職種向けVue面接問題に加えて、クイズ、フラッシュカード復習セッション、チートシートがあります。これらの基礎となるコースでは、面接でよく扱われるリアクティビティ、ライフサイクル、composables、状態管理を学べます。
Vueを学ぶ - コーディング講座は無料ですか?
ダウンロードは無料です。最初のコース、すべてのレッスンのプレビュー、最初のガイド付きプロジェクト、最初のミッション、毎日のバグハント、3つのStyle Labレベル、クイズ、面接問題、チートシートは無料で、無料版では広告が表示されます。Proでは、完全なカリキュラムとラボ、AIメンター、修了証試験を利用でき、広告も削除されます。
このアプリはVue.jsチームが作ったものですか?
いいえ。Vueを学ぶ - コーディング講座は独立した学習アプリであり、Vue.jsプロジェクトとは提携しておらず、承認も受けていません。オープンソースのフレームワークであるVue.jsを、独自のコースと演習で学べます。
修了証はありますか?
はい。Proに含まれる最終試験に合格すると、修了証が発行されます。これはあなたが取り組んだ内容を示すものであり、公的な認定資格ではありません。そのため、自分で説明できるコンポーネントやプロジェクトと一緒に活用するのが最適です。
どのプラットフォームと言語に対応していますか?
Vueを学ぶ - コーディング講座は、App Store(iOS 15.1以降)を通じてiPhoneで、Google Playを通じてAndroidで利用できます。インターフェースは22言語に対応しており、App Storeでのレーティングは4+です。
CoddyKitのその他のアプリ
iOS および Androidで利用できます。