MENU
  1. ホーム
  2. JavaScript
  3. JavaScriptのPrettierを使ったコードフォーマットの自動化：簡単ガイド

JavaScriptのPrettierを使ったコードフォーマットの自動化：簡単ガイド

JavaScript

JavaScript開発において、コードのスタイルを一貫させることは、プロジェクトの可読性や保守性を向上させる上で非常に重要です。しかし、手動でコードスタイルを統一するのは時間と労力がかかる作業です。ここで役立つのが「Prettier」というコードフォーマッターです。Prettierを使えば、コードのフォーマットを自動的に整えることができ、チーム全体で一貫したスタイルを維持することが容易になります。本記事では、JavaScriptプロジェクトにPrettierを導入し、効率的にコードをフォーマットする方法について詳しく解説します。Prettierを活用することで、開発のスピードアップと品質向上が期待できます。

目次

Prettierとは何か

Prettierは、JavaScriptやTypeScriptをはじめとする複数のプログラミング言語に対応したコードフォーマッターです。Prettierの主な目的は、コードのスタイルやフォーマットを自動的に整えることで、コードベース全体の一貫性を保つことです。Prettierを使用することで、手動でのインデントや改行の調整、スペースやカンマの配置といった煩雑な作業を省くことができます。

Prettierの特長

Prettierの最大の特徴は、意見の違いを排除することです。通常、コーディングスタイルについては開発者の間で意見が分かれることが多いですが、Prettierを使用すると、フォーマットのルールが一貫して適用されるため、スタイルの違いを巡る議論が不要になります。また、Prettierは無設定で始められるため、初めて導入する場合でも手軽に使用を開始できる点が魅力です。

対応言語と環境

PrettierはJavaScriptやTypeScriptだけでなく、HTML、CSS、JSON、Markdownなど、幅広い言語やファイルフォーマットに対応しています。また、主要なコードエディタ（VS Code、Atom、Sublime Textなど）や統合開発環境（IDE）とも連携しており、エディタ内での自動フォーマットが可能です。さらに、CI/CDパイプラインに組み込むことで、プロジェクト全体のコードスタイルを一貫して維持することができます。

Prettierの導入手順

PrettierをJavaScriptプロジェクトに導入することは非常に簡単で、数ステップで設定を完了できます。ここでは、Prettierをプロジェクトにインストールし、基本的な使い方を設定する手順を解説します。

Step 1: Prettierのインストール

最初に、Prettierをプロジェクトにインストールします。一般的には、npmやYarnを使用してパッケージとして追加します。以下のコマンドをプロジェクトのルートディレクトリで実行してください。

npm install --save-dev prettier

または

yarn add --dev prettier

これにより、プロジェクトのdevDependenciesにPrettierが追加され、開発時に使用可能になります。

Step 2: 設定ファイルの作成

Prettierの設定をカスタマイズするために、プロジェクトのルートに.prettierrcファイルを作成します。このファイルには、Prettierの動作を制御するオプションを記述します。例えば、以下のように設定できます。

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true
}

これにより、80文字を超える行は折り返され、タブ幅は2スペース、シングルクオートが使用されるように設定されます。

Step 3: .prettierignoreファイルの作成

プロジェクト内でPrettierによるフォーマットを適用したくないファイルやディレクトリがある場合は、.prettierignoreファイルを作成します。このファイルには、無視するパスを記述します。例えば、node_modulesフォルダやビルド出力ディレクトリなどを除外することが一般的です。

node_modules/
dist/

Step 4: Prettierの実行

設定が完了したら、実際にPrettierを実行してコードをフォーマットします。以下のコマンドで、プロジェクト全体のJavaScriptファイルを一括してフォーマットできます。

npx prettier --write "**/*.js"

このコマンドにより、指定したパターンに一致するすべてのJavaScriptファイルがフォーマットされます。

Step 5: エディタへの統合

最後に、使用しているコードエディタにPrettierを統合することで、コード編集時に自動的にフォーマットが適用されるようにします。例えば、VS Codeでは、Prettier拡張機能をインストールし、「保存時にフォーマット」を有効にする設定を行います。

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"

この設定により、コードを保存するたびにPrettierが自動的にフォーマットを適用します。

Prettierの基本設定

Prettierはデフォルトの状態でも効果的に動作しますが、プロジェクトやチームのコーディングスタイルに合わせて設定をカスタマイズすることが可能です。ここでは、Prettierの基本的な設定項目とその使い方について詳しく説明します。

設定ファイルの種類

Prettierの設定は、さまざまな形式で保存できます。一般的な設定ファイルには、次のようなものがあります。

  • .prettierrc (JSON形式)
  • prettier.config.js (JavaScript形式)
  • .prettierrc.yaml (YAML形式)

これらの設定ファイルは、プロジェクトのルートディレクトリに配置することで、自動的にPrettierが読み込みます。ファイル形式はプロジェクトのニーズに応じて選択できます。

主要な設定オプション

以下に、よく使用されるPrettierの設定オプションを紹介します。

printWidth

printWidthは、コードの折り返しを行う際の最大行長を指定します。デフォルトは80文字です。

{
  "printWidth": 80
}

tabWidth

tabWidthは、タブをスペースに変換する際のスペースの数を指定します。デフォルトは2です。

{
  "tabWidth": 2
}

useTabs

useTabsは、インデントにタブを使用するかスペースを使用するかを指定します。falseの場合、スペースが使用されます。

{
  "useTabs": false
}

semi

semiは、ステートメントの末尾にセミコロンを付けるかどうかを指定します。デフォルトはtrueで、セミコロンが追加されます。

{
  "semi": true
}

singleQuote

singleQuoteは、文字列にシングルクォートを使用するかダブルクォートを使用するかを指定します。デフォルトはfalseで、ダブルクォートが使用されます。

{
  "singleQuote": true
}

trailingComma

trailingCommaは、オブジェクトや配列の最後の要素にカンマを追加するかどうかを指定します。オプションにはnone, es5, allがあります。

{
  "trailingComma": "es5"
}

bracketSpacing

bracketSpacingは、オブジェクトリテラルの括弧の間にスペースを挿入するかどうかを指定します。デフォルトはtrueです。

{
  "bracketSpacing": true
}

設定のカスタマイズ例

以下は、Prettierの設定ファイルの例です。この設定では、コード行の長さを80文字に制限し、スペースによるインデント、シングルクォート、セミコロンの使用を設定しています。

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true
}

設定の共有

Prettierの設定ファイルは、プロジェクトのリポジトリに含めることで、チーム全体で一貫したコードスタイルを保つことができます。また、package.jsonに設定を含めることも可能です。

{
  "prettier": {
    "printWidth": 80,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true
  }
}

このように設定をカスタマイズすることで、プロジェクト固有のコーディングスタイルを維持しつつ、Prettierの自動フォーマット機能を最大限に活用することができます。

Prettierを使用した自動フォーマット

Prettierを導入した後は、実際にコードを自動フォーマットする手順を理解することが重要です。ここでは、コマンドラインとエディタを使用して、効率的にコードをフォーマットする方法を紹介します。

コマンドラインでの自動フォーマット

Prettierは、コマンドラインから簡単に実行できます。これにより、プロジェクト内のすべてのコードを一括でフォーマットすることが可能です。以下に、基本的なフォーマットコマンドを示します。

npx prettier --write .

このコマンドは、プロジェクトのルートディレクトリで実行することで、すべてのファイルがPrettierの設定に従ってフォーマットされます。特定のファイルやディレクトリを対象にする場合は、以下のように指定します。

npx prettier --write "src/**/*.js"

この例では、srcディレクトリ以下のすべてのJavaScriptファイルがフォーマットされます。

ファイルのチェックモード

Prettierには、フォーマットを実行せずに、現在のコードが設定に従ってフォーマットされているかどうかを確認する「チェックモード」があります。これにより、CI/CDパイプラインでのスタイルチェックを行うことができます。

npx prettier --check "src/**/*.js"

このコマンドは、指定されたファイルが正しくフォーマットされているかをチェックし、フォーマットが必要なファイルがあればリスト表示します。

エディタでの自動フォーマット

多くのエディタでは、Prettierを使用してファイルの保存時に自動的にコードをフォーマットする機能が提供されています。以下は、いくつかの主要なエディタでの設定方法です。

Visual Studio Code (VS Code)

VS CodeでPrettierを使用するには、まずPrettierの拡張機能をインストールします。次に、設定ファイルで保存時の自動フォーマットを有効にします。

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"

これにより、ファイルを保存すると自動的にPrettierが実行され、コードがフォーマットされます。

WebStorm

WebStormでは、ビルトインのPrettierサポートを使用して、保存時にコードを自動フォーマットできます。設定メニューから「Languages & Frameworks > JavaScript > Prettier」に進み、「On Save」で「Run for Files」を有効にします。

Sublime Text

Sublime TextでPrettierを使用するには、Sublime Text Prettierプラグインをインストールします。プラグインの設定で、自動フォーマットを有効にできます。

Gitフックでの自動フォーマット

さらに、Gitフックを利用して、コードがコミットされる前に自動でPrettierを実行することも可能です。これにより、常にフォーマットされたコードのみがリポジトリに反映されるようになります。huskyとlint-stagedを組み合わせて設定する方法が一般的です。

まず、必要なパッケージをインストールします。

npm install --save-dev husky lint-staged

次に、package.jsonに以下の設定を追加します。

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.js": ["prettier --write", "git add"]
}

この設定により、JavaScriptファイルがコミットされる前にPrettierが実行され、フォーマットが適用されたファイルが自動的にステージされます。

CI/CDでの自動フォーマット

CI/CDパイプラインにPrettierを組み込むことで、リモートリポジトリへのプッシュ前にコードのスタイルチェックを自動化することができます。例えば、GitHub Actionsを使用してPrettierを実行する設定を行うことが可能です。

name: Lint

on: [push, pull_request]

jobs:
  prettier:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      - run: npm install
      - run: npx prettier --check "src/**/*.js"

このようにして、コードが常に一貫したスタイルで保たれるようになります。Prettierの自動フォーマット機能を活用することで、コードの品質を維持しながら、開発の効率を大幅に向上させることができます。

エディタ連携とCI/CDの設定

Prettierの自動フォーマットを最大限に活用するためには、コードエディタやCI/CDパイプラインとの連携が重要です。これにより、開発環境内での一貫性が保たれ、コードの品質が向上します。ここでは、主要なエディタとの連携方法や、CI/CD環境でのPrettierの設定方法について詳しく説明します。

エディタとの連携

Prettierを使用する際、エディタとの連携は欠かせません。エディタにPrettierを統合することで、コードを編集するたびに自動的にフォーマットが適用され、手動でのフォーマット作業が不要になります。

Visual Studio Code (VS Code)

VS Codeは、Prettierとの統合が非常に簡単です。以下の手順で設定を行います。

  1. Prettier拡張機能のインストール
    VS Codeの拡張機能マーケットプレイスから、Prettier - Code Formatterをインストールします。
  2. 保存時にフォーマットを適用
    settings.jsonに以下の設定を追加します。
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode"

これにより、ファイルを保存するたびにPrettierが自動的にフォーマットを実行します。

  1. 特定ファイルタイプの設定
    ファイルタイプごとに異なる設定を行いたい場合は、設定ファイルに以下のように追加します。
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   }

WebStorm

WebStormもPrettierとの連携が容易です。

  1. Prettierの設定
    WebStormの設定メニューから、「Languages & Frameworks > JavaScript > Prettier」に進みます。Prettierのパスを指定し、「On Save」で「Run for Files」を有効にします。
  2. 保存時のフォーマット
    WebStormは保存時に自動的にPrettierを実行するオプションを提供しており、これを有効にすることで、コードのフォーマットが自動的に行われます。

Sublime Text

Sublime TextでPrettierを使用するには、以下の設定を行います。

  1. Prettierプラグインのインストール
    Sublime Text Prettierプラグインをインストールします。
  2. 設定のカスタマイズ
    Preferences > Package Settings > Prettierから、保存時にPrettierが実行されるように設定を行います。

CI/CD環境でのPrettier設定

CI/CDパイプラインにPrettierを統合することで、リモートリポジトリへのプッシュやマージ前にコードスタイルを自動的にチェックし、フォーマットの一貫性を保つことができます。

GitHub ActionsでのPrettier設定

GitHub Actionsを使用して、リポジトリにプッシュされたコードがPrettierのルールに従っているかをチェックする方法を紹介します。

  1. 設定ファイルの作成
    リポジトリの.github/workflowsディレクトリに、以下のような設定ファイル（例: prettier.yml）を作成します。
   name: Lint

   on: [push, pull_request]

   jobs:
     prettier:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v2
         - name: Install Node.js
           uses: actions/setup-node@v2
           with:
             node-version: '14'
         - run: npm install
         - run: npx prettier --check "src/**/*.js"

この設定では、プッシュまたはプルリクエスト時にPrettierを実行し、コードが適切にフォーマットされているかを確認します。

GitLab CIでのPrettier設定

GitLab CIでも同様に、Prettierを使用してコードスタイルをチェックできます。

  1. .gitlab-ci.ymlの設定
    リポジトリのルートに.gitlab-ci.ymlファイルを作成し、以下のように設定します。
   stages:
     - lint

   prettier:
     stage: lint
     image: node:14
     script:
       - npm install
       - npx prettier --check "src/**/*.js"
     only:
       - merge_requests
       - master

この設定により、マージリクエストやマスターブランチへのプッシュ時にPrettierが実行され、コードがフォーマットされているかを確認します。

CircleCIでのPrettier設定

CircleCIを使用して、コードのフォーマットチェックを自動化する方法も簡単です。

  1. .circleci/config.ymlの設定
    リポジトリの.circleci/config.ymlファイルに以下の設定を追加します。
   version: 2.1

   jobs:
     lint:
       docker:
         - image: circleci/node:14
       steps:
         - checkout
         - run: npm install
         - run: npx prettier --check "src/**/*.js"

   workflows:
     version: 2
     lint:
       jobs:
         - lint

この設定により、CircleCIがリポジトリにプッシュされたコードをチェックし、Prettierのルールに従っているかを確認します。

Gitフックを利用した自動フォーマット

Gitフックを使って、コードがコミットされる前に自動的にPrettierを実行する方法も非常に効果的です。これにより、フォーマットされていないコードがリポジトリにプッシュされるのを防ぐことができます。

Huskyとlint-stagedを利用した設定

  1. パッケージのインストール
    以下のコマンドでhuskyとlint-stagedをインストールします。
   npm install --save-dev husky lint-staged
  1. package.jsonの設定
    package.jsonに以下の設定を追加します。
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged"
     }
   },
   "lint-staged": {
     "src/**/*.js": ["prettier --write", "git add"]
   }

これにより、JavaScriptファイルがコミットされる前にPrettierが実行され、フォーマットされたファイルが自動的にステージされます。

このように、エディタやCI/CDパイプラインとPrettierを連携させることで、コードの一貫性を保ちながら開発を効率化し、プロジェクト全体の品質を向上させることが可能です。

トラブルシューティング

Prettierを使用していると、時折予期しない問題やエラーが発生することがあります。これらの問題を迅速に解決するために、よくあるトラブルとその対処法を紹介します。

Prettierが適用されない

Prettierがコードに対して期待通りのフォーマットを適用しない場合、以下のポイントを確認してください。

設定ファイルの確認

Prettierの設定ファイル（例: .prettierrc、package.json内の設定）が正しく構成されているか確認します。特に、ファイルのフォーマットや設定項目に誤りがないかをチェックしてください。また、.prettierignoreファイルが存在する場合、それが適用されているファイルに影響していないか確認します。

エディタの設定確認

エディタ内でPrettierの自動フォーマットが有効になっているか確認します。たとえば、VS Codeではeditor.formatOnSaveがtrueになっているか、またはPrettierがデフォルトのフォーマッターとして設定されているかを確認します。

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"

特定のファイルがフォーマットされない

一部のファイルがフォーマットされない場合、以下の点を確認します。

ファイルの拡張子と対象

Prettierは対応するファイル拡張子を持つファイルのみをフォーマットします。たとえば、JavaScriptファイルであれば.jsが対象です。ファイルがPrettierの対象になっているか、設定が正しいか確認してください。

npx prettier --write "src/**/*.js"

`.prettierignore`ファイルの確認

.prettierignoreファイルで指定されているパスに、フォーマットされないファイルが含まれていないか確認します。必要に応じて、.prettierignoreファイルを修正します。

CI/CDパイプラインでのエラー

CI/CDパイプラインでPrettierが正しく動作しない場合、以下の項目をチェックしてください。

Node.jsのバージョン

CI環境で使用されているNode.jsのバージョンが、プロジェクトで指定されているバージョンと一致しているか確認します。Node.jsのバージョンが異なると、Prettierの挙動に影響を与える可能性があります。

依存関係のインストール

CIパイプラインでPrettierが正しくインストールされているか確認します。特にnpm installまたはyarn installが正しく実行されているか確認してください。

フォーマット結果が期待と異なる

Prettierがコードをフォーマットした結果が予期したものと異なる場合、設定を見直す必要があります。

設定オプションの見直し

Prettierの設定オプションが期待通りの動作をしているか確認します。例えば、printWidthやtabWidthの設定が適切かどうか、singleQuoteやtrailingCommaなどがプロジェクトのスタイルガイドに合っているかをチェックします。

Prettierのバージョン確認

プロジェクト内で使用しているPrettierのバージョンが最新であるか、または他の開発者と同じバージョンであるかを確認します。バージョンの違いがフォーマットの差異を引き起こすことがあります。

Prettierが遅い、またはハングする

非常に大きなファイルや複雑なコードを処理する際に、Prettierが遅くなったり、ハングアップすることがあります。

ファイルの分割

ファイルが非常に大きい場合は、コードをモジュール化して分割することを検討してください。これにより、Prettierの処理が軽減され、速度が向上する可能性があります。

Prettierのアップデート

Prettierのバージョンが古い場合、パフォーマンスの問題が発生することがあります。最新バージョンにアップデートすることで、問題が解消されることがあります。

npm install --save-dev prettier@latest

その他のエラーや問題

Prettierを使用する際のその他のエラーについては、公式ドキュメントやGitHubのIssueトラッカーを参照することも有効です。これらのリソースには、同様の問題を経験した開発者からの情報が多数掲載されています。

Prettierを効果的に利用するためには、これらのトラブルシューティングの方法を理解し、問題が発生した際に迅速に対応できるようにしておくことが重要です。これにより、開発プロセスがスムーズに進行し、コードの一貫性と品質を維持することができます。

実際の応用例

Prettierを活用することで、プロジェクト全体でコードスタイルの一貫性を保ちながら、開発効率を大幅に向上させることができます。ここでは、実際のプロジェクトにおけるPrettierの具体的な応用例を紹介し、その効果を解説します。

応用例1: 大規模プロジェクトでの統一されたコーディングスタイル

大規模なJavaScriptプロジェクトでは、複数の開発者が協力してコードを作成します。そのため、コーディングスタイルがばらつきやすく、コードの可読性が低下することがあります。Prettierを導入することで、プロジェクト全体で統一されたコーディングスタイルを強制し、次のようなメリットが得られます。

コードレビューの効率化

統一されたコーディングスタイルにより、コードレビューの際にスタイルに関する指摘が減り、本質的なロジックや機能に集中できるようになります。これにより、レビューの効率が向上し、開発スピードが加速します。

新しい開発者のスムーズな参加

新しい開発者がプロジェクトに参加する際、統一されたスタイルがあれば、プロジェクトのコーディング規約を理解する手間が省け、すぐに貢献できるようになります。これにより、チーム全体の生産性が向上します。

応用例2: CI/CDパイプラインでの自動化

CI/CDパイプラインにPrettierを組み込むことで、コードスタイルのチェックと自動フォーマットを完全に自動化できます。例えば、GitHub ActionsやGitLab CIを使用して、以下のようなワークフローを設定することができます。

スタイルチェックの自動実行

コードがリポジトリにプッシュされた際に、自動的にPrettierが実行され、コードスタイルが適切であるかを確認します。これにより、スタイルに関するエラーが事前に検出され、開発者は早い段階で修正することができます。

マージ前の自動フォーマット

プルリクエストが作成された時点で、Prettierが自動的に実行され、コードが一貫したスタイルにフォーマットされます。このプロセスにより、マージ前にスタイルのばらつきを防ぎ、リポジトリ全体のコード品質が保たれます。

応用例3: 教育現場での利用

Prettierは、プログラミング教育においても非常に有用です。コーディングスタイルの統一は、初心者にとって学習の一貫性を保つために重要です。以下のようにPrettierを活用できます。

スタイルガイドの導入

教育現場では、スタイルガイドを設定しておくことで、学習者が統一されたスタイルでコードを書く習慣を身につけることができます。Prettierを使って自動的にスタイルを整えることで、学習者はスタイルの違いに悩むことなく、コードのロジックに集中できます。

コードコンペティションでの公平な評価

プログラミングコンペティションにおいて、参加者のコードスタイルが統一されていれば、審査員はコードの内容に集中して評価を行うことができます。Prettierを使用してすべての提出コードを一貫したスタイルにフォーマットすることで、公平な評価が可能になります。

応用例4: オープンソースプロジェクトでの採用

オープンソースプロジェクトでは、多くの異なる背景を持つ開発者が参加するため、コーディングスタイルが統一されないことがよくあります。Prettierを導入することで、プロジェクト全体でスタイルを統一し、以下のようなメリットを得ることができます。

コントリビューションのハードルを下げる

Prettierを使用することで、新しいコントリビューターがプロジェクトに参加しやすくなります。彼らはコーディングスタイルについて心配する必要がなく、コードの内容に集中して貢献できます。

プロジェクトの信頼性向上

統一されたコーディングスタイルにより、プロジェクト全体のコードが整然としたものになります。これにより、プロジェクトの信頼性が向上し、他の開発者からの評価も高まります。

これらの応用例を通じて、Prettierがどれほど強力であり、さまざまな開発環境で有益であるかが理解できるでしょう。Prettierを活用することで、プロジェクトの成功を後押しし、開発チーム全体の生産性を大幅に向上させることができます。

他のフォーマッターとの比較

コードフォーマッターには、Prettier以外にもさまざまなツールが存在します。それぞれのツールには異なる特徴があり、プロジェクトのニーズに応じて最適なフォーマッターを選ぶことが重要です。ここでは、Prettierと他の一般的なコードフォーマッターとの比較を通じて、Prettierの優れた点を強調します。

ESLintとの比較

ESLintは、JavaScriptコードの静的解析ツールであり、フォーマットだけでなく、コードの品質やスタイルの問題を検出し、修正する機能を持っています。PrettierとESLintは相補的に使われることが多いですが、フォーマットにおいては以下の違いがあります。

フォーマット専用 vs. 静的解析

Prettierはコードのフォーマットに特化しており、インデントやスペース、改行の位置などを一貫したルールに基づいて自動的に整形します。一方、ESLintは主にコード品質やバグの検出に焦点を当てており、フォーマットに関するルールも設定できますが、カスタマイズが必要です。

設定のシンプルさ

Prettierは無設定でもすぐに使い始められるように設計されており、ほとんどのプロジェクトで一貫した結果を提供します。ESLintは詳細なルール設定が必要で、プロジェクトに合わせたカスタマイズが多くなる傾向があります。

Beautifyとの比較

Beautifyは、コードフォーマットツールとして長く使われているツールですが、近年ではPrettierに取って代わられるケースが増えています。以下のポイントで両者を比較します。

フォーマットの一貫性

Beautifyは、多くの設定オプションを提供しますが、これが逆にフォーマット結果にばらつきを生む可能性があります。Prettierは、意図的に設定オプションを減らし、あらゆるケースで一貫したフォーマットを提供するよう設計されています。

対応言語の広さ

Prettierは、JavaScriptだけでなく、HTML、CSS、Markdown、YAMLなど、多くの言語に対応しており、プロジェクト全体で統一されたスタイルを維持するのに役立ちます。Beautifyも複数の言語に対応していますが、Prettierほどの広範な言語サポートはありません。

StandardJSとの比較

StandardJSは、JavaScriptにおけるスタイルガイドを提供するツールであり、そのガイドラインに基づいたコードフォーマットと品質チェックを行います。

厳格なスタイルガイド vs. 柔軟なフォーマット

StandardJSは、特定のスタイルガイドに従うことを強制し、開発者に意図したとおりのコードスタイルを保つことを求めます。Prettierは、特定のスタイルガイドに依存せず、プロジェクトに合わせた柔軟なフォーマットが可能です。

組み合わせの容易さ

StandardJSは、ESLintや他のツールと組み合わせて使うことができますが、PrettierとESLintのように自然に補完し合う関係ではありません。Prettierは、標準設定を持つESLintと組み合わせることで、コードの品質チェックとフォーマットを同時に実現できます。

Prettierの優位性

以上の比較から、Prettierの優位性は以下の点にあります。

シンプルな導入と一貫したフォーマット

Prettierは、初期設定が不要で、一貫したフォーマットを提供します。これにより、開発チーム全体で統一されたコードスタイルを維持しやすくなります。

幅広い言語サポート

Prettierは、JavaScriptだけでなく、HTML、CSS、Markdownなど、さまざまな言語に対応しており、プロジェクト全体でのスタイル統一が可能です。

他ツールとの相補性

Prettierは、ESLintなどのツールと組み合わせることで、コードフォーマットと品質チェックを同時に行うことができ、開発プロセスの効率化に貢献します。

Prettierは、シンプルさと一貫性、そして幅広い言語サポートにおいて他のフォーマッターを上回るツールであり、特に大規模なプロジェクトやチーム開発においてその価値を発揮します。これにより、開発者はコードの内容に集中し、スタイルの違いによる摩擦を最小限に抑えることができます。

ベストプラクティス

Prettierを効果的に利用するためには、いくつかのベストプラクティスを取り入れることが重要です。これらのプラクティスを実践することで、プロジェクト全体のコード品質を向上させ、チームの開発効率を高めることができます。

1. プロジェクトルートに設定ファイルを配置する

Prettierの設定ファイル（例: .prettierrc、prettier.config.jsなど）は、プロジェクトのルートディレクトリに配置します。これにより、プロジェクト内のすべての開発者が同じ設定を共有し、一貫したフォーマットが適用されます。

設定ファイルの例

以下は、標準的な.prettierrc設定ファイルの例です。

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true
}

この設定は、ほとんどのプロジェクトで一貫したスタイルを提供します。

2. コミット前に自動フォーマットを行う

Gitフックを使用して、コードがコミットされる前に自動的にPrettierを実行することを推奨します。これにより、フォーマットが適用されていないコードがリポジトリにコミットされるのを防ぎます。

Huskyとlint-stagedの利用

huskyとlint-stagedを組み合わせて使用することで、コミット前にPrettierを自動的に実行できます。

npm install --save-dev husky lint-staged

次に、package.jsonに以下の設定を追加します。

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "*.js": ["prettier --write", "git add"]
}

この設定により、JavaScriptファイルがコミットされる前にフォーマットが適用されます。

3. エディタでの自動フォーマットを有効にする

エディタで保存時にPrettierを自動的に実行する設定を有効にすることで、手動でのフォーマットを不要にし、常にフォーマットされた状態を維持できます。

VS Codeでの設定例

Visual Studio Codeでは、以下の設定を行うことで保存時に自動フォーマットを適用できます。

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"

この設定により、ファイルを保存するたびにPrettierが実行されます。

4. CI/CDパイプラインにPrettierを統合する

CI/CDパイプラインにPrettierを統合することで、コードがリモートリポジトリにプッシュされる前に自動的にフォーマットチェックを行うことができます。これにより、常に一貫したコードスタイルが保たれます。

GitHub Actionsでの設定例

GitHub Actionsを使用してPrettierを実行するには、以下の設定を.github/workflows/prettier.ymlファイルに追加します。

name: Prettier Check

on: [push, pull_request]

jobs:
  prettier:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'
      - run: npm install
      - run: npx prettier --check "src/**/*.js"

この設定により、プッシュまたはプルリクエスト時にPrettierが実行され、コードが適切にフォーマットされているかをチェックします。

5. ドキュメントにPrettierの使用方法を明記する

プロジェクトのドキュメントにPrettierの使用方法や設定、実行手順を明記することで、すべての開発者が統一されたスタイルで作業できるようになります。また、Prettierのバージョンや設定オプションをドキュメントに記載しておくことで、環境の違いによるフォーマットの差異を防ぐことができます。

README.mdに記載する内容の例

# Prettier Usage

This project uses Prettier to maintain consistent code formatting.

## Installation
Run the following command to install Prettier:

bash
npm install –save-dev prettier

## Running Prettier
To format all JavaScript files, run:

bash
npx prettier –write “src/*/.js”

Prettier automatically runs on file save in Visual Studio Code. Ensure you have the appropriate settings in `.prettierrc` and VS Code settings.

このように、Prettierの使用方法をドキュメント化することで、プロジェクトに参加するすべての開発者が統一されたスタイルで作業を進めることができます。

これらのベストプラクティスを導入することで、Prettierを最大限に活用し、プロジェクト全体のコード品質と開発効率を向上させることができます。

演習問題

Prettierの使い方や設定を理解した後は、実際に手を動かしてみることが重要です。以下の演習問題を通じて、Prettierの基本的な操作と応用方法を練習してみましょう。

演習問題1: Prettierのインストールと基本設定

  1. プロジェクトを作成する
    任意のディレクトリに新しいJavaScriptプロジェクトを作成し、npm init -yコマンドを実行してpackage.jsonファイルを生成してください。
  2. Prettierをインストールする
    PrettierをdevDependenciesに追加します。以下のコマンドを使用してください。
   npm install --save-dev prettier
  1. 基本設定を作成する
    プロジェクトのルートに.prettierrcファイルを作成し、以下の設定を追加してください。
   {
     "printWidth": 80,
     "tabWidth": 2,
     "useTabs": false,
     "semi": true,
     "singleQuote": true
   }
  1. サンプルコードのフォーマットを適用する
    index.jsファイルを作成し、次のような非フォーマット状態のJavaScriptコードを記述します。
   const helloWorld = function() {console.log("Hello, World!")}
   helloWorld()
  1. Prettierを実行してコードをフォーマットする
    以下のコマンドを実行して、index.jsファイルをフォーマットしてください。
   npx prettier --write index.js

フォーマット後のコードが整形されていることを確認してください。

演習問題2: エディタでの自動フォーマット設定

  1. エディタ設定の確認
    使用しているコードエディタ（VS Codeなど）で、保存時に自動フォーマットが実行されるように設定してください。たとえば、VS Codeでは以下の設定を追加します。
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode"
  1. フォーマットの動作確認
    index.jsファイルに新しいコードを追加し、保存時にPrettierが自動的に実行されることを確認します。
   function add(a, b) {return a + b}
   console.log(add(2, 3))
  1. 自動フォーマットの結果を確認する
    コードが保存された後、インデントやスペースが適切に整形されているか確認してください。

演習問題3: CI/CDでのPrettier設定

  1. GitHub Actionsの設定ファイルを作成する
    プロジェクトのルートに.github/workflows/prettier.ymlを作成し、以下の内容を追加してください。
   name: Prettier Check

   on: [push, pull_request]

   jobs:
     prettier:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v2
         - name: Install Node.js
           uses: actions/setup-node@v2
           with:
             node-version: '14'
         - run: npm install
         - run: npx prettier --check "src/**/*.js"
  1. CI環境でのテスト
    変更をGitHubリポジトリにプッシュし、GitHub Actionsが正しく実行されるか確認します。フォーマットが適切でない場合、アクションが失敗し、修正が必要であることが通知されます。

演習問題4: 複雑なプロジェクトでのPrettier設定

  1. プロジェクトに新しい言語のサポートを追加する
    style.cssやindex.htmlなどの新しいファイルをプロジェクトに追加し、それぞれにフォーマットが適用されるように設定します。
  2. Prettierの設定を拡張する
    .prettierrcファイルを更新し、CSSやHTMLファイルのフォーマット設定を追加してください。
   {
     "printWidth": 80,
     "tabWidth": 2,
     "useTabs": false,
     "semi": true,
     "singleQuote": true,
     "htmlWhitespaceSensitivity": "ignore"
   }
  1. 複数ファイルの一括フォーマット
    以下のコマンドを実行して、プロジェクト内のすべてのファイルを一括でフォーマットします。
   npx prettier --write "src/**/*.{js,css,html}"

すべてのファイルが適切にフォーマットされていることを確認してください。

これらの演習を通じて、Prettierの基本的な操作から、プロジェクトへの応用方法までを実践的に学ぶことができます。実際に手を動かしてみることで、Prettierを効果的に活用できるようになり、プロジェクト全体のコード品質を向上させるスキルを身につけることができます。

まとめ

本記事では、JavaScriptプロジェクトにおけるPrettierの活用方法について詳しく解説しました。Prettierを使用することで、コードフォーマットを自動化し、プロジェクト全体で一貫したコーディングスタイルを維持することができます。導入から設定、エディタやCI/CDとの連携、トラブルシューティング、他のフォーマッターとの比較まで、多岐にわたるトピックをカバーしました。

Prettierを効果的に活用することで、開発効率を向上させ、チーム全体のコード品質を保つことができます。これからもPrettierを最大限に活用して、より良いコードベースを維持していきましょう。

JavaScript
JavaScript コードフォーマット Prettier

コメント

コメントする

目次