[Vue]元教師が教師の業務効率化のためにランダム指名アプリを作りました

8687 ワード
Firebase 個人開発 教育 JavaScript Vue.js JavaScript テキストリンク

サービス紹介

座席数を指定して、生徒を指名できる、シンプルなアプリです。

使い方

座席数を指定して、後は指名ボタンを押すだけ！

きっかけ

きっかけは自分自身が生徒だった時に、授業を受けている際に「あれ、なんか前の席の人ばっかり当てられてるな〜」と感じたことから始まりました。
そして、実際に２年ほど教師をしていたのですが、前の席の人はやはり当てやすいのです。

出典
https://www.paylessimages.jp/detail.php?id=gf1420736473

一回一回の授業ではそこまで差は出ませんが、一年も続けると席が固定の場合、とても不公平になるかと思いました。
そこで、生徒をランダムに指名してくれるアプリを作りました！

このアプリを使えば不公平がないかつ、誰が当たるかわからない緊張感もある、楽しい授業がしやすいかなと感じます。

使用技術

  • vue.js(2.0)
  • Firebase
  • Vuetify

ハマったところ

Vueのコンポーネント志向を活用しようと、トップページと、列と、一つ一つのセルという三つのコンポーネントを作成しました。

HelloWorld.vue
    <v-row class="row py-0 px-0" v-for="i in changeHeight" :key="i" color="blue darken-2">
      <Row :mathWidth="mathWidth" :rowId="i" :propRandomId="propRandomId"/>
    </v-row>
Row.vue
      <v-col
        class="pa-0" 
        justify="center" 
        v-for="i in changeWidth"
        :key="i"
      >
        <Cell :id="rowId + '_' + i" :ref="rowId+'_'+i">
        </Cell>
      </v-col>

縦横の席数を受け渡して全体を表示しています。
こちらの受け渡しはpropsを使用しているのですが、うまく受け渡せなかったり、予期せぬ挙動が生まれたりと、そこそこ大変でした。

storeを使うべきか、propsで良いのかという判断がなかなか難しいです。

また、ランダムに指定した席ひとつだけ赤くするという処理も、一つ一つのCellに
1_1 1_2 1_3
2_1 2_2 2_3

とインデックスを付ける処理ですが、

Row.vue
    watch: {
      propRandomId: function () {
        
        for(let i = 0; i < this.mathWidth; i++){
          this.$refs[this.rowId+"_"+(i+1)][0].$el.children[0].style.backgroundColor="lightgray";
        }
        
        if(!this.$refs[this.propRandomId]){
          return
        }

        this.$refs[this.propRandomId][0].$el.children[0].style.backgroundColor="red";
      
      },
      
    },

$refsを使ってかなりむりやりやっています。
もっとスマートにかけたらよりいいのかなーとか思ったりします。

今後の改良点

もし反響が大きければ

  • より素敵なアニメーションの実装
  • 席に生徒名を設定できる機能
  • 一度当たった人は除外して再抽選

あたりの機能は実装したいなと考えています。
LGTMやツイートの拡散などしていただけると本当にありがたいです、、、

おまけ

Twitterで一緒に個人開発してくれる人、一緒にプログラミングを勉強してくれる人を募集しています！
結構発信しているので、是非ともフォローをお願いいたします。

また、開発を手厚くサポートしてくれたメンターさんには本当に頭が上がりません、。
ありがとうございました。

サービス

参考