Vueを学ぶ - コーディング講座アプリのアイコン

Vueを学ぶ - コーディング講座

教育 · 無料 · iOS & Android · CoddyKit

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をサーバーなしで実行できます。

App Store — 無料でダウンロードGoogle Play — 無料でダウンロード
価格
無料、Proへのアップグレードあり
プラットフォーム
iOSとAndroid
言語
22
年齢レーティング
4+
バージョン
82.6.0
必要環境
iOS 15.1以降
App Store
3.0 ★ (2)
学習パスカードと毎日の目標を表示した、ダークテーマのVue Academyホーム画面Introduction to Vue.jsコースのページ。全体の進捗、36レッスン、無料で受講できる最初のコースが表示されます。
42コース、156レッスン
20ガイド付きプロジェクト
28コーディングミッション
コンポーネントは、実際に壊してみると、より理解しやすくなります。

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 Academyホーム画面
学習パスホーム画面では、毎日の目標とその下のSkill Hubとともに、Vueコースが開きます。
Introduction to Vue.jsコースのページ。全体の進捗、36レッスン、無料で受講できる最初のコースが表示されます。
コースページコースページでは、全体の進捗、無料で受講できるレッスン、そして「What is Vue.js」から「Hello Vue Application」までのトピックが表示されます。
コードエディターでrouter-linkとrouter-viewの例を使って学ぶSetting Up Vue Routerレッスン
レッスンエディターで学ぶVue Routerレッスンです。HTML、CSS、JavaScriptのタブ、実行ボタン、Nextボタンがあり、例のコードではrouter-linkとrouter-viewを使用します。
概念の解説、学習のヒント、クイズ、学習ロードマップの作成を提案するAIチャット画面
AIチャットAIチャットでは、重要な概念の解説、ヒント、理解度を試すクイズ、学習ロードマップの作成を利用できます。
ライトテーマのVue Academyホーム画面
ホーム、ライトテーマ毎日の目標の下にSkill Hubが表示された、ライトテーマの同じホーム画面です。

コース

Vueコースで学べる内容

アプリ独自のコース一覧にある42コース、156レッスン。最初のテンプレートからサーバーレンダリング、プロダクション向けのパターンまで学べます。

  1. Vue.jsを始める

    Vue.js、Vue CLI、プロジェクト構成、テンプレート構文、データバインディングの基礎を学びます。

  2. リアクティビティとComposition API

    Vue 3 Composition APIの基礎、script setup構文、リアクティビティとcomputedプロパティ、Vueディレクティブを学びます。

  3. Components and Forms

    コンポーネントの基礎と通信、スロット、provideとinject、フォームとバリデーション、コンポーネントのライフサイクルを学びます。

  4. Reuse and Polish

    Vue 3のcomposables、トランジションとアニメーション、エラーハンドリング、render関数とJSXを学びます。

  5. State and Routing

    Piniaによる状態管理、Vuex、Vue Routerを使ったルーティングと高度なルーターパターン、APIと非同期データの扱い方を学びます。

  6. TypeScript, i18n and Tooling

    Vue 3でのTypeScript、国際化、Storybookとの統合、Vueアプリのデプロイと保守について学びます。

  7. Nuxt 3、テスト、リアルタイム

    Nuxt 3によるサーバーサイドレンダリング、Vitestによるコンポーネントテスト、Apolloを使ったGraphQL、WebSocketsによるリアルタイムアプリを学びます。

  8. Production Patterns

    パフォーマンス、セキュリティのベストプラクティス、プラグイン開発、コンポーネントライブラリの公開、プログレッシブWebアプリ、マイクロフロントエンドを学びます。

使い方

アプリでのVue学習の進み方

各コースにはレベルが設定されています。無料の最初のコース以降の各レッスンも、まず無料プレビューから始まるため、先に進むか決める前に、そのテーマがどのようなものか確認できます。

  1. Introduction to Vue.jsから始める

    最初のコースは無料で、Vueとは何か、環境のセットアップ、Hello Vueアプリケーションから始まります。コースにはA1からC1までのタグが付いているため、どこから始め、次に何を学ぶのかが明確です。

  2. スマートフォンでコンポーネントを作成・実行する

    single-file componentを編集すると、すぐにプレビューできます。ガイド付きプロジェクトでは、アプリを一歩ずつ成長させられます。App Studioでは、用意されたblueprintsからrouterとstoreを備えた複数画面のアプリを構築できます。

  3. 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+です。

始める

今日から最初のVueコンポーネントを作りましょう

iOSとAndroidで、22言語に対応。無料で始められます。

App Store — 無料でダウンロードGoogle Play — 無料でダウンロード
最終確認日 · CoddyKitが公開 · プライバシーポリシー
iOS および Androidで利用できます。