Un00anrfq0ebikygibcw

Vue.js/Vuexを使ってTrello風アプリを作成しよう!

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

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

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

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

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

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

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


学習内容

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

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


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


①リストの作成

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


②カードの作成

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


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

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


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

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


本教材の対象者

  • 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開発でよく出会うエラーも紹介しています。


★現在開催中のイベント(4/11まで)★


この教材の執筆者


kottyan
kottyan

株式会社クリエーションビューでWEBエンジニアとして働き、現在は生命保険のWEBサイト開発をしております。実務経験はVue.js、JavaScript、Laravel(PHP)。個人でも、タスク管理アプリや、LINEBotを開発しています。 プログラミング初心者の方がもう一歩成長できる手助けになればと教材を執筆しました。


本教材のカリキュラム


  1章:Vuexとは
利用可能
日 購入してから

今すぐはじめる!