2次元配列をfor文で初期化[Vue3]

はじめに

あけましておめでとうございます。

昨年末よりVue.jsでプログラミングを始めまして、配列の初期化周りでつまづきまして記事を書いてます。

　Vue3でfor文を使った配列の初期化をしようとしましたがうまくいかず記事もあまりなかったのでメモを置きます。

やりたいこと

乱数を適当に入れた配列をつくって VueのSFC（単一ファイルコンポーネント）で表示させる。

問題

とりあえず、まずは中身は0だけの1次元配列を出力する関数を script setupタグに書いてみましたが動きませんでした。

<script setup>
    const createArray=()=>{
        let arr1=[];
        for( let i=0 ; i<10 ; i++){
            arr1.push(0);
        }
        return arr1;
    }
</script>
<template>
    <div>
        <p>{{ createArray }}</p> 
    </div> 
</template>

解決策

Vueの公式サイトを巡回していた際サンプルコードのページを初めて見つけまして、Vueの関数の動かし方がやっとわかりました。

公式サイトのhttps://ja.vuejs.org/examples/#timerで 13行目でupdateメソッドを定義した後、20行目で呼び出すことでメソッドが動くようでした。つまりやりたいことに反映するとこう↓

<script setup>
    const createArray=()=>{
        let arr1=[];
        for( let i=0 ; i<10 ; i++){
            arr1.push(0);
        }
        return arr1;
    }
+  let array=ref([])
+  array=createArray();
</script>
<template>
    <div>
        <p>{{ array }}</p> 
    </div> 
</template>

以下が表示され成功しました。

[ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ]

乱数を入れる

配列内に乱数を入れるには以下のような変更でできました。

<script setup>
    const createArray=()=>{
        let arr1=[];
        for( let i=0 ; i<10 ; i++){
-            arr1.push(0);
+            arr1.push(Math.floor(Math.random()*10));
+           //0~9の値を配列に入れる。
        }
        return arr1;
    }
  let array=ref([])
  array=createArray();
</script>
~以下省略~

Math.random()は0以上1未満の値を生成するため整数の値を出すために１０倍しています。 Math.floor()で小数点以下を切り捨ててます。

2次元配列に拡張

関数内を2重ループ化して2次元配列に拡張します。

<script setup>
    const createArray=()=>{
        let arr1=[];
+       let arr2=[];
        for( let i=0 ; i<10 ; i++){
+          for( let j=0 ; j<10 ; j++){
                arr1.push(Math.floor(Math.random()*10));
               //0~9の値を配列に入れる。
+          }
+          arr2.push(arr1);
+          arr1=[];
        }
-       return arr1;
+       return arr2;
    }
    let array=ref([])
    array=createArray();
</script>
~以下省略~

以下が表示され成功しました。

[ [ 9, 3, 4, 2, 8, 4, 2, 5, 5, 6 ], [ 2, 5, 2, 2, 7, 2, 9, 3, 5, 8 ], [ 6, 3, 9, 2, 3, 8, 0, 7, 5, 7 ], [ 5, 9, 1, 5, 4, 2, 7, 6, 8, 4 ], [ 4, 7, 9, 7, 7, 8, 6, 4, 5, 5 ], [ 3, 1, 5, 6, 8, 4, 9, 2, 2, 2 ], [ 8, 3, 3, 2, 7, 5, 6, 6, 6, 1 ], [ 6, 6, 5, 5, 8, 7, 6, 1, 0, 6 ], [ 3, 0, 1, 1, 8, 3, 5, 5, 6, 1 ], [ 9, 2, 5, 1, 5, 1, 8, 7, 4, 5 ] ]

おわりに

公式のサンプルコードがすごい豊富にあったので、どんどん使っていきたいですね。

更新

初：2023/1/1

カジバ技研

ドローンとか飛行機とか