Loading…

概要 オンラインGraphQLフォーマッター

GraphQL SDLと操作を読みやすく一貫性のある状態に保ちます。このオンラインGraphQLフォーマッターはPrettierのGraphQLパーサーを使用して、ドキュメントの再インデント、折り返し、正規化を行います。可能な場合はブラウザで実行され、必要に応じてサーバーフォーマッターにフォールバックするため、ツールについて考えることなく信頼性の高い出力を得られます。

このGraphQLフォーマッターの機能

  • PrettierのGraphQLパーサーを使用して、一貫性のあるコミュニティ標準のフォーマットを適用
  • クエリ、ミューテーション、サブスクリプション、フラグメント、完全なスキーマSDL（型、インターフェース、ユニオン、列挙型、入力、ディレクティブ）をサポート
  • 調整可能なインデント：スペースまたはタブを選択し、インデントサイズ（1〜8）を設定
  • 設定可能な列幅によるオプションの行の長さ/折り返し制御
  • レイアウトを正規化しながら、説明（`"""…"""`）とインラインコメントをそのまま保持
  • フォーマットの一部としてGraphQLドキュメント構造を検証。無効な構文はコードを黙って破損させるのではなくエラーを表示
  • ハイブリッド実行：利用可能な場合はブラウザ内でPrettierを実行し、必要に応じてサーバーフォーマッターにフォールバック
  • .graphql / .gqlファイルを貼り付けまたはアップロードし、フォーマット結果をプレビュー、コピー、ダウンロード

📝 オンラインでGraphQLを整形する方法 for graphql-formatter

1

GraphQLを貼り付けまたはアップロード

GraphQLスキーマまたはクエリをエディタに貼り付けるか、`.graphql`/`.gql`ファイルをドロップしてください。SDLと操作ドキュメントの両方でフォーマッタが動作します。

2

フォーマットオプションを調整

スペースまたはタブを選択し、インデントサイズを設定し、好みの行の長さを構成します。これらのオプションはPrettierのGraphQLフォーマッタに渡されます。

3

フォーマット、レビュー＆エクスポート

フォーマットをクリックして変更を適用します。プレビューペインで結果を確認し、エディタにコピーするか、フォーマットされたファイルをダウンロードします。

技術仕様

対応入力

標準的なGraphQLスキーマおよび操作ドキュメント用に設計されています。

タイプ例備考
スキーマSDLschema.graphql, schema.gql型、インターフェース、ユニオン、列挙型、入力、ディレクティブ、スキーマ定義
操作queries.graphql, app.gqlクエリ、ミューテーション、サブスクリプション、フラグメント
拡張別ファイルでのスキーマ拡張例: `extend type Query { … }` ブロック

フォーマットエンジン

フォーマットはPrettierのGraphQLサポートを使用して実行されます。ほとんどの場合、Prettierは軽量ランタイムを介してブラウザで実行されます。現在の環境でGraphQLプラグインを解決できない場合、フォーマッタは透過的にサーバーサイドのPrettierワーカーにフォールバックします。

利用可能なオプション（Prettierにマッピング）

オプション動作典型的な値
インデントスタイルスペースとタブの間で選択スペース（デフォルト）またはタブ
インデントサイズインデントレベルごとのスペース数（スペース使用時）1–8、デフォルト: 2
行の長さ長い選択を折り返す/改行するターゲット列0–120（0 ≈ 実質的に折り返しなし）

制限とパフォーマンス

このツールは一般的なGraphQLスキーマと操作ファイル向けに調整されています。数百KBから約2MB程度のリクエストは一般的に安全ですが、極端に大きなドキュメントはタイムアウトやサイズ制限に引っかかる可能性があります。

プライバシーと安全性

GraphQLドキュメントはブラウザ内またはencode64のフォーマッターバックエンドで整形されます。これらは実行されたり、第三者サービスに送信されたりすることはありません。機密性の高いスキーマについては、Prettierを使用して同じ設定をローカル環境で複製できます。

コマンドライン同等機能（Prettier）

Node.jsとPrettierが既にインストールされている場合、この動作をローカルで再現できます。

Node.js（全プラットフォーム）

GraphQLスキーマファイルをその場でフォーマット

npx prettier --write schema.graphql

Prettierはファイル拡張子に基づいてGraphQLを自動検出します。

カスタムインデントと行の長さでフォーマット

npx prettier --write schema.graphql --tab-width 2 --use-tabs false --print-width 80

オンラインツールで公開されているインデントと折り返しオプションを反映します。

標準入力からフォーマット（例：他のツールからパイプ）

cat input.graphql | npx prettier --stdin-filepath input.graphql

シェルスクリプト、CIパイプライン、Gitフックで有用です。

一般的なGraphQLフォーマッターの使用例

APIスキーマ開発

  • 大規模なスキーマファイルを一貫してフォーマットし、ナビゲーションを容易にする
  • スキーマPRでのノイズの多い空白の差分を減らす
  • コード生成ツール向けにクリーンなSDLを準備する
# フォーマット前
type User{ id:ID! name:String!}

# フォーマット後
type User {
  id: ID!
  name: String!
}

フロントエンド操作とフラグメント

  • 複数のアプリやパッケージ間で共有クエリを正規化する
  • デバッグ時にネストされた選択をスキャンしやすくする
  • ドキュメントスニペットとプレイグラウンドの例を適切にフォーマットする

テスト、フィクスチャとツーリング

  • スナップショットテストで使用されるGraphQLフィクスチャを標準化する
  • フォーマットをコミット前フックやCIジョブに統合する
  • スキーマ検証や差分ツールにクリーンなドキュメントを供給する

❓ Frequently Asked Questions

GraphQLフォーマッターは実際に何を変更しますか？

PrettierのGraphQLルールに従ってGraphQLドキュメントを再構築します：インデント、改行、句読点周囲のスペース、選択とフィールドのレイアウトなど。フィールド名の変更、引数の追加、スキーマのセマンティクスの変更は行いません。

操作とスキーマSDLの両方をサポートしていますか？

はい。このフォーマッターは標準的なGraphQL操作（クエリ、ミューテーション、サブスクリプション、フラグメント）とスキーマ定義言語（型、インターフェース、列挙型、ユニオン、入力、ディレクティブ、スキーマ定義と拡張）の両方で動作します。

コメントと説明文字列は保持されますか？

はい。三重引用符の説明文字列（`"""…"""`）とインライン`#`コメントは保持されます。フォーマッターはこれらを再フローしたり周囲の空白を調整したりする場合がありますが、意図的に削除することはありません。

GraphQLコードは実行されますか？

いいえ。このツールはGraphQLをフォーマットするためにテキストとして解析しますが、クエリを実行したりGraphQLサーバーに接続したりすることはありません。

フォーマットはクライアントとサーバーのどちらで実行されますか？

フォーマッターは応答性を重視し、ブラウザで直接Prettierを実行することを優先します。必要なGraphQLプラグインがブラウザで読み込めない場合、同じオプションでサーバー上のPrettierワーカーにフォールバックします。

無料で利用できますか？

はい。このツールは無料で、パフォーマンスを安定させるための公平利用保護が適用されます。大量または非公開のワークロードの場合は、同じ設定でご自身の環境でPrettierを使用してください。

Pro Tips

Best Practice

リンティングや破壊的変更を追加する前に、このフォーマッターを使用してレガシースキーマを標準化すると、後続の差分レビューがはるかに容易になります。

Best Practice

オンラインツールの設定（インデントサイズと行の長さ）をプロジェクトのPrettier設定と合わせて、ローカルとWebのフォーマットを同一に保ちます。

Best Practice

コード内の長い埋め込みGraphQL文字列を`.graphql`ファイルに抽出して、統一されたフォーマットと再利用を可能にします。

Best Practice

フォーマットとリンター（例：GraphQL ESLint）を組み合わせて、空白や折り返し以外のスキーマやクエリの問題を検出します。

Additional Resources

GraphQL仕様
Documentation
Prettier – GraphQLフォーマット
Documentation
GraphQL公式ドキュメント – 学習
Documentation
GraphQL ESLint（リンタールール）
Documentation

Other Tools