はじめに

Visual Studio 2022を使っていると、ある日突然「起動しない」「スタート画面が表示されない」といったトラブルに遭遇することがあります。

本ブログでは、Visual Studio 2022が起動しなくなった場合の対処法を、分かり易く紹介します。

Visual Studio 2022が起動する仕組み

まずトラブルの原因を特定するため、Visual Studio 2022 の起動プロセスを説明します。

1. devenv.exe の起動
   Visual Studio の実行ファイル（devenv.exe ）が起動され、Visual Studio 2022の初期化が始まる。
   
   
2. ライセンスの検証
   「%LOCALAPPDATA%\Microsoft\VSCommon\OnlineLicensing」 にあるキャッシュを参照し、ライセンスの有効性を確認する。
   • %LOCALAPPDATA%
     C:\Users\ユーザ名\AppData\Local　を示す。
     
     
3. 拡張機能の読み込み
   ReSharperなどの拡張機能が順次読み込まれる。SafeModeでは読み込みをスキップ可能。
   
   
4. ユーザー設定の復元
   %APPDATA%\Microsoft\VisualStudio に保存された設定ファイルを読み込み、前回の状態を復元する。
   • C:\Users\ユーザ名\AppData\Roaming　を示す。
     
     
5. ワークロードの初期化
   C#や.NETなど、インストール済みのワークロードに応じて必要なコンポーネントを初期化する。
   
   
6. スタートウィンドウの表示
   最近開いたプロジェクトやテンプレートが表示され、ユーザー操作が可能になる。

amzn.to

改訂新版　Visual Studio パーフェクトガイド

本書は、初めて開発を行う人に向けに最新の「Visual Studio 2022」の活用方法を解説した入門書です。本書を読めば、.NET MAUI／Blazorによるマルチプラットフォーム開発、単体テストフレームワークを用いたソフトウェアテスト、Run To Clickによるデバッグ技法、行ステージングによるソースコード管理など開発に必要なVisual Studioの活用法がわかります。

Visual Studio 2022 が起動しないときにまず行うべき診断

ライセンスキャッシュの確認

%LOCALAPPDATA%\Microsoft\VSCommon\OnlineLicensing　フォルダ内の「default.metadata」 が NULL 埋めされていたら破損。

SafeMode で起動できるか確認する

ファイ名を指定して実行（「ウィンドウズキー＋W」）で、「devenv.exe /SafeMode」コマンドが実行できるか確認する。

拡張機能を読み込まないで起動するので、起動できた場合は拡張機能が原因の可能性が大きい。

起動ログを確認する

「devenv.exe /log」で起動後、ログファイル「%APPDATA%\Microsoft\VisualStudio\Version\ActivityLog.xml」内のエラー内容（例：ライセンス検証失敗、拡張機能クラッシュ）を確認する。

TEMP環境変数の確認

セミコロン付きや無効なパスがあると起動に失敗します。

amzn.to

Visual Studioパーフェクトガイド 単行本

本書はIDEに焦点を当てた書籍です。IDEは豊富な機能が揃っているため、C#を用いてUnityでゲーム開発を行う場合やクロスプラットフォーム開発を行う際,IDE(Visual Studio)を使うのはデファクトスタンダードになっています。本書は新人エンジニアに向けて,豊富な機能が揃ったIDEが裏で何をやっているかをわかりやすく解説した書籍を目指します。

Visual Studio 2022 が起動しない原因と対処方法

ライセンスキャッシュ破損

Visual Studio は、起動時のライセンスを、毎回オンラインで確認するのではなく、以下のフォルダにあるキャッシュファイル default.metadata 等を参照します。

%LOCALAPPDATA%\Microsoft\VSCommon\OnlineLicensing

ライセンスキャッシュが破損した場合の症状

• Visual Studio が起動直後にクラッシュ
• スタート画面が表示されず、プロセスが即終了
• ログに「License validation task failed unexpectedly」などのエラーが記録される

対処方法

以下のようにして、キャッシュのリセットを実行します。

「%LOCALAPPDATA%\Microsoft\VSCommon\OnlineLicensing」のフォルダ名称を　「OnlineLicensing_bkup」等の名称に変更し、Visual Studio を再起動。こうする事で、新しいキャッシュが自動生成される。
※この操作はライセンス情報の再取得を促すもので、ライセンス自体が無効になるわけではありません。

拡張機能の不具合

拡張機能が不具合時の症状

• スプラッシュ画面が表示された直後に強制終了
• スタートウィンドウが表示されず、プロセスが消える

拡張機能の不具合かどうかの確認方法

• SafeModeで起動してみる

devenv.exe /SafeMode

SafeModeでは拡張機能が読み込まれない為、このモードで起動できる場合は拡張機能が原因の可能性が高いと言えます。

• 起動ログを確認する
  「%APPDATA%\Microsoft\VisualStudio\17.0\ActivityLog.xml」に以下のような記述がある場合、拡張機能がクラッシュの原因です

Extension 'ReSharper' failed to load.
Exception: System.NullReferenceException...

対処方法

• SafeModeで起動して、拡張機能を無効化 又は、削除
  • SafeModeで起動（「ファイル名を指定して実行」で、devenv.exe /SafeMode）
  • メニュー → [拡張機能] → [拡張機能の管理]
  • 問題のある拡張機能（例：ReSharper）を「無効化」または「アンインストール」
    
    
• Visual Studio Installer で修復（拡張機能の不整合も含めて再構成される）
  • スタートメニュー → Visual Studio Installer → 対象バージョン → 修復

amzn.to

Kindle Paperwhite (16GB) 7インチディスプレイ

レビュー：読書が楽しくなるガジェット。スマホで読むのとは違います。カラー版もありますが、カラーの書籍って雑誌を除くとそんなにないのでPaperwhiteで十分だと個人的には思います。

アップデート失敗

アップデート失敗は、構成ファイルの破損やネットワーク不具合、インストーラーの不整合などが原因で発生します。

アップデート失敗時の症状

以下の様に、症状は多岐に渡る。

• Visual Studioが起動しない
  • スプラッシュ画面が表示された直後にクラッシュ
  • プロセス（devenv.exe）が一瞬で終了する
    
    
• Visual Studio Installer自体が起動しない
  
  
• SafeModeでも起動しない
  
  
• 特定のワークロードが消えている
  
  
• IntelliSenseが動作しない
  
  
• ツールウィンドウが表示されない
  
  
• 起動ログ（ActivityLog.xml）に下記のような構成エラーが記録される

Package 'Microsoft.VisualStudio.Shell.Connected' failed to load

• Visual Studio Installerでの症状
  • 「修復」ボタンがグレーアウトしている
  • インストール済みの構成が表示されない
  • 「アップデートに失敗しました」などのポップアップが出る

対処方法

• Visual Studio Installer で修復を試す
  • スタートメニューから「Visual Studio Installer」を起動
  • 対象のバージョン（例：Visual Studio 2022）を選択
  • 「修復」ボタンをクリック
  • 修復完了後、再起動して確認
    
    
• Installer自体が起動しない、修復できない場合は、Microsoft公式の「InstallCleanup.exe」ツールを使ってインストール情報を完全に削除します。
  • 管理者権限でコマンドプロンプトを起動
  • 以下のコマンドを実行

"C:\Program Files (x86)\Microsoft Visual Studio\Installer\InstallCleanup.exe" -i 17

※ -i 17 は Visual Studio 2022 のバージョン指定
　クリーンアップ完了後、Visual Studio 2022 を再インストール

• アップデートが「ダウンロードできない」「接続できない」といったネットワーク系のエラーで失敗する場合
  • C:\Windows\System32\drivers\etc\hosts を管理者権限で開く
  • 「93.184.215.201 download.visualstudio.microsoft.com」　を追記
    • 93.184.215.201 は、米国の CDN（コンテンツ配信ネットワーク）やホスティングサービスが使用する IP アドレスのひとつで、特に example.com というテスト用ドメインのホスト先。本来の Microsoft の更新サーバーではなく、接続テストや一時的な回避策として使われることがあるだけで、恒久的な解決策ではありません。
  • コマンドプロンプトで、「ipconfig /flushdns」を実行

TEMP環境変数の誤設定

よくある誤設定

• TEMP=C:\Temp;（末尾にセミコロン）
  • パスが無効と認識され、起動失敗
    
    
• TEMP=（空欄）
  • 一時ファイルが保存できず、クラッシュ
    
    
• TEMP=D:\フォルダ名（存在しないパス）
  • ファイル書き込みエラーで起動不能
    
    
• TEMP がネットワークドライブ
  • アクセス遅延や失敗で起動不能になることも
    

amzn.to

New Amazon Kindle Colorsoft | 16GBストレージ、防水、7インチカラーディスプレイ

booxなどのandroid搭載の電子ペーパー端末と迷いましたが、お風呂で使いたかったので結局はこの商品にしました。電子ペーパーはページ送り時の読み込みが遅いと言う印象がありましたが個人的には全然問題ありませんでした。カラーの発色は淡いですが、こんなもので良いだろうと言う感想です。

まとめ

Visual Studio が突然起動しなくても慌てる必要はありません。C#等のソースはIDEとは別フォルダとして保存されているので、最悪 他のIDE（VSCode）でも使用が可能です。

先ずは起動のプロセスを理解し、起動しなくなった原因を突きとめるために診断を行う事です。そして、その診断に基づいた適切な処置を実行する事で再起動する事が可能となります。

はじめに

TypeScriptは、JavaScriptに型安全性を加えた強力な言語です。最近ではReactやNode.jsなどの開発でも主流となりつつあります。

本ブログでは、初心者でも迷わずVSCodeでTypeScript開発環境を構築できるように、手順をおって紹介します。

TypeScriptとは？　なぜ使用するのか？

TypeScriptは、型定義やクラスベースの構文などを追加することで、保守性・可読性・安全性を向上させます。

例えば、以下のようなコードで型エラーを防ぐことが可能です。

function greet(name: string) {
  return `Hello, ${name}`;
}
greet(42); // エラー：number型はstring型に代入できません

開発環境の準備

VSCodeのインストール

VSCodeのインストールは、以下のブログを参考にして下さい。

VSCodeのインストール

Node.jsのインストール

TypeScriptはNode.js環境で動作します。Node.jsは下記の公式サイトからインストールしてください。

Node.jsの公式サイト

インストール後、ターミナルで以下を確認します。各バージョンが表示されれば正常です。

• npm（エヌピーエム）コマンドは Node Package Manager の略で、Node.jsのためのパッケージ管理ツールです。

node -v   # Node.jsのバージョン確認
npm -v    # npmのバージョン確認

Node.js 環境とは

通常、JavaScriptはブラウザ上でしか動作しません（例：Chromeの開発者ツールなど）。しかし、Node.jsを使用する事で、JavaScriptをPC上で直接実行できるようになります。

PC上で実行する事により、以下が可能となります。

• ブラウザでは制限されていた「ファイル操作」「ネットワーク通信」「プロセス管理」
• サーバーアプリケーションやCLIツール（コマンドラインインタフェースで動作するツール）の開発

// ファイルを読み込む例（Node.js環境）
import { readFileSync } from 'fs';
const data = readFileSync('data.txt', 'utf-8');
console.log(data);

TypeScriptのインストール

本ブログでは、「TypeScript_prj」フォルダを作成し、プロジェクトにTypeScriptを適用させる方式で進めます。

以下のコマンドを実行し、TypeScriptをインストールします。

mkdir TypeScript_prj
cd TypeScript_prj
npm init -y
npm install --save-dev typescript
npx tsc --init

• 補足：グローバル環境にTypeScriptを適用させる場合は以下のコマンドでインストールします。

npm install -g typescript

tsconfig.jsonの基本設定

tsconfig.jsonはTypeScriptコンパイラ（tsc）の動作を制御するための設定ファイルです。これにより、どのファイルをどう変換するか、どんな型チェックを行うか、成果物をどこに出力するかなどを一元管理できます。

• 基本構成
  以下は「ESM対応」「型安全性」「ライブラリ公開」などを意識したTypeScript設計です。

{
  // Visit https://aka.ms/tsconfig to read more about this file
  "compilerOptions": {
    // File Layout
    "rootDir": "./src",
    "outDir": "./dist",

    // Environment Settings
    // See also https://aka.ms/tsconfig/module
    "module": "esnext",
    "target": "esnext",
    "types": [],

    // Other Outputs
    "sourceMap": true,
    "declaration": true,
    "declarationMap": true,

    // Stricter Typechecking Options
    "noUncheckedIndexedAccess": true,
    "exactOptionalPropertyTypes": true,

    // Recommended Options
    "strict": true,
    "jsx": "react-jsx",
    "verbatimModuleSyntax": true,
    "isolatedModules": true,
    "noUncheckedSideEffectImports": true,
    "moduleDetection": "force",
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

• パラメータの内容

パラメータの詳細については、以下のサイトを参照ください。

• 公式ハンドブック
• 公式 tsconfig オプション一覧

package.json の設定

• 役割
  Node.js／JavaScriptプロジェクトの構成・依存関係・スクリプトを管理する中心ファイル。

{
  "devDependencies": {
    "typescript": "^5.9.2"
  },
  "name": "typescript_prj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "module"
}

プロジェクトのディレクトリ構成を整える

tsconfig.json の基本設定が完了したら、TypeScriptプロジェクトとしての土台が整った状態です。ここからは、実際にコードを書いて、コンパイル・実行・開発環境を整えるステップに進みます。

・TypeScript_prj内をtsconfig.jsonに合わせて構成します。

TypeScript_prj/
├── src/                ← TypeScriptファイルを置く場所
│   └── index.ts       ← エントリーポイント
├── dist/               ← コンパイル後の出力先（tsconfigで指定済み）
├── tsconfig.json       ← コンパイラ設定ファイル
├── package.json        ← npm管理ファイル
├── package-lock.json   ← npmの依存パッケージと構成を記録する自動生成するファイル
├── .vscode/　　　　　　← （VSCode）でプロジェクトごとの開発環境設定を保存
├── node_modules/　　　 ← npmでインストールしたパッケージを保存

以上で、TypeScript環境の構築は完了です。

サンプルプログラムの動作確認

サンプルプログラムの作成・コンパイル・デバッグ

• サンプルプログラムの作成
  index.ts をsrcディレクトの中に以下の内容で作成します。

// src/index.ts
const greet = (name: string): string => {
  return `こんにちは、${name}さん！`;
};

console.log(greet("太郎"));

• コンパイル
  VSCodeのターミナルで以下のコマンドを実行。今回の設定では、src/ディレクト内の全ての.tsファイルがコンパイルされ、dist/ディレクトに出力されます。

npx tsc

• コンパイルされた、index.js

launch.jsonの設定

• 役割
  Visual Studio Codeで、デバッグの構成を設定するためのファイルで、どのファイルをどう実行するか、どの環境で動かすか、引数や環境変数などを定義します。

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug TypeScript",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/dist/index.js",
      /* "preLaunchTask": "tsc: build - tsconfig.json",　←　自動コンパイルを
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　コメントアウト */
      "outFiles": ["${workspaceFolder}/dist/**/*.js"]
    }
  ]
}

• launch.jsonの作成方法
  • ①デバッグアイコンをクリック
  • ②「launch.json ファイルを作成します。」をクリック
  • ③内容を入力。”program”パラメーターには今回デバッグする.jsの名称が入る。

• デバッグ
  • ①index.js を開いて、ブレークポイントを設定
  • ②「デバッグ開始」をクリック
  • ブレークポイントでブレークし、デバッグ可能となる

「VSCodeでTypeScript開発環境を構築する」　まとめ

ここまで、VSCodeでTypeScriptを使用できる環境の設定方法を紹介してきました。

• TypeScriptは、JavaScriptに型安全性を加えた強力な言語であること
• TypeScriptは、Node.js環境で動作すること
• TypeScriptのインストール方法と、プロジェクトの初期化
• tsconfig.jsonの基本設定
• .tsファイルのコンパイル
• VSCodeにTypeScript環境を構築
• コンパイルした.jsファイルをVSCodでデバッグ

超初心者の方は、インストールや設定ファイルが多くあり、苦労されたかもしれません。基本をしっかりと身に着けたあとは、ReactやVueと組み合わせたTypeScript開発に挑戦してみて下さい。

はじめに

どんな言語もそうですが、学習や開発を進める中で「デバッグ」は欠かせない機能です。

本ブログでは、初心者向けに「VSCodeでPythonをデバッグする方法」を、設定ファイルの内容や実際のコード例を交えながら体系的に紹介していきます。

本ブログで得られる知識

• Pythonデバッグに必要なVSCodeの設定方法
• launch.jsonの作成と構成の意味
• ブレークポイントの使い方やステップ実行の操作方法
• 実際のサンプルコードを使ったデバッグの流れ
• よくあるトラブルとその対処法

VSCodeでPythonデバッグを始めるための準備

Pythonのインストール

Python公式サイトから最新の安定板をインストールします。

インストール方法は、下記のブログ記事を参照ください。

参考：Pythonインストール方法

今回は現時点の最新安定板、Ver. 3.13 をインストールしました。

VSCode の基本設定（Pythonデバッグの準備）

Python拡張機能のインストール

VSCodeは拡張機能によって機能を強化できます。Pythonのデバッグには、Microsoft公式の「Python」拡張機能が必須です。

• ①拡張アイコンをクリック
• ②検索バーに「Python」と入力
• ③「Python」を選択し、「インストール」ボタンをクリック

「Python」をインストールすると、以下の関連した拡張機能も同時にインストールされ、デバッグ機能だけでなく、コード補完・Lint（潜在的な問題やスタイル違反を検出するツール）なども含まれるPython開発の基盤となります。

• Pylance
  Python開発をより快適かつ堅牢にするための拡張機能
• Python Debugger
  デバッガー本体
• Python Environments
  Pythonの仮想環境管理をGUIベースで直感的に操作できるようにするためのツール

Pythonインタプリタの選択

拡張機能をインストールしたら、次にPythonインタプリタを選択します。これは、VSCodeがどのPython環境を使ってコードを実行するかを指定する設定です。

• インタプリタの選択手順
  • Ctrl + Shift + P を押してコマンドパレットを開き「Python:インタープリターを選択」をクリック

• 今回インストールした、Python 3.13 を選択する

launch.jsonの作成と設定

VSCodeで本格的なデバッグを行うには、.vscode/launch.json という設定ファイルを作成する必要があります。このファイルには、どのようにPythonコードを実行するかの構成情報を記述します。

• launch.json　の作成方法
  • デバッグ対象のPythonフォルダを開きます
  • 左側の「Run and Debug」アイコン（虫のマーク）をクリック
  • 「launch.json ファイルを作成します」をクリック

• launch.json ファイルの内容（例）

{
  // IntelliSense を使用して利用可能な属性を学べます。
  // 既存の属性の説明をホバーして表示します。
  // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Current File",
      // "type": "debugpy" バージョン 2024.3.0（3月リリース）以降、
      // "type": "python" から "type": "debugpy" へと指定方法が変更された。
      "type": "debugpy",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal"
　　　// 上記以外のパラメタ（参考）
　　　// "args": [
      // "照幸",
      // "42"
      // ],
      // "env": {
      // "DEBUG_MODE": "true",
      // "API_KEY": "your-api-key-here"
      }
    }
  ]
}

• 各プロパティの意味

以上で、基本的なデバッグの設定準備は完了です。

VSCode Python デバッグの基本

設定が整ったら、いよいよ実際のデバッグ操作に入ります。ここでは、ブレークポイントの設定からステップ実行、変数の確認まで、基本的な操作方法を紹介します。

ブレークポイントの設定

• 一時停止のポイントを指定
  • コードの左端（行番号の横）をクリックすると、赤い丸が表示されます。これがブレークポイントで、実行が一時停止するポイントです。

• 条件付きブレークポイント
  • 右クリック → 「条件付きブレークポイント」を選択すると、特定の条件でのみ停止させることも可能です。

デバッグの開始とステップ操作

• 「Run and Debug」ボタンをクリック　⇀　「実行とデバッグ」をクリック、又はF5押下
• 実行が開始され、ブレークポイントで停止
• 以下の操作が可能になります
  • ①続行（F5押下と同様）
  • ②ステップオーバー（関数の中には入らず次の行へ）
  • ③ステップイン（関数の中に入る）
  • ④ステップアウト（関数の外に戻る）
  • ⑤再起動
  • ⑥停止（shift + F5）

変数の確認とデバッグコンソール

停止中は、左側の「Variables」パネルで変数の状態を確認できます。また、「Debug Console」では式の評価や変数の値を直接確認できます。

• 「Variables」パネル

• デバッグコンソール

例外処理のデバッグ

• try ブロックにブレークポイントを設定
• except に入るかどうかを確認

よくあるトラブルと対処法

デバッグが開始されない場合

• launch.jsonの構文ミスがないか確認
• Pythonインタプリタが正しく選択されているか

実行ファイルが見つからないエラー

• program のパスが正しいか確認
• ${workspaceFolder} を使って相対パスを指定する方法も有効

まとめ

VSCodeは、Python開発において非常に強力なデバッグ機能を提供しています。launch.jsonによる柔軟な構成、ブレークポイントやステップ実行による詳細なコード解析、そしてデバッグコンソールによるリアルタイムな評価機能など、初心者から中級者まで幅広く活用できます。

はじめに

JavaScriptやTypeScriptで開発していると、コードの書き方にばらつきが出たり、うっかりミスがバグにつながったりすることがあります。そんなときに役立つのが「ESLint」です。

本ブログでは、初心者～中級者向けにESLintの使い方及び、Prettierとの連携の仕方を紹介します。

ESLintの機能

ESLintはJavaScriptやTypeScriptのコード品質をチェックするツール（Linter）です。

主な機能

• 構文エラーやバグの予兆を検出
• コーディングルール（スタイル）の強制
• 不要なコードや未使用変数の警告
• Prettierとの連携で整形と品質管理を両立

また、VSCodeと組み合わせることで、リアルタイムに警告表示や自動修正ができ、開発効率が大幅に向上します。

VSCode ESLintの導入手順

Node.jsプロジェクトの準備

Node.jsは、JavaScriptやTypeScriptをサーバーサイドでも動かせるようにする環境です。以下の公式サイトからインストールします。

• Node.jsをインストールしないと、Node.jsのライブラリ（＝パッケージ）を管理するコマンド”npm”が使用できません。

　Node.js公式サイト

Node.jsプロジェクトを以下のコマンドで、初期化を行います。

mkdir eslint-sample
cd eslint-sample 
npm init -y

eslint-sampleフォルダ内に、package.json という名称のファイルが作成されます。このファイルは、npmの心臓部とも言えるファイルです。プロジェクトの依存パッケージやスクリプト、バージョン情報などが記載されています。

• 最終的なpackage.jsonの内容

{
  "name": "eslint-sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@eslint/js": "^9.35.0",
    "eslint": "^9.35.0",
    "eslint-config-prettier": "^10.1.8",
    "eslint-plugin-prettier": "^5.5.4",
    "eslint-plugin-react": "^7.37.5",
    "globals": "^16.4.0",
    "prettier": "^3.6.2",
    "typescript-eslint": "^8.43.0"
  }
}

ESLintのインストール

• npmコマンドでのインストール
  プロジェクトにESLint本体を導入。設定ファイルを使ってLintルールを定義します。

npm install eslint --save-dev

• VSCode 拡張機能でのインストール
  VSCode上でLint結果を表示したり、保存時に自動修正したりする補助ツールです。

ESLintの初期設定

以下のコマンドを実行します。

npx eslint --init

ESLintの「設定ファイル（.eslintrc）」を対話形式で生成します。具体的には、以下のような質問に答えていくことで、プロジェクトに最適なLintルールと必要なプラグインを自動でセットアップしてくれます。

• 使用目的の選択
  コードの構文チェックだけか、問題検出やスタイル強制まで行うかを選びます。

How would you like to use ESLint?
❯ To check syntax only
  To check syntax and find problems

• モジュール形式の選択
  ES ModulesかCommonJSかを選択。TypeScriptならCommonJSが多いですね。

What type of modules does your project use?
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

• 使用フレームワークの選択
  ReactやVueを使っている場合は、それに対応したプラグインを自動で追加してくれます。

Which framework does your project use?
❯ React
  Vue.js
  None of these

• TypeScriptの使用有無
  @typescript-eslint/parser や関連プラグインの導入が必要になります。

Does your project use TypeScript?
❯ No
  Yes

• 実行環境の選択
  ブラウザ用かNode.js用かで、環境変数（env）を設定します。

Where does your code run?
❯ Browser
  Node

• 設定ファイルの形式
  .eslintrc.js などの形式を選択。JavaScript形式ならコメントも書けて柔軟です。

What format do you want your config file to be in?
❯ JavaScript
  YAML
  JSON

• 必要な依存パッケージの自動インストール
  eslint-plugin-react や eslint-config-airbnb などが自動でインストールされます。

Would you like to install them now with npm?
❯ Yes
  No

• マネージャの選択
  依存パッケージのインストールに使う「パッケージマネージャー」を選択

Which package manager do you want to use? ...
> npm
  yarn
  pnpm
  bun

実行後に設定されるファイル例（eslint.config.mjs）

import js from "@eslint/js";
import globals from "globals";
import pluginReact from "eslint-plugin-react";
import { defineConfig } from "eslint/config";

export default defineConfig([
  { files: ["**/*.{js,mjs,cjs,jsx}"], plugins: { js }, extends: ["js/recommended"], languageOptions: { globals: globals.browser } },
  pluginReact.configs.flat.recommended,
]);

サンプルコードでのトライ

• サンプルコード：test.js（保存前）

• サンプルコード：test.js（保存後）

Prettierとの連携

ESLintはコードの「品質」をチェックしますが、「整形」はPrettierが得意です。両者を連携させることで、最強の開発環境が整います。

• コマンドによるインストール
  • CLIやCI/CDで整形し、ESLintと連携
  • eslint-config-prettier: ESLintとPrettierの競合ルールを無効化
  • eslint-plugin-prettier: Prettierルール違反を ESLint に報告

npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

• VSCode拡張機能でのprettierインストール

• プロジェクトフォルダ内に .prettierrc を作成

• eslint.config.mjs に Prettier連携を追加

• VSCodeで保存時に自動整形する設定
  .vscode/settings.json に以下を追加

• カレントフォルダ以下の全てのファイルを整形する場合
  以下のコマンドを実行する

npx prettier --write .

ESLint　＆　Prettier　連携確認

• 整形前のコード
  • インデントが不統一
    • スペース数を統一（４スペース）
  • セミコロンがない
    • 自動で追加
  • ダブルクォート
    • シングルクォートに変更
  • オブジェクトのスペース
    • 25の前に半角スペースを入れて整形
  • 配列のスペース
    • [“Linux”, …] → [ ‘Linux’, … ]の様に整形

• 整形後（保存時）のコード
  整形前コードの整形項目が全て反映されている
  • ファイルが保存状態になっていないのは、コメントまでも整形される為整形後にコメントを記入しました。コメントは行の上に記述した方が良いでしょう。
    

まとめ

ESLintは以下の点で効率化に貢献可能です。

• バグの早期発見
• コードスタイルの統一
  • レビュー時の「見た目の指摘」を排除し、本質的な議論に集中できる
• 自動修正による時短
• Prettierとの連携で整形と品質チェックを分離
• プロジェクトごとの柔軟なルール設計

以上の様に、ESLintは「コードの見た目」だけでなく、「設計・保守性・安全性」にも踏み込んだチェックが可能です。

• 「Prettier」の詳細については、以下の記事で紹介しています。是非参考にして下さい。　

　参考：VSCodeでコード整形を自動化。 Prettierの使い方完全ガイド！

はじめに

本ブログは初心者向けにPrettier機能について分かり易く紹介しています。本ブログを読めば以下の知識が見に付きます。

1. Prettierとは何か、なぜ使うべきか
2. VSCodeでの導入手順と設定方法
3. Prettierのカスタマイズ方法

VSCode Prettierとは？

プログラミング初心者が最初にぶつかる壁のひとつが「コードの見た目」。インデントがバラバラだったり、スペースや改行のルールが統一されていないと、コードの可読性が下がり、バグの温床にもなります。

そこで登場するのが「Prettier」。Prettierは、コードの見た目を自動で整えてくれるフォーマッター（コード整形ツール）です。

VSCode　Prettierの主な特徴

• 保存時に自動でコードを整形
• 複数言語に対応（JavaScript, TypeScript, HTML, CSS, JSONなど）
• チーム開発でもルール統一が可能

VSCode　Prettierの導入手順

拡張機能でPrettierをインストール

• VSCode左側の「拡張機能」アイコンをクリックして、「検索」欄に「Prettier」を入力
• 「Prettier – Code formatter」を選択して「インストール」

Format On Saveの設定

保存時に自動整形されるように設定します。

• 設定画面の検索欄に「Format On Save」と入力
• 「Editor: Format On Save」にチェックを入れる

Prettierを既定のフォーマッターに設定

複数のフォーマッターがある場合、Prettierを明示的に指定する必要があります。

• 設定画面で「Default Formatter」と検索
• Editorに「Prettier – Code formatter」を設定

• Editor
  • エディタで開いた通常のソースコード（.js、.ts、.html 等）
• Notebook
  • Jupyter Notebook形式（.ipynb）
  • フォーマッターとしては、Black（Python用）等が使用される

Prettierの標準フォーマット形式（デフォルト設定）

Prettierデフォルト設定は「設定を最小限にして、スタイルの議論をなくす」ことを目的としています。つまり、デフォルト設定のまま使うだけで、十分に整ったコードスタイルが得られるように設計されています。

• デフォルトの主な整形ルール

サンプル

• 保存前（整形前）

<!DOCTYPE html><html><head><title>サンプルページ</title><meta charset="UTF-8"><style>body{background-color:#f0f0f0;}h1{color:blue;}</style></head><body><h1>こんにちは</h1><p>これはテストページです。</p><div id="container"><ul><li>項目1</li><li>項目2</li><li>項目3</li></ul></div><script>document.getElementById("container").style.border="1px solid #ccc";</script></body></html>

• 保存後（整形後）

<!DOCTYPE html>
<html>
  <head>
    <title>サンプルページ</title>
    <meta charset="UTF-8" />
    <style>
      body {
        background-color: #f0f0f0;
      }
      h1 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <h1>こんにちは</h1>
    <p>これはテストページです。</p>
    <div id="container">
      <ul>
        <li>項目1</li>
        <li>項目2</li>
        <li>項目3</li>
      </ul>
    </div>
    <script>
      document.getElementById("container").style.border = "1px solid #ccc";
    </script>
  </body>
</html>

VSCode Prettireの設定をカスタマイズする

Prettierはデフォルトでも十分便利ですが、細かい整形ルールを自分好みに変更することもできます。

カスタマイズ設定ファイルの一覧

.prettierrc JSON ファイルによるカスタム例

• プロジェクトルートに、.prettierrcとい名称のJSONファイルを作成します。

サンプル

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 4,
  "trailingComma": "es5"
}

• 主な設定項目
  • semi
    • セミコロンを付けるか
  • singleQuote
    • シングルクォートを使用するか
  • tabWidth
    • インデント幅
  • trailingComma
    • 末尾のカンマの扱い
    • “es5″とは、ES5（ECMAScript 5）仕様に準拠した末尾カンマのスタイル。
      • カンマが付く対象は
        • 配列
        • オブジェクトリテラル
        • 関数の引数（ただし一部の環境では非対応）
      • カンマが付かない対象
        • 関数呼び出しの引数
        • 関数宣言の引数
        • JSX属性など

• trailingCommaについて
  他にも “none”（カンマを付けない）や “all”（可能な限りすべてに付ける）という選択肢がありますが、初心者やチーム開発では “es5” が最もバランスが良いとされています。

• 整形前（サンプル）
  効果を実感して貰うため、あえてインデントやクォート、セミコロン、カンマを乱しています。

const items = [ "apple", "banana", "cherry" ]
function showItems(){
console.log("商品一覧:")
items.forEach(function(item){
console.log(item)
})
}
showItems()

• 整形後（サンプル）

const items = ['apple', 'banana', 'cherry'];
function showItems() {
    console.log('商品一覧:');
    items.forEach(function (item) {
        console.log(item);
    });
}
showItems();

まとめ

Prettier には以下のメリットがあります。

• コードの見た目が統一される
  コードの可読性が上がり、バグの低減に繋がる
• 手動整形の手間がゼロ
  整形の手間が省け、本質的なロジックに集中できる
• 初心者にも優しい
  学習効率のアップにつながる

Prettierは、コードの美しさと効率を両立できる最強ツールです。特に初心者や教育コンテンツを扱うような方には、「見た目の正しさ」から「本質的な理解」へと導く強力な味方になります。

• 特定のファイルに絞った検索
• プロジェクト全体での一括置換
• 正規表現を活用した検索

VSCode 単一ファイル内での「検索と置換」

VSCode　検索機能　

検索方法

• 検索欄の表示
  • ショートカット：Ctrl＋F
  • メニュー　　　：「編集」　⇀　「検索」

• 検索文字入力欄に検索文字を入力
  大文字の「P」を入力すると、大文字小文字関係なくすべての「P」がヒット

「大文字/小文字」を区別して検索

• ショートカット：alt+c
• 検索欄に大文字の「P」を入力し「Aa」を選択
  大文字の「P」のみがヒット

単語単位で検索する

検索語が独立した単語として存在する場合のみ一致します。

• ショートカット：alt+w
• 単語境界として認識される記号（＝区切りになる）

• 検索欄に小文字の「p」を入力して「大文字/小文字の区別」と「単語単位」で検索
  本例では、括弧<>で区切られた小文字の「p」のみヒット

選択範囲だけを検索

• 検索範囲をカーソルで指定し、①「検索範囲を検索」オプションをクリック
  指定した範囲内の「class」のみがヒット

VSCode　置換機能　

置換方法

• 置換欄の表示
  • ショートカット：Ctrl＋H
  • メニュー　　　：「編集」　⇀　「置換」

• 検索欄（上）に置換したい文字を入力し、置換欄（下）に置換文字を入力する
  • ①は１語ずつ確認しながら置換
  • ②は全てを同時に置換

• 置換後

• ABオプション（置換時の大文字/小文字）
  • オプションをクリックしない場合
    • 置換文字通りに置換される
  • オプションをクリックした場合
    • 置換前の大文字/小文字の状態で置換される

VSCode　複数ファイルにまたがる検索・置換

VSCodeでは、プロジェクト全体を対象に検索・置換が可能です。

検索・置換 画面の表示

• ショートカット：Ctrl + Shift + F
• サイドバーの虫眼鏡アイコンをクリック
  • 下図のような「検索/置換」欄が表示される
  • 三点リーダーをクリック
    • 「対象とするファイル」「除外するファイル」の入力欄が表示される

基本的な使用方法は、単一ファイルと同様。

「検索・置換」の手順

• ①「画像」の文字を検索欄に入力
  • index.html、policy、stile.css の３ファイルに含まれている事が確認できた
• ②をクリックすると、上記３ファイルが同時に更新されて保存される
• ③検索している最中に変更中のファイルがある場合に、置換直前にクリックする事で最新の状態で置換ができる
• ④検索結果のクリア

• ⑤「リストとして」で表示
  フォルダー体系として表示します

• ⑥エディターで開く
  エディターで詳細を確認できます。

• 全て折りたたんで表示

VSCode 正規表現を使用した検索

正規表現（Regular Expression）とは、文字列のパターンを表現するための記法です。
簡単に言えば、「こういう形の文字列を探して！」と指示するためのルールです。

VSCode　正規表現での検索方法

• 良く使用する正規表現と具体例

サンプル１：「HTMLタグ」を消去する

• ショートカット：Ctrl + R
• ①「正規表現を使用する」をクリック

• 「検索欄」に「HTMLタグの正規表現」<[^>]+>を入力
• 「置換欄」には何も入力しない

• 実行結果

トラブルシュート

複数ファイルにまたがる検索で、閉じているファイルが検索対象にならない

原因は、主に「除外設定」や「検索対象の制限」によるものです。以下に、原因と対策を紹介します。

ファイル・フォルダ名称が .gitignore に記載されている

• VSCodeはデフォルトで .gitignore に記載されたファイル・フォルダを検索対象から除外します。
• 対策
  • .gitignore の除外を無視する
    • 設定画面で、検索＞gitignoreによる除外を無視　をONにする

search.exclude設定による除外

• .vscode/setteigs.json やユーザー設定で search.exclude が指定されていると、対象外になります。
• 対策
  • ファイルの内容を確認し除外対象から外します

search.excludeの例

"search.exclude": {
  "**/node_modules": true,
  "**/dist": true
}

インデックスの破損

• VSCodeの検索は内部的にインデックスを使って高速化しています。これが破損していると検索結果が不完全になることがあります。
• 対策
  • インデックスの不具合が疑われる場合は、VSCodeを再起動してみてください

まとめ

• 検索オプション
  大文字小文字の区別、単語単位、正規表現などを柔軟に切り替え可能。
• 正規表現
  パターン検索やグループ置換で複雑な編集も一括処理できる。
• 複数ファイル対応
  未開ファイルも検索対象になるが、.gitignore や search.exclude に注意。
• 拡張機能
  検索対象の拡張やプレビュー機能でさらに効率化。
• 設定管理
  検索除外パターンは settings.json に保存可能。精度の高い検索には明示的な指定が有効。

Visual Studio 2022 開発環境の条件

C#による多様なアプリケーション開発に対応できる万能な環境を整えます。

プロジェクトの種類に応じて必要最小限を選ぶのもOKですが、最初は広めに入れておくと将来的にスムーズに対応できます。

Visual Studio 2022 インストールの見直し

Visual Studioインストール時のワークロード

以下のワークロードをインストールする事で、デスクトップアプリとWebアプリの開発に対応できます。

• .NETデスクトップ開発
  Windows FormsやWPFなどのデスクトップアプリケーションを開発するために必要なツール群が含まれます。
  WinForms Designer や XAML Designer、ローカルデバッグ環境 がセットアップされるため、GUIアプリ開発を行う場合は必須です。

• ASP.NETとWeb開発
  Webアプリ（ASP.NET Core, MVC, Razor Pagesなど）を開発する際に必要です。
  Visual Studio 2022にはBlazor（WebAssembly）開発機能も含まれており、サーバー／クライアント両方をC#で書ける最新開発スタイルをサポートしています。

ユニットテストツール（MSTest V2/xUnit）

テストツールを使うことで、バグの少ない・変更に強い・保守しやすいコードを実現できます。

• MSTest V2の使用
  必要なパッケージのインストール方法や具体的な使用方法は「MSTest V2によるユニットテスト」を参照下さい。

• xUnitの使用
  MSTest V2と同様、必要なパッケージのインストール方法や具体的な使用方法は「MSTest V2によるユニットテスト」を参照下さい。

Gitによるソース管理

バージョン毎のソース管理や複数人によるプロジェクト作成時には、ソースの管理ツールは欠かせません。一般的に使用されている「Git」及び「GitHub」は必須と言えます。

使用にあたっては、下記リンク先のブログを参考にしてください。

• C#ソース管理　Gitローカル編

• C#ソース管理　GitHubリモート編

Azure開発

近年、クラウドネイティブな開発がますます重要視されています。その中心にあるのが、Microsoft Azure。Visual Studio 2022を使えば、ローカルのC#プロジェクトからシームレスにクラウドへ展開することが可能です。

Azure開発 を行うのであれば、Visual Studio インストーラーを起動し、ワークロードから 「Azure 開発」をインストールしておきましょう。

モバイル開発（.NET MAUI）

「スマホアプリ開発って難しそう…？」と思っている人が多いかもしれませんが、Visual Studio と .NET MAUI を使えば、C#の知識だけで iOS・Android・Windows に対応したモバイルアプリを一つのコードで開発できます。

以前は、Xamarin（ザマリン）を使用して作成していましたが、Microsoftは 2024年5月1日をもって サポートを終了 しました。

.NET MAUI（Multi-platform App UI）はXamarinの後継で、iOS・Android・Windowsのクロスプラットフォーム開発が可能です。

モバイル開発を行うのであれば、「.NET マルチプラットフォーム アプリの UI 開発」ワークロードのインストールしておきましょう。

エディタの設定調整

複数人で共同作業を行う場合、エディタや開発環境の設定を工夫することで作業効率や品質の統一がぐっと向上します。以下は Visual Studio（または他のエディタでも応用可能）でのおすすめ設定です。

コーディングスタイルの統一（EditorConfig）

• .editorconfig ファイルを導入
  • インデント（スペース/タブ）、最大行長、命名規則などをプロジェクト単位で統一できます。
  • Visual Studio は .editorconfig を自動で読み込むので、個人の設定に関係なく統一が保たれます。

Live Share（リアルタイム共同編集）

• Visual Studio には「Live Share」機能があり、他のメンバーとリアルタイムでコードを共有・共同編集できます。

• 画面共有やチャット、コメントも可能。
• デバッグセッションも共有できるので、ペアプロにも最適！

コード分析と警告

• StyleCop / Roslyn Analyzer / ReSharper を導入すると、
  • コーディングルールの違反を自動で警告・修正提案
  • チームでの品質維持につながる

拡張機能で機能強化

Visual Studio Marketplaceから拡張機能をインストールすることで、機能を大幅に拡張できます。

• Roslynator：C#コードの解析・リファクタ支援
• CodeMaid：コードの整形とクリーンアップ
• Visual Studio IntelliCode：AIによるコード補完の精度向上
• GitHub Extension for Visual Studio：GitHub連携を強化

パフォーマンスの最適化

Visual Studioは非常に高機能なため、設定次第で起動やビルド時間が変わります。

• ツール > オプション > プロジェクトとソリューション > ビルドと実行
  • 「詳細なビルド出力を抑制」してログ負荷を軽減
• 不要な拡張機能やワークロードはアンインストール
• SSDにプロジェクトファイルを配置

デバッグ機能の強化

デバッグはC#開発において重要な工程です。

• ウィンドウ > 自動, ローカル, ウォッチ, 即時ウィンドウ を活用
• 条件付きブレークポイント、ログポイントの使用
• デバッグ > オプション > 全般 で「ソース サーバー サポート」を有効化すると、シンボル読み込みが高速化

まとめ

Visual Studio 2022は、正しく最適化することでC#開発において非常に高い生産性を実現できます。

開発効率を高めるためには、初期インストールから日々のデバッグ、チーム開発に至るまで、細かい設定を積み重ねていくことが重要です。

C#の非同期プログラミング（async/await）は、UIの応答性を保ったり、バックグラウンド処理を効率化する際に非常に役立ちます。

しかし、非同期コードのデバッグは慣れるまではやや難解に感じるかもしれません。

今回はコンソールアプリを例にして、非同期処理（async/await）のデバッグ方法「例外処理・ブレークポイント」について具体的に紹介します。

• 対象者
  • コンソールアプリで async/await を使い始めた初〜中級者
  • 非同期処理の例外やブレークポイント操作を学びたい方

Visual Studio 2022 同期/非同期メソッドのデバッグの違い

同期メソッドと非同期メソッドの主な違いを下表にまとまめしたが、非同期メソッドの最大の注意点は「await の前後で処理の流れが途切れるように見える」ことです。

非同期プログラム（コンソールアプリ）のデバッグ方法

下記のサンプルプログラムは非同期に HTTP リクエストを送信し、外部の Web API（https://jsonplaceholder.typicode.com/posts/1）からデータを取得。そのレスポンスをコンソールに表示するサンプルです。

このURLは「投稿（posts）」の中の IDが1の投稿データ を取得します。アクセスすると、以下のようなJSON形式のデータが返ってきます。

{
“userId”: 1,
“id”: 1,
“title”: “sunt aut facere repellat provident occaecati excepturi optio reprehenderit”,
“body”: “quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto”
}

※ここではスレッドの切り替わりを確認する為に、await の前後にスレッドIDを表示する命令を挿入しています。

using System;
using System.Net.Http;
using System.Threading.Tasks;

class Program
{
    static async Task Main(string[] args)
    {
        Console.WriteLine("処理開始");
        try
        {
Console.WriteLine($"Main開始スレッドID: {Thread.CurrentThread.ManagedThreadId}");
            var result = await FetchDataAsync("https://jsonplaceholder.typicode.com/posts/1");
Console.WriteLine($"Main終了スレッドID: {Thread.CurrentThread.ManagedThreadId}");
            Console.WriteLine("取得結果:");
            Console.WriteLine(result);
        }
        catch (Exception ex)
        {
            Console.WriteLine($"エラー発生: {ex.Message}");
        }
        Console.WriteLine("処理終了");
    }

    static async Task<string> FetchDataAsync(string url)
    {
        using var httpClient = new HttpClient();
Console.WriteLine($"GetAsync実行前ID: {Thread.CurrentThread.ManagedThreadId}");
        var response = await httpClient.GetAsync(url);
Console.WriteLine($"GetAsync実行ID: {Thread.CurrentThread.ManagedThreadId}");
        response.EnsureSuccessStatusCode(); // ステータスコードがエラーなら例外を発生
        return await response.Content.ReadAsStringAsync();
    }
}

ブレークポイントの使い方

• await の前後両方にブレークポイントを置くのが基本。
  • 処理（スレッド）の切り替わりを追いやすいくなります。

上記サンプルプログラムを実行すると以下のようになります。

「httpClient.GetAsync(url);」　命令実行後にスレッドが切り替わっているのが分かります。

非同期処理での例外の捕捉

非同期メソッド内で発生した例外は、通常の try-catch で捕捉できますが、例外が発生する場所までステップインしないと、内部の詳細が見えにくいことがあります。

今回は「ネットワークエラー」を発生させて、例外が発生した瞬間にブレークできるよう以下の設定を行います。

• 設定方法
  • メニューの「デバッグ」→「ウィンドウ」→「例外設定」で、System.Net.Http.HttpRequestException をチェック

他の例外でも、対象となる例外設定にチェックを入れると例外が発生した瞬間にブレークできるようになります。

サンプルプログラムで使用しているURLを存在しないURLに変更して実行してみると、「response.EnsureSuccessStatusCode(); // ステータスコードがエラーなら例外を発生」の箇所でブレークします。

• デバッグのポイント
  • ブレークポイントの設定箇所
    • 「await httpClient.GetAsync(url);」の前後
    • catch (Exception ex) の中
  • ウォッチする変数
    • url： 正しく設定されているか？
    • response：null になる可能性があるか？
    • ex.Message：実際のエラーメッセージを確認

非同期例外のデバッグTips

• wait での例外はメソッド外に伝播するので、try-catch を呼び出し元にも必ず書く
• テータスコードが 404 や 500 のような「正常なHTTPレスポンス」は GetAsync() で例外を投げませんが、EnsureSuccessStatusCode() で例外になる
• 存在しないホスト名などは DNS で即座に例外となるため、確実に例外デバッグが行えます

ログ出力による追跡

• デバッグログを挟むことで、await 前後の流れや問題の特定がしやすくなります。
• 本格的には Serilog や NLog を使ってログをファイル出力するのもおすすめです。

■Serilog や NLog の使用方法は下記ブログを参照下さい

• Serilog：【C# デバッグ入門】Serilogの使用方法を徹底解説

• NLog ：【C#デバッグ入門】NLog の使用方法を徹底開発

ステップ実行と動作の巻き戻し

• ステップ実行
  • F10：ステップオーバー
  • F11：ステップイン（async関数内に入れる）
  • Shift + F11：ステップアウト

注意点：await をステップインすると、生成されたステートマシン（裏側のコード）に入ることがあり、慣れないうちは混乱します。

• 動作の巻き戻し
  • ブレーク時のブレークポイントをクリックしたまま、実行を戻したい場所までドラッグして放す
  • 黄色い⇒が表示され、そこからステップ実行が可能となる。但し、状態を完全に巻き戻すわけではないので注意が必要。

下記は、①でブレークした状態を②まで実行を巻き戻した例。②からステップ実行実行が可能となる。

呼び出し履歴（コールスタック）の活用

非同期コードではスタックの流れが分かりづらくなるため、コールスタックを活用する事も重要です。

• どのawaitから来たか（呼び出し元）を追える
  • Main → FetchDataAsync → ParseJsonAsync のように非同期でも呼び出し経路を視覚化できる

• 非同期メソッド間の流れが分断されない
  • 途中のawaitで中断されても、再開された処理の文脈が残っている
  • 「このawaitの後に、なぜここに来たのか？」を確認できる

• 例外が発生した場所と、呼び出し元を一度に確認できる
  • 非同期処理中に例外が発生したとき、どの関数から呼ばれ、最終的にどこで例外がスローされたかがすぐに分かる

呼び出し履歴（コールスタック）の使い方

1. 非同期メソッド内でブレークポイント停止
2. メニュー → [デバッグ] → [ウィンドウ] → コールスタック（または Ctrl + Alt + C）
3. 一番下が起点、一番上が現在の位置
4. 各メソッドをダブルクリックすると、ソースにジャンプ可能

まとめ

非同期処理でも以下の点を押さえておけば効率的なデバッグが可能です。

• await の前後にブレークポイント
• ウォッチやクイックウォッチで変数確認
• ステップ実行（F10/F11）で処理を追う
• 例外ウィンドウでエラーの瞬間を補足
• 呼び出し履歴（コールスタック）を活用

例外がキャッチされてるのに原因が分からない…？
そんな悩みを解決するのが、Visual Studio の「例外設定」機能です。C# プログラマ向けに、Visual Studio の「例外設定」機能の基本から活用テクまでわかりやすく紹介します。

Visual Studio 2022 C#「 例外設定」とは？

例外設定ウィンドウでは、以下のようなことができます。

• 特定の例外が発生した瞬間（スローされた瞬間）に中断（try-catch で捕捉されていても）
• 例外の種類ごとに中断の有無を設定
• 独自に定義したカスタム例外も追加可能

Visual Studio C#「 例外設定」の使い方

1. [デバッグ] > [ウィンドウ] > [例外設定] を選択
2. 表示されたウィンドウで例えば
   • Common Language Exception のSystem.DivideByZeroException（0割り) にチェックを入れる
3. これで、その例外がスローされた瞬間に Visual Studio が中断してくれます

■簡単な具体例

通常は catch に入って処理が続きますが、例外設定で DivideByZeroException にチェックを入れておくと、例外発生の行で中断してくれます。これにより、例外の発生箇所を正確に特定できます。

Visual Studio C# でチェックを推奨する主なCLR例外

• System.NullReferenceException（ヌル参照例外）
• System.AccessViolationException（メモリアクセス違反）
• System.DivideByZeroException（ゼロ除算例外）
• System.InvalidOperationException（無効な操作）
• System.IndexOutOfRangeException（配列の範囲外アクセス）
• System.StackOverflowException（スタックオーバーフロー）
• System.OutOfMemoryException（メモリ不足）
• System.ArgumentException（無効な引数）
• System.ArgumentNullException（ヌル引数）
• System.ArgumentOutOfRangeException（範囲外の引数）
• System.IO.IOException（入出力エラー）
• System.FormatException（フォーマットエラー）
• System.TypeInitializationException（型の初期化エラー）

• CLR例外
  • .NET の Common Language Runtime (CLR) によって管理される例外。これは、C# や VB.NET などの .NET 言語で発生する例外を統一的に処理するための仕組です。
• 上記の推奨するCLR例外の中には標準でチェックが入っている場合もあります。

「Visual Studio C#」カスタム例外

C# では特定のエラー状況を、標準の Exception クラスを継承する事で自作の例外として定義する事も可能です。

自作の例外（例：MyCustomException）は、例外設定ウィンドウの「＋」ボタンから追加すれば、CLRと同様に中断対象にできます。

※名前空間を定義している場合は、名前空間名を付けて追加する

カスタム例外を活用するメリット

• 広範囲に try-catch を使っているコードでも、例外の発生箇所を特定しやすくなる
• 非同期処理や外部ライブラリの例外も追いやすくなる
• 「マイコードのみ」設定と組み合わせると、ユーザーコードに限定して中断可能となる

カスタム例外を使用すべき状況

• ドメイン固有のエラーを表現したい
  • 例：銀行システムで「残高不足」を表す InsufficientFundsException
  • 例：ECサイトで「在庫切れ」を表す OutOfStockException

• 特定のエラーに対して専用の処理をしたい
  • 例：FileProcessingException を作成し、ファイル関連のエラーを一括管理
  • 例：InvalidUserInputException を作成し、ユーザー入力エラーを適切に処理

• 標準の例外では意味が曖昧な場合
  • ArgumentException ではなく InvalidPasswordException など、より明確なエラー名を付けることで可読性向上

• エラー情報を追加したい
  • 例：DatabaseConnectionException に ConnectionString を保持し、ログ出力時に詳細情報を提供

Visual Studio C#「カスタム例外」の作成手順

カスタム例外のサンプルとしてファイルが存在しない場合に、catch で補足するのではなく、例外をスローした行で実行を中断する設定を紹介します。

• ソースコード
  • Exceptionクラスを継承したカスタム例外「FileMissingException」を作成
    • FilePath プロパティ を追加し、例外発生時に 問題のあるファイルのパスを保持
    • コンストラクタで message と filePath を受け取り、base(message) で親クラスの Exception にメッセージを渡す
  • 処理部分
    • ファイルが存在するかを確認し、ファイルがなかったら「FileMissingException」例外をスローする
    • 「FileMissingException」例外はcatchでも補足

• 例外設定にカスタム例外「FileMissingException」を追加
  • [デバッグ] > [ウィンドウ] > [例外設定] で例外設定画面を表示
  • 今回は、①の「Common Language Runtime Exceptions」を選択
  • ②の追加「＋」がクリックできるようになるのでクリック

• 入力欄にカスタム例外の名称を入力（namespaceを定義している場合はnamespace名を付加）

• Debugモードで実行すると、例外のスローで実行が中断する

• Debugモードなしで実行すると、catchで補足される

Serilogも広く使用されており、NLog と同様にログレベル（Verbose, Debug, Information など）の切り分け・ログファイルの出力先・出力形式のカスタマイズなどが簡単に設定できるログライブラリです。

• 使用環境
  • Windows 10 Pro 2009 ビルド19045.5854
  • Visual Studio 2020 Version 17.14.2
  • Serilog 4.3.0

Visual Studio 2022 C# Serilogを使用した本格的なデバッグログ管理

Visual Studio C# Serilogの主な用途

1. デバッグ
   • Log.Debug()を使って変数の値や処理の流れを記録し、問題の特定を容易にする
2. エラートラッキング
   • Log.Error()やLog.Fatal()を使ってエラーメッセージやスタックトレースを記録し、原因を分析する
3. ユーザーアクションの記録
   • ログインやデータ更新の履歴をLog.Information()で記録し、監査やトラブルシューティングに役立てる
4. パフォーマンス監視
   • アプリケーションの処理時間を測定し、ボトルネックを特定する

Visual Studio C# Serilogのログ出力形式

Visual Studio C# Serilogのログレベル一覧（レベルの低い順）

Visual Studio C# Serilogの使用手順

NuGet Serilogパッケージのインストール

• ソリューションエクスプローラー画面の「プロジェクト」を右クリック→「ＮuＧetパッケージの管理」画面から下記のパッケージをインストールします。
  • Serilog　4.3.0
  • Serilog.Sinks.Console　6.0.0
  • Serilog.Sinks.Debug　3.0.0
  • Serilog.Sinks.File　7.0.0

■パッケージのインストール結果

Visual Studio C# Serilogの初期設定

アプリケーションの開始時、通常は「Main」やアプリケーションの初期化時にSerilogを設定します。

■設定例

 public Form1()
{
    InitializeComponent();
    // フォームを画面の中央に表示
    this.StartPosition = FormStartPosition.CenterScreen;

    //---------------------------------------------------------------------------------
    // Serilogの初期設定
    //---------------------------------------------------------------------------------

    // LoggerConfiguration インスタンスの作成
    Log.Logger = new LoggerConfiguration()

    // 出力先の設定　コンソール/デバッグウィンドウ/ログファイル
    .WriteTo.Console()
    .WriteTo.Debug()

    //rollingInterval: RollingInterval.Day ログファイルを日ごとに作成
　　//ログファイルにはWarningレベル以上のログが記録される
    .WriteTo.File(@"C:\temp\Serilog\serilog_code.txt", 
                restrictedToMinimumLevel: LogEventLevel.Warning, 
                rollingInterval: RollingInterval.Day)

    //コンソール・デバッグウィンドウには、Debugレベル以上のログが記録される
    .MinimumLevel.Debug()
    .CreateLogger();

}

• 出力先の設定
  • 本設定では、コンソールとデバッグウィンドウ及びログファイル
• 出力レベルの設定
  • 両方のウィンドウにはDebugレベル以上のメッセージを出力（.MinimumLevel.Debug()）
  • ログファイルにはWarningレベル以上のメッセージを出力（restrictedToMinimumLevel: LogEventLevel.Warning,）
• ログファイルの作成周期
  • 一日ごとに別ファイルとして作成（rollingInterval: RollingInterval.Day）

ログ出力先の設定例

• コンソール
  • .WriteTo.Console()
• デバッグウィンドウ
  • .WriteTo.Debug()　
• ファイル出力
  • .WriteTo.File(@”C:\temp\Serilog.txt”, restrictedToMinimumLevel: LogEventLevel.Warning,
    rollingInterval: RollingInterval.Day)
• SQL Server
  • .WriteTo.MSSqlServer(“Server=myServer;Database=myDB;User Id=myUser;Password=myPassword;”, “Logs”)
• Elasticsearch
  • .WriteTo.Elasticsearch(new Serilog.Sinks.Elasticsearch.ElasticsearchSinkOptions(new Uri(“http://localhost:9200”)))
• Syslog（Linux向け）
  • .WriteTo.Syslog()
• メール通知
  • .WriteTo.Email(new EmailConnectionInfo{FromEmail = “noreply@example.com”,ToEmail = “admin@example.com”,MailServer = “smtp.example.com”})
• Slack通知
  • .WriteTo.Slack(“https://hooks.slack.com/services/your/webhook/url”)

ファイル出力設定の主な設定項目一覧

ファイル出力設定では、さまざまなオプションを指定できます。以下に、主な設定項目を一覧にまとめました。

■設定例

• 下記設定では、1日ごとにログファイルを作成し、最大7日分保持、10MBを超えたら新しいファイルを作成するようになっています。
• また、Warning以上のログのみ記録され、バッファリングを有効化してパフォーマンスを向上させています。

Log.Logger = new LoggerConfiguration()
    .WriteTo.File("logs/log.txt",
        rollingInterval: RollingInterval.Day,　　// 日毎にログファイルを作成
        retainedFileCountLimit: 7,　　　　　　　 // ７日文のログを保持
        fileSizeLimitBytes: 10485760,　　　　　　// 10MBを超えたら新しいファイルを作成
        buffered: true,　　　　　　　　　　　　　// バッファリングを有効化
        flushToDiskInterval: TimeSpan.FromSeconds(5),　// ディスクへの書き込み間隔 5秒
        outputTemplate: "{Timestamp:yyyy-MM-dd HH:mm:ss} [{Level}] {Message}{NewLine}{Exception}",　 
　　　　　　　　// ログの表示例　2025-06-08 12:33:20 [Error] データベース接続エラー
　　　　　　　　// {NewLine}{Exception}：例外が発生した場合、詳細なスタックトレースを表示
        restrictedToMinimumLevel: LogEventLevel.Warning)　// Warning以上のログのみ記録
    .CreateLogger();

Visual Studio C# JSONファイルによるSerilogの設定

• 設定をJSONファイルで管理する利点
  • ソースコードを変更せずにログの設定が可能となる
  • 環境ごとに異なる設定を利用する事ができる（例：serilog.dev.json、serilog.prod.json等）

上記だけでも利便性は相当に高いと言えます。

■serilog.jsonの例

この設定では、コンソールにはＤebugレベル以上、ファイルにはWarningレベル以上のログを出力するようにしています。

{
  "Serilog": {
    "Using": [ "Serilog.Sinks.Console", "Serilog.Sinks.File" ],
    "MinimumLevel": "Debug",
    "WriteTo": [
      {
        "Name": "Console",
        "Args": { "restrictedToMinimumLevel": "Debug" }
      },
      {
        "Name": "File",
        "Args": {
          "path": "C:/temp/Serilog/serilog_json.txt",
          "rollingInterval": "Day",
          "restrictedToMinimumLevel": "Warning"
        }
      }
    ],
    "Enrich": [ "WithMachineName", "WithThreadId" ]
  }
}

設定手順

• serilog.jsonの作成
  • プロジェクトのルートディレクトリ（binフォルダの外）に作成します
    内容は上記通り。

• JSON設定の読み込み
  • C#のコードでJSONファイルを読み込むには下記のパッケージが必要となるので、NuGetパッケージからインストールします。
    • Microsoft.Extensions.Configuration.Json
    • Serilog.Settings.Configuration

• serilog.jsonファイルのプロパティ設定
  • ファイルを「右クリック」→「プロパティ」でプロパティを表示し、下記項目を設定
    • ビルドアクション：コンテンツ
    • 出力ディレクトリコピー：新しい場合はコピーする

• プロパティの設定の意味
  • ビルド時に設定ファイルを bin フォルダへコピー
  • 実行時に serilog.json を参照できる（アプリが正しくログ出力できる）
  • ファイルが変更された場合のみコピーされるため、不要な更新を防ぐ

Visual Studio C#　Serilog 動作確認

Serilogの「コード内」設定と「JSONファイル」設定も、下記の簡単なプログラムコードを実行して検証します。

• 設定した条件
  • コンソール画面には、Debugレベル以上のエラーを出力する
  • ログファイルには、Warningレベル以上のエラーを出力する

using Serilog;
using Serilog.Events;

//---------------------------------------------------------------------------------
// Serilogの初期設定
//---------------------------------------------------------------------------------
try
{ 
    // LoggerConfiguration インスタンスの作成
    Log.Logger = new LoggerConfiguration()

    // 出力先の設定　コンソール/デバッグウィンドウ/ログファイル
    .WriteTo.Console()
    .WriteTo.Debug()

    //rollingInterval: RollingInterval.Day ログファイルを日ごとに作成
    .WriteTo.File(@"C:\temp\Serilog\serilog_code.txt",
            restrictedToMinimumLevel: LogEventLevel.Warning,
            rollingInterval: RollingInterval.Day)

    //Debug 以上のログレベルのログが記録される
    .MinimumLevel.Debug()
    .CreateLogger();

    Log.Information("Information：コード内の、Serilog設定が適用されました。Fileには表示されない。");
    Log.Verbose("Verbose：ログに表示されないメッセージ。Fileには表示されない。");
    Log.Debug("Debug：プログラムが開始しました。");
    Log.Warning("Warning：警告エラーメッセージ");

    for (int i = 0; i < 10; i++)
    {
        int doubled = i * 2;
        //logger.Info($"NLog ループ {i}：2 倍の値 = {doubled}");
        Log.Debug($"ループ {i}：2倍の値 = {doubled}" + " Fileには表示されない。");
    }

    // 故意に例外を発生させるためのコード
    int val_1 = 10;
    int val_2 = 0;
    int result = val_1 / val_2;
}
catch (Exception ex)
{
    // 例外が発生した場合
    Log.Error(ex, "Error：アプリケーションでエラーが発生しました");
    Log.Fatal(ex, "Fatal：アプリケーションで致命的なエラーが発生しました");
}
finally
{
    // アプリケーション終了時のログ
    Log.Information("プログラムが終了しました");
}

Visual Studio C# コード内でSerilogを設定した場合

下記の出力結果を見ると、想定通りに動作した事が確認できました。

■コンソール画面への出力結果

■ログファイルへの出力結果

Visual Studio C# JsonファイルでSerilogを設定した場合

■コンソール画面への出力結果

■ログファイルへの出力結果

Visual Studio C# Serilog まとめ（NLogと比較して）

NLogとSerilogはどちらもC#のログ記録ライブラリとして広く使われていますが、それぞれに優れた点とデメリットがあります。

一般的に、NLogはレガシーシステムや高パフォーマンスを求めるアプリケーションで使われることが多く、Serilogはクラウド環境や構造化ログを活用するプロジェクトで人気があります。

最近では、Serilogの採用が増えている傾向があるようですが、用途によって適したライブラリを選択する事が重要です。