学習時間 | 12時間 |
---|---|
難易度 | 入門 |
質問投稿 | 可 |
Vue3とTypeScriptでブラウザゲームを作りながら、状態管理とComposition APIを学ぼう
話題のVue.js 3系と静的型付け言語の TypeScript を使い、ブラウザゲームを開発する過程で、Vue 3に追加された注目機能のComposition APIと挫折しがちな状態管理を解説します。
話題の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 系
- ルーティング (画面遷移) を行うために利用します
- Vue Router: 4 系
- Vite: 2 系
Vue2 には対応しておりません。
本教材で質問対応可能なOSや環境
- macOS Big Sur
- Visual Studio Code
カリキュラム
- 2-1 プレイヤー名を入力する
- 2-2 テトリスのプレイ画面に遷移する