JavaScriptのコーディング規約とエディタ設定完全ガイド 初心者向けPrettierとESLint入門

1. JavaScriptのコーディング規約とは何か

1. JavaScriptのコーディング規約とは何か

JavaScriptのコーディング規約とは、プログラムの書き方を統一するためのルールのことです。たとえば、ノートに字を書くときに、行をそろえたり、見出しを決めたりすると読みやすくなります。それと同じで、JavaScriptでも書き方をそろえることで、読みやすく、修正しやすいプログラムになります。

コーディング規約を守ると、チーム開発でも安心です。だれが書いても同じような見た目になるため、バグを見つけやすくなります。JavaScript初心者にとっても、正しい書き方を身につける近道になります。

よく使われる考え方には、インデントを二つの空白にする、変数名は小文字から始める、文の終わりにセミコロンを付けるなどがあります。これらを自動で整えてくれるのがPrettierです。そして書き方の間違いをチェックするのがESLintです。

2. きれいな書き方の基本ルール

2. きれいな書き方の基本ルール

まずはJavaScriptの基本的なコーディング規約を見てみましょう。インデントとは、行の先頭に空白を入れて、階層をわかりやすくすることです。階段のようにそろえると読みやすくなります。

次の例は、インデントが整っている書き方です。

function greet(name) {
  if (name) {
    console.log("こんにちは " + name);
  }
}
greet("太郎");

実行結果は次の通りです。

こんにちは 太郎

変数名は意味がわかる名前にすることも大切です。aやbではなく、priceやuserNameのように役割が伝わる名前にします。これを命名規則と呼びます。JavaScriptでは、単語をつなげるときに二つ目の単語の最初を大文字にする方法がよく使われます。これをキャメルケースといいます。

3. Prettierとは何か

3. Prettierとは何か

Prettierは、JavaScriptのコードを自動整形するツールです。自動整形とは、ばらばらの書き方を決まった形にそろえてくれる機能です。たとえば、空白が多すぎたり少なすぎたりしても、保存するだけで整えてくれます。

次のように、わざとくずしたコードを書きます。

function add(a,b){console.log(a+b)}
add(3,5)

Prettierを使うと、次のように自動で整います。

function add(a, b) {
  console.log(a + b);
}
add(3, 5);

見た目がそろうだけでなく、セミコロンの付け忘れも防ぎやすくなります。JavaScript初心者にとっては、正しい形を体で覚える手助けになります。

4. ESLintとは何か

4. ESLintとは何か

ESLintは、JavaScriptの文法チェックやルール違反を教えてくれるツールです。たとえば、使っていない変数があると警告を出してくれます。これは、書き間違いや不要なコードを減らすためにとても役立ちます。

次の例を見てください。

let message = "こんにちは";
let unusedValue = 100;
console.log(message);

この場合、unusedValueは使われていないため、ESLintが注意を出します。これにより、無駄なコードを早めに発見できます。JavaScriptの品質向上にとても重要です。

ESLintには多くのルールがありますが、最初はおすすめ設定を使えば問題ありません。難しい設定は後から少しずつ覚えていけば大丈夫です。

5. エディタ設定の基本

5. エディタ設定の基本

エディタとは、プログラムを書くためのソフトです。代表的なものにVisual Studio Codeがあります。エディタにPrettierとESLintの拡張機能を入れると、保存するだけで自動整形やエラーチェックが行われます。

たとえば、保存時に自動整形を有効にすると、コードを書くたびにきれいな形になります。これにより、JavaScript学習の効率が上がります。

設定ファイルを作ることで、プロジェクトごとにルールを決めることもできます。たとえば、インデントを二つの空白にする設定は次のように書きます。

{
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true
}

このような設定により、チーム全員が同じコーディング規約でJavaScriptを書くことができます。

6. 初心者が気をつけるポイント

6. 初心者が気をつけるポイント

JavaScript初心者は、まず正しく動くコードを書くことを目標にします。しかし、同時にコーディング規約を意識すると、あとで大きな差が出ます。読みやすいコードは、未来の自分を助けます。

Prettierは見た目を整え、ESLintは中身をチェックします。この二つを組み合わせることで、エラーの少ない高品質なJavaScriptプログラムを作ることができます。

たとえば、条件分岐を書くときも、インデントをそろえるだけで理解しやすくなります。

let score = 75;

if (score >= 80) {
  console.log("合格");
} else {
  console.log("もう少し頑張りましょう");
}

実行結果は次の通りです。

もう少し頑張りましょう

このように、基本を守ることがJavaScript上達の近道です。コーディング規約、エディタ設定、Prettier、ESLintを活用して、読みやすく保守しやすいコードを書けるようになりましょう。

まとめ

まとめ

ここまで、JavaScriptのコーディング規約とエディタ設定、そしてPrettierとESLintの基本について学んできました。JavaScript初心者にとって、正しく動くプログラムを書くことはもちろん大切ですが、同時に読みやすいコードを書くことも非常に重要です。コーディング規約を守ることで、ソースコードの見た目が整い、バグの発見がしやすくなり、チーム開発でも安心して共有できるようになります。

JavaScriptのコーディング規約では、インデントをそろえること、キャメルケースで変数名を付けること、セミコロンの有無を統一することなど、基本的なルールがいくつもあります。これらを人の手で毎回意識するのは大変ですが、Prettierを導入すれば自動整形によってコードフォーマットを統一できます。さらにESLintを使えば、文法エラーや未使用変数の検出、危険な書き方の警告などを受け取ることができ、JavaScriptの品質向上につながります。

エディタ設定も重要なポイントです。Visual Studio CodeなどのエディタにPrettierとESLintの拡張機能を追加し、保存時に自動整形を有効にすることで、常に整ったJavaScriptコードを書く習慣が身につきます。設定ファイルを用意しておけば、プロジェクトごとにコーディング規約を固定でき、チーム開発でもルールの違いによる混乱を防ぐことができます。

JavaScript学習の初期段階でコーディング規約を身につけることは、将来的なスキル向上に大きく影響します。きれいなコードは読みやすく、保守しやすく、再利用もしやすいという特徴があります。特にWeb開発やフロントエンド開発では、複数人での開発が当たり前です。だからこそ、Prettierによる自動整形とESLintによる静的解析を組み合わせた開発環境は、現代のJavaScript開発に欠かせない存在です。

最後に、コーディング規約とエディタ設定を活用したシンプルなサンプルプログラムを確認しましょう。インデントやセミコロン、変数名の付け方に注目してください。

function calculateTotalPrice(price, taxRate) {
  const tax = price * taxRate;
  const totalPrice = price + tax;
  return totalPrice;
}

const itemPrice = 1000;
const taxRate = 0.1;

const result = calculateTotalPrice(itemPrice, taxRate);
console.log("合計金額は " + result + " 円です。");

実行結果は次の通りです。

合計金額は 1100 円です。

このように、関数名や変数名が意味のある名前になっており、インデントも統一されています。Prettierがコードフォーマットを整え、ESLintが問題点をチェックすることで、JavaScriptのコーディング規約を自然に守れる環境が完成します。JavaScript初心者の方も、ぜひエディタ設定を整えて、正しい書き方を習慣化してください。それが結果として、バグの少ない高品質なプログラム開発につながります。