コースイントロダクション
  • コース紹介
  • 受講オリエンテーション
  • 補足:受講オリエンテーション
  • サンプルコードについて
  • よくあるご質問
開発環境構築
  • 開発環境構築
はじめてのNuxt.js
  • イントロダクション - はじめてのNuxt.js
  • 補足:新規プロジェクトの作成について
  • 【macOS】新規プロジェクトの作成
  • 【macOS】 VS Codeでプロジェクトを開く
  • 【Windows】新規プロジェクトの作成
  • 【Windows】VS Codeでプロジェクトを開く
  • ディレクトリ構造
  • デフォルトページについて
  • 補足: ロゴのimport文について
  • Hello World!
  • ホットリローディング
  • 補足:ホットリローディング
  • マスタッシュ構文を使う
  • ページ遷移①
  • ページ遷移②
  • 演習 : はじめての Nuxt.js
  • 演習回答 : はじめての Nuxt.js
  • スクラッチでプロジェクトを作成する①
  • スクラッチでプロジェクトを作成する②
  • セクションまとめ
ルーティング
  • イントロダクション - ルーティング
  • 新規プロジェクトの作成
  • Vue Routerの設定を確認する
  • 階層構造について
  • 動的なルーティング
  • パラメータのバリデーション
ビュー
  • イントロダクション-ビュー
  • 新規プロジェクト作成
  • アプリテンプレート
  • デフォルトレイアウト
  • エラーページ
  • HTML ヘッダー
  • セクションまとめ
非同期データ通信
  • イントロダクション - 非同期データ通信
  • 新規プロジェクトの作成
  • axiosのインストール
  • 学習に使用するデータについて
  • データを取得して1件表示
  • 複数のデータを表示する
  • 演習:表示項目の追加
  • 演習回答:表示項目の追加
  • エラー処理
アセット
  • イントロダクション - アセット
  • 新規プロジェクトの作成
  • 画像の表示
  • 静的なファイルの公開
  • セクションまとめ
Vuexストアを利用した状態管理
  • イントロダクション - Vuexストアを利用した状態管理
  • Vuexとは
  • データフロー
  • 新規プロジェクトの作成
  • ストアの作成
  • ミューテーションの利用
  • ミューテーションの値渡し
  • アクションの利用
  • モジュールモードの利用
  • セクションまとめ
カウンターアプリの開発
  • イントロダクション-カウンターアプリの開発
  • 新規プロジェクトの作成
  • ストアの作成
  • カウンターコンポーネントの作成
  • カウンターコンポーネントの利用
  • 動作確認
  • 演習:リセット機能の追加
  • 演習回答:リセット機能の追加
  • セクションまとめ
Nuxt.js & FirebaseによるSPA開発入門
  • イントロダクション
  • 注意事項等
  • Firebaseについて
  • Firebaseの設定
  • 新規プロジェクトの作成
  • Firebase関連のパッケージのインストール
  • 環境変数の設定
  • Firebaseとの連携
  • ストアの作成 (index.js)
  • ストアの作成 (todos.js)
  • todos.jsの説明
  • Todosコンポーネント の作成
  • TODO 追加機能
  • TODOリストを表示①
  • TODOリストを表示②
  • 削除機能
  • 完了・未完了チェックボックス
  • TODO実施状況によってスタイルを変更