<p>Zenn記事は<a href="https://zenn.dev/yonajs/articles/dc330d8d81b60f" target="_blank" rel="noopener noreferrer">こちら</a>。<br></p><h1 id="h8d027c8ed3">はじめに</h1><p>typescannerというObjectの型ガード関数を直感的に定義できるライブラリを作りました。<br>詳しい使い方はREADME.mdに書いたので、この記事では簡単な紹介をしていこうと思います。<br><a href="https://github.com/yona3/typescanner" target="_blank" rel="noopener noreferrer">https://github.com/yona3/typescanner</a><br></p><h2 id="h049bb22865">Example</h2><p>最初に型ガードの説明を書いていたら少し長くなってしまったので、先にREADME.mdのExampleを載せておきます。(ご存知の方は型ガードの説明部分を読み飛ばしていただいても問題ありません。)</p><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><p><br></p><h1 id="h82b96d77b0">型ガード(Type Guard)とは？</h1><p>TypeScriptを使っていると<code>any</code>型や<code>unknown</code>型、<code>union</code>型など、実際の値の型が不明な変数を扱う場面がよく出てきます。その中でもfetch APIなどでAPIからデータを取得する際は、複数のプロパティを持ったオブジェクトを扱うことになります。fetch APIの場合、取得したデータの値は<code>any</code>型になります。ジェネリクスや<code>as</code>を使って戻り値の型を指定することもできますが、一部のプロパティに想定外の値が入っていたり、そもそも必要なプロパティが無いといった場合でも、<strong>データ取得時にエラーは起こりません</strong>。実際にそのプロパティを参照するタイミングで初めてエラーが発生します。<br>ほとんどの場合はどこかでデータの値を使うので、開発時にバグを発見することができます。しかし、実際にその値を参照するまではデータの不備や型定義のミス等に気付けません。この問題はデータを取得してすぐに型を検証し、問題があればエラーにするという方法で解決できます。それを実現するために必要なのが<strong>型ガード</strong>(Type Guard)です。<br><br>※ <em>fetch APIでデータを取得する場合を例に挙げましたが、外部サービスのAPIなどはレスポンスが急に変わることはないのでガチガチに型ガードするメリットはあまりないと思っています。私の場合はPOSTリクエストに含めるBodyの作成時など、Objectを直接操作する複雑な処理の後でバリデーションを行う際に使うケースが多いです。</em><br><br>以下の例では<code>string</code>型か<code>number</code>型かを判定しています。</p><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><p>型ガードは型アサーションと違い、<strong>実際の値の型を判定します</strong>。つまり、「<code>typeof value === "string"</code>が<code>true</code>であれば、<code>value</code>は<code>string</code>型である」ということが保証されています。<br><br>また、以下のようにして<strong>型ガード関数</strong>(Type Guard関数)を定義することもできます。</p><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><p>関数の戻り値の型を<code>value is Type</code>とし、任意の条件文をreturnすることで定義できます。<br><br>※<em> 上記のisString()の例でわかるように、型ガード関数を使うと</em><em><code>typeof value === "string"</code></em><em>と書くのに比べてスッキリ書くことができるので便利ですが、中身の条件文さえ満たせばstring型として扱われてしまうという点には注意が必要です。</em><br><br>型ガード関数を定義することで、複数のプロパティをもったObjectの型ガードも実現できます。</p><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><p>上の例は@suinさんのこちらの記事で紹介されているコードとほぼ同じなので、詳しい解説は省きます。素晴らしい記事をありがとうございます！<br><a href="https://qiita.com/suin/items/e0f7b7add75092196cd8" target="_blank" rel="noopener noreferrer">https://qiita.com/suin/items/e0f7b7add75092196cd8</a><br></p><h1 id="h1641ae6392">型ガード関数の問題点</h1><p>型ガード関数を使えば、複数のプロパティを持つ複雑なObjectの型ガードも実装することができます。私もつい最近まで<code>as</code>を多用していたのですが、型ガード関数の存在を知ってからは必要に応じてしっかり型ガードをするようになりました。しかし、Objectの型ガードを実装する上でいくつか問題が起きました。</p><h2 id="h8c310dfdf8"><br>可読性の低さ</h2><p><br><code>isFoo</code>  の例を見ればわかる通り、コードの見通しが悪いです。<code> Foo</code>  型のオブジェクトよりもプロパティが多く、<code>typeof</code>演算子や<code>instanceof</code>演算子でチェックできない型 (<code>"a" | "b"</code>、<code>string[]</code>など) があると、さらに複雑になります。</p><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><p>今回は型ガード関数を使わずに実装してみました。ご覧の通りこのままでは可読性が低く、とても見づらいです。次に、<code>isString()</code>のような独自の型ガード関数を用いて<code>isPost()</code>をリファクタリングしてみます。<br></p><h2 id="hcc6ec8c51b">型ガード関数を定義するのに手間がかかる</h2><p>リファクタリングしたコードがこちらです。</p><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><p>これで可読性の低さは少し改善できました。isList() だけ説明しておくと、第一引数で渡した値が第二引数で渡された配列に含まれるかどうかをチェックする型ガード関数になっています。<br><br>型ガード関数の定義の部分は省きましたが、今回のリファクタリングで使用した関数だけでも定義するのがかなり大変です。<code>isString()</code>のようなプリミティブ型の型ガード関数は特にそうですが、基本的な型ガード関数は毎回同じ実装になるので、ライブラリとしてまとめて用意されていると便利です。<br></p><h2 id="hb53ce1c6b8">どのプロパティに問題があるのかわかりづらい</h2><p>関数の可読性の問題はなくなりましたが、実際に型ガード関数を使ってみるとまた問題が起こりました。</p><pre><code>const post = await fetchPost();
if (!isPost(post)) throw new Error("post is invalid.")

// postでなにかする</code></pre><p>これは型の検証に失敗した際にエラーを投げるという処理です。<br><br>型ガード自体はしっかりできているのですが、このエラーメッセージからは「どのプロパティがおかしいのか」をすぐに判別することができません。<code>post</code>の中身を<code>console.log</code>で確認するなど、実際の値と型ガード関数の中身を比較して間違い探しをする必要があります。Objectのプロパティの数が多いほど大変です。<br><br>これを解決するためには型ガード関数をラップし、エラー発生時に"問題のあるプロパティ"の情報を含むエラー文を吐かせる関数を実装する必要がありそうです。<br></p><h1 id="he0d34870bb">typescannerの紹介</h1><p>前置きが長くなってしまいましたが、以上の問題を解決するために作ったライブラリがtypescannerです。以下について順番に解説していきます。<br><br>※ <em>現在の仕様とは異なる箇所があります。詳細はREADMEをご覧ください。</em><br></p><h3 id="hf1f52a8a10">typescannerの特徴</h3><p>1. <strong>isString()を含む基本的な型ガード関数 + 独自の型ガード関数</strong> <br>2. <strong>Objectの型ガード関数を直感的に定義できる scanner() 関数</strong><br>3. <strong>型ガードを行った上で検証済みの値を受け取る scan() 関数</strong><br></p><h2 id="h37c2a0f23a">1. 基本的な型ガード関数</h2><p>typescannerで用意している型ガード関数は以下のとおりです。<code>isArray</code>以降の型ガード関数は第一引数に検証したい値、第二引数以降に検証に必要なもの(型ガード関数や配列、コンストラクターなど)を受け取る形になっています。</p><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><p><br></p><h2 id="h197b07fe95">2. scanner()関数</h2><p><code>scanner()</code> 関数はObjectの型ガード関数を直感的に定義できる関数です。<br></p><h3 id="he7a28316b4">基本</h3><p><code>scanner()</code> 関数を使って先程の例でも登場した<code>Post</code>型の型ガード関数である<code>isPost()</code>を書き換えてみます。</p><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><p><code>scanner()</code>  関数はジェネリクスで指定した型に合わせて<strong>  各プロパティに対して型ガード関数を設定する</strong>  ことでObjectの型ガード関数を返してくれます。つまり、<code>scanner()</code>の引数として渡しているObjectの中で登場する<code>string</code>,<code>number</code>,<code>list()</code>,<code>optional()</code>などは型ガード関数（あるいは型ガード関数を返す関数）です。<br><br><em>※ 以降</em><em><code>string</code></em><em>や</em><em><code>optional()</code></em><em>のようなscanner()関数を使用する際に使う型ガード関数を</em><strong><em>fields</em></strong><em>と呼びます。</em><br><br><code>string</code>のようなプリミティブ型のfieldsの中身は<code>isString()</code>と全く同じですが、Type Ailiasで型定義する感覚に近づけたかったのでそのようにしています("直感的に定義できる"はここからきています)。<br>もちろん好みでなければ<code>string</code>の代わりに<code>isString</code>と書くことも可能です。<br></p><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><p><br></p><h3 id="hdc25a2ef6a">エラー発生時の挙動</h3><p>そして<strong>型ガード関数の問題点</strong>で挙げた「どのプロパティに問題があるのかわかりづらい」という問題は、"問題のあるプロパティ"の情報を含むエラー文を吐かせることで解決しています。<br><br>地味な機能ではありますが、とても便利で気に入っています。<br></p><pre><code>// Error: value.key does not meet the condition.
if (isFoo(data)) {
&nbsp;...
}</code></pre><p><br></p><h2 id="h82525fecf9">  3. scan()関数</h2><p><code>scan()</code>関数は第一引数に検証したい値、第二引数以降に型ガード関数を渡すことで検証済みの値が受け取れます。</p><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><p><code>scan()</code>関数はZennで話題になっていた@yuitosatoさんの<a href="https://github.com/YuitoSato/as-safely" target="_blank" rel="noopener noreferrer">as-safely</a>を参考にしました。<br></p><h2 id="h4f5f423a9d">他のライブラリとの比較</h2><p>typescannerの<code>scanner()</code>関数と似たようなものを持つライブラリもありましたが、関数名が気に入らなかったり、全体の見通しがあまり良くなかったり、ライブラリ側で用意して欲しかった<code>list()</code>や<code>scan()</code>関数のような機能がなかったりと、「これだ！」と思えるものを見つけることができませんでした。あと、以前からnpmパッケージを作ってみたいとう願望があったので今回は自分で作ってみました。<br></p><h1 id="h1afe451c43">さいごに</h1><p>気になった方は是非インストールして使ってみてください！Pull Request等も大歓迎です。</p><h3 id="h3de35099b3">参考</h3><p>typescanner - npm <a href="https://www.npmjs.com/package/typescanner" target="_blank" rel="noopener noreferrer">https://www.npmjs.com/package/typescanner</a><br>型ガード - 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></p>

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

<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><p><br></p><h2 id="hbe726b3449">環境変数の設定</h2><p>まずは環境変数をFirebase CLIで設定します。</p><pre><code>$ firebase functions:config:set &lt;project id&gt;.&lt;key&gt;=&lt;value&gt;</code></pre><p>ex. project idが"sample-app"でsecretキーに値を設定する場合。</p><pre><code>$ firebase functions:config:set sample-app.secret="apisecret"</code></pre><p>ここで、&lt;key&gt;には大文字が使えないので注意が必要です。<br><br>次に<code>.runtimeconfig.json</code>を生成します。</p><pre><code>$ firebase functions:config:get &gt; .runtimeconfig.json</code></pre><p>これで設定は完了です。うまくいけば以下のようなファイルが出力されるはずです。</p><pre><code>{
&nbsp; "sample-app": {
&nbsp; &nbsp; "secret": "apisecret",
&nbsp; }
}</code></pre><p>当然のことですが、Gitを使用している場合は<code>.runtimeconfig.json</code><span style="color:#2b2c30">を</span><code>.gitignore</code><span style="color:#2b2c30">に含めておきましょう。</span><br></p><h2 id="h8159e410b2">環境変数を使用する</h2><p>次に、コード上で環境変数を使用します。</p><pre><code>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><p>これで環境変数が使えるようになりました！<br></p><h2 id="h51c0fb60cb">補足（Firebase CLI 関連コマンド）</h2><p>プロジェクトリストの表示</p><pre><code>$ firebase projects:list</code></pre><p>各プロジェクトの環境変数リストを表示</p><pre><code>$ firebase functions:config:get</code></pre><p><br></p>

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

<p>やることになった経緯については<a href="https://yona.dev/blog/g6138p46u" target="_blank" rel="noopener noreferrer">過去記事</a>をご覧ください。</p><blockquote><span style="color:#374151">サービスの運用をいつまで続けるかはまだ未定ですが、当分の間は続けます。そこで問題になるのは公式Twitterアカウントの運用です。公式アカウントでの投稿の共有がないと閲覧数がなかなか伸びないため、piguに投稿するメリットが弱くなってしまいます。そのため、Twitterでの投稿の共有は不可欠です。しかし、現在は全て手動でツイートしいて、投稿のURLを共有するまでにボタンを何回も押さないといけないため、正直かなり面倒です。他にも様々な問題はありますが、まずはこの問題を解決するためのシステムを構築する予定です。</span></blockquote><p><br></p><h2 id="hbd847f936e">できたもの</h2><p>FirebaseのCloud Functionsを利用して「ツイートの予約」と「自動ツイート」を行う関数を定期実行させています。管理画面ではツイートするテキストの編集、予約の取り消しやブラックリストの編集などを行うことができます（今ではTwitterで共有する必要性がなくなった「過去のお知らせ情報」などの投稿を予約可能な投稿リストから除外することが主な目的です）。<br><br><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=""><br>予約したツイートなどのデータは全て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の予約ツイート機能を利用できるらしいですが、今回は申請をしてから利用できるようになるまで待てなかったので利用しませんでした。<br><br></p><h2 id="h7dde528706">技術に関する話</h2><h3 id="h11776d6af5">Cloud Functions - Pub/Subトリガー</h3><p>これまでに動的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>を利用して実現可能とのことだったので利用しました。<br><br>処理の流れとしてはCloud Schedulerによってイベントがトリガーされ、Pub/Subを経由してCloud Functionsの関数が実行されるようです。これだけ聞くと複雑で大変そうですが、実際はCloud Functions側でトリガー方法を変更するだけなので、コードを数行書き変えるだけで済みました。時間の設定も想定していたより柔軟に対応できました。例えば「10時〜23時の時間帯に1時間毎にイベントを実行する」みたいな感じです（知ってる方からすれば当たり前かもしれません）。今後また何か自動化したいことがあれば利用したいです。<br></p><h3 id="hac8e5541b0">次世代フロントエンドツール - Vite</h3><p>今回はビルドツールに<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"><strong>Native ESM時代とはなにか</strong></a>というZenn記事が参考になると思います。<br></p><h2 id="h8d78e14043">感想</h2><p>特に大きな問題なく無事に実装することができて良かったです。これで毎日ボタンをポチポチせずに済みます！！</p>

Cloud Functionsでツイートを自動化する

<p>例えば以下のようなObjectを扱うとします。</p><pre><code>const translations = {
  ja: {
    title: "こんにちは",
    body: "はじめまして"
  },
  en: {
    title: "Hello"
    body: "Nice to meet you"
   }
}</code></pre><p>また、<code>translations</code><span style="color:#2b2c30"> のkeyはja, en, zhなどの</span><a href="https://mt-auto-minhon-mlt.ucri.jgn-x.jp/content/help/detail.html?q_pid=FAQ_ETC" target="_blank" rel="noopener noreferrer">言語コード</a><span style="color:#2b2c30">のみにしたいとします。</span><br>この場合、TypeScriptの<code>key in</code>を使って<code>translations</code>を型安全にすることができます。</p><pre><code>type Language = "ja" | "en" | "zh"
type Translation = {
  title: string;
  body: string;
}

// { [key in TypeA]: TypeB }
const translations: { [key in Language]?: Translation } = {
  ja: {
    title: "こんにちは",
    body: "はじめまして"
  },
  en: {
    title: "Hello",
    body: "Nice to meet you"
  }
}

translations.zh = { title: "你好", body: "初次见面" } // OK
translations.ja = "こんにちは" // Error!
translations.foo = "foo" // Error!</code></pre><p>以上です。</p>

TypeScriptのkey inでObjectを型安全にする

<p>2020年12月28日に<a href="https://pigu-ryu.web.app" target="_blank" rel="noopener noreferrer">pigu</a>という僕が所属している琉球大学の学生向け情報共有サイトをリリースしました。大学に関する様々な情報を学生同士で共有し、効率的な情報収集を実現するためのサイトです。<br><img src="https://images.microcms-assets.io/assets/3c1fa25360b2455ab94fa433bfcfb496/d1c6f14949174f3e97f1e31f9198a59f/4D88B476-B729-432F-9B6B-8718504E22FE.png" alt=""><br></p><h2 id="hbfcfc70a17">作ったきっかけ</h2><p>履修登録の時期になると僕のTwitterのタイムラインが「授業の登録ってどうやるの？」「おすすめの授業教えてください！」といったツイートで溢れていたので、これをWebサイトと言う形で一箇所にまとめれば便利そうだなと思ったのがきっかけです。<br></p><h2 id="h30d3a3acf4">開発期間</h2><p>2020年10月頃から開発を始め、約2ヶ月でリリースしました。その後も2021年5月頃までは頻繁に機能追加を行っていました。リリース後に追加した主な機能には画像投稿機能、通知機能、検索機能などがあります。サイトのUIもかなり変化しました。</p><h2 id="h7d2fabe872"><br>よかったこと・嬉しかったこと</h2><h3 id="hfc6d69391d">意外と反応があった</h3><p>最初はユーザー0人も覚悟していましたが、Twitterでリリースの報告をしたところ、いいね数がそこそこ伸びました。2021年8月現在では200人近くの登録ユーザーがおり、投稿数は150を越えました。piguをリリースする前まではWebサービスの開発など、実績と呼べるものが何も無い状態だったため、多少は自信がつきました。<br></p><h3 id="h200dd9f1e0">技術力の向上に繋がった</h3><p>このサイトは<a href="https://reactjs.org" target="_blank" rel="noopener noreferrer">React</a>と<a href="https://firebase.google.com" target="_blank" rel="noopener noreferrer">Firebase</a>を使って構築しました。<a href="https://qiita.com/tyoukan__/items/e4582c6774748b7f96cd" target="_blank" rel="noopener noreferrer">Vanilla JS</a>から<a href="https://www.typescriptlang.org" target="_blank" rel="noopener noreferrer">TypeScript</a>への移行、Cloud Firestoreのデータ設計、canvasやCloud Functionsを使った動的OGPの生成、Cloud Firestoreと<a href="https://www.algolia.com" target="_blank" rel="noopener noreferrer">Algolia</a>を利用した全文検索機能の実装など、開発を通して様々な知見が得られました。<br></p><h3 id="h8240835f5f">「プログラミングしてる人」として認知されるようになった</h3><p>このサイトを作ったことがきっかけで、Twitterでは「プログラミングしてる人」として認知されるようになりました。大学では初対面の人がpiguの存在を知っていた or 使ってくれていたということも何度かありました。一部で色々と勘違いされて歯痒い思いもしましたが、工学部の知能情報コース（情報工学専攻）のLT会に登壇させていただいたり、他の学生からWeb開発の依頼をいただいたりと、結果的には良かったと思っています。<br></p><h2 id="h16a1555b40">後悔したこと・苦労したこと</h2><h3 id="h6c86d31640">技術選定</h3><p>リリース当時はここまでサービスの運用が続くことを想定していなかったため、今までに使用した経験のあるVanila JSとReactでUIを構築し、Sassでスタイリングを行いました。しかし今ではキャッチアップのための学習でリリース時期が数ヶ月伸びてでもTypeScript, <a href="https://github.com/css-modules/css-modules" target="_blank" rel="noopener noreferrer">CSS Modules</a>, <a href="https://tailwindcss.com" target="_blank" rel="noopener noreferrer">Tailwind CSS</a>, <a href="https://nextjs.org" target="_blank" rel="noopener noreferrer">Next.js</a>などの技術を導入するべきだったと後悔しています。Vanilla JSからTypeScriptへの移行はなんとかできましたが、Next.jsやTailwind CSSへの移行は時間的に厳しそうです。今後またWebサービスを作る際は特に気をつけたいところです。<br></p><h3 id="h88d7e66110">質問への対応</h3><p>サービスに関する意見や要望を集めたかったので、サイトとは別に質問箱 (<a href="https://peing.net/ja" target="_blank" rel="noopener noreferrer">Peing</a>) を設置しました。しかし、質問箱に届いたものは本来ならpiguに投稿して欲しかった大学関連の質問がほとんどでした。もちろん、このような質問に回答するとpiguへの投稿はさらに減ってしまうのですが、当時は「質問を無視するとサービスを使ってもらえなくなるかもしれない」とか余計なことを色々と考えてしまい、すぐに対策を講じることができませんでした。最終的にはサービスに関する質問以外には答えないことにしました。<br></p><h3 id="hc70adb36da">考えるべきことの選択</h3><p>一時期はTwitterで大学についての質問をする新入生を見るたびに「この人はどうしたらpiguを使ってくれるんだろう…」と考えては結局何も答えが出せず、ひたすら落ち込んでいました。当然そんなことは本人に直接理由を聞くか、自分なりに仮説を立てて色々試してみない限り何もわからないままですが、ただ考え続けたところで答えが出ない問題であるということに気付き、その行為をやめるまでに時間がかかりました。<br></p><h2 id="h099ddba583">今後の予定</h2><p>サービスの運用をいつまで続けるかはまだ未定ですが、当分の間は続けます。そこで問題になるのは公式Twitterアカウントの運用です。公式アカウントでの投稿の共有がないと閲覧数がなかなか伸びないため、piguに投稿するメリットが弱くなってしまいます。そのため、Twitterでの投稿の共有は不可欠です。しかし、現在は全て手動でツイートしいて、投稿のURLを共有するまでにボタンを何回も押さないといけないため、正直かなり面倒です。他にも様々な問題はありますが、まずはこの問題を解決するためのシステムを構築する予定です。<br></p><h2 id="h3bcda3e6b0">最後に</h2><p>運用のことで悩んでつらい時期もありましたが、それ以上に良いことがたくさんありました。サイトの発展に貢献し、応援してくれた方々にはとても感謝しています。これを糧にして今後もサービスの開発などに励みたいと思います。この記事が誰かのお役に立てれば幸いです。</p>

個人開発で大学の学生向け情報共有サイトを作った話

<h3 id="hd2c91c24e4">経緯</h3><p>勉強ついでに<a href="https://nextjs.org" target="_blank" rel="noopener noreferrer">Next.js</a>と<a href="https://microcms.io" target="_blank" rel="noopener noreferrer">microCMS</a>を使ってブログを作ってみましたが、そういえば使い方をちゃんと考えていませんでした。<br></p><h3 id="h51c34d5345">決めたこと</h3><p>僕は自分のTwitterを公開日記として利用していますが、Twitterでは書きづらいことが結構あります。なので、ここでは技術記事の他にTwitterでは書きづらい普段考えてることや他人と共有したいことも記録してみようと思います。<br><br>おわり</p>

このブログの使い方を考えた

<h2 id="hfe5a8eaaf7">実行環境</h2><p>nodeのバージョンはv14.17.2を使用しています。</p><pre><code>$ node -v
v14.17.2</code></pre><h2 id="h384b2ddcf8">ランダムな文字列を生成する</h2><p>今回は<a href="https://github.com/pvorb/node-crypt" target="_blank" rel="noopener noreferrer">crypt</a>というnpmパッケージを使用します。</p><h3 id="hf031c5e696">実装方法</h3><p>まず、<code>require('crypto').randomBytes()</code>で任意の長さのランダムバイトの配列を生成します。</p><pre><code>$ node -e "console.log(require('crypto').randomBytes(64));"
&lt;Buffer 41 2f 2e 28 55 0c 43 fa 02 07 65 52 c4 ed dc 26 a4 0a f3 12 79 2f e4 dd 7b a0 5b 2d 75 e5 98 1b 21 44 92 18 0c 06 ae 01 26 1a be 54 0d 93 a3 da 70 f0 ... 14 more bytes&gt;</code></pre><p>これを<code>toString()</code>で文字列に変換することでランダムな文字列の生成が実現できます。<br><br>以下の例では64byte<span style="color:#252525">のランダムバイトの配列を</span>生成した後、16進数の文字列に変換しています。</p><h3 id="hcd47fad4c8">実行例</h3><pre><code>$ node -e "console.log(require('crypto').randomBytes(64).toString('hex'));" 
ac6d26b6b4f9edf72ec669a03d01a1fee25672b0508db26ddc57861a9909418a8dcd2aba6fbfe27e2ebc9ab377cee840e22a87ac5f765208fcd3b15fe3971d43</code></pre>

Node.jsでランダムな文字列を生成する

<h2 id="h8d027c8ed3">はじめに</h2><p><a style="color:#0f83fd" href="https://github.com/tasti/react-linkify" target="_blank" rel="noopener noreferrer">react-linkifiy</a>はテキスト内のリンクを解析し、有効なリンクに変換してくれるライブラリです。<br></p><h3 id="h3984736af0">基本的な使い方</h3><p>解析したいテキストを<code>Linkify</code>で囲みます。<br></p><pre><code>&lt;Linkify&gt;
  See source code at https://github.com/tasti/react-linkify/.
&lt;/Linkify&gt;</code></pre><p>たったこれだけで<code>https://github.com/tasti/react-linkify/</code>がリンクに変換されます。<br></p><h2 id="h78cee9d9b7">実現したいこと</h2><p>デフォルトの状態だと解析されたリンクは全て<code>a</code>タグで囲まれたリンクに変換されますが、それがサイト内のリンクでも遷移時にページがリロードされてしまいます。<br><br>これだとあまり良くないUXになってしまうため、サイト内のリンクを<code>a</code>タグの代わりにReact Routerの<code>Link</code>でリンクを出力したくなりました。<br></p><h2 id="h922edff87b">実装</h2><h4 id="hd0767d8049">ソースコード</h4><pre><code>// CustomLinkify.js

import React from 'react';
import { Link } from 'react-router-dom';
import Linkify from 'react-linkify';

// content: string (解析するテキスト)
const CustomLinkify = ({ content }) =&gt; {
  const url = 'https://example.com';

  // サイト内のリンクかどうか判定
  const componentDecorator = (href, text, key) =&gt;
    !text.indexOf(url) ? (
      &lt;Link key={key} to={text.replace(url, '')}&gt;
        {text}
      &lt;/Link&gt;
    ) : (
      &lt;a key={key} href={href} target="_blank" rel="noopener noreferrer"&gt;
        {text}
      &lt;/a&gt;
    );

  return &lt;Linkify componentDecorator={componentDecorator}&gt;{content}&lt;/Linkify&gt;;
};

export default CustomLinkify;</code></pre><p>今回は<code>CustomLinkify</code>という名前でコンポーネントを作成してみました。<br></p><h4 id="h4d849f4362">使い方</h4><pre><code>&lt;CustomLinkify content={content} /&gt;</code></pre><h3 id="h0c8fa4812e">処理の流れ</h3><p><code>componentDecorator</code>関数の中を見ていきます。<br></p><pre><code>!text.indexOf(url)</code></pre><p>この条件式は<code>text</code>が<code>url</code>と前方一致(<code>text.indexOf(url) === 0</code>)の場合のみ<code>true</code>になります。<br><br>参考にした記事はこちらです。<br><a href="https://qiita.com/aqril_1132/items/9f69575bfbcf24bdf7b5" target="_blank" rel="noopener noreferrer">https://qiita.com/aqril_1132/items/9f69575bfbcf24bdf7b5</a><br><br>例えば<code>https://example.com/</code>や<code>https://example.com/user1</code>のような文字列は<code>true</code>になります。</p><pre><code>&lt;Link key={key} to={text.replace(url, '')}&gt;
  {text}
&lt;/Link&gt;</code></pre><p>あとは<code>Link</code>のpath指定で不要なURLの部分を削除します。<br>(例:&nbsp;<code>https://example.com/user1</code>&nbsp;-&gt;&nbsp;<code>/user1</code>)</p><pre><code>&lt;a key={key} href={href} target="_blank" rel="noopener noreferrer"&gt;
  {text}
&lt;/a&gt;</code></pre><p><code>a</code>タグはこんな感じです。Reactで<code>target="_blank"</code>を指定する場合は<code>rel="noopener noreferrer"</code>も一緒に書かないと警告が出ます。<br><br>以上でサイト内のリンク(<code>url</code>と前方一致のリンク)のみを<code>Link</code>で出力できました。<br></p><h2 id="h1afe451c43">さいごに</h2><p>何か間違っている記述等あればご指摘いただけると嬉しいです。<br><br><code>Linkify</code>をカスタマイズする方法についてはこちらを参考にしました。<br><a href="https://github.com/tasti/react-linkify/pull/51#issuecomment-355787057" target="_blank" rel="noopener noreferrer">https://github.com/tasti/react-linkify/pull/51#issuecomment-355787057</a></p>

yona.blog

Blog