<h2 id="h8a175a9b0e">前提</h2><ul><li><a href="https://firebase.google.com/docs/cli" target="_blank" rel="noopener noreferrer">Firebase CLI</a>がインストール済み</li><li>Firebaseプロジェクトが作成済み</li><li><code>firebase init</code>でプロジェクトの初期化が完了済み（functionsディレクトリがある）</li><li>TypeScriptを使用（importの仕方が異なる可能性があります）</li></ul> <h2 id="hbe726b3449">環境変数の設定</h2>まずは環境変数をFirebase CLIで設定します。<pre><code class="hljs">$ firebase functions:config:set &lt;project id&gt;.&lt;key&gt;=&lt;value&gt;</code></pre>ex. project idが"sample-app"でsecretキーに値を設定する場合。<pre><code class="hljs">$ firebase functions:config:set sample-app.secret="apisecret"</code></pre>ここで、&lt;key&gt;には大文字が使えないので注意が必要です。 次に<code>.runtimeconfig.json</code>を生成します。<pre><code class="hljs">$ firebase functions:config:get &gt; .runtimeconfig.json</code></pre>これで設定は完了です。うまくいけば以下のようなファイルが出力されるはずです。<pre><code class="hljs">{
&nbsp; "sample-app": {
&nbsp; &nbsp; "secret": "apisecret",
&nbsp; }
}</code></pre>当然のことですが、Gitを使用している場合は<code>.runtimeconfig.json</code>を<code>.gitignore</code>に含めておきましょう。 <h2 id="h8159e410b2">環境変数を使用する</h2>次に、コード上で環境変数を使用します。<pre><code class="hljs">import * as functions from 'firebase-functions';
import * as admin from 'firebase-admin';

// init
admin.initializeApp();

const config = functions.config()
const env = config["sample-app"]

console.log(env.secret) // output: apisecret</code></pre>これで環境変数が使えるようになりました！ <h2 id="h51c0fb60cb">補足（Firebase CLI 関連コマンド）</h2>プロジェクトリストの表示<pre><code class="hljs">$ firebase projects:list</code></pre>各プロジェクトの環境変数リストを表示<pre><code class="hljs">$ firebase functions:config:get</code></pre>

Firebase for Cloud Functionsで環境変数を使用する

Zenn記事は<a href="https://zenn.dev/yonajs/articles/dc330d8d81b60f" target="_blank" rel="noopener noreferrer">こちら</a>。 <h1 id="h8d027c8ed3">はじめに</h1>typescannerというObjectの型ガード関数を直感的に定義できるライブラリを作りました。 詳しい使い方はREADME.mdに書いたので、この記事では簡単な紹介をしていこうと思います。 <a href="https://github.com/yona3/typescanner" target="_blank" rel="noopener noreferrer">https://github.com/yona3/typescanner</a> <h2 id="h049bb22865">Example</h2>最初に型ガードの説明を書いていたら少し長くなってしまったので、先にREADME.mdのExampleを載せておきます。(ご存知の方は型ガードの説明部分を読み飛ばしていただいても問題ありません。)<pre><code>// define the union type
const Lang = {
&nbsp;ja: "ja",
&nbsp;en: "en",
} as const;
type Lang = typeof Lang[keyof typeof Lang]; // "ja" | "en"

const langList = Object.values(Lang);

type Post = {
&nbsp;id: number;
&nbsp;author: string | null;
&nbsp;body: string;
&nbsp;lang: Lang;
&nbsp;isPublic: boolean;
&nbsp;createdAt: Date;
&nbsp;tags?: string[] | null;
};

// create a scanner
const isPost = scanner&lt;Post&gt;({
&nbsp;id: number,
&nbsp;author: union(string, Null),
&nbsp;body: string,
&nbsp;lang: list(langList),
&nbsp;isPublic: boolean,
&nbsp;createdAt: date,
&nbsp;tags: optional(array(string), Null),
});

const data = {
&nbsp;id: 1,
&nbsp;author: "taro",
&nbsp;body: "Hello!",
&nbsp;lang: "ja",
&nbsp;isPublic: true,
&nbsp;createdAt: new Date(),
&nbsp;tags: ["tag1", "tag2"],
} as unknown;

// scan
const post = scan(data, isPost);

post.body; // OK</code></pre> <h1 id="h82b96d77b0">型ガード(Type Guard)とは？</h1>TypeScriptを使っていると<code>any</code>型や<code>unknown</code>型、<code>union</code>型など、実際の値の型が不明な変数を扱う場面がよく出てきます。その中でもfetch APIなどでAPIからデータを取得する際は、複数のプロパティを持ったオブジェクトを扱うことになります。fetch APIの場合、取得したデータの値は<code>any</code>型になります。ジェネリクスや<code>as</code>を使って戻り値の型を指定することもできますが、一部のプロパティに想定外の値が入っていたり、そもそも必要なプロパティが無いといった場合でも、データ取得時にエラーは起こりません。実際にそのプロパティを参照するタイミングで初めてエラーが発生します。 ほとんどの場合はどこかでデータの値を使うので、開発時にバグを発見することができます。しかし、実際にその値を参照するまではデータの不備や型定義のミス等に気付けません。この問題はデータを取得してすぐに型を検証し、問題があればエラーにするという方法で解決できます。それを実現するために必要なのが型ガード(Type Guard)です。 ※ fetch APIでデータを取得する場合を例に挙げましたが、外部サービスのAPIなどはレスポンスが急に変わることはないのでガチガチに型ガードするメリットはあまりないと思っています。私の場合はPOSTリクエストに含めるBodyの作成時など、Objectを直接操作する複雑な処理の後でバリデーションを行う際に使うケースが多いです。 以下の例では<code>string</code>型か<code>number</code>型かを判定しています。<pre><code>const foo = "a" as unknown;

if (typeof foo === "string") {
&nbsp;foo.toUpperCase(); // ok: string型として扱われる
}

if (typeof foo === "number") {
&nbsp;foo * 1; // ok: number型として扱われる
}</code></pre>型ガードは型アサーションと違い、実際の値の型を判定します。つまり、「<code>typeof value === "string"</code>が<code>true</code>であれば、<code>value</code>は<code>string</code>型である」ということが保証されています。 また、以下のようにして型ガード関数(Type Guard関数)を定義することもできます。<pre><code>// string型がどうかをチェックする関数
const isString = (value: unknown): value is string =&gt;　typeof value === "string";

if (isString(foo)) {
&nbsp;foo.toUpperCase(); // ok: string型として扱われる
&nbsp;foo * 1; // error!
}</code></pre>関数の戻り値の型を<code>value is Type</code>とし、任意の条件文をreturnすることで定義できます。 ※ 上記のisString()の例でわかるように、型ガード関数を使うと<code>typeof value === "string"</code>と書くのに比べてスッキリ書くことができるので便利ですが、中身の条件文さえ満たせばstring型として扱われてしまうという点には注意が必要です。 型ガード関数を定義することで、複数のプロパティをもったObjectの型ガードも実現できます。<pre><code>type Foo = {
&nbsp;a: string;
&nbsp;b: number;
}

const foo = {
&nbsp;a: "a",
&nbsp;b: 1,
} as unknown;

// 全てのプロパティを"Optional"とし、全ての値についてunknown型とした型を返す
type WouldBe&lt;T&gt; = { [P in keyof T]?: unknown };

// Objectかどうかを判定する型ガード関数
const isObject = &lt;T extends Record&lt;string, unknown&gt;&gt;(value: unknown): value is WouldBe&lt;T&gt; =&gt;
&nbsp;typeof value === "object" &amp;&amp; value !== null;

// Foo型かどうかを判定する型ガード関数
const isFoo = (value: unknown): value is Foo =&gt;
&nbsp;isObject&lt;Foo&gt;(value) &amp;&amp; typeof value.a === "string" &amp;&amp; typeof value.b === "number";

if (isFoo(foo)) {
&nbsp;foo.a.toUpperCase(); // ok
&nbsp;foo.b * 1; // ok
}</code></pre>上の例は@suinさんのこちらの記事で紹介されているコードとほぼ同じなので、詳しい解説は省きます。素晴らしい記事をありがとうございます！ <a href="https://qiita.com/suin/items/e0f7b7add75092196cd8" target="_blank" rel="noopener noreferrer">https://qiita.com/suin/items/e0f7b7add75092196cd8</a> <h1 id="h1641ae6392">型ガード関数の問題点</h1>型ガード関数を使えば、複数のプロパティを持つ複雑なObjectの型ガードも実装することができます。私もつい最近まで<code>as</code>を多用していたのですが、型ガード関数の存在を知ってからは必要に応じてしっかり型ガードをするようになりました。しかし、Objectの型ガードを実装する上でいくつか問題が起きました。<h2 id="h8c310dfdf8"> 可読性の低さ</h2> <code>isFoo</code> の例を見ればわかる通り、コードの見通しが悪いです。<code> Foo</code> 型のオブジェクトよりもプロパティが多く、<code>typeof</code>演算子や<code>instanceof</code>演算子でチェックできない型 (<code>"a" | "b"</code>、<code>string[]</code>など) があると、さらに複雑になります。<pre><code>// union型を定義
const Lang = {
&nbsp;ja: "ja",
&nbsp;en: "en",
} as const;
type Lang = typeof Lang[keyof typeof Lang]; // "ja" | "en"

const langList = Object.values(Lang); // ["ja", "en"]

// Post型を定義
type Post = {
&nbsp;id: number;
&nbsp;author: string | null;
&nbsp;body: string;
&nbsp;lang: Lang;
&nbsp;isPublic: boolean;
&nbsp;createdAt: Date;
&nbsp;tags?: string[] | null;
};


// Postの型ガード関数
const isPost = (value: unknown): value is Post =&gt;
&nbsp;isObject&lt;Post&gt;(value) &amp;&amp;
&nbsp;typeof value.id === "number" &amp;&amp;
&nbsp;(typeof value.author === "string" || value.author === null) &amp;&amp;
&nbsp;typeof value.body === "string" &amp;&amp;
&nbsp;langList.includes(value.lang as any) &amp;&amp;
&nbsp;typeof value.isPublic === "boolean" &amp;&amp;
&nbsp;value.createdAt instanceof Date &amp;&amp;
&nbsp;(
&nbsp;&nbsp;value.tags == null ||
&nbsp;&nbsp;(
&nbsp;&nbsp;&nbsp;Array.isArray(value.tags) &amp;&amp;
&nbsp;&nbsp;&nbsp;value.tags.every((item) =&gt; typeof item === "string")
&nbsp;&nbsp;)
&nbsp;);

// Post型の条件を満たすデータ
const data = {
&nbsp;id: 1,
&nbsp;author: "taro",
&nbsp;body: "Hello!",
&nbsp;lang: "ja",
&nbsp;isPublic: true,
&nbsp;createdAt: new Date(),
&nbsp;tags: ["tag1", "tag2"],
} as unknown;

if (isPost(data)) {
&nbsp;console.log(data.body.trim()); // ok
}</code></pre>今回は型ガード関数を使わずに実装してみました。ご覧の通りこのままでは可読性が低く、とても見づらいです。次に、<code>isString()</code>のような独自の型ガード関数を用いて<code>isPost()</code>をリファクタリングしてみます。 <h2 id="hcc6ec8c51b">型ガード関数を定義するのに手間がかかる</h2>リファクタリングしたコードがこちらです。<pre><code>// リファクタリングしたisPost()
const isPost = (value: unknown): value is Post =&gt;
&nbsp;isObject&lt;Post&gt;(value) &amp;&amp;
&nbsp;isNumber(value.id) &amp;&amp;
&nbsp;(isString(value.author) || isNull(value.author)) &amp;&amp;
&nbsp;isString(string) &amp;&amp;
&nbsp;isList(value.lang, langList) &amp;&amp; // Lang型の型ガード関数 ("ja" | "en")
&nbsp;isBoolean(value.isPublic) &amp;&amp;
&nbsp;isDate(value.createdAt) &amp;&amp;
&nbsp;(isNull(value.tags) || isUndefined(value.tags) || isArray(value.tags, isString));</code></pre>これで可読性の低さは少し改善できました。isList() だけ説明しておくと、第一引数で渡した値が第二引数で渡された配列に含まれるかどうかをチェックする型ガード関数になっています。 型ガード関数の定義の部分は省きましたが、今回のリファクタリングで使用した関数だけでも定義するのがかなり大変です。<code>isString()</code>のようなプリミティブ型の型ガード関数は特にそうですが、基本的な型ガード関数は毎回同じ実装になるので、ライブラリとしてまとめて用意されていると便利です。 <h2 id="hb53ce1c6b8">どのプロパティに問題があるのかわかりづらい</h2>関数の可読性の問題はなくなりましたが、実際に型ガード関数を使ってみるとまた問題が起こりました。<pre><code>const post = await fetchPost();
if (!isPost(post)) throw new Error("post is invalid.")

// postでなにかする</code></pre>これは型の検証に失敗した際にエラーを投げるという処理です。 型ガード自体はしっかりできているのですが、このエラーメッセージからは「どのプロパティがおかしいのか」をすぐに判別することができません。<code>post</code>の中身を<code>console.log</code>で確認するなど、実際の値と型ガード関数の中身を比較して間違い探しをする必要があります。Objectのプロパティの数が多いほど大変です。 これを解決するためには型ガード関数をラップし、エラー発生時に"問題のあるプロパティ"の情報を含むエラー文を吐かせる関数を実装する必要がありそうです。 <h1 id="he0d34870bb">typescannerの紹介</h1>前置きが長くなってしまいましたが、以上の問題を解決するために作ったライブラリがtypescannerです。以下について順番に解説していきます。 ※ 現在の仕様とは異なる箇所があります。詳細はREADMEをご覧ください。 <h3 id="hf1f52a8a10">typescannerの特徴</h3>1. isString()を含む基本的な型ガード関数 + 独自の型ガード関数 2. Objectの型ガード関数を直感的に定義できる scanner() 関数 3. 型ガードを行った上で検証済みの値を受け取る scan() 関数 <h2 id="h37c2a0f23a">1. 基本的な型ガード関数</h2>typescannerで用意している型ガード関数は以下のとおりです。<code>isArray</code>以降の型ガード関数は第一引数に検証したい値、第二引数以降に検証に必要なもの(型ガード関数や配列、コンストラクターなど)を受け取る形になっています。<pre><code>// primitive

isString("a") // true

isNumber(1) // true

isBoolean(true) // true

isUndefined(undefined) // true

isNull(null) // true

isDate(new Data()) // true

isSymbol(Symbol("a")) // true

isBigint(BigInt(1)) // true

// isObject

isObject&lt;T&gt;(value) // &lt;T&gt;(value: unknown) =&gt;&nbsp;value is WouldBe&lt;T&gt;

// isArray

isArray(["a", "b"], isString) // string[]

isArray&lt;string | number&gt;(["a", 1], isString, isNumber) // (string | number)[]

isArray(["a", null, undefined], isString, isNull, isUndefined) // (string | null | undefined)[]

// isOptional

isOptional("a", isString) // true

isOptional(undefined, isString) // true

// isList

isList("ja", langList) // true

// isInstanceOf

try {
&nbsp;...
} catch (error) {
&nbsp;if (isInstanceOf(error, Error)) {
&nbsp;&nbsp;error.message // OK
&nbsp;}
}</code></pre> <h2 id="h197b07fe95">2. scanner()関数</h2><code>scanner()</code> 関数はObjectの型ガード関数を直感的に定義できる関数です。 <h3 id="he7a28316b4">基本</h3><code>scanner()</code> 関数を使って先程の例でも登場した<code>Post</code>型の型ガード関数である<code>isPost()</code>を書き換えてみます。<pre><code>type Post = {
&nbsp;id: number;
&nbsp;author: string | null;
&nbsp;body: string;
&nbsp;lang: Lang;
&nbsp;isPublic: boolean;
&nbsp;createdAt: Date;
&nbsp;tags?: string[] | null;
};

// scanner()関数で定義したPost型の型ガード関数
const isPost = scanner&lt;Post&gt;({
&nbsp;id: number,
&nbsp;author: union(string, Null),
&nbsp;body: string,
&nbsp;lang: list(langList),
&nbsp;isPublic: boolean,
&nbsp;createdAt: date,
&nbsp;tags: optional(array(string), Null),
});</code></pre><code>scanner()</code> 関数はジェネリクスで指定した型に合わせて 各プロパティに対して型ガード関数を設定する ことでObjectの型ガード関数を返してくれます。つまり、<code>scanner()</code>の引数として渡しているObjectの中で登場する<code>string</code>,<code>number</code>,<code>list()</code>,<code>optional()</code>などは型ガード関数（あるいは型ガード関数を返す関数）です。 ※ 以降<code>string</code>や<code>optional()</code>のようなscanner()関数を使用する際に使う型ガード関数をfieldsと呼びます。 <code>string</code>のようなプリミティブ型のfieldsの中身は<code>isString()</code>と全く同じですが、Type Ailiasで型定義する感覚に近づけたかったのでそのようにしています("直感的に定義できる"はここからきています)。 もちろん好みでなければ<code>string</code>の代わりに<code>isString</code>と書くことも可能です。 <h3 id="h453696e0b7">fieldsの拡張</h3><pre><code>また、独自の型ガード関数を用いてfieldsを拡張することも可能です。
type Foo = {
&nbsp;a: string;
&nbsp;b: number;
&nbsp;c: boolean;
&nbsp;d: Date;
&nbsp;e: string[];
&nbsp;f?: string;
&nbsp;g: "a" | "b" | "c";
&nbsp;h: string | null;
&nbsp;i: string | number;
&nbsp;j: number;
};
&nbsp;&nbsp;
// 独自の型ガード関数 (field)
const even = (value: unknown): value is number =&gt;
&nbsp;isNumber(value) &amp;&amp; value % 2 === 0;

const isFoo = scanner&lt;Foo&gt;({
&nbsp;a: string,
&nbsp;b: number,
&nbsp;c: boolean,
&nbsp;d: date,
&nbsp;e: array(string),
&nbsp;f: optional(string),
&nbsp;g: list(["a", "b", "c"]),
&nbsp;h: union(string, Null),
&nbsp;i: union&lt;string | number&gt;(string, number),
&nbsp;j: even, // Custom field
});</code></pre> <h3 id="hdc25a2ef6a">エラー発生時の挙動</h3>そして型ガード関数の問題点で挙げた「どのプロパティに問題があるのかわかりづらい」という問題は、"問題のあるプロパティ"の情報を含むエラー文を吐かせることで解決しています。 地味な機能ではありますが、とても便利で気に入っています。 <pre><code>// Error: value.key does not meet the condition.
if (isFoo(data)) {
&nbsp;...
}</code></pre> <h2 id="h82525fecf9"> 3. scan()関数</h2><code>scan()</code>関数は第一引数に検証したい値、第二引数以降に型ガード関数を渡すことで検証済みの値が受け取れます。<pre><code>// success
const data = scan(foo as unknown, isFoo);
data.a // OK

// Error!
const data = scan(bar as unknown, isFoo); // Error: value.key does not meet the condition.</code></pre><code>scan()</code>関数はZennで話題になっていた@yuitosatoさんの<a href="https://github.com/YuitoSato/as-safely" target="_blank" rel="noopener noreferrer">as-safely</a>を参考にしました。 <h2 id="h4f5f423a9d">他のライブラリとの比較</h2>typescannerの<code>scanner()</code>関数と似たようなものを持つライブラリもありましたが、関数名が気に入らなかったり、全体の見通しがあまり良くなかったり、ライブラリ側で用意して欲しかった<code>list()</code>や<code>scan()</code>関数のような機能がなかったりと、「これだ！」と思えるものを見つけることができませんでした。あと、以前からnpmパッケージを作ってみたいとう願望があったので今回は自分で作ってみました。 <h1 id="h1afe451c43">さいごに</h1>気になった方は是非インストールして使ってみてください！Pull Request等も大歓迎です。<h3 id="h3de35099b3">参考</h3>typescanner - npm <a href="https://www.npmjs.com/package/typescanner" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/typescanner</a> 型ガード - TypeScript Deep Dive 日本語版 <a href="https://typescript-jp.gitbook.io/deep-dive/type-system/typeguard" target="_blank" rel="noopener noreferrer">https://typescript-jp.gitbook.io/deep-dive/type-system/typeguard</a>

TypeScriptでObjectの型ガード関数を直感的に定義できるライブラリを作った

やることになった経緯については<a href="https://yona.dev/blog/g6138p46u" target="_blank" rel="noopener noreferrer">過去記事</a>をご覧ください。<blockquote>サービスの運用をいつまで続けるかはまだ未定ですが、当分の間は続けます。そこで問題になるのは公式Twitterアカウントの運用です。公式アカウントでの投稿の共有がないと閲覧数がなかなか伸びないため、piguに投稿するメリットが弱くなってしまいます。そのため、Twitterでの投稿の共有は不可欠です。しかし、現在は全て手動でツイートしいて、投稿のURLを共有するまでにボタンを何回も押さないといけないため、正直かなり面倒です。他にも様々な問題はありますが、まずはこの問題を解決するためのシステムを構築する予定です。</blockquote> <h2 id="hbd847f936e">できたもの</h2>FirebaseのCloud Functionsを利用して「ツイートの予約」と「自動ツイート」を行う関数を定期実行させています。管理画面ではツイートするテキストの編集、予約の取り消しやブラックリストの編集などを行うことができます（今ではTwitterで共有する必要性がなくなった「過去のお知らせ情報」などの投稿を予約可能な投稿リストから除外することが主な目的です）。 <img src="https://images.microcms-assets.io/assets/3c1fa25360b2455ab94fa433bfcfb496/a29b4e4ed28d4ea1a67281d346389e8c/088E5D9E-A215-4057-854B-B1B92048DF16.png" alt=""><img src="https://images.microcms-assets.io/assets/3c1fa25360b2455ab94fa433bfcfb496/2649160244324f898bfc90df206a48d9/252B1CF2-228A-4E99-A105-F11C71ABFAD7.png" alt=""> 予約したツイートなどのデータは全てpiguと同じデータベース（Cloud Firestore）で管理しています。「自動ツイート」する関数内でFirestoreから予約リストを取得し、Tweet Atフィールドの日付が現在の時刻よりも前であるものをツイートするという流れになっています。ちなみに、<a href="https://developer.twitter.com/en/docs/twitter-ads-api" target="_blank" rel="noopener noreferrer">Twitter Ads API</a>を使えばWeb版Twitterの予約ツイート機能を利用できるらしいですが、今回は申請をしてから利用できるようになるまで待てなかったので利用しませんでした。 <h2 id="h7dde528706">技術に関する話</h2><h3 id="h11776d6af5">Cloud Functions - Pub/Subトリガー</h3>これまでに動的OGPの生成（httpリクエスト）や検索用インデックスの更新（firestoreトリガー）にCloud Functionsを利用した経験がありましたが、関数を定期実行させる方法はわかりませんでした。Cloud FunctionsのドキュメントによるとGCPの<a href="https://cloud.google.com/pubsub" target="_blank" rel="noopener noreferrer">Pub/Sub</a>と<a href="https://cloud.google.com/scheduler" target="_blank" rel="noopener noreferrer">Cloud Scheduler</a>を利用して実現可能とのことだったので利用しました。 処理の流れとしてはCloud Schedulerによってイベントがトリガーされ、Pub/Subを経由してCloud Functionsの関数が実行されるようです。これだけ聞くと複雑で大変そうですが、実際はCloud Functions側でトリガー方法を変更するだけなので、コードを数行書き変えるだけで済みました。時間の設定も想定していたより柔軟に対応できました。例えば「10時〜23時の時間帯に1時間毎にイベントを実行する」みたいな感じです（知ってる方からすれば当たり前かもしれません）。今後また何か自動化したいことがあれば利用したいです。 <h3 id="hac8e5541b0">次世代フロントエンドツール - Vite</h3>今回はビルドツールに<a href="https://ja.vitejs.dev/" target="_blank" rel="noopener noreferrer">Vite</a>を使用してみました。最近まで「バイト」と呼んでたのですが「ヴィート」が正しいようです。Webpackとの大きな違いはサーバーの起動や更新に時間がかかってしまう原因となる「バンドル」という工程をES Modulesを活用することで効率的に行うことができる点です。開発時のリロードが高速で、開発体験がとても良かったです。この辺の仕組みについては公式ドキュメントの他に<a href="https://zenn.dev/uhyo/articles/what-is-native-esm-era" target="_blank" rel="noopener noreferrer">Native ESM時代とはなにか</a>というZenn記事が参考になると思います。 <h2 id="h8d78e14043">感想</h2>特に大きな問題なく無事に実装することができて良かったです。これで毎日ボタンをポチポチせずに済みます！！