🌞

2025-1 JavaScript Tech Talk by KEPPLE CREATORS LAB

2025/01/16に公開

こんにちは!KEPPLE CREATORS LAB エンジニアの吉田です。
ケップルでは月に一度、関心のあるフロントエンドの技術やトピックを共有する JavaScript Tech Talk を開催しています。
今回は2024年9月から12月の 4 回にわたり、盛り上がった話題をお届けします!

今回の内容

Convex とは?魅力と課題に迫る!

Convexは、バックエンド (BaaS) プラットフォームとして注目を集めています。

1. Convexの魅力

Convexとは、従来のバックエンド開発の複雑さを抽象化し、データベース、ファイルストレージ、認証、検索機能といったバックエンドに必要なサービスがひと通り揃っており、特に初学者や小規模チームにも扱いやすい設計が特徴的です。
JavaScript Tech Talkでは、参加者からセットアップの簡単さや、煩雑な作業を省ける点が特に好評で、MVP開発やプロトタイピングにぴったりという意見が多かったです。

2. 実際に使ってみた感想

今回をきっかけにConvexを試してみたところ、セットアップは非常に簡単で、フロントエンドをメインに担当している私でも手軽にバックエンド開発をはじめられるのは魅力的でした。
また、以下のGIFのように、ダッシュボードで可視化できるため、非常に理解しやすく、
特に、データベースのレコードや関数の実行ログが分かりやすく表示されるので、開発効率が大幅に向上しそうです!

3. 課題と懸念

一方で、Convexを本番環境で使用する際の懸念点についても議論しました。
小規模プロジェクトには適していますが、大規模プロジェクトへの展開を視野に入れる場合、スケーラビリティは避けて通れない課題です。
特に、サービスの長期的な運用を考慮すると、いつサービスが終了するのか予測できないため、将来的な負荷増加に対応できるシステム設計が求められます。導入前に、プロジェクトの規模や将来的な展望を踏まえた上で、慎重な検討を行うことが重要です。

4. Convexをどう使うか

最後に、Convexの適切な使いどころについて話しました。
やはり、プロトタイプやMVP開発、内部ツールの開発などで相性が良さそうな印象でした。
細かい設定や運用を気にせず、まずは短期間で結果を出したい場合や、チームの業務効率化を目的とした内部ツールの開発などには、十分な機能を持っているため、そのような場合に使用していきたいです。

TypeScript 5.5, 5.6 の新機能について

続いては、TypeScriptのアップデートを中心に、一部をご紹介したいと思います!
実務に活かせる技術や新しい発見が満載の内容でした!

TypeScript 5.5

Inferred Type Predicates(型述語の推論)

まず注目すべきは、型述語の推論機能です。
この機能により、filterflatMapといったメソッドを使う際に、型の絞り込みがより直感的になり、冗長なコードを減らせるようになりました。
私たちのチームでは、この影響で flatMap が複雑になっているケースがいくつかあるので、見直しの必要性を感じています。このアップデートにより、データの整形やバリデーションがより簡単になるので、開発効率が向上すると期待できます!

また、議論の中で話題が発展し、配列メソッドの破壊的変更についての話になりました。
配列メソッドを使用して、後から破壊的変更だったことに気づいたことはありませんか?

私も含め、参加者の多くが、配列メソッドを使用した後で破壊的変更に気付いた経験があり、共感の声が上がりました。
うっかり使用するとバグの原因となることがあるので、注意して使用したいですね。
この課題に対する改善案として、「破壊的変更を行うメソッドは、戻り値を返さない仕様にする」や、「C#のようにメソッド名で破壊的変更かどうかを明確に区別できる」といった何かしら使用する前から判別できるといいよねといった意見が出ました。

Control Flow Narrowing for Constant Indexed Accesses(定数としてのインデックスアクセスにおける制御フローの絞り込み)

obj[key] のようなインデックスアクセスにおいて、objkey が実質的に変更されない(定数的である)場合に型を絞り込むことができるようになりました。
私たちのチームでは、型アサーション(as)の使用や、変数への再代入といった回避策をしていました。

// 型アサーション
function example(obj: Record<string, unknown>, key: string) {
    if (typeof obj[key] === "string") {
        // 型アサーションを使用
        (obj[key] as string).toUpperCase();
    }
}

// 変数への再代入
function example(obj: Record<string, unknown>, key: string) {
    const value = obj[key]; // インデックスアクセスの結果を変数に代入
    if (typeof value === "string") {
        value.toUpperCase();
    }
}

しかし、この機能の導入により、そうした煩雑な対応が不要となり、よりクリーンなコードが書けるようになります。

Regular Expression Syntax Checking(正規表現の構文チェック)

これまでの開発では、正規表現の構文に問題があっても、TypeScriptはそれを見過ごしてしまい、実行時にはじめて問題が発覚することがありました。

正規表現は直感的に理解しづらく、多くの開発者が「なんとなく」で使用している場面も少なくありません。しかし、この新機能により、基本的な文法エラーや論理的な矛盾を、コードを書いている段階で検出できるようになりました。

開発効率の向上だけでなく、バグの早期発見にも繋がる非常に嬉しい機能です!

Support for New ECMAScript Set Methods(新しい ECMAScript Set メソッドのサポート)

Set 型に新しいメソッドが追加されたことで、データの集合演算がより直感的に記述できるようになりました。和集合、積集合、差集合といった演算が、シンプルなメソッド呼び出しで実現できます。
特に、複数のデータソースからの情報を統合する際に威力を発揮する機能といえます。

具体的な活用シーンとして、私たちのチームでは複数のデータベースからデータを取得し、それらを組み合わせて処理するケースがあります。

これまでは、複雑な実装を要していた処理が、新しいSetメソッドを活用することでよりクリーンに書けるようになり、データの重複除去や共通項目の抽出といった操作が、より直感的なコードで表現できるようになります。

既存のコードベースについても、機会を見てこの新機能を活用したリファクタリングを検討していきたいと考えています。

Editor and Watch-Mode Reliability Improvements

VSCodeなどのエディタを使用している開発者なら誰もが、突然表示される型エラーに悩まされ、エディタのリロードで一時的に解消するという状況を経験したことがあるのではないでしょうか。

具体的には、型チェックの信頼性が向上し、不要なリロードを繰り返すことなく、より正確な型エラーの検出が可能になりました。
これまで開発中に頻繁に強いられていたエディタのリロード操作が減少することが期待できます。

ただし、これはあくまでも「改善」であり、完全な解決には至っていない点には注意が必要です。
それでもなお、開発が中断されにくくなることで、より集中して作業に取り組めるようになるはずです。

TypeScript 5.6

Disallowed Nullish and Truthy Checks(無効な Nullish および Truthy チェックの禁止)

この機能は、文法的には正しいものの、実行時に予期せぬ動作やバグを引き起こす可能性のあるコードパターンを事前に検出します。具体的には、常に真または偽となってしまう条件式や、開発者の意図とは異なる挙動をするNullish演算子(??)の使用などを、コンパイル時に発見することができます。

以下のようなメリットがあると考えています。

  • 意図しないバグの早期検出
    →条件式や Nullish 演算子の誤用をコンパイル時に発見。
  • コードの安全性向上
    →不明瞭で誤解を招く修正を防ぎ、意図を明確に表現。
  • 静的解析の強化
    →ESLint のルール(no-constant-binary-expression)を補完するものであり、組み合わせることでより強力なコード検証が可能になる。

疲れている時や集中力が切れがちの時に、上記のような凡ミスでエラーに気づかず、無駄に調査をしていたことがこれによって改善されるととても嬉しいです。
特に、長時間の開発作業で疲労が蓄積している際や、集中力が低下している状況でも、このような基本的なミスを自動的に検出できることは、開発効率の向上に大きく役立ちそうです。

これまで見逃していたバグの調査に費やしていた時間を、より開発作業に充てることができるようになるため、嬉しい機能ですね!

Strict Builtin Iterator Checks (and --strictBuiltinIteratorReturn)(ストリクトビルトインイテレーターチェック)

今回のアップデートでイテレータのチェックをより厳密にする検証が導入されました。

例えば、チャートや数値の範囲を指定する際にジェネレータを利用する場合、イテレータの型が正確にチェックされ、エラーの早期発見が可能になります。

一方で、TypeScriptの型チェック機能が日々進化して便利になっていく一方で、個別の設定項目が増えていることへの課題感もありました。
「これらの便利な機能をもっと手軽に使えたらいいのに」という声が自然と上がり、「strict all」のような、包括的な設定で一括制御できる仕組みがあればいいね、という話で盛り上がりました。

これからも安全性はしっかり保ちつつ、使いやすい形で進化していってくれることが楽しみです!

The --noUncheckedSideEffectImports Option (副作用のあるインポート)

副作用を伴うインポートがエラーではなく、無視されるという動作を実現するオプションです。

参加メンバー全員が今まで無視されていたことにかなり驚きました。
TypeScript では副作用インポートに関して次のような問題がありました。

  • ファイルが見つかる場合、TypeScript はそのファイルを読み込み、型チェックを実行します。
  • ファイルが見つからない場合、TypeScript は特にエラーを出さず、インポートを無視していました。

新しいコンパイラオプション --noUncheckedSideEffectImports が導入され、 副作用インポートで指定されたファイルが見つからない場合にエラーが報告されるようになりました。
私たちのチームでも導入していく予定です。

さいごに

フロントエンド開発は常に進化しており、新しい技術を追いかけるだけでなく、実際に活用できる形で吸収することが重要だと改めて感じました。
ConvexもTypeScriptのバージョンアップした機能も積極的に使っていきたいです。

TypeScriptのバージョンアップでは、型安全性をさらに向上させる素晴らしい改善が多く、コードの品質向上とバグの早期発見に役立ちそうなので楽しみです!
同じような課題に向き合っているエンジニアの皆さんにとって、この記事が何かしらのヒントになれば嬉しいです!

次回のJavaScript Tech Talkもどうぞお楽しみに!

関連リンク

Kepple Tech Blog

Discussion