Node.js ファイル命名規約

JavaScript, Node.js のファイル・フォルダ命名規約について (日本語)

JavaScript と Node.js のプロジェクトにおけるファイル・フォルダの命名規約は、コードの可読性とメンテナンス性を向上させるために重要です。以下に、一般的な命名規約について説明します。

ファイル名

• ファイル拡張子
  JavaScript ファイルには .js 拡張子を使用します。
• Camel Case
  ファイル名には、単語の頭文字を大文字にして、残りの文字を小文字にする「キャメルケース」を使用します。
  • 例: myFile.js, anotherFile.js

フォルダー名

• 特定の役割
  フォルダーは、プロジェクトの構造や機能に応じて特定の役割を持つ場合がありますが、一般的な命名規約はありません。
  • 例: components, utils, config など
• Camel Case
  フォルダー名にもキャメルケースを使用します。
  • 例: myFolder, anotherFolder

具体的な例

project-directory
├── index.js
├── components
│   ├── Button.js
│   ├── Input.js
│   └── Dropdown.js
├── utils
│   ├── helpers.js
│   └── validators.js
├── config
│   └── settings.json

注意

• 読みやすさ
  ファイル名・フォルダ名は、コードの目的や内容を反映し、読みやすいものにするよう心がけましょう。
• チームルール
  チームや組織独自の命名規約がある場合は、それに従ってください。
• 一貫性
  プロジェクト内で命名規約を統一的に適用することが重要です。

Node.js ファイル命名規約の例 (日本語)

Node.js プロジェクトにおけるファイル命名規約の具体的な例を以下に示します。

• 設定ファイル
  アプリケーションの設定を管理するファイルは、通常 config.js や settings.json のような名前が付けられます。

  // config.js
  module.exports = {
    port: 3000,
    database: {
      host: 'localhost',
      user: 'myuser',
      password: 'mypassword',
      database: 'mydb'
    }
  };
  

• コンポーネントファイル
  再利用可能な UI 要素やロジックをカプセル化するファイルは、通常 Component.js のような名前が付けられます。

  // Button.js
  const Button = ({ label, onClick }) => {
    return (
      <button onClick={onClick}>{label}</button>
    );
  };
  
  export default Button;
  

• インデックスファイル
  プロジェクトのメインエントリーポイントとなるファイルは通常 index.js と命名されます。

  // index.js
  const express = require('express');
  const app = express();
  
  app.get('/', (req, res) => {
    res.send('Hello, World!');
  });
  
  app.listen(3000, () => {
    console.log('Server listening on port 3000   ');
  });
  

• 設定フォルダ
  設定ファイルを格納するフォルダは、通常 config と命名されます。
• コンポーネントフォルダ
  コンポーネントファイルを集めるフォルダは、通常 components と命名されます。

ケバブケース (Kebab Case)

• 単語をハイフンで区切る命名法です。

スネークケース (Snake Case)

パスカルケース (Pascal Case)

• 単語のすべての文字を大文字にする命名法です。

• フォルダー名についても、ケバブケース、スネークケース、パスカルケースを使用することができます。

project-directory
├── index.js
├── components
│   ├── ButtonComponent.js
│   ├── InputComponent.js
│   └── DropdownComponent.js
├── utils
│   ├── helpers.js
│   └── validators.js
├── config
│   └── settings.json