Claude Code ガイド

Appearance

原文（日本語に翻訳） ​

ファイル書き込みプレビューで空行が省略される問題を修正しました。

原文（英語） ​

Fixed file write preview omitting empty lines

概要 ​

Claude Code v2.1.19で修正されたプレビュー表示の問題です。Claudeがファイルを作成・編集する際に表示されるプレビュー画面で、空行が意図せず省略されて表示されていた問題が解決されました。これにより、実際に書き込まれる内容を正確に確認できるようになり、コードの可読性やフォーマットに関する誤解を防げます。

基本的な使い方 ​

ファイル書き込みプレビューは、Claudeがファイルを作成または編集する際に自動的に表示されます。

修正前の表示例:

python
# プレビュー画面
def calculate_total(items):
    total = 0
    for item in items:
        total += item.price
    return total
def process_order(order):
    return calculate_total(order.items)

実際のコードには空行があるはずなのに、プレビューでは詰まって表示されていました。

修正後の表示例:

python
# プレビュー画面
def calculate_total(items):
    total = 0
    for item in items:
        total += item.price
    return total

def process_order(order):
    return calculate_total(order.items)

空行が正しく表示され、実際の出力と一致します。

実践例 ​

Python関数の作成 ​

関数間の空行が重要なPythonコード:

python
# Claudeに依頼: "ユーティリティ関数を作成してください"

# 修正前のプレビュー: 空行が省略されて読みにくい
def validate_email(email):
    return '@' in email
def validate_phone(phone):
    return len(phone) == 10
def validate_user(user):
    return validate_email(user.email) and validate_phone(user.phone)

# 修正後のプレビュー: PEP 8に従った正しい形式
def validate_email(email):
    return '@' in email

def validate_phone(phone):
    return len(phone) == 10

def validate_user(user):
    return validate_email(user.email) and validate_phone(user.phone)

Markdownドキュメントの生成 ​

段落間の空行が重要なMarkdown:

markdown
<!-- 修正前のプレビュー -->
# プロジェクト概要
このプロジェクトは...
## インストール
以下のコマンドを実行:
```bash
npm install

使い方 ​

基本的な使い方は...

プロジェクト概要 ​

このプロジェクトは...

インストール ​

以下のコマンドを実行:

bash
npm install

使い方 ​

基本的な使い方は...


### JSONファイルの整形

空行を含むJSON（コメント用）:

```json
// 修正前: 空行が省略されて構造が分かりにくい
{
  "database": {
    "host": "localhost",
    "port": 5432
  },
  "cache": {
    "host": "localhost",
    "port": 6379
  },
  "logging": {
    "level": "info"
  }
}

// 修正後: セクション間の空行が保持される
{
  "database": {
    "host": "localhost",
    "port": 5432
  },

  "cache": {
    "host": "localhost",
    "port": 6379
  },

  "logging": {
    "level": "info"
  }
}

CSSスタイルシートの作成 ​

ルール間の空行が可読性に影響:

css
/* 修正前のプレビュー */
.header {
  background: blue;
  padding: 20px;
}
.content {
  margin: 20px;
}
.footer {
  background: gray;
}

/* 修正後のプレビュー */
.header {
  background: blue;
  padding: 20px;
}

.content {
  margin: 20px;
}

.footer {
  background: gray;
}

設定ファイルの編集 ​

YAML設定ファイルの論理的なグループ分け:

yaml
# 修正前
server:
  port: 3000
  host: localhost
database:
  url: postgres://localhost/db
  pool: 10
cache:
  enabled: true
  ttl: 3600

# 修正後
server:
  port: 3000
  host: localhost

database:
  url: postgres://localhost/db
  pool: 10

cache:
  enabled: true
  ttl: 3600

注意点 ​

  • プレビュー表示のみの修正: この修正はプレビュー画面の表示に関するもので、実際に書き込まれるファイルの内容自体は以前から正しく保持されていました
  • 視覚的な確認の重要性: プレビューが正確になったことで、承認前にコードスタイルやフォーマットを確認しやすくなりました
  • コーディング規約: 言語によっては空行の有無がコーディング規約（PEP 8など）に影響するため、正確なプレビューが重要です
  • 差分の確認: ファイル編集時、空行の追加・削除が意図的なものかどうかをプレビューで確認できます
  • 自動フォーマッター: プロジェクトで自動フォーマッターを使用している場合、プレビューと最終結果が異なる可能性があります

関連情報 ​