フォールバック
Fallback
概要（サマリー）
フォールバックとは、システムに不具合が起きたり、準備していたものが使えなかったりしたときに、プログラムが「全滅」するのを防ぐための「予備のプラン（代替手段）」のことである。
たとえば、あるWebサイトで「ユーザーの現在地（GPS）に合わせて近くの店舗を表示する」という機能があるとしよう。もしユーザーが位置情報の共有を拒否した、あるいは電波が悪くてGPSが使えなかったとき、フォールバックがないプログラムは「エラー：動作を停止します」と画面を真っ白にしてしまう。
これに対して、フォールバックが設計されたプログラムは「位置情報が取得できないので、代わりにデフォルト設定（例：東京駅周辺）の店舗を表示する」という第2候補に切り替える。
これにより、最高の状態ではなくても、最低限サービスを提供し続けることができる。
詳細解説
Web画面でよく使われるフォールバック
フォールバックの考え方は、プログラミング、インフラ、WebデザインなどあらゆるIT分野で用いられている。
Webサイトでは、画像、フォント、外部API、位置情報など、外部の条件に左右される要素が多い。
そのため、ブラウザで想定どおりに読み込めなかった場合でも、代替表示や初期値を用意しておくことが重要である。
CSSフォントのフォールバック
珍しいWebフォントを指定する場合、読み込めなかったときに備えて、後ろに一般的なフォントを並べておく。
font-family: "MySpecialFont", "Helvetica", "Arial", sans-serif;
このように書くと、先頭のフォントが使えない場合でも、次の候補へ順番に切り替えられる。
APIや外部サービスが失敗した場合
外部の地図APIが落ちている場合、地図を表示する代わりに、静止画の地図画像や「現在地を取得できませんでした」という案内を表示する方法がある。
完全に画面を止めるのではなく、利用できる範囲で情報を出し続けることがフォールバックの考え方である。
画像やアクセシビリティにおける代替情報
画像が読み込めなかった場合や、スクリーンリーダーで内容を伝える場合に備えて、<img> タグの alt 属性に説明を書いておく。
これは、画像そのものの代替表示というより、画像が伝える情報をテキストで補うための重要な仕組みである。
<img src="user-profile.jpg" alt="ユーザーの顔写真">
このような代替テキストは、アクセシビリティの観点でも重要である。
AIコーディングとの関係
AIにプログラムを生成させると、成功パターン（正常系）のコードだけを出力し、失敗パターン（異常系）のフォールバック処理が省略されることがある。
実用的なWebアプリを構築する際は、API通信のエラー時やデータ未登録時にどう「フォールバック」させるかを明示的に指示し、頑丈なプログラムを書かせる必要がある。
AIへ指示する際のポイント
- 「サーバーから画像一覧を取得するReactコードを書いて。もし画像URLが壊れているか取得できなかった場合は、標準のプレースホルダー画像（no-image.png）をフォールバックとして表示するようにして」
- 「ユーザーのデバイスがGPS機能をサポートしていない場合、または拒否された場合に、IPアドレスからおおよその位置を推定して処理を続行するJavaScriptのフォールバック関数を作って」
よくある勘違い
ロールバックとフォールバックの違いは？
響きが似ているため混同しやすいが、目的が全く異なる。
- ロールバック（Rollback）: 不具合が起きたとき、データを「過去の正常だった状態に戻す（取り消す）」こと。（例: 決済エラーが起きたので送金データを取り消して元に戻す）
- フォールバック（Fallback）: 不具合が起きても、処理を止めずに「代替手段で前に進める」こと。（例: 高画質動画が重いので、画質を落とした低画質動画で再生を維持する）
フォールバックがあれば品質が低くても問題ない？
フォールバックはあくまで「システムが壊れた際の最低限の保険」であり、品質の低下を正当化するためのものではない。例えば、画像が毎回読み込めないのに代替画像（フォールバック）があるから問題なし、という考え方は誤りである。フォールバックは「想定外の障害に備えるための保険」であり、根本的な品質向上の代替ではない。ユーザー体験を最優先に考えた上で、もしもの場合の保険としてフォールバックを設計することが正しい考え方である。
エラーハンドリングとフォールバックは同じ？
混同されやすいが、エラーハンドリングとフォールバックは異なる概念である。
エラーハンドリングは「エラーを検知して、適切に処理する（ログを記録する、ユーザーにメッセージを表示する等）」行為を指す。一方、フォールバックは「エラーが起きた後に、何の代替手段でサービスを継続するか」という戦略である。つまり、フォールバックはエラーハンドリングの中で行う「次の一手」の設計と言える。
まとめ
- フォールバックは、何かが利用できない時に「第2候補（代替プラン）」に自動的に切り替えてシステムを動かし続ける仕組み。
- CSSのフォント指定、APIエラー時のデフォルトデータ適用、通信回線の切り替えなど多岐にわたる。
- ユーザーに「エラー画面」を見せて突き放すのではなく、不便ながらもサービスを使い続けさせるための優しい設計思想。
- AIにコードを書いてもらう際は、エラー時やデータ欠損時の代替表示をセットで指示することが重要。
情報ソース
より詳しくAIに聞いてみよう
- Webアプリのフロントエンドで、外部APIの応答がタイムアウトした際に、キャッシュデータ（過去のデータ）をフォールバックとして表示する実装方法を教えてください。
- CSSの
src: local()を使ったフォント指定など、Webフォントの読み込みにおけるフォールバックの最適化手法について教えてください。 - プログラミング言語（JavaScriptやTypeScript）で、「オプショナルチェーン（
?.）」や「Null合体演算子（??）」を使って変数のフォールバック値をスマートに書く方法を教えてください。 - 「サーキットブレーカー（Circuit Breaker）パターン」とはどういうフォールバック設計ですか？マイクロサービス構成でなぜ重要なのかを教えてください。
- ReactのErrorBoundaryとSuspenseを組み合わせて、APIのロード中やエラー時にフォールバックUIを表示する実装方法を教えてください。