質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

解決済

vue.js typescriptでエラーが表示される

ishidakouiki
iiii

総合スコア46

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。

1回答

0評価

0クリップ

131閲覧

投稿2022/06/20 15:06

vue.jsとtypescriotでテトリスのゲームを作成しているのですが、
エラーが表示され具体的な解決法がわかりません。

エラー画面。
イメージ説明

vueページ

<script lang="ts" setup> //状態管理を行うため reactive 関数を読み込む import { reactive } from "vue"; //テトリミノを扱うため Tetromino クラスや TETROMINO_TYPE を読み込む import { Tetromino, TETROMINO_TYPE } from '../common/Tetromino'; //テトリスのフィールドを扱うためのFieldクラスを読み込む import { Field } from '../common/Field"; //適宣テトリスのフィールドを保持する let staticField = new Field(); //テトリミノ落下中のテトリスのフィールドを保持する const tetris = reactive({ field:new Field(), }); //落下中のテトリミノの状態を保持する const tetromino = reactive({ //テトリミノの状態を保持する current: Tetromino.random(), //テトリミノの位置を保持する position:{x: 3,y: 0}, }); //マス目の状態を元に対応したテトリミノの識別子(クラス名)を取得する const classBlockColor = (x: number, y: number): string => { //y行目 x行目のマス目の状態を取得する const type = tetris.field.data[_y][_x]; //テトリスのフィールドのマス目が空白以外なら、テトリミノの識別子を返却する if(type > 0) { return Tetromino.id(type as TETROMINO_TYPE); } //テトリスのフィールドのマス目が空白であれば、 //落下中のテトリミノの描画範囲をチェックする const{x,y} = Tetromino.position; const{data} = tetromino.current; //落下中のテトリミノの描画範囲のマス目をチェックする //マス目が空白以外であれば、対応するテトリミノの識別子を返却する if(y <=_y &&_y < y + data.length) { const cols = data[_y - y]; if(x <= x &&_x < x + cols.length) { if(cols[_x -x] > 0) { return Tetromino.id(cols[_x -x] as TETROMINO_TYPE); } } } //上記いずれの条件にも当てはまらなければ、空白を返却する return""; } setlnterval(() => { //2.テトリスを遊んでいる最中のフィールドを //テトリミノ出現直前のテトリスのフィールドに置き換える tetris.field = Field.deepCopy(staticField); //3.落下中のテトリミノの位置を1マス下げる tetromino.position.y++; //4.テトリスのフィールドに落下中のテトリミノの状態を反映する //2~4の処理を1秒毎に繰り返す tetris.field.update(tetromino.current.data,tetromino.position); },1*1000 /* 1秒ごと */); //1.テトリミノの状態を即時反映させることで、 //テトリスのプレイ直後から画面上にテトリミノを出現させる tetris.field.updata(tetromino.current.data,tetromino.position); </script> <template> <h1>プレイ画面</h1> <h2>ユーザ名:{{ $route.query.name }}</h2> <div class="container"> <!-- 2. script タグ内で定義した field 変数の二次元配列を、 Vue のテンプレート構文で繰り返し呼び出し、フィールドのマス目を描画する --> <table class="field" style="border-collapse: collapse"> <!-- 2.1. 行の数だけ繰り返し、tr タグでマスを表示する行を描画する :key には、行のインデックスを指定する --> <tr v-for="(row, y) in tetris.field.data" :key="y"> <!-- テトリスのフィールドの各マス目にその状態を描画する (0: 空白, 1: I-テトリミノ, etc.) --> <!-- 2.2. 列の数だけ繰り返し、tr タグでマスを描画する :key には、行と列のインデックスを指定する --> <td class="block" v-for="(col, x) in row" :key="() => `${x}${y}`" :class="classBlockColor(x, y)" /> </tr> </table> </div> </template> <!-- スタイルシートに SCSS 記法 (Sass) を利用する --> <style lang="scss" scoped> .container { display: flex; justify-content: center; align-items: stretch; } .field { border: ridge 0.4em #2c3e50; border-top: none; } .block { width: 1em; height: 1em; border: 0.1px solid #95a5a6; /* 各テトリミノに対応した色を扱うクラス定義 .block-i, .block-o のようにクラスが定義される */ &-i { background: #3498db; } &-o { background: #f1c40f; } &-t { background: #9b59b6; } &-j { background: #1e3799; } &-l { background: #e67e22; } &-s { background: #2ecc71; } &-z { background: #e74c3c; } } </style>

Tetromino.ts

/各テトリミノのデータ構造を表す二次元配列 const tetrominos = [ [ [0], ], [ [1,1,1,1], ], [ [2,2], [2,2], ], [ [0,3,3], [3,3,0], ], [ [4, 4, 0], [0, 4, 4], ], [ [0, 0, 5], [5, 5, 5], ], [ [6, 0, 0], [6, 6, 6], ], [ [0, 7, 0], [7, 7, 7], ], ]; const TETROMINO_TYPE = { I:1,// I-テトリミノ(水色) O:2,// O-テトリミノ(黄色) S:3,// S-テトリミノ(緑) Z:4,// Z-テトリミノ(赤) J:5,// J-テトリミノ(青) L:6,// L-テトリミノ(オレンジ) T:7,// T-テトリミノ(紫) } as const; //上記で定義したキーに対応する値で型を定義する export type TETROMINO_TYPE = typeof TETROMINO_TYPE[keyof typeof TETROMINO_TYPE]; //プログラム上でテトリミノを扱うためのクラス定義 export class Tetromino { //クラス変数でテトリミノの種類を持つ private type: TETROMINO_TYPE //コンストラクターの引数にはテトリミノの種類を指定する constructor(type:TETROMINO_TYPE) { this.type = type; } //各テトリミノに対応したcssクラス名(識別子を取得する)関数 static id(type:TETROMINO_TYPE):string { switch(type) { case TETROMINO_TYPE.I: return "block-i"; case TETROMINO_TYPE.O: return"block-o"; case TETROMINO_TYPE.S: return"block-s"; case TETROMINO_TYPE.Z: return"block-z"; case TETROMINO_TYPE.J: return"block-j"; case TETROMINO_TYPE.L: return"block-I"; case TETROMINO_TYPE.T: return"block-t"; default: return""; } } //自身のテトリミノの2次元配列を取得する get data():number[][] { return tetrominos[this.type]; } //ランダムな種類のテトリミノを取得する static random(): Tetromino { //1-7までの数値を取得する(空白以外のテトリミノの種類を取得する) const tetrominoTypes = tetrominos.length - 1; const type = Math.floor(Math.random()*tetrominoTypes) + 1; //typeの種類をTETROMINO_TYPEとして扱う return new Tetromino(type as TETROMINO_TYPE); } }

イメージ説明

イメージ説明

vueファイルの
Tetrominoを記述していることろで、
Unknown word
と忠告が表示、
Tetromino.tsファイルでは、
const tetrominosで
tetrominos": Unknown word.
と忠告が表示されております。

vue.typescriotど素人で上記2つの忠告でどのような記述に変更すれば良いのか、エラー画面からどこのコードを読み解決に導けば良いのか?
ご教授いただいてもよろしいでしょうか?

vue@3.2.37
typescript@4.6.4

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

airRnot1106

2022/06/20 16:07

Unknown wordの忠告は恐らくCode Spell Checkerという拡張機能によるものなのでここでは関係ないですね

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

TypeScript

TypeScriptは、マイクロソフトによって開発された フリーでオープンソースのプログラミング言語です。 TypeScriptは、JavaScriptの構文の拡張であるので、既存の JavaScriptのコードにわずかな修正を加えれば動作します。