タスク管理アプリの作成を通して、vue.jsを利用した開発案件で自走できるスキルが身に付きます。
APIとの繋ぎ込み、VueRouterを利用したクライアントサイドルーティング、Vuexを利用した状態管理、単一ファイルコンポーネントを利用したコンポーネント設計、JWTを利用した認証機構、VeeValidateを利用したバリデーション
Vue.jsの初期設定を行い、トップページを実装しましょう。
Vue.jsの公式ルーティングライブラリである Vue Router を使用して、トップページからタスクページへ遷移しましょう。
Vue.jsの特徴であるコンポーネントを使用して、ヘッダーとフッターのコンポーネントを分割してみよう。
タスク一覧を取得するAPIを作成して、Vue.jsから呼び出してみよう。
タスクも詳細内容をモーダルで表示してみよう。
Vue公式の状態管理ライブラリ Vuex を使って、タスクの追加を実装してみよう
タスクの更新と削除機能を実装してみよう
TODO、DOING、DONEの3つの状態にタスクに分類しよう
・Vuexをmodule化してみよう ・スタイルガイドをのぞいでみよう ・eslintを導入して一貫性のあるコードに整えよう
・ユーザー登録、ログイン/ログアウトの機能を実装しよう ・タスクとユーザーを紐付けよう
VeeValidateを使ってフォームのバリデーションチェックをしましょう
プロフィール画像をアップロードしてみよう
タスクを検索してみよう
カリキュラムを進めるためにはGitHub連携が必要になります
