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

Vue3とTypeScriptでブラウザゲームを作りながら、状態管理とComposition APIを学ぼう

話題のVue.js 3系と静的型付け言語の TypeScript を使い、ブラウザゲームを開発する過程で、Vue 3に追加された注目機能のComposition APIと挫折しがちな状態管理を解説します。

2.8
最終更新 2022/1
nikaera

話題のVue.js 3系と注目機能のComposition APIを使って状態管理を徹底解説!

■ なぜVue3が話題なのか?

Vue.jsはGitHubでスター数が上位の大人気フレームワークで、その大人気フレームワークのVue.jsが複数回のメジャーリリースし、2020年夏に待望のVue 3がリリースされました。

■ なぜComposition APIと状態管理を学ぶのか?

Vue3の中でもComposition APIは、多くの方が注目している機能になります。そしてそのComposition APIをカバーしました。

またSPA 開発では、状態管理やその設計が重要となります。理由は扱う状態が多くなるにつれて、状態設計に応じてその管理が複雑で制御不能になっていきます。 結果として、その後の開発コストなどが跳ね上がってしまう恐れが生じます。

そこで本教材は、SPA の開発を進めていくために、状態管理と Vue.js の基礎知識の習得に焦点を当てて、解説しました。

■ どのように学ぶのか?

ゲームは扱う状態の量も多く、状態管理やその設計を学ぶのに非常に適した題材です。また、ゲームの中でもテトリスは他のゲームと比較して実装が容易なため、Vue3 を学ぶことに焦点を当てながら開発を進めていく題材として最適であると考えました。

話題のVue.js 3系と TypeScript を使い、Vue 3の注目機能のComposition APIと実務で重要な状態管理を学びたい方は、ぜひ手に取ってみてください!

学習内容

テトリス開発を通じて、下記の内容を学んでいきます。

  • Vite を用いた Vue.js プロジェクト作成の手順
  • ESLint を利用してコードの品質を向上させる方法
  • Vue Router を用いた画面遷移方法
  • Vue.js に関する知識
    • reactive
    • v-model
    • v-on
    • v-for
    • v-bind
    • プロパティ
    • ライフサイクル
    • イベント修飾子

作成物のイメージ

https://i.gyazo.com/2bf844151580d659ccbc825440e94118.png

本教材の対象者

  • Vue.js を学びたいけど、どこから手を付ければ良いかわからない方
  • SPA 開発をやってみたいけど、開発の手順がわからない方

受講における必要条件

  • JavaScript の文法が理解できる (var、if、for などの基本的な文法の理解)
    • 変数、配列、条件文、繰り返しなどのプログラミングの基礎知識への理解も包括している
  • HTML, CSS についての基礎知識がある (<div><ul><img> などのタグの使い方と CSS を用いた装飾の仕方を理解している)
  • ターミナルで各種コマンドが実行できる (cd、ls、pwd、mkdir、cat、vi を使ったことがある)

学ばないこと

ゼロから SPA の開発を進めていくために必要な Vue.js に関する最低限の知識習得に焦点を当てた教材です。

  • ターミナルで実行する基本的な各種コマンド (cd, ls, etc.) については詳細な解説はしません。
  • HTML, CSS についてのレイアウトの組み方などの詳細な解説はしません。

また、Vue3 の開発にフォーカスを当てた教材となりますので、一部補足等は入れておりますが、TypeScript 自体について深くは解説しておりません。

本教材の対応バージョン

  • Vue.js: 3 系
    • Vue Router: 4 系
      • ルーティング (画面遷移) を行うために利用します
  • Vite: 2 系

Vue2 には対応しておりません。

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

  • macOS Big Sur
  • Visual Studio Code

カリキュラム

Section 0 はじめに
Section 1 学習に必要な準備をしよう
Section 2 トップページを作成する
  • 2-1 プレイヤー名を入力する
  • 2-2 テトリスのプレイ画面に遷移する

講師のプロフィール

教材のレビュー

2.8
5件の評価
20%
20%
20%
0%
40%
左近 涼 1年以上前
分かりやすくてVueの入門に良いと思いました。ビルドの方法は別教材で調べなくてはならないため、どうせならビルドまであるとなお良かったです。その点で☆4とさせていただきましたが、内容は良かったです!
山田太郎 1年以上前
エラーが出るので質問しようと思ったら、すでに同じ現象で質問されている方がいましたが、回答は付いていませんでした。 前半でいくつもエラーが出ますが、そのような状況なので自分で解決できる人にしか向いていない教材だと思うため、初心者にはオススメは出来ないと思います。
藤枝大紀 1年以上前
説明はきっちりしているが、個人的には中・上級者向けなのでは?と思う。 かなり難しく感じた。良教材とは思うが、バックエンド経験者が、フロントを学ぶときなどに良いかも。 実務半年程度の自分では、途中で挫折した。