
TypeScript の Enum を使った小ネタです。

TypeScript の Enum を使っていると、**Enum の値やメンバー名以外に、何かもう一つ値を追加したい**ことありませんか？
自分の場合は、多言語化しているアプリケーションなどで、Enum の値に対するテキストを表示する際に、Enum にメッセージキーを割り当てたいことがよくあります。

今回は、Enum に関数を追加してメッセージキーを返却できるようにする方法の紹介です。

## Enum の基本的な使い方

次のような Enum があったとします。

```ts
enum Type {
  Normal, // 0
  Special, // 1
}
```

基本的な Enum の使い方は、Enum のメンバーを指定して値を取得するか、Enum の値を指定してメンバー名を取得するかです。

```ts
// Enumのメンバーを指定して値を取得する
console.log(Type.Normal); // 0
console.log(Type.Special); // 1

console.log(Type["Normal"]); // 0
console.log(Type["Special"]); // 1

// Enumの値を指定してメンバー名を取得する
console.log(Type[0]); // Normal
console.log(Type[1]); // Special

console.log(Type[Type.Normal]); // Normal
console.log(Type[Type.Special]); // Special
```

## Enum に関数を追加する

Enum に関数を追加するには、Enum と同名の`namespace`定義して、その中に関数を定義します。

```ts
namespace Type {
  export function toMessageKey(type: Type) {
    switch (type) {
      case Type.Normal:
        return "message.normal";
      case Type.Special:
        return "message.special";
    }
  }
}
```

次のように呼び出すと、メッセージキーを取得することができます。

```ts
console.log(Type.toMessageKey(Type.Normal)); // message.Normal
console.log(Type.toMessageKey(Type.Special)); // message.special

console.log(Type.toMessageKey(0)); // message.Normal
console.log(Type.toMessageKey(1)); // message.special
```

JavaScript にコンパイルされると次のようなコードになっています。
中身をみた感じだと、Enum オブジェクトに関数を追加しているだけのようです。うん不思議。

```JavaScript
(function (Type) {
    function toMessageKey(type) {
        switch (type) {
            case Type.Foo:
                return "message.foo";
            case Type.Bar:
                return "message.bar";
        }
    }
    Type.toMessageKey = toMessageKey;
})(Type || (Type = {}));
```

### (2018/01/30) 追記

1 つのファイルに Enum を複数定義して個別で`export`している場合は、次のエラーが出るかもしれません。

```
Error:(81, 11) TS2395: Individual declarations in merged declaration 'Type' must be all exported or all local.
```

その場合は`export`を一箇所にまとめて行うようにしてください。

```ts
enum Type {
  ...
}

namespace Type {
  ...
}

export {
  Type,
}
```

## まとめ

TypeScript の Enum に関数を追加してメッセージキーを返す方法でした。

やり方は、この記事の「Enum with static functions」を参考にしています。

- [Enums · TypeScript Deep Dive](https://basarat.gitbooks.io/typescript/docs/enums.html)


TypeScriptのEnumに関数を追加して値を返却する


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

[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/)を使ってこのブログを計測したところ、画像の最適化とキャッシュを提案されたので、年末年始は[AWS Lambda](https://docs.aws.amazon.com/ja_jp/lambda/latest/dg/welcome.html)を使って画像の最適化を試していました。

## はじめに

やりたかったことは、ブログで使う画像を最適化してサイズを小さくすることです。

ブログの画像ファイルは全て S3 から配信しているので、特定の S3 バケットに画像がアップロードして、それを Lambda 関数で最適化して他のバケットにアップロードすると言った、よくあるユースケースを実現してみました。

![](https://docs.aws.amazon.com/lambda/latest/dg/images/s3-admin-iser-walkthrough-20.png)

出来上がったものは、下のリポジトリにおいてあります。

- <https://github.com/mitsuruog/s3-image-optimizer>

正直なところ下の AWS 公式チュートリアルを少し改造しただけなので、これをそのまま使うよりはチュートリアルで自分で試して見た方がいいと思います。

- <https://docs.aws.amazon.com/lambda/latest/dg/with-s3-example.html>

## カスタマイズした点

カスタマイズした点について少し触れておきます。

### 環境変数の利用

Lambda 関数の設定画面から環境変数を設定することができたので、一部の変数を実行時に渡すようにしました。
Lambda 関数の中では`process.env`にアタッチされるので、次のように利用できます。

```javascript
const DEFAULT_DST_BUCKET = process.env.DST_BUCKET;
```

### 画像へのキャッシュの指定方法

S3 にアップロードされた画像にキャッシュを指定するには、S3 オブジェクトの**メタデータ**を使って HTTP ヘッダーを追加します。
AWS-SDK の`S3.putObject`を見ると、`CacheControl`と`Expires`を使うことで、キャッシュ関連の設定を渡すことができます。

次のように設定してみました。

```javascript
s3.putObject({
  Bucket: YOUR_TARGET_BUCKET_NAME,
  Key: "image.png",
  Body: data, // image data
  ContentType: "image/png",
  CacheControl: "max-age=86400", // 86400s => 1day
  Expires: new Date(new Date().getTime() + 86400 * 1000), // 現在日時より1日後
});
```

- [Class: AWS\.S3 — AWS SDK for JavaScript](https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/AWS/S3.html#putObject-property)

S3 バケットのメタデータを確認すると、次のように表示されます。(上の値と違いますが。。。)

![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2018/lambda-s3-01.png)

### 画像をアップロード時に「public」設定にする

これも`S3.putObject`の`ACL`を使って設定を渡すことができます。

```javascript
s3.putObject({
  Bucket: YOUR_TARGET_BUCKET_NAME,
  Key: "image.png",
  Body: data, // image data
  ContentType: "image/png",
  CacheControl: "max-age=86400", // 86400s => 1day
  Expires: new Date(new Date().getTime() + 86400 * 1000), // 現在日時より1日後
  ACL: "public-read",
});
```

> 次の値が設定できるようです。
>
> - "private"
> - "public-read"
> - "public-read-write"
> - "authenticated-read"
> - "aws-exec-read"
> - "bucket-owner-read"
> - "bucket-owner-full-control"

## 結果

結果どれくらいサイズが小さくなったかというと。。。

「**22.3MB => 16.2MB**」

うん、微妙。ちょっと減りました。
画像最適化をもう少し強くするともう少しサイズは減るかもしれません。

## さいごに

Lambda の動作確認にちょうどいい感じだったので、正月休みに画像の最適化用の Lambda 関数を作ってみた話でした。
出始めの頃と比べると GUI でできる範囲が増えたので楽でした。

> こちらは GUI の Designer で確認することができる、関数の概要図です。わかりやすい。
> ![](https://s3-ap-northeast-1.amazonaws.com/blog-mitsuruog/images/2018/lambda-s3-02.png)

もう少しいいものがあるので、自分で試さない場合はこのあたりもチェックしてみてください。

- <https://github.com/sourcey/s3-image-optimizer>
- [kraken.io(有料)](https://kraken.io/)


January, 2018

TypeScriptのEnumに関数を追加して値を返却する

AWS Lambdaを使ってS3にアップロードしたイメージを最適化する