カテゴリー
サインイン 新規登録
学習時間 8時間
難易度 初級
質問投稿 不可
価格 ¥1,980
月額 ¥2,980
Unlimited会員はこちらの教材を含む100種類以上のUnlimited対象教材が学び放題

手を動かしながら学ぶ!Vue.js / Vuex 入門

Vue.jsのVuexライブラリを使ってタスク管理掲示板アプリを作成し、Vue.jsとVuexの基本的な使い方を学ぶ。リストとタスクカードの作成・削除、ドラッグ&ドロップ機能も実装。また、VueのデバッグができるVueDevtoolの使い方や、Vue.js開発でよく出会うエラーの解決フローも解説。

4.7
最終更新 2022/12
小谷未来

比較的学習コストが低く大規模アプリケーションの構築でも活躍する Vue.js

Vue.jsは、Evan You氏が創始者であるjavascriptのフレームワークであり、2014年にリリースされました。他のJavaScriptのフレームワークと比べてシンプルであり、学習コストが低いと言われています。

Vue.jsの特徴・メリットとして下記のようなことが挙げられます。

  • データとDOMを同期し続けるリアクティブなデータバインディングが可能
  • 小さく、自己完結的で、再利用可能なコンポーネントでの大規模なアプリケーションを構築できる

その利便性の高さと導入の容易さから、近年多くのサービスにて採用されており、2020年3月現在、GithubでのJavaScript系フレームワークのスター数を最も多く集めています。

本教材は、Vue.jsのVuexを実際にTrello風のアプリケーションを作成しながら、体系的に学んでいけるものとなっています。実際にサービスを作りながら学べる教材となっているので、Vue.jsでの開発を思う存分楽しんでいただけると幸いです。

学習内容

  • Vue.jsとVuexの基本的な使い方を実際にアプリを作成しながら学びます。
  • リストとタスクカードの作成・削除、ドラッグ&ドロップ機能を実装します。
  • 開発環境にVueCLIを使用します。

本教材を通して、Vue.jsを使ったコンポーネントの作成、Vuexでのデータの状態管理の基礎を学びます。

本教材で作成するアプリケーションの機能の一部

リストの作成

フォームにタイトルを入力し、新しいリストを作成します。

1

カードの作成

フォームにタスク名を入力し、新しいカードを作成します。

2

リストのドラッグ&ドロップ

リストを左右へドラッグ&ドロップで移動できます。

3

カードのドラッグ&ドロップ

カードを上下、またはリスト間でドラッグ&ドロップできます。

4

本教材の対象者

  • Vue.jsを触り始めた方、学習している方
  • JavaScriptのフレームワークに興味がある方

受講するための必要なスキル

  • HTML / CSS の基礎知識
  • JavaScriptの基礎知識

本教材で学ばないこと

本教材はVue.js / Vuexの基本的な使い方の習得を目的としており、HTML・CSSの解説は詳しく行いません。

本教材で質問対応可能なOSや環境

  • Mac OS

本教材の対応バージョン

  • Vue2系
  • VueCLI4系

本教材を執筆した想い

1日でも完成できるアプリケーションにし、初学者の方でも最後まで実装し
達成感を味わってもらえるようにしました。Vue.js/ Vuexの基礎を習得するため、解説はしっかりとしています。受講者の方には、Vue.jsにさらに興味を持ち、自立して開発ができるようになってほしいと思います。なので、アプリケーションを作成して終わりではなく、Vueのデバッグができる便利ツールVueDevtoolの使い方や、Vue.js開発でよく出会うエラーも紹介しています。

カリキュラム

Section 0 はじめに
Section 1 Vuexとは
Section 2 TOPページの作成

講師のプロフィール

教材のレビュー

4.7
20件の評価
85%
10%
0%
0%
5%
榎本康一 3ヶ月以上前
windows10でもアプリを完成することが出来ました。 vue.jsを学習するのは初めてで基礎は知らないけれど、このアプリを作って見たかったので、受講しました。 開発環境は同じでなくても良く導入がしやすいフレームワークであると思います。 エラーが出ることもあるが調べて解決できる問題であるので良かったです。 内容をすぐに理解するのは難しいけれど完成するとモチベーションが上がるので良かったです もっと見る
ヒロキ 1年以上前
解説が丁寧でわかりやすい内容でした。完成版コードも都度都度記載されているのもデバッグ時助かりました。
umanizer 1年以上前
とてもいい教材でした。 ただVueを触ったことがない人がいきなりこの教材で勉強すると大変かもしれません。 僕もVuexの事をあまりわからずに始めたら全然わからなくて勉強し直しました