technical note

Vue.js3とTypeScriptに入門してみる

入門したって話だけで、たいしたこと書いてないです。

最近いろんなことに手を広げすぎて、キャパオーバーです。いやいや、以前からキャパオーバー。

いろいろな人に、やること絞れば？と言われます。

お家も散らかり過ぎで（これは私だけのせいでは、けしてない、、けして、、）ものを減らせば？と言われます。

分かってはいますが、もう、これは病気かな...。

今年に入って、お仕事でひとり開発しています。サーバーサイドにGoを使うことにしたのでGopher道場に再入門中です。Go楽しい..。フロントは、Goのtemplateエンジンと、じぇ...jQueryでいくかな...と思って３分の１くらいまで作成したところで、やっぱりVueかReactでやりたいかも..となり、一昨日くらいからVueにも入門しました。（来週は10年ぶりくらいにOracleDBさわんのと、初APEXチャレンジコースが待っている...。あとインフラの自動化...）

ま、相談したのですけどね。

「なんで jQuery!?」

「3、4年のjQueryブランクを埋める学習コストと、React/Vueの学習コストはきっと変わらんぞ」

とか

「jQueryは、特に理由がない限りはおさらばしたほうがよいですね」

とか。

ReactとVueどっちがいいかは、

  • 学習コストはそんな変わらない
  • Vueのほうが、htmlとjs部分が分かれているので書きやすいし、サクサクいける

というアドバイスのもと、Vueでいくことにしました。ちなみにVue2をインストールしちゃったんだけど

「Vue3、ぼくにも教えてね」なんてコメントをいただき、Vue3？何が違うんだ？

という最近のフロント事情もよく知らないので、些細なことでしたが、聞いてみてよかったなー、となっています。職場で最新事情をキャッチアップしている人いないし、メンター的な人もいないので、外の活動がほんとありがたかったりするのでした。自分も貢献できる人になりたい。

ということで、ここ2日くらいVueばかりやっているのですが、どうも文字にアウトプットしないと曖昧に進んでしまいそうなので、ちょっとだけ理解したかもしれないことを、超忙しいのにブログに書くことにした。

Vueの超基本、のメモ

とりあえずコード。

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <p>computedを使ってみる：{{ user.username }} の文字数は、{{ getLength }}</p>
    <p>computedとmethodを使ってみる：文字列を変える{{ changeMsg() }}</p>
    <p>methodを使ってみる：{{ getFullName }}</p>
    <p>
      interfaceを使ってみる：{{ book.title }} / {{ book.auther }} / {{ book.year }} / {{ changeYear() }}
    </p>
    <strong>Followers: </strong> {{ followers }}
    <button @click="followUser">Follow</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

interface Book {
  title: string;
  auther: string;
  year: number;
}

export default defineComponent({
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  data() {
    return {
      followers: 0,
      user: {
        id: 1,
        username: 'TestUser',
        fistName: 'Misato',
        lastName: 'Kahono',
        isAdmin: true
      },
      book: {
        title: 'Vue 3 Guide',
        auther: 'Vue team',
        year: 2020
      } as Book
    }
  },
  watch: {
    followers(newFollowerCont, oldFollowerCount) {
      if (oldFollowerCount < newFollowerCont) {
        console.log(`${this.user.username} has gained a follower!`);
      }
    }
  },
  computed: {
    getLength(): number {
      return this.user.username.length
    },
    getFullName(): string {
      return `${this.user.fistName} ${this.user.lastName}`
    }
  },
  methods: {
    changeMsg() {
      return this.user.username = "mikke"
    },
    changeYear() {
      this.book.year = 1999
    },
    followUser() {
      this.followers++
    },
  },
  mounted() {
    this.followUser();
  }
});
</script>

import文

TypeScriptを使う場合は、import { defineComponent } from 'vue'; こんな感じで書き、export default の中身をdefineComponentでラップする。

computedプロパティ

算出プロパティ。データを処理してから表示するときに使う。

jsで書く場合: getLength() { ←戻り値の型を指定しなくてもOK
tsで書く場合: getLength(): number { ←戻り値の型を指定する

watchプロパティ

監視プロパティ。データの変更を監視する。変更をトリガーに非同期処理や複雑な処理をするときに使用する。

methodsプロパティ

関数を一括で管理するプロパティ。イベントに対するハンドラや、他の関数内からよんだりできる。アロー関数での定義は推奨しない（なんで？）

mountedプロパティ

DOMが作成された直後の状態。

ほかにもいろんなプロパティがあるけど、徐々に覚える。

おわりに

たいしたこと全く書いてないのですが、書き方がわからず悩んだので、とりあえず忘れないうちにアウトプット。次はライフサイクルと、それぞれのプロパティについてもう少し深堀りしよ。

昨日、長女から、for覚えた、配列の添字が意味分かんない、関数が理解できない、というLINEが流れてきて、どうやらJavascriptを学習している模様。中学生の時にHTMLとかCSSやってたから、JSもやってみようかなーって、とか言っていた。いったい何があったんだ？プログラミングやる彼氏でもできたのか？Goをすすめたいところだけど、学校であつかっているプログラミング教材にGoがないのと（Node.js/R/ Python/Scalaをあつかっている）、混乱させると思うからちょっと控える（一応言ってはみたけど、何が違うのっていわれて説明したけど、混乱した模様）

というわけで、親子してJS週間してますが、難関はこれからだと思うので（状態管理とか...。flutterのお勉強が活かせるといいな）がんばるぞ。彼女（長女）も絵を書いたり、作曲したり、ポーカーのディーラーしたり..いったい何がしたいんだ？と思いますが、応援したいと思います。

ピアノの発表会も控えているし（4旋律のトロイメライと、ホール・ニュー・ワールドの上級連弾..全然弾けない...）、Fintech関係のコミュニティで読んでいるオニールおじさんの本も読まないとなんないし...執筆の修正と書き起こしもあるし..アプリ作りたいのが思いついたから作りたいし..で、ぜんぶやりたいことなのだけど、自分はいったい何がしたいのだ..と自問自答しながら、今日もいちにち終わるのでした。自分で自分を応援したいと思います。

-technical note