コードの品質を測る指標として「複雑度」がありますが、特に循環的複雑度（Cyclomatic Complexity）は、コードの保守性やバグの発生リスクを定量的に評価できる指標です。

この記事では、循環的複雑度の計算方法、複雑度を削減する方法、実践的な測定ツールについて、詳しく解説していきます。

循環的複雑度（Cyclomatic Complexity）とは

循環的複雑度は、プログラムの制御フローの分岐の数から算出される複雑度の指標です。この値が高いほど、コードは複雑で理解しにくく、バグが発生しやすくなります。

基本計算式

1

M = E - N + 2P

• M: 循環的複雑度
• E: 制御フローグラフの辺の数（edge）
• N: 制御フローグラフのノード数（node）
• P: 連結成分の数（通常は1で計算する）

簡易計算方法（現場でよく使われる）

実際の開発現場では、以下の簡易計算方法がよく使われます。

1. if、for、while、case、catch などの分岐やループの数を数える
2. その数に 1 を足す

計算例で理解する循環的複雑度

簡単な関数を例に説明をしていきます。

例1：簡易計算方法

まずは、簡易的な計算方法で関数の複雑度を計算していきましょう。

1
2
3
4
5
6
7
8
9
10
11
12
13

function example(x) {
  if (x > 0) {           // 分岐 1
    console.log("A");
  } else if (x === 0) {  // 分岐 2
    console.log("B");
  } else {
    console.log("C");
  }

  for (let i = 0; i < 5; i++) {  // 分岐 3
    console.log(i);
  }
}

• 分岐・ループの数：3
• 複雑度：3 + 1 = 4

上記の例のように分岐を繰り返しを数えて+1をすれば概算で計算することができます。

例2：基本計算式を使った計算方法

次は M = E - N + 2P を使った計算方法を見ていきましょう。

1
2
3

function helper() {
  console.log("do something");
}

制御フローグラフ：
まずは、関数の制御フローグラフを作成します。

1

[Start] → [print] → [End]

計算：
次に制御フローグラフからノードの数、辺の数を数えます。

• N（ノード数）= 3（Start, print, End）
• E（辺の数）= 2（Start→print, print→End）
• P（連結成分数）= 1

1
2
3

M = E - N + 2P
M = 2 - 3 + 2*1
M = 1

結果：複雑度 = 1（最低値、まったく複雑ではない関数）

分岐を追加した場合

次に分岐を追加した関数の計算をしてみましょう。

1
2
3
4
5

function helper(flag) {
  if (flag) {
    console.log("do something");
  }
}

制御フローグラフ：

1
2

[Start] → (flag?) ─Yes→ [print] → [End]
               └─No──────────────→ [End]

計算：

• N（ノード数）= 4（Start, 条件判定, print, End）
• E（辺の数）= 4（Start→条件判定, 条件判定→print, 条件判定→End, print→End）
• P（連結成分数）= 1

1
2
3

M = E - N + 2P
M = 4 - 4 + 2*1
M = 2

結果：複雑度 = 2（分岐を1つ追加しただけで、複雑度は 1 → 2 に増加）

ネストした条件分岐

条件分岐がネストした関数の循環的複雑度を計算をしてみます。

1
2
3
4
5
6
7

function helper(a, b) {
  if (a > 0) {
    if (b > 0) {
      console.log("A and B are positive");
    }
  }
}

制御フローグラフ：

1
2
3
4
5
6
7
8
9
10
11

[Start] 
   |
(a > 0?) ----No----> [End]
   |
  Yes
   |
(b > 0?) ----No----> [End]
   |
  Yes
   |
[print] → [End]

計算：

• N（ノード数）= 5（Start, 条件判定1, 条件判定2, print, End）
• E（辺の数）= 6（Start→条件判定1, 条件判定1→End, 条件判定1→条件判定2, 条件判定2→End, 条件判定2→print, print→End）
• P（連結成分数）= 1

1
2
3

M = E - N + 2P
M = 6 - 5 + 2*1
M = 3

結果：複雑度 = 3

重要なポイント

• 循環的複雑度は「ネストの深さ」ではなく「分岐の総数」で増える
• ただし、ネストが深いと認知的複雑度（Cognitive Complexity）はもっと増える
• 人間はネスト構造を理解するのが苦手なので、Cognitive Complexity では深さもペナルティになる

複雑度の目安

関数呼び出しと複雑度の関係

循環的複雑度の計算は、原則として「関数ごとに独立して」計測するのが基本です。

基本ルール

• 呼び出している関数の中身はカウントに含めない
• 関数呼び出しは、それ自体は「分岐」でも「ループ」でもないので複雑度には直接影響しない
• 複雑度に影響するのは、その関数呼び出しが条件式の一部やループの制御として使われている場合

例1：単純な呼び出し（複雑度に影響なし）

1
2
3
4
5
6
7

function helper() {
  console.log("do something");
}

function main() {
  helper();
}

• main の中には分岐もループもなし
• main の複雑度 = 1（最低値）
• helper は別に計算（=1）

例2：条件式の中で呼び出し（影響あり）

1
2
3
4
5
6
7
8
9

function isValid(x) {
  return x > 0;
}

function main(x) {
  if (isValid(x)) {   // 分岐1
    console.log("ok");
  }
}

• isValid() の中身はカウントしないが、if の分岐1つとして main の複雑度に加算される
• 複雑度：
  • main = 1（if）+ 1 = 2
  • isValid = 1

複雑度を下げる方法

1. 関数の分割

関数を分割することで１つ１つの関数の循環的複雑度は下がります。

Before（複雑度 = 8）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function complexFunction(data) {
  if (data.type === 'A') {
    // 処理A
    if (data.value > 10) {
      // 処理A-1
    } else {
      // 処理A-2
    }
  } else if (data.type === 'B') {
    // 処理B
    if (data.value > 20) {
      // 処理B-1
    } else {
      // 処理B-2
    }
  }
}

After（複雑度 = 2）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

function processTypeA(data) {
  if (data.value > 10) {
    // 処理A-1
  } else {
    // 処理A-2
  }
}

function processTypeB(data) {
  if (data.value > 20) {
    // 処理B-1
  } else {
    // 処理B-2
  }
}

function complexFunction(data) {
  if (data.type === 'A') {
    return processTypeA(data);
  } else if (data.type === 'B') {
    return processTypeB(data);
  }
}

2. ポリモーフィズムの活用

ポリモーフィズムを使うことで、分岐がなくなります。それにより、複雑度が下がります。
Before（複雑度 = 6）

1
2
3
4
5
6
7
8
9

function processPayment(payment) {
  if (payment.type === 'credit') {
    return processCreditCard(payment);
  } else if (payment.type === 'debit') {
    return processDebitCard(payment);
  } else if (payment.type === 'bank') {
    return processBankTransfer(payment);
  }
}

After（複雑度 = 1）：

1
2
3
4
5
6
7
8
9
10

const paymentProcessors = {
  credit: processCreditCard,
  debit: processDebitCard,
  bank: processBankTransfer
};

function processPayment(payment) {
  const processor = paymentProcessors[payment.type];
  return processor ? processor(payment) : throw new Error('Unknown payment type');
}

測定ツール

ここでは、循環的複雑度の計算方法について説明してきました。
実際の関数は複雑であり、手計算は現実的ではありません。各言語でツールが開発されており、そのツールを利用するのがよいです。

• JavaScript/TypeScript: ESLint
• Python: radon
• Java: SonarQube / PMD
• Go: gocyclo

まとめ

循環的複雑度は、コードの品質を数値で測れる指標です。チーム開発では「このコードは複雑すぎる」という主観的な意見ではなく、「複雑度が15だからリファクタリングが必要」と客観的に判断できます。複雑度の計算方法を理解すれば、コードレビューでも「なぜこの関数は複雑なのか」を論理的に説明できるようになり、より建設的な議論ができるようになります。

HTTP中継（プロキシ）は、アプリケーション層（OSIの第7層）のHTTPプロトコルを中継（再発行）する仕組みです。プロキシサーバーはTCP/IPのセッションを一度終了させ、新たに別のセッションを開始して通信を中継します。

この記事では、HTTPの構造、リクエスト/レスポンスの伝播、TCP/IP層での扱い、ヘッダーの処理など、「プロトコルとして何がどう動いているか」に焦点を当てて詳述します。

HTTP中継のプロトコル的な概要

HTTP中継（proxy）は、アプリケーション層（OSIの第7層）のHTTPプロトコルを中継（再発行）するものです。プロキシサーバーはTCP/IPのセッションを一度終了させ、新たに別のセッションを開始して通信を中継します。

1

[Client] --(HTTP over TCP)--> [Proxy] --(HTTP over TCP)--> [Server]

つまり、ClientとProxy間のTCPコネクションと、ProxyとServer間のTCPコネクションは完全に別物です。

プロトコル単位での構造

1. クライアント→プロキシ（Proxy）

クライアントからプロキシへのHTTPリクエスト例

1
2
3
4
5

GET /api/item HTTP/1.1
Host: proxy.example.com
Content-Type: application/json
Content-Length: 12345
Authorization: Bearer token123

2. プロキシでの動作

プロキシサーバーは以下を行います。

• TCPで受け取ったHTTPリクエストをアプリケーション層で解析
• 必要に応じてヘッダーを書き換え（例：Host, Authorization, X-Forwarded-For など）
• 新たなHTTPリクエストとしてバックエンドに送信

3. プロキシ→バックエンド

プロキシからバックエンドで新たなリクエストが送られます。
リクエスト先Hostがbackendサーバーに変更され、X-Forwarded-Forが追加、Authorizationがプロキシによって変更されています。

1
2
3
4
5
6

GET /api/item HTTP/1.1
Host: backend.internal
Content-Type: application/json
Content-Length: 12345
X-Forwarded-For: 192.168.1.10
Authorization: internal-api-key

4. バックエンド→プロキシ（HTTPレスポンス）

バックエンドサーバーはプロキシにレスポンスを返します。

1
2
3
4
5

HTTP/1.1 200 OK
Content-Type: application/json
Content-Length: 123

{"username": "taro"}

5. プロキシ→クライアント

そのレスポンスを、必要に応じて加工しながら、もとのクライアントに返します。

TCP/IPレイヤーの流れ

ヘッダーの役割とプロキシにおける重要性

プロキシの種類と特徴

フォワードプロキシ

クライアントがプロキシを経由してインターネットにアクセスする形態です。

1

[Client] → [Forward Proxy] → [Internet] → [Server]

リバースプロキシ

サーバーの前に配置され、クライアントからのリクエストを適切なバックエンドサーバーに振り分ける形態です。

1

[Client] → [Reverse Proxy] → [Backend Server]

トランスペアレントプロキシ

クライアントがプロキシの存在を意識せずに通信できるプロキシです。通常はネットワークレベルでトラフィックをインターセプトします。

プロキシにおける重要な技術的考慮事項

1. コネクション管理

プロキシは以下のコネクション管理が重要です。

• Keep-Alive: クライアントとのコネクションを維持
• Connection Pooling: バックエンドサーバーとのコネクションを再利用
• タイムアウト設定: 適切なタイムアウト値の設定

2. バッファリングとストリーミング

• メモリ使用量の最適化: 大きなファイルやデータを扱う場合、バッファリングとストリーミングでメモリ使用量を最小限に抑えることが重要です

3. エラーハンドリング

プロキシは様々なエラーケースを適切に処理する必要があります。

• バックエンドサーバーの障害
• ネットワークタイムアウト
• 不正なHTTPリクエスト
• SSL/TLS証明書の問題

まとめ

HTTP中継（プロキシ）は、単純に見えて実は非常に複雑な仕組みです。TCP/IPレイヤーでのセッション管理、HTTPヘッダーの適切な処理、セキュリティ上の考慮事項など、多くの技術的要素が絡み合っています。

この記事で解説した内容を基に、実際のプロキシサーバーの設定や、カスタムプロキシの実装に取り組んでみてください。

GraphQLでファイルアップロードを実装する場合、いくつかの方法があります。GraphQL自体はバイナリデータを直接扱う仕様にはなっていませんが、工夫次第で実現可能です。

この記事では、GraphQLでのファイルアップロード実装について詳しく解説し、適切な方法を選択できるようにします。

バイナリデータの取り扱いについて

GraphQLの標準プロトコルはJSONのみをサポートしており、JSONはバイナリデータを直接扱えません。しかし、工夫次第でバイナリデータの送受信は可能です。主な方法は以下の2つです。

1. Base64エンコードで送信

• バイナリデータをBase64文字列に変換し、GraphQLのString型で送受信します
• 小さなファイルや簡易的な用途には使えますが、ファイルサイズが大きいと効率が悪くなります

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// クライアント側
const file = document.getElementById('fileInput').files[0];
const reader = new FileReader();
reader.onload = function() {
  const base64 = reader.result.split(',')[1]; // data:image/jpeg;base64, の部分を除去
  
  const mutation = `
    mutation UploadFile($file: String!) {
      uploadFile(file: $file) {
        id
        url
        filename
      }
    }
  `;
  
  // GraphQLリクエストを送信
  fetch('/graphql', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      query: mutation,
      variables: { file: base64 }
    })
  });
};
reader.readAsDataURL(file);

2. GraphQL multipart request specification（ファイルアップロード）

• Apollo Serverやgraphql-uploadなどのライブラリを使うことで、multipart/form-data形式でファイルアップロードが可能です
• これはHTTPの拡張で、GraphQLのmutationと一緒にバイナリファイルを送信できます
• サーバー側でgraphql-uploadなどのミドルウェアが必要です

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

// クライアント側
const file = document.getElementById('fileInput').files[0];
const formData = new FormData();

formData.append('operations', JSON.stringify({
  query: `
    mutation UploadFile($file: Upload!) {
      uploadFile(file: $file) {
        id
        url
        filename
      }
    }
  `,
  variables: { file: null }
}));

formData.append('map', JSON.stringify({
  "0": ["variables.file"]
}));

formData.append('0', file);

fetch('/graphql', {
  method: 'POST',
  body: formData
});

multipart/form-dataとは

multipart/form-dataは、HTTPリクエストでテキストデータとバイナリデータ（ファイル）を同時に送信するためのMIMEタイプです。HTMLの<form>要素でファイルアップロードを行う際に使用されます。

基本的な構造

1. Content-Typeヘッダー

1

Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

• boundaryは、データの境界を区切る文字列です
• ブラウザやクライアントが自動生成します

2. リクエストボディの構造

1
2
3
4
5
6
7
8
9
10

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="text_field"

Hello World
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="file"; filename="image.jpg"
Content-Type: image/jpeg

[バイナリデータ]
------WebKitFormBoundary7MA4YWxkTrZu0gW--

3. 実際のHTTPリクエスト例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

POST /graphql HTTP/1.1
Host: api.example.com
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW

------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="operations"

{"query":"mutation UploadFile($file: Upload!) { uploadFile(file: $file) { id url filename } }","variables":{"file":null}}
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="map"

{"0":["variables.file"]}
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="0"; filename="document.pdf"
Content-Type: application/pdf

[PDFファイルのバイナリデータ]
------WebKitFormBoundary7MA4YWxkTrZu0gW--

4. GraphQL multipart request specificationの構造

1. operations: GraphQLクエリのJSON
2. map: ファイルとGraphQL変数のマッピング
3. 0, 1, 2…: 実際のファイルデータ

Base64エンコードとバイナリの比較

セキュリティ

ファイルアップロード処理における、基本的なセキュリティ対策を紹介します。

1. ファイルサイズの制限

サーバー側でファイルサイズを検証します。

2. ファイルタイプの検証

ホワイトリスト方式で .jpg, .png, .pdf のように明示的に許可された拡張子のみ受付します。
また、クライアントから送られたContent-Typeではなく、サーバー側でMIMEタイプを再検査します。

3. ファイル名のリネーム

アップロードされたファイルをランダム名に変えて保存（例：upload_48cd1e2a.jpg）します。

まとめ

GraphQLでのファイルアップロードは、Base64エンコード方式とmultipart/form-data方式の2つのアプローチがあります。

• Base64エンコード: 小さなファイルや簡易的な用途に適している
• multipart/form-data: 大きなファイルや本格的なファイルアップロード機能に適している

用途に応じて適切な方法を選択し、ファイルサイズ制限やファイルタイプ検証などのセキュリティ対策も忘れずに実装することが重要です。

GraphQLは、Facebook（現Meta）が2012年に開発し、2015年に公開したクエリ言語およびAPI仕様です。REST APIの代替として設計され、クライアントがサーバーから必要なデータを正確に取得できるようにすることを目的としています。

この記事では、GraphQLのプロトコルと特徴について解説し、理解を深めていきます。

GraphQLとは

GraphQLは、クライアントがサーバーに対して必要なデータを正確に指定して取得できるクエリ言語です。従来のREST APIでは、サーバーが決めたエンドポイントから固定のデータ構造を取得する必要がありましたが、GraphQLではクライアントが自由にデータの形を指定できます。

主な特徴

1. 単一エンドポイント

GraphQLでは通常、/graphqlのような単一のエンドポイントを使用します。すべてのクエリ、ミューテーション、サブスクリプションがこのエンドポイントを通じて処理されます。

1
2

// すべての操作が同じエンドポイントを使用
POST /graphql

2. クエリ言語

GraphQLは独自のクエリ言語を提供し、クライアントが必要なデータを正確に指定できます。

1
2
3
4
5
6
7
8
9
10

query {
  user(id: "123") {
    name
    email
    posts {
      title
      content
    }
  }
}

3. 型システム

GraphQLは強力な型システムを持ち、APIの仕様が明確になります。また、イントロスペクション機能により、スキーマ情報を動的に取得できます。

4. リアルタイム通信

Subscriptions機能により、WebSocketを使用したリアルタイム通信をサポートしています。

プロトコルの詳細

HTTPプロトコルでの実装

GraphQLは主にHTTPプロトコル上で動作します。リクエストボディはJSONです。
以下が基本的なリクエスト形式です。

1
2
3
4
5
6
7
8

POST /graphql
Content-Type: application/json

{
  "query": "query { user(id: \"123\") { name email } }",
  "variables": {},
  "operationName": "GetUser"
}

レスポンス形式

レスポンス形式はJSONです。

1
2
3
4
5
6
7
8
9

{
  "data": {
    "user": {
      "name": "John Doe",
      "email": "john@example.com"
    }
  },
  "errors": null
}

WebSocketプロトコルでの実装

リアルタイム通信が必要な場合は、WebSocketプロトコルを使用します。

接続確立

1
2
3
4
5

GET /graphql HTTP/1.1
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: <key>
Sec-WebSocket-Protocol: graphql-ws

サブスクリプション例

1
2
3
4
5
6
7

subscription {
  userUpdated(userId: "123") {
    id
    name
    email
  }
}

GraphQLプロトコルレイヤー

GraphQLは以下のプロトコルレイヤーで動作します。

1. HTTP/HTTPS: 主なトランスポートプロトコル
2. WebSocket: Subscriptions用のリアルタイム通信
3. GraphQL: アプリケーションレベルのクエリ言語

プロトコルスタック

1
2
3
4
5
6
7

┌─────────────────┐
│   GraphQL       │ ← クエリ言語
├─────────────────┤
│   HTTP/HTTPS    │ ← トランスポート
├─────────────────┤
│   TCP/IP        │ ← ネットワーク
└─────────────────┘

実装例

基本的なクエリ

データの取得にはクエリを利用します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// リクエスト
{
  "query": `
    query GetUser($id: ID!) {
      user(id: $id) {
        id
        name
        email
        posts {
          id
          title
        }
      }
    }
  `,
  "variables": {
    "id": "123"
  }
}

ミューテーション

データの作成、更新にはミューテーションを利用します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// リクエスト
{
  "query": `
    mutation CreateUser($input: CreateUserInput!) {
      createUser(input: $input) {
        id
        name
        email
      }
    }
  `,
  "variables": {
    "input": {
      "name": "Jane Doe",
      "email": "jane@example.com"
    }
  }
}

サブスクリプション

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// WebSocket接続後のメッセージ
{
  "type": "start",
  "id": "1",
  "payload": {
    "query": `
      subscription {
        userUpdated {
          id
          name
          email
        }
      }
    `
  }
}

エラーハンドリング

GraphQLでは、エラーが発生した場合でも部分的なデータを返すことができます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

{
  "data": {
    "user": {
      "name": "John Doe",
      "email": null  // エラーにより取得できなかった
    }
  },
  "errors": [
    {
      "message": "Cannot return null for non-nullable field User.email",
      "locations": [
        {
          "line": 3,
          "column": 7
        }
      ],
      "path": ["user", "email"]
    }
  ]
}

パフォーマンス最適化

1. クエリの最適化

必要なフィールドのみを指定することで、ネットワーク転送量を削減できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 良い例：必要なフィールドのみ
query {
  user(id: "123") {
    name
    email
  }
}

# 悪い例：不要なフィールドも含む
query {
  user(id: "123") {
    name
    email
    posts {
      title
      content
      comments {
        text
        author {
          name
        }
      }
    }
  }
}

2. バッチ処理

複数のクエリを一度に実行することで、ネットワークリクエスト数を削減できます。

1
2
3
4
5
6
7
8
9

{
  "query": `
    query {
      user1: user(id: "1") { name email }
      user2: user(id: "2") { name email }
      user3: user(id: "3") { name email }
    }
  `
}

セキュリティ

1. 認証・認可

Authorizationヘッダーに認証・認可トークンを付与します。

1
2
3
4
5
6
7
8

// ヘッダーにトークンを含める
{
  "query": "...",
  "variables": {},
  "headers": {
    "Authorization": "Bearer <token>"
  }
}

2. クエリの複雑度制限

悪意のあるクエリによる攻撃を防ぐため、クエリの複雑度を制限することもできます。

1
2
3
4
5
6
7

// サーバー側での実装例
const depthLimit = require('graphql-depth-limit');
const server = new ApolloServer({
  typeDefs,
  resolvers,
  validationRules: [depthLimit(7)]
});

まとめ

GraphQLは、モダンなWebアプリケーション開発において、REST APIの代替として広く採用されており、REST APIと比較して通信量の削減が見込めます。
今後もGraphQLの普及は進むことが予想され、API設計の標準的なアプローチの一つとして確立されていくと思われます。

はじめに

Gitで日本語ファイル名が正しく表示されず、エンコードされた文字列として表示されることがあります。
エンコードされた文字は一見何が書いてあるかはわからないし、ものすごく表示の幅をとるのでなんとかしたい。

問題の原因

Gitはデフォルトで、非ASCII文字（日本語など）を含むファイル名を引用符で囲んで表示したり、適切なエンコーディングで処理しない場合があります。これにより、日本語ファイル名が正しく表示されない問題が発生します。

解決方法

日本語ファイル名を正しく表示するための設定

以下の3つの設定を変更することで、日本語ファイル名が正しく表示されるようになります。

1
2
3
4
5
6
7
8

# 日本語などの非ASCII文字を含むファイル名を引用符で囲まずに表示
git config --global core.quotepath false

# Gitのログ出力をUTF-8エンコーディングで表示
git config --global i18n.logoutputencoding utf-8

# コミットメッセージをUTF-8エンコーディングで処理
git config --global i18n.commitencoding utf-8

設定を変更した後、git status コマンドなどで日本語ファイルを表示してみると、正しく表示されるはずです。

設定内容の詳細説明

設定した内容は以下の通りです。

core.quotepath false

• 目的: 日本語などの非ASCII文字を含むファイル名を引用符で囲まずに表示
• 効果: ファイル名が "日本語ファイル名.txt" ではなく 日本語ファイル名.txt として表示される

i18n.logoutputencoding utf-8

• 目的: Gitのログ出力をUTF-8エンコーディングで表示
• 効果: git log や git status などの出力で日本語が正しく表示される

i18n.commitencoding utf-8

• 目的: コミットメッセージをUTF-8エンコーディングで処理
• 効果: 日本語のコミットメッセージが正しく保存・表示される（この設定は直接は関係ないが、設定しておいてよいと思う）