<template>
    <transition name="fade">
        <a v-if="show" @click="show = !show">トランジションサンプル</a>
    </transition>
</template>

<script>
export default {
    data() {
        return {
            show: true
        }
    }
}
</script>

<style scoped>
a {
    padding: 10px;
    background-color: #ccc;
    border-radius: 4px;
}
a:hover {
    text-decoration: underline;
}

.fade-enter {
    opacity: 1;
}

.fade-leave-active, 
.fade-enter-active {
    transition: 0.5s ease-out;
}

.fade-leave {
    opacity: 0;
}
</style>

単純なエフェクトであれば、vueの使わずに書くこともできるので、どういった場面で効果を発揮する機能なのかは確認が必要そう。

<transition-group>

リストのトランジションは <transition-group> タグで囲む事でまとめて指定することができる。

name にはトランジションの名前し、tag にはリストを囲む親のタグを指定できる。tagにulを指定して、小要素はliで出力する、といったことができる。

<transition-group name="slide-up" tag="div">
    <span v-for="value in items" :key="value">
        {{ value }}
    </span>
</transition-group>

<script>
export default {
    data() {
        return {
            items: ['Hoge', 'Fuga', 'Buzz', 'Foo']
        }
    }
}
</script>

<style>
.slide-up-enter {
  transform: translateY(10px);
  opacity: 0;
}
.slide-up-enter-active,
.slide-up-leave-active {
  transition: all 0.2s ease;
}
.slide-up-leave-to {
  transform: translateX(-10px);
  opacity: 0;
}
</style>

参考サイト

v3.vuejs.org

2021-12-09

vue3 の CompositionAPI

javascript vue3

Composition API は大規模な開発で力を発揮する。

ただし、小さなコンポーネントにまで適用する必要はなく、そういった場面ではOptions APIで実装すれば良いと思う。

例えば、単一のラベルテキストやボタンのコンポーネント。
こういった規模のコンポーネントについては従来的なOptionsAPIによる実装の方が分かりやすいと思う。

ちなみに、CompositionAPIの定義方法を初めて見た時に、びっくりした。一見するとごちゃ混ぜに感じて、大丈夫なのかこれ？と感じたが、複合的な機能を有する複雑なコンポーネントを実装する場合はCompositionAPIを適用した方が、コードが集約されて見通しがよくなる、という事らしい。

ここまで考えてComposionAPIについての結論が出なかった。
ということで、CompositionAPIについて、更に学習が必要そうだ。

2021-12-04

javascript: Objectクラスのメソッド

javascript

2021年12月11日更新

最近javascriptのObjectクラスについて学習しているので、学習した内容を随時こちらに追記していく予定。
Objectクラスの機能を使いこなせると便利だなーと思う。

メソッド

Object.assign
Object.create
Object.entries
Object.freeze
Object.fromEntries
Object.getOwnPropertySymbols
Object.is
Object.isFrozen
Object.isExtensible
Object.isSealed
Object.keys
Object.seal
Object.values
Object.prototype.hasOwnProperty()

Object.assign

Object.create

Object.entries

Object.freeze

オブジェクトを凍結し、オブジェクトを変更できない状態にする。
ただし、オブジェクトの中のオブジェクトは凍結されない。従って、下記のような場合はプロパティは書き換えできてしまう。

const obj = {
     value: 111,
     child: {
         value: 999
     }
}

Object.freeze(obj);
obj.child.value = 8888;

ということで、オブジェクトの中のオブジェクトも凍結したい場合は、再帰的に処理する必要がある。

const obj = {
    value: 1,
    child: {
        value: 2,
        grand_child: {
            value: 3,
            grand_grand_child: {
                value: null
            }
        }
    }
}

const deepFreeze = obj => {
    Object.freeze(obj);
    for (let key in obj) {
        if (!obj.hasOwnProperty(key)) continue;
        if (typeof obj[key] !== 'object') continue;
        if (Object.isFrozen(obj[key])) continue;
        if (obj[key] === null) continue;
        deepFreeze(obj[key]);
    }
};

deepFreeze(obj);

Object.fromEntries

キーと値のリストをオブジェクトに変換する。

Arrayを変換する

Object.fromEntries([
    ['k1', 'v1'],
    ['k2', 'v2']
])
> {k1: 'v1', k2: 'v2'}

Mapを変換する

Object.fromEntries(new Map([
    ['k1', 'v1'],
    ['k2', 'v2']
]))
> {k1: 'v1', k2: 'v2'}

Object.getOwnPropertySymbols

Object.is

Object.isFrozen

Object.isExtensible

Object.isSealed

Object.keys

オブジェクトのプロパティ名の配列を返す。

let a = {a: 'hoge', b:'fuge', c: 'uge', d:'moge'}
Object.keys(a)
>(4) ['a', 'b', 'c', 'd']

ちなみに文字列を引数にすると次のような結果となる。

Object.keys('aiueo')
>(5) ['0', '1', '2', '3', '4']

となり、Object.keys(['a', 'i', 'u', 'e', 'o']) と同じ結果になる。

Object.seal

Object.values

オブジェクトの値の配列を返す。
for-inと違い、プロトタイプチェーンのプロパティを列挙しない。
PHPのarray_values()関数みたいなやつ。

Object.values({xx:1,yy:2,zz:3,zx:4})
>(4) [1, 2, 3, 4]

Object.prototype.hasOwnProperty()

2021-12-01

javascript: Object.defineProperty() で変数の変更を検知

javascript

javascriptで変数の変更を検知する方法を調べたところ、 Object.defineProperty が使えるようだ。この機能自体は、Chrome v5、IE9の頃から利用可能だったようだが、今まで知らなかった・・・

静的メソッドの Object.defineProperty() は、あるオブジェクトに新しいプロパティを直接定義したり、オブジェクトの既存のプロパティを変更したりして、そのオブジェクトを返します。

引用元URL: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

概要の説明がいまいちよく分からないので、
実例をぐぐりつつ下記を満たす処理を実装してみる。

変数の変更を検知する
変更を検知して何らか処理を行う

実装例

function watchValue(obj, propertyName, callback) {
    let value = obj[propertyName];
    Object.defineProperty(obj, propertyName, {
        get: () => value,
        set: newValue => {
            value = newValue
            callback(newValue)
        }
    })
}

let test = { value: 0 }
watchValue(test, 'value', value => console.log('updated!', value))

test.value = 9

2021-11-29

Vue3 の Composition API と、Options API

フロントエンド Vue3

Options API とは、Vue2までのコンポーネントの構造を示すようだ。
公式のドキュメントでは唐突に Options API というフレーズが登場し、なんのことか分からず困惑したけれど、ネットの情報をいくつか読んでみると、Vue2までのコンポーネントの構造（というか定義方法？）の事を Options API と読んでいると理解した。

Options API の例

export default {
    data() {
        return {
            value: 0
        }
    },
    methods: {
        showValue () {
            console.log(this.value);
        }
    }
}

Composition API の例

import { defineComponent, ref } from 'vue'

export default {
    setup() {
        let value = ref(0);
        let showValue = () => console.log(value);

        return {
            value,
            showValue
        }
    },
}

この程度の分量の実装だと、Composition API を使うメリットがいまいち分からない。コード量が増えてロジックが複雑になってきた場合のコードの見通しが良くなるのだろうか？

2021-11-17

アニメーションGIFのファイルを判定する方法

GIF

GIFのファイル構造

バイナリーを解析して判定する方法について調べた。
GIFのファイル構造は次の通り。それぞれのデータのまとまりをブロックと呼ぶ。

ファイル構造
GIF Header
Application Extension
Graphic Control Extension
Image Block
:
Graphic Control Extension
Image Block
Trailer

アニメーションGIFの判定には次の2種類のブロックを用いる。

GIF Header
Graphic Control Extension

まず、GIF Header で、"GIF89a" 形式かどうかで対象を絞り込み、次に Graphic Control Extension が複数登場するかどうか判定する事でアニメーションGIFかどうか判定する。

なお、Application Extension については、通常の静止画のGIFの場合でも含まれているケースがあるため、判定には使用できないようだ。

GIF Header

先頭に固定値 0x47 0x49 0x46 0x38 0x39 0x61 があり、
0x47 0x49 0x46 0x38 0x39 0x61 は ASCII文字で GIF89a である。

ブロック: Graphic Control Extension

先頭に 0x21 0xf9 0x04 があり、ブロックの終端に 0x00 がある。

実装例

そのうち更新予定

雑多なブログ

音楽や語学、プログラム関連の話題について書いています

動画配信サイトの技術選定

Vue3 - transitionを使ってみる。