ポートフォリオの作り方

【実践】エラーハンドリングとセキュリティ対策の組み込み方

生田 陸人
監修
LuaGate エンジニア / 現役エンジニア
編集 LuaGate編集部

このレッスンで分かること

  • この記事では「【実践】エラーハンドリングとセキュリティ対策の組み込み方」を ポートフォリオ作成 の現場で使える形で整理します
  • ポートフォリオにエラーハンドリングとセキュリティ対策が不可欠な理由 をおさえれば、現場で迷ったときに立ち戻れる
  • 実践的なエラーハンドリングの実装ポイントとアピール方法 をおさえれば、現場で迷ったときに立ち戻れる
  • 1. ユーザー体験（UX）を損なわないエラー表示 をおさえれば、現場で迷ったときに立ち戻れる
  • 2. グローバルな例外処理の導入 をおさえれば、現場で迷ったときに立ち戻れる

【実践】エラーハンドリングとセキュリティ対策の組み込み方 とは

エンジニア転職で評価されるポートフォリオにするため、エラーハンドリングとセキュリティ対策の実装方法を学びます。UXを高めるエラー処理や、SQLインジェクション等の脆弱性対策を具体例と共に解説します。

ポートフォリオに「エラーハンドリング」と「セキュリティ対策」が不可欠な理由

多くのエンジニア志望者がポートフォリオを作成する際、どうしても「機能が動くこと」に集中してしまいがちです。しかし、実務の世界で評価されるのは「正常に動くこと」だけでなく、「異常が起きたときにどう振る舞うか（エラーハンドリング）」や「悪意のある攻撃からシステムを守れるか（セキュリティ対策）」といった、システムの堅牢性（けんろうせい）に関する部分です。

結論先出し — ポートフォリオの差は正常系の派手さではなく 異常系の丁寧さ で決まります。エラー処理とセキュリティを言語化できる人は、それだけで「運用を意識できる」候補者として強く印象に残ります。

採用担当者は、あなたのコードを通じて「この人はリリース後の運用を想像できているか？」をチェックしています。エラーハンドリングやセキュリティ対策を適切に行い、それをポートフォリオでアピールすることで、他の候補者と圧倒的な差をつけることができます。本レッスンでは、具体的にどのような対策を組み込み、どうアウトプットすれば良いのかを詳しく解説します。

実践的なエラーハンドリングの実装ポイントとアピール方法

エラーハンドリングとは、予期せぬ事態（ネットワークエラー、ユーザーの入力ミス、データベースの不具合など）が発生した際に、システムがクラッシュせずに適切に処理を継続したり、ユーザーに分かりやすいメッセージを表示したりする仕組みのことです。

diagram (will load when visible)

1. ユーザー体験（UX）を損なわないエラー表示

単に「エラーが発生しました」と表示するだけでは不十分です。ポートフォリオでは以下のレベルを目指しましょう。

  • バリデーションエラーは入力フォームで、どの項目がどの理由（必須、文字数制限、形式ミスなど）でエラーなのかを即座に伝える。
  • 404エラー（Not Found）は存在しないページにアクセスした際、標準のブラウザ画面ではなく、サイトのデザインに合わせた専用の404ページを表示する。
  • サーバーエラー（500系）は予期せぬエラーが起きた際も、ホームに戻るボタンを表示するなど、ユーザーを迷わせない工夫をする。

2. グローバルな例外処理の導入

コードのあちこちに try-catch を書くのではなく、フレームワークの機能を活用して一括でエラーをキャッチする仕組み（ミドルウェアなど）を導入しましょう。これにより、コードの共通化と可読性の向上が図れます。たとえば、Express（Node.js）であればエラーハンドリング用ミドルウェア、Railsであれば rescue_from などを活用します。

3. ログ出力の実装

実務では「なぜエラーが起きたのか」を後から調査するためにログが必須です。console.log だけでなく、適切なライブラリ（Node.jsであれば Winston や Pino など、使用する言語・フレームワークに合ったものを）使用して、エラーレベル（INFO, WARN, ERROR）に応じたログ出力を実装すると、技術的な深掘りをアピールできます。

JavaScript

// 例: Expressでの一括エラーハンドリングのイメージ app.use((err, req, res, next) => { console.error(err.stack); // サーバー側で詳細を記録 res.status(500).json({ message: '申し訳ありません。サーバー側で問題が発生しました。', code: 'INTERNAL_SERVER_ERROR' }); });

ここまでの要約 — UXに寄り添う表示、ミドルウェアでの一括処理、ログによる追跡可能性、この3点を揃えれば「異常系まで作り込んでいる」と評価される土台が完成します。

エラーハンドリングは、地味ですがエンジニアとしての「優しさ」と「想像力」が最も現れる部分です。ユーザーが困ったときにどう助けるかを考え抜くことが、評価に直結します。

エンジニア採用で評価される最低限のセキュリティ対策

ポートフォリオとはいえ、Web上に公開する以上、セキュリティ対策は必須です。特に以下の対策がなされているかは、プロとしての意識の高さを示す指標になります。

diagram (will load when visible)

1. 脆弱性対策（OWASP Top 10を意識）

代表的な攻撃手法に対して、以下のような対策を施しているかをコードで示しましょう。

対策内容具体的な実装効果
SQLインジェクションORMの使用、またはプレースホルダを利用したクエリ発行。データベースの不正操作・情報漏洩を防ぐ。
XSS（クロスサイトスクリプティング）テンプレートエンジンでの自動エスケープ、サニタイズ処理。悪意のあるスクリプト実行を防ぐ。
CSRF（クロスサイトリクエストフォージェリ）CSRFトークンの発行と検証。ユーザーの意図しない操作を防止する。
安全な認証管理パスワードのハッシュ化（Argon2やbcryptの使用）。万が一の流出時に被害を最小限にする。

2. 環境変数の徹底管理

APIキーやデータベースのパスワードなどの機密情報を、そのままGitHubにアップロード（コミット）してはいけません。必ず .env ファイルを使用し、.gitignore に含めるようにしましょう。

避けたい例

JavaScript

// 悪い例：APIキーをソースコードに直接記述している（情報漏洩のリスク） const apiKey = "12345-abcde-secret-key-xyz";

良い例

JavaScript

// 良い例：環境変数から読み込み、ソースコードには機密情報を含めない const apiKey = process.env.API_KEY;

3. ヘッダー情報のセキュリティ強化

Helmet.js などのライブラリを使用して、HTTPレスポンスヘッダーを適切に設定することも有効です。これにより、クリックジャッキングやその他の一般的な攻撃からアプリを保護できます。

READMEや技術記事で「こだわり」を言語化するテクニック

実装しただけで終わってしまっては、採用担当者に気づいてもらえません。ポートフォリオのREADMEや、技術ブログ（Qiita, Zennなど）で、あなたの工夫を言語化しましょう。

「なぜその対策をしたのか」を書く

ただ「バリデーションを実装しました」と書くのではなく、以下のように記述してみてください。

「ユーザーが不正な値を入力した際に、システムが停止するリスクを排除するため、フロントエンド（React/Zod）とバックエンド（Node.js/Validator）の両層でバリデーションを二重実装しました。これにより、APIを直接叩かれた際のデータの整合性も担保しています。」

工夫したコードを具体的に引用する

READMEの「技術的なこだわり」セクションに、工夫したコードのスニペットを載せ、どのような意図で書いたかを解説します。「セキュリティのために、パスワードハッシュ化のソルト強度をあえて高く設定した」といった具体的なこだわりは、非常に高く評価されます。

まとめ

エラーハンドリングとセキュリティ対策は、一見地味な作業ですが、プロのエンジニアとしての資質を示すための最強の武器になります。正常系の機能実装が完了したら、必ず「もしここで通信が切れたら？」「もし悪意のある文字列が入力されたら？」という視点で、あなたの作品を見直してみてください。

これらの対策をしっかりと組み込み、その意図を言葉で説明できるようになったとき、あなたのポートフォリオは「単なる習作」から「実務に近い成果物」へと進化します。次のステップとして、GitHubのREADMEに「セキュリティ・信頼性への取り組み」という項目を追加してみましょう！

セキュリティに「100%完璧」はありません。しかし、「どこまでリスクを想定して対策したか」を言語化できる能力は、実務で非常に重宝されます。自信を持ってアピールしましょう！

現場でよくある具体例

  1. Aさん (受託企業内定) は GitHub の README 冒頭に「誰の何を解決するか」を 3 行で書き、デプロイ URL を最上段に置いた。それだけで書類通過率が 2 倍に
  2. Bさん (自社開発内定) は技術選定理由を README の「Why this stack?」セクションに明記。面接が「決定根拠の深掘り」中心になり、暗記質問が消えた
  3. Cさん (落選続き → 内定) はテーブルを切ってコミット履歴を整理。「feat: 機能追加」のような Conventional Commits に変えた途端、レビュー観点での評価が上がった

次にとるべきアクション

  1. 今のポートフォリオを採用視点で 30 秒見直す — README・デプロイ URL・スクショの 3 点が即座に伝わるか確認する
  2. 改善ポイントを GitHub Issue 化する — 「【実践】エラーハンドリングとセキュリティ対策の組み込み方」で得た観点を、自分のリポジトリの Issue として 3 件登録する
  3. 実装/修正を次の 1 週間で完了させる — Issue を Pull Request に落とし込み、コミットメッセージにも改善理由を残す

次のレッスン

次は ポートフォリオに「コードの品質」をアピールする方法 で、ポートフォリオに「コードの品質」をアピールする方法 を学びます。

事前確認 — 進む前に次の 3 つができることを確認しましょう。

  1. エラー・安全対策 の要点を自分の言葉で説明できる
  2. このレッスンの最小コード (または操作手順) を見ずに書ける
  3. 練習問題やクイズで間違えた箇所を読み直して理解した

理解度チェック (30 秒)

Q. エラー・安全対策 とは何か、1 文で説明してください。

この章のポイント

A. 本文の「このレッスンで分かること」または冒頭の説明文を見直し、自分の言葉で要約できれば OK。詰まったら本レッスンの最初の H2 セクションを読み返してみましょう。

関連レッスン

参考にした出典

学習を加速したい方へ

未経験エンジニア向けポートフォリオ作成ガイドを体系的にマスターするなら、chotdekiru の無料学習ポータル で実際に手を動かして学習を始めるのがおすすめです。質問・つまずきも現役エンジニアが伴走します。

復習ミニクイズ

ポートフォリオにおいて、実務レベルの「堅牢性（けんろうせい）」をアピールするために最も適切な実装・説明はどれですか？

参考リンク