プログラミングの基礎⑧：記述ルール／エラー処理とファイル操作

こんにちは！就労継続支援B型事業所かなうラボ利用者のちょびっとです。

Web制作コースと事務・ライティングコースに所属しています。

プログラムを書くと、必ずエラーが発生することがあります。
エラー処理を理解すると、問題箇所を特定して安全に処理を続けられるようになります。
また、ファイル操作を学ぶことで、データの保存や読み込みができるようになります。
エラー処理は道に迷ったときに案内板を出すような仕組みだと考えるとイメージしやすいです。

エラー処理は、基礎としては難しいと思いますが、どのようなプログラムでも、エラー処理は
必須です。
多少難しく感じるかもしれませんが、エラーの処理を正しく身に着けるようにしましょう。

エラーハンドリング

なぜエラー処理が必要か？

予期しない入力：ユーザーが間違った値を入れたときに、プログラムが止まらずに続けられるようにする。
通信失敗：ネットワーク障害でデータ取得ができなかった場合、ユーザーへ原因を知らせる。
安全性：例外が発生してもページ全体がクラッシュしないようにする。

同期処理のエラー捕捉 (try…catch)

// try ブロック（例外が起きる可能性のある処理を実行する領域）
try {

  /* 
   * constでresult定数を宣言し、JSON.parseで文字列をオブジェクトに変換。
   * JSON.parse は引数に渡された文字列が有効な JSON でない場合、
　 * 例外（SyntaxError）を投げるので、try の中に入れ、エラーを捕捉できるようにする。
   */
  const result = JSON.parse('{"ok": true}');
  
  // 成功したら変換されたオブジェクトをコンソールに出力。
  console.log(result);
} catch (e) {

  /*
   * catch ブロックは try 内で例外が投げられたときに実行される。
   * e は例外オブジェクト（ここでは SyntaxError が入る）。
   * console.error を使ってエラー内容を出力する。
   */
  console.error("JSON の解析に失敗しました:", e.message);
}

✅ ポイント

try ブロック内で例外が起きたら、catch がそれを受け取りエラーメッセージをコンソールへ出力します。

非同期処理（Promise）でのエラー捕捉

fetch と .catch()

/* ------------------------------------------------------------------
   1️⃣ fetch() + Promise チェーン（例外は catch で捕捉）
------------------------------------------------------------------ */
// URL からリソースを取得する非同期処理。
fetch('https://example.com/data.json')

  // レスポンスを JSON としてパース(文字列やデータを構造化した形式へ変換する処理)。          
  .then(response => response.json())

  // エラーが起きたらコンソールへ。            
  .catch(error => console.error("データ取得に失敗:", error));

✅ ポイント

ネットワーク障害などで Promise が拒否（rejected）されたとき、.catch() で
捕捉できます。

fetch() は Promise を返すので、.then() で成功時の処理、.catch() で
例外を捕捉。

async/await を使うと同期的に書けるが、内部では同じく Promise が
使われているため try/catch でエラーを扱える。

ユーザー入力のバリデーション(入力されたデータが期待する条件や規則に合致
しているかどうかを確認する処理)は throw new Error() で自分で例外を
投げ、catch でハンドリング。

DOM(HTML や XML 文書を「オブジェクト指向的に表現したモデル」) に
エラーメッセージを書き込む場合も try/catch 内で処理し、失敗したら
要素にテキストを設定するだけ。

これらの構文は「例外が起こる可能性があるコード」を安全に実行させ、
エラー発生時に適切なフィードバック（コンソール・アラート・画面表示）を
行うための基本パターンです。

async/await と try…catch

/* ------------------------------------------------------------------
   2️⃣ async/await を使った例外処理（try / catch）
------------------------------------------------------------------ */
async function loadData() {
  try {
    // ネットワーク要求
    const res = await fetch('https://example.com/data.json'); 

    // JSON パース(文字列やデータを構造化した形式へ変換する処理)
    const data = await res.json();

    // 成功時にデータを表示                            
    console.log(data);                                        
  } catch (e) {                                               

    // エラー（ネットワーク・パース失敗）
    console.error("読み込みエラー:", e.message);
  }
}
loadData();   // 関数実行

✅ ポイント

await の後に発生した例外は、同期処理と同じように try…catch で捕捉できます。

async/await を使うと同期的に書けるが、内部では同じく Promise が使われているため try/catch でエラーを扱える。

エラーメッセージをユーザーに表示

ポップアップダイアログ

/* ------------------------------------------------------------------
   3️⃣ ユーザー入力に対するバリデーション
------------------------------------------------------------------ */
try {

  // 文字列 → 数値変換。
  const num = Number(prompt("数字を入力してください:"));

  // NaN の場合は例外投げる。 
  if (isNaN(num)) throw new Error("数値ではありません");   
} catch (e) {

  // 例外が発生したらアラートで通知。                                            
  alert(e.message);
}

✅ ポイント

alert() を使って、エラー内容をポップアップで知らせます。

ユーザー入力のバリデーション(入力されたデータが期待する
条件や規則に合致しているかどうかを確認する処理)は
throw new Error() で自分で例外を投げ、catch でハンドリング。

ページ内に表示

/* ------------------------------------------------------------------
   4️⃣ HTML 内の要素にエラー内容を表示（try / catch）
------------------------------------------------------------------ */
<div id="msg"></div>
<script>
try {

  // ← ここに任意のコードを書き、例外が起きる可能性がある処理。

} catch (e) {
                             
  // エラー時に DOM を更新。
  document.getElementById('msg').textContent = e.message;
}
</script>

✅ ポイント

<div> 内にエラーメッセージを表示し、ユーザーがページ上で確認できるようにします。

DOM にエラーメッセージを書き込む場合も try/catch 内で処理し、失敗したら要素にテキストを設定するだけ。

ファイル操作（ブラウザ）

近年のブラウザは「ファイル API」を使ってローカルファイルを読み書きできます。以下では代表的な手順とコード例を紹介します。

ファイル読み込み (FileReader)

HTML

<input type="file" id="input-file">
<pre id="output"></pre>

✅ ポイント

ユーザーがファイルを選択するための <input>。結果は <pre> に表示します。

これらだけではまだ何も起こりませんが、<input type="file"> に対して change イベントリスナーを追加し、選択されたファイルの内容を読み込み（例：FileReader.readAsText()）、その結果を <pre id="output"> に挿入することで、ブラウザ上で簡単なファイルビューアを作ることができます。

JavaScript

// ---------------------------------------------------------------
// 1️⃣ DOM 要素を取得（ID が一致する要素）
// ---------------------------------------------------------------
const input = document.getElementById('input-file'); // <input type="file" id="input-file">
const output = document.getElementById('output');     // <pre id="output"></pre>

// ---------------------------------------------------------------
// 2️⃣ ファイル入力が変更されたときに実行されるイベントリスナー
// ---------------------------------------------------------------
input.addEventListener('change', () => {

  /* 
   * `input.files` は FileList（選択済みファイルの配列）のようなオブジェクト
   * ここでは最初の1つだけを取得 (多重選択時は第1ファイルのみ処理)
   */
  const file = input.files[0];
  if (!file) return; // ファイルが選択されていない場合は何もしない

  /* 
   * FileReader はブラウザ側の API で、File/Blob をテキストや DataURL 等に変換
   */
  const reader = new FileReader();

  /* 
   * 読み込み成功時（`load` イベント）に呼ばれるコールバック
   * `reader.result` に読み込んだ内容が格納されているので、<pre> 要素へ出力
   */
  reader.onload = () => output.textContent = reader.result;

  /* 
   * 読み込み失敗時（`error` イベント）に呼ばれるコールバック
   * エラー情報は `e` に渡されるので、コンソールへ表示
   */
  reader.onerror = e => console.error("読み込み失敗:", e);

  /* 
   * ファイルをテキストとして読み込む
   * （バイナリや画像等にしたい場合は readAsArrayBuffer / readAsDataURL 等を使用）
   */
  reader.readAsText(file);
});

✅ ポイント

FileReader を使い、選択されたファイルをテキストとして読み込む。
エラーが起きたら onerror が呼ばれます。

document.getElementById で対象要素を取得。

input.addEventListener('change', …) でファイル選択時に処理を実行。

FileReader を使い、非同期でファイル内容を読み込み。

成功・失敗それぞれのコールバックで結果を表示またはエラーをログ。

<pre> には改行や空白がそのまま反映されるので、テキストファイルの中身を
そのまま閲覧できる。

ファイル保存 (Blob と URL.createObjectURL)

HTML

<button id="save-btn">テキストを保存</button>

JavaScript

// ---------------------------------------------------------------
// 1️⃣ ボタン要素を取得（ID が一致する）
// ---------------------------------------------------------------
const btn = document.getElementById('save-btn'); // <button id="save-btn">…</button>

// ---------------------------------------------------------------
// 2️⃣ ボタンクリック時に実行される処理
// ---------------------------------------------------------------
btn.addEventListener('click', () => {

  /* 
   * ダウンロードしたい文字列を作成
   * 改行は \n で表現
   */
  const content = "Hello, world!\nこれはサンプルファイルです。";

  /*
   * Blob（Binary Large OBject）を生成
   * - 第一引数に配列としてデータ (ここでは文字列) を渡す
   * - 第二引数で MIME タイプを指定 ('text/plain' はプレーンテキスト)
   */
  const blob = new Blob([content], { type: 'text/plain' });

  /*
   * ブラウザが Blob オブジェクトへの一時的な URL を作成
   * この URL は `a.href` に設定してダウンロードをトリガーできる
   */
  const url = URL.createObjectURL(blob);

  // -------------------------------------------------------------
  // 3️⃣ ダウンロード用の <a> 要素を動的に生成し、クリックで開始
  // -------------------------------------------------------------
  const a = document.createElement('a'); // 新しい <a> を作成
  a.href = url;                         // Blob の URL を href に設定
  a.download = 'sample.txt';            // ユーザーに提示されるファイル名
  a.click();                            // 仮想クリックでダウンロードを開始

  // -------------------------------------------------------------
  // 4️⃣ 一時的に作成した URL はメモリリーク防止のため解放
  // -------------------------------------------------------------
  URL.revokeObjectURL(url);             // 作成した URL を無効化（ガベージコレクト）
});

Blob で文字列をバイナリデータにし、createObjectURL でダウンロードリンクを生成。ユーザーがクリックするとファイルが保存されます。

✅ ポイント

Blob で文字列をバイナリデータにし、createObjectURL でダウンロードリンクを生成。ユーザーがクリックするとファイルが保存されます。

Blob
任意のデータをバイナリ形式で保持できるオブジェクト。
文字列、ArrayBuffer、File などを渡せる。

URL.createObjectURL / revokeObjectURL
Blob/Media をブラウザ上に一時的に参照可能な URL に変換。
使用後は revokeObjectURL でメモリを解放するのがベストプラクティス。

ダウンロード開始
<a> 要素に download 属性を設定し、click() で自動的にファイルを保存。
ブラウザ側で直接ファイルを生成・送信できるため、サーバーへのリクエストは不要。

エラー処理の組み込み

読み込み時

/* ---------------------------------------------------------------
   1️⃣ FileReader のエラー時コールバック
--------------------------------------------------------------- */
// reader が読み込み中に例外を投げたとき呼ばれる。
reader.onerror = e => {                     

  // ユーザーへ通知（alert は UI をブロックするので注意）
  alert("ファイルを読む際にエラーが発生しました。"); 

};

FileReader の onerror を使って、ユーザーへわかりやすいメッセージを表示します。

✅ ポイント

FileReader の onerror を使って、ユーザーへわかりやすいメッセージを表示します。

reader.onerror
①FileReader が読み込み中に発生したエラー（例: ファイルが破損している、
　アクセス権がないなど）を捕捉するためのイベントハンドラ。
②コールバック内では e に詳細な ErrorEvent オブジェクトが渡されるので、
　必要に応じて e.message で原因を確認できる。

書き込み時

/* ---------------------------------------------------------------
   2️⃣ Blob 作成・URL 発行処理（例外が起きる可能性のある部分）  
      ここでは try / catch で安全に実行
--------------------------------------------------------------- */
try {
  // ① Blob の生成: new Blob([...], {type:'...'})
  // ② URL.createObjectURL(blob) で一時的な URL を発行

// 上記処理中に例外が投げられたらここへ
} catch (e) {

  // エラー内容をコンソールに出力                            
  console.error("ファイル保存に失敗:", e);   
}

Blob の作成や URL 発行で例外が起きるケースは稀ですが、万全を期して try…catch を付けます。

✅ ポイント

Blob の作成や URL 発行で例外が起きるケースは稀ですが、万全を期して try…catch を付けます。

try / catch
Blob の生成や URL.createObjectURL() は基本的に成功するはずだが、
①非サポート MIME タイプの指定
②ブラウザのメモリ制限を超える大きなデータ
③その他内部エラーなどで例外が投げられる可能性がある。
④そのため try 内に置いておくことで、失敗時にユーザーへ適切なフィードバック　
　（ここではコンソールへのログ）を行える。

まとめ

エラー処理
- 同期 (try…catch) と非同期 (Promise.catch() / async/await + try…catch) の使い分け。
- ユーザーにわかりやすくエラーメッセージを表示する手段（alert、ページ内テキスト）。
ブラウザのファイル操作
- FileReader でローカルファイルを読み込み。
- Blob と URL.createObjectURL でダウンロード用ファイルを生成。
実装時の注意点
- エラーメッセージは具体的に、ユーザーが対処しやすいように書く。
- 必要な箇所に try…catch を入れ、例外が起きてもプログラム全体が止まらないようにする。

最後に

プログラムの基礎としては、ここまでとなりますが、中級・上級と学んでいくことで、Web制作プログラムが、より具体的に身に付きます。
また本シリーズの「プログラミングの基礎」は多言語であっても、書き方やお作法が違うだけで基本概念は同じです。

プログラムの基礎として、エラー処理を加えるか迷うところではありましたが
どのようなプログラムでも、エラーが発生した時の対応を学んでおかなければ
プログラミングが出来るとは言えないと思い、記載させていただきました。

プログラミングを通して、エンジニアとして必要な能力を身につける・論理的思考力・プログラミング的思考・問題解決能力・想像力創造力を培い、プログラミングはもちろんの事、業務を遂行するための能力が身についてきますので、難しいからと諦めず、何か一つの言語を、ぜひ身につけて伸ばしていきましょう。

◀前回

プログラミングの基礎⑦：記述ルール／クラスとオブジェクト指向の理解
こんにちは！就労継続支援B型事業所かなうラボ利用者のちょびっとです。Web制作コースと事務・ライティングコースに所属しています。クラスは設計図、インスタンスは実際に作られたもの、と考えるとオブジェクト指向(データと振る舞いを一つにまとめて扱...
kanau-lab.co.jp
2025.11.23