収録問題 40問 ／ 10問ランダム出題
ランダムに出題・即時フィードバック・間違えた問題の復習機能付き
JavaScript・TypeScript実務のおすすめ教材を見る →
APIから得たIDが文字列か数値かを区別して比較したい。JavaScriptで適切な演算子はどれですか？
答え： 厳密等価演算子 ===
===は型変換を行わずに型と値を比較するため、文字列の"1"と数値の1を別物として扱えます。境界で型を正規化する設計も有効です。
設定値として0を有効な値にし、nullまたはundefinedのときだけ既定値を使いたい。適切なのはどれですか？
答え： value ?? defaultValue
Nullish Coalescingは左辺がnullまたはundefinedの場合だけ右辺を返します。||は0、空文字、falseも既定値へ置き換えます。
Loop内で非同期Callbackを作り、各反復時のIndexを保持したい。適切な宣言はどれですか？
答え： for文のIndexをletで宣言する
letはfor Loopの反復ごとに新しいBindingを作るため、Closureはその反復の値を保持します。varは一つのBindingを共有します。
Object Method内でsetTimeoutを使い、Method呼出し時のthisを参照したい。適切なのはどれですか？
答え： setTimeoutへArrow Functionを渡す
Arrow Functionは独自のthisを持たず、外側のMethod Contextを字句的に参照します。通常Functionのthisは呼出し方で決まります。
同期処理、Promise.then、setTimeout(fn, 0)を同時に登録した。一般的な実行順序はどれですか？
答え： 同期処理、PromiseのMicrotask、TimerのTask
現在のCall Stackが完了した後、Microtask Queueを処理し、その後にTimerなど次のTaskへ進みます。長いMicrotask連鎖は描画やTaskを遅らせます。
独立した3つのAPIを並行実行し、1つ失敗しても全結果を確認したい。適切なのはどれですか？
答え： Promise.allSettled()
allSettledは各Promiseのfulfilledまたはrejected結果をすべて返します。全成功が必須ならPromise.allが適します。
検索入力が変わるたびに古いfetchを中止し、最新結果だけを表示したい。適切なのはどれですか？
答え： AbortControllerのsignalをfetchへ渡し、次回入力時にabortする
AbortSignalをfetchへ渡すと不要な通信と後続処理を中止できます。AbortErrorは通常の障害と区別し、表示更新には最新Request識別も併用できます。
fetchでHTTP 404を業務Errorとして扱いたい。適切な処理はどれですか？
答え： Response.okまたはstatusを確認し、期待しないStatusなら明示的にError処理する
fetchはNetwork Errorでは拒否されますが、404や500のResponseでは通常fulfilledになります。HTTP Statusを契約に沿って判定します。
Async Functionで一時ErrorをRetryする実装として適切なのはどれですか？
答え： 対象Errorと回数を限定し、BackoffとJitterを入れて最終失敗をthrowする
Retryは一時障害かつ安全な操作へ限定し、総時間と回数を制御します。失敗を握りつぶさず、呼出し側へ契約どおり伝えます。
大きなResponse Bodyを段階的に処理し、Memory使用量を抑えたい。適切なのはどれですか？
答え： ReadableStreamからChunkを読み、Backpressureを考慮して順次処理する
Stream処理は全DataをMemoryへ保持せず段階処理できます。Decoderの文字境界、Error、Cancellation、処理速度差も扱います。
Objectの入れ子を含む状態を完全に独立Copyしたい。Spread構文だけでは不十分な理由はどれですか？
答え： Spreadは浅いCopyで、入れ子Objectの参照を共有する
{...obj}は直下PropertyをCopyしますが、入れ子のArrayやObjectは同じ参照です。対応DataならstructuredCloneや目的別Copyを使います。
Date、Map、循環参照を含むClone可能なDataをDeep Copyしたい。適切なのはどれですか？
答え： structuredClone()を利用する
structuredCloneはStructured Clone Algorithmに対応する多くの組込み型と循環参照を扱います。Functionや一部Host Objectなど非対応値は確認が必要です。
Keyが任意のObjectであり、頻繁な追加・削除・反復が必要なCollectionに適するものはどれですか？
答え： Map
MapはObjectを含む任意型をKeyにでき、Size、反復順、追加・削除APIが明確です。文字列Key中心のRecordならObjectも適します。
DOM Elementに関連Dataを持たせたいが、Element破棄後はGC可能にしたい。適切なのはどれですか？
答え： WeakMapを使いElementをKeyにする
WeakMapのKeyは弱参照で、他に参照されないObjectのGCを妨げません。列挙できないため、全Entry一覧が必要な用途にはMapを使います。
大量のList ItemへClick処理を追加し、後から追加されるItemにも対応したい。適切なのはどれですか？
答え： 親要素へListenerを一つ置き、event.target.closest()で対象を判定する
Event DelegationはBubbleを利用し、親の一つのListenerで現在と将来の子要素を扱います。対象が親範囲内かも確認します。
利用者入力をTextとしてDOMへ表示し、HTMLとして解釈させたくない。適切なのはどれですか？
答え： textContentへ代入する
textContentは入力をMarkupとしてParseせずText Nodeとして扱います。Rich HTMLが必要なら信頼できるSanitizerとContext別対策が必要です。
外部入力のKeyをObjectへMergeする処理でPrototype Pollutionを防ぎたい。適切なのはどれですか？
答え： 許可KeyをSchemaで限定し、__proto__・constructor・prototypeなど危険Keyを拒否する
外部Keyを動的Pathへ使う場合はAllowlistとSchema Validationを行います。用途によってObject.create(null)やMapも防御層になります。
Component破棄後もWindowのEvent ListenerがComponentを参照し続ける。適切な対策はどれですか？
答え： 同じListener参照でremoveEventListenerするかAbortSignalでLife Cycleに合わせて解除する
長寿命TargetのListenerは短寿命Objectへの参照を保持し得ます。登録時に解除方法を設計し、TimerやObserverも同様にCleanupします。
ES Module間で循環依存が発生し、初期化前Binding参照Errorが起きた。適切な改善はどれですか？
答え： 共有Contractを依存方向が一方向になる別Moduleへ分離し、Top-level初期化の相互参照をなくす
ES ModuleのImportはLive Bindingですが、循環したTop-level評価では初期化順の問題が起こります。依存方向と初期化責務を整理します。
利用者入力のたびに検索APIを呼ぶ処理で、入力停止後に1回だけ実行したい。適切なのはどれですか？
答え： Debounceし、新しい入力ごとに以前のTimerを取消す
DebounceはEventが一定時間途切れた後に処理します。Scroll進捗など継続中も周期実行したい場合はThrottleが適します。
JSON.parseの結果をTypeScriptで安全に扱う入口の型として適切なのはどれですか？
答え： unknownとして受け、Schema ValidationやType Guardで絞り込む
TypeScriptの型はRuntime入力を検証しません。unknownは利用前のNarrowingを要求し、Validatorで構造を確認してからDomain型へ渡せます。
string | numberの値へ文字列Methodを呼ぶ前に必要な処理はどれですか？
答え： typeof value === 'string'でNarrowingする
typeof CheckはRuntime条件とControl Flow Analysisを一致させ、分岐内でstringへ型を絞ります。Assertionは誤った実値を防ぎません。
Loading・Success・Failureの状態と対応Dataを安全に表す型はどれですか？
答え： state Literalを持つDiscriminated Union
Discriminated Unionならstate === 'success'の分岐でData型が確定し、不可能な状態の組合せを表現しにくくできます。
Discriminated Unionへ新しいVariantを追加したとき、未対応switchをCompile Errorにしたい。適切なのはどれですか？
答え： default分岐で残った値をneverへ代入する
全Variant処理後の値はneverになります。新Variantが未処理ならneverへ代入できず、Exhaustiveness CheckとしてCompile Errorになります。
ID Propertyを持つ任意型からIDを取得するGeneric FunctionのConstraintとして適切なのはどれですか？
答え： T extends { id: string }
構造的Constraintで必要なidを保証しつつ、呼出し元の追加Propertyを含む具体型Tを保持できます。
Object型Tに存在するProperty名だけを引数へ許可したい。使う型演算子はどれですか？
答え： keyof T
keyofはObject型の既知Property KeyのUnionを作ります。K extends keyof TとT[K]を組み合わせると型安全なProperty取得を表現できます。
既存型Userの全PropertyをOptionalにした更新DTOを作りたい。適切なのはどれですか？
答え： Partial<User>
PartialはMapped Typeで各PropertyをOptionalにします。ただし業務上更新可能なFieldだけに限定するにはPickや専用DTOも検討します。
設定ObjectがRecord<string, string>を満たすか検査しつつ、各PropertyのLiteral推論を保ちたい。適切なのはどれですか？
答え： satisfies演算子
satisfiesは式が対象型へ代入可能か検査しながら、式自身のより具体的な推論型を維持できます。Runtime Validationではありません。
HTTP Method配列を変更不可のLiteral Tupleとして推論させたい。適切なのはどれですか？
答え： ['GET', 'POST'] as const
const AssertionはArrayをreadonly Tupleとして、要素を文字列Literalとして推論します。Runtimeで完全Freezeする機能ではありません。
strictNullChecksを有効にする主な効果はどれですか？
答え： nullとundefinedを独立した型として扱い、必要な場所で明示的な処理を要求する
strictNullChecksでは不在の可能性がUnionへ現れ、CheckやOptional Chainingなどを要求します。外部DataのRuntime Validationは別途必要です。
Record<string, User>から存在しないKeyを読む危険を型へ反映したい。適切なtsconfig Optionはどれですか？
答え： noUncheckedIndexedAccess
noUncheckedIndexedAccessは未宣言KeyのIndexed Accessへundefinedを加え、存在Checkを促します。Data構造を実行時に変更するOptionではありません。
Error Objectか不明な値をcatchした後、安全にmessageを取得したい。適切なのはどれですか？
答え： value instanceof Errorで確認し、それ以外はString(value)など別処理にする
JavaScriptではError以外もthrowできます。unknownとしてNarrowingすると、Errorのmessageへ安全にAccessし、その他の値も記録できます。
再利用するRuntime Check isUserの戻り値として、呼出し側をUserへNarrowingしたい。適切なのはどれですか？
答え： value is UserというType Predicate
Type Predicateを返すFunctionは、true分岐で引数を指定型へNarrowingします。Predicate実装は必要Propertyを実際に検証する必要があります。
validateConfigが失敗時にthrowし、成功後は引数をConfigとして扱わせたい。適切なSignatureはどれですか？
答え： asserts value is Config
Assertion Functionは正常Return後に条件が成立するとCompilerへ伝えます。実装が検証せずReturnすると型安全性を破壊します。
UserIdとOrderIdがどちらもstringだが、誤って渡すのを防ぎたい。適切な型設計はどれですか？
答え： 異なるBrandを交差させたBranded Typeを境界Factoryから作る
TypeScriptは構造的型付けなので単純Alias同士は区別されません。Brandを交差させ、検証済み生成関数から作ると混同を減らせます。
Libraryから型としてだけ使うImportを生成JavaScriptへ残したくない。適切なのはどれですか？
答え： import type { User } from './types'
import typeは型位置専用でEmit時に削除され、Runtime依存と型依存を明確に分けます。
型定義がない既存JavaScript Packageへ最小限の型を追加したい。適切なのはどれですか？
答え： 実際のPublic APIに合わせた.d.tsのdeclare moduleを用意する
Declaration FileはRuntime実装を記述せず、そのShapeをCompilerへ伝えます。実装Versionと同期し、可能ならPackage側または型Packageで管理します。
大規模Repositoryで複数TypeScript ProjectのBuildを分離し、依存順にIncremental Buildしたい。適切なのはどれですか？
答え： Project Referencesとcomposite Projectを使う
Project ReferencesはProject境界と依存を宣言し、tsc --buildで順序付きIncremental Buildを可能にします。Output Directoryも分離します。
Functionの引数がstringまたはstring[]で、戻り値は常にnumberである。設計として適切なのはどれですか？
答え： 引数をstring | string[]のUnionにし、Function内でNarrowingする
戻り値が入力Variantで変わらない単純な場合はUnionが明確です。Overloadは入力によって戻り値関係が異なるなど、呼出しSignatureを分ける価値がある場合に使います。
TypeScriptで型Checkが通ったAPI ResponseでもRuntime Validationが必要な理由はどれですか？
答え： 型AnnotationはCompile時に消え、外部Responseの実際のShapeを強制しないため
TypeScriptはJavaScriptへ変換される際に型が消えます。Network、Storage、利用者入力などTrust BoundaryではSchemaを検証し、成功後に型付きDataへ変換します。