👩‍🎓

3/19#xhack勉強会初めてのVue製TODOアプリを作ったので振り返り

2022/03/26に公開

Vue.js

初心者

idea

はじめに

#xhack勉強会、お疲れ様でした！
私は今回が初参加でとても緊張していましたが、無事デプロイできてほっとしています。
主催のとよももさん、勉強会にお誘いいただきましたにこさん、にこさんを紹介していただきましたひろのさん、この場を借りてお礼申し上げます。
私にとってとても実りある勉強会だったので、この気持ちを忘れないために筆を執っています(それにしては少し時間が空いてしまいましたが)。

成果物など

↓勉強会で作ったTODOアプリです。
https://matcha-vue-todo-app.vercel.app/
↓私のリポジトリです。

↓とよももさんのリポジトリです。私のアプリよりも機能が多いので、私が途中退席した後にいろいろ追加されたのかもしれません…。

勉強会は「環境構築」→｛「目標設定」→「説明とコーディング」→(課題があれば自力で実装)→「できたかどうかチャット(音声)で確認」｝→デプロイといった流れでした。

Vueについてのメモ

以下のコードはとよももさんのリポジトリからの引用したもので、コメントは私が追加したものです。

index.html

  <body>
	  <!-- ちらつき防止 -->
    <div id="app" class="container" v-cloak>
      <div class="wrapper">
	      <!--　データバインディング　二重括弧のところ　 -->
        <p class="title">{{ title }}</p>
        <div class="add-task">
		<!-- ディレクティブ v-で始まる属性　DOMをいじりたいときに使う -->
		<!-- v-model フォームに入力するとnewtaskにデータが追加される -->
          <input v-model="newTask">
		<!-- イベントハンドリング　クリックするとaddTaskを実行js式やメソッドを受け付けられる) -->
          <button v-on:click="addTask">追加する</button>
        </div>
        <section class="tasks">
          <ul>
		  <!-- v-for templateの中で繰り返して配列を表示　item in itemsの形 -->
		  <!-- 配列tasksの中の配列要素taskと配列番号index -->
          <template v-for="(task, index) in tasks">
		  <!-- v-bindの省略 -->
		  <!-- trueの時のみ指定したclass属性を付与 -->
              <li
                :key="task"
                :id="index"
                :class="{ complete: task.isComplete }"
                @click="completeTask(index)"
              >
                {{ task.title }}
                <button
                  @click="deleteTask(index)"
                  class="trash-icon"
                  >
                  <i class="fas fa-trash"></i>
              </button>
              </li>
            </template>
          </ul>
        </section>
        <section class="remainingTasks">
          残り{{ remaining.length }}個のタスクが残っています
        </section>
      </div>
    </div>
  </body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
  </html>

<script>
  new Vue({
    el: "#app",
	// プロパティを操作できるオブジェクト
    data: {
      title: "My First Todo App",
	// 追加されたデータがここに入る
      newTask: "",
      tasks: []
    },
	//　計算機能付きプロパティ
    computed: {
	//　残りのタスクを数える
      remaining() {
        return this.tasks.filter((task) => {
          return !task.isComplete
        })
      }
    },
    mounted() {
      this.getLocalStorageData()
    },
	//　methodsはイベントハンドラに使うとよろしい(押すたびに更新)
    methods: {
	// 追加するボタンを押すと実行(@click)
      addTask() {
        if (!this.newTask.length) { return }
        this.tasks.push({ title: this.newTask, isComplete: false })
        this.saveToLocalStorage()
        this.newTask = ""
      },
      deleteTask(index) {
        this.tasks.forEach((tasks, loopIndex) => {
          if (index === loopIndex) {
            this.tasks.splice(index, 1);
          }
        })
      },
      completeTask(index) {
        this.tasks.forEach((task, loopIndex) => {
          if (index === loopIndex) {
            task.isComplete = !task.isComplete;
          }
        })
        this.saveToLocalStorage()
      },
      getLocalStorageData () {
        const data = localStorage.getItem('todo');

        if (data) {
          this.tasks = JSON.parse(data);
        }
      },
      saveToLocalStorage () {
        localStorage.setItem('todo', JSON.stringify(this.tasks));
      }
    },
  })
</script>

データバインディング

index.html

<p class="title">{{ title }}</p>
<!-- (中略) -->
    data: {
      title: "My First Todo App"
    },

dataの部分を書き換えるとhtmlも書き換わる。
(参考:双方向データバインディング)

ディレクティブ

v-で始まる属性のこと。DOMをいじるときに使う。

(参考:リストレンダリング)

コンポーネントオプション

dataとかcomputedとかmethodsとか。

振り返り

できたところ

環境構築
Githubへのアップ
Vercelへのデプロイ

経験があったこともあり、スムーズにできました。

もっとのばしたいところ

Vueの理解
実装全般

Vueを触るのがほとんど初めてだったとはいえ、他の参加者に比べてコーディングが私はかなり遅かったと思います。速度、構文の知識、慣れ、すべてが足りていなくて悔しかったです。

対策

課題が与えられたとき「こうすれば実装できるはず」という道筋は浮かんでも「どうやって書けばいいかわからない」「検索して調べよう」となってしまい、それがコーディングの遅さにつながっていました。だから、実際に手を動かして覚えていく問題集のようなものをやろうかなと思います(例えばPaizaや忍者コードなどや、初学者向けの本など)。

感想

私が独学でプログラミングを学んでいます。独学には自分のペースでじっくり勉強できるメリットがありますが、裏を返せば周りと比較できない＝自分の得意不得意がわからないという側面もあります。よく「わからない」と口にしてしまいがちなのですが、それは「自分がどのくらいできているかわからない」という不安も含まれています。
今回の勉強会ではスムーズに進められた場面、詰まってしまった場面がはっきりとわかったのですごく嬉しかったです。もちろん、わからないことはとても悔しいですが、最もつらいことは「なにがわからないかわからない」ことです。私にとって勉強の方向性が決まることはとても重要で、これからの学習の方針が立てられたのでとてもよかったなと思います(これを言いたいがために記事を書いたところがあります)。

おわりに

アウトプットとは言ったものの、何を書けばいいかあまりわかりませんでした。誰かアウトプットのやり方とプログラミング学習の仕方と日本語の書き方を教えてください。