Skip to content

front-end-coding.md

Latest commit

 

History

History
126 lines (92 loc) · 4.42 KB

front-end-coding.md

File metadata and controls

126 lines (92 loc) · 4.42 KB

コーディング規約

このコーディング規約は、コードの一貫性、可読性、保守性を高めるために制定されました。他の開発者が同様のルールを遵守できるよう作成されました。

  • Table of Content {:toc}

ドメインモデルのクラス化

  • ES6クラスを使用してドメインエンティティを定義する: Paper, Project, Property, Unit, Figure, Sample, Userなどのドメインエンティティを表すクラスを作成します。
  • データと関連メソッドをカプセル化する: 各クラスは、そのデータとデータ操作のためのメソッドを持ちます。
// 例:
class Paper {
  constructor(data) {
    this.title = data.title;
    // その他のプロパティ
  }
}

Vue.jsデータ内でのクラスインスタンスの使用

  • Vue.jsのdataオプションでクラスインスタンスを使用する: サーバーから取得したデータをクラスのコンストラクタに渡し、Vueインスタンスのデータとして設定します。
data() {
  return {
    project: new Project({{ project|safe }}),
    paper: new Paper({{ paper|safe }}),
    // その他のデータ
  };
},

一貫した命名規則

  • キャメルケースを使用: 変数名やメソッド名にはcamelCaseを使用します。
  • パスカルケースを使用: クラス名にはPascalCaseを使用します。
  • 意味のある名前を使用: 変数やメソッドの目的を明確に示す名前を付けます。
// 良い例:
let selectedFigure = '';
function changeGraph() { /*...*/ }

// 悪い例:
let selectedfig = '';
function changegraph() { /*...*/ }

データの論理的な整理

  • 関連データをグループ化する: フォームデータ、状態フラグ、メッセージなどを明確に区別します。
data() {
  return {
    // ドメインデータ
    project: ...,
    paper: ...,
    // フォームデータ
    caption: '',
    composition: '',
    // 状態フラグ
    isEditing: false,
    isSaving: false,
    // メッセージ
    errors: [],
    errorMessage: '',
    successMessage: '',
  };
},

クラス内でのデータ処理ロジックのカプセル化

  • データ処理ロジックをクラスのメソッド内に移動する: Vueインスタンス内のメソッドをシンプルに保ち、データ操作は関連するクラス内で行います。

JavaScriptのベストプラクティスの遵守

  • constとletの使用: 再代入しない変数にはconst、再代入が必要な場合はletを使用します。
  • アロー関数の活用: コンテキストを明確にするためにアロー関数を使用します。
  • エラーハンドリングの徹底: try...catchや.catch()を使用してエラーを適切に処理します。
axios.post('/api/endpoint', params)
  .then(response => {
    // 成功時の処理
  })
  .catch(error => {
    console.error(error);
    // エラー時の処理
  });

他にもあると思います。

テンプレートリテラルの使用

  • 文字列の結合や改行にはテンプレートリテラルを使用する: 可読性を高めます。
const message = `Hello, ${user.name}!`;

一貫したインデントとフォーマット

  • スペース2つのインデントを使用する: チーム内でコードのフォーマットを統一します。

リンターの導入（したい）

  • ESLintなどのリンティングツールを使用する: コードスタイルの統一と潜在的なエラーの早期発見に役立ちます。

コードのテスト（したい）

  • ユニットテストの実装: 重要な機能やメソッドにはテストを追加し、コードの信頼性を高めます。

APIとデータ構造のドキュメント化（本リポジトリにて行う予定）

  • 開発者向けドキュメントを整備する: APIエンドポイントやデータ構造を明確にし、他の開発者が理解しやすいようにします。

これらのガイドラインに従うことで、コードの品質と開発効率が向上し、プロジェクト全体の保守性が高まります。チーム全体でこの規約を共有し、一貫したコーディングスタイルを維持してください。