JavaScriptスタイルガイド

変数宣言と値の設定

VARIABLEの書き方にCAMELCASEフォーマットを使用する。

//JavaScriptコミュニティ内での規定された規則に従うことで、可読性、一貫性、互換性、および遵守が促進されます。CamelCaseの命名規則に従うことで、開発者はよりクリーンで保守しやすく、理解しやすいJavaScriptコードを作成することができます。

//bad
	const leftbutton = document.querySelector(".c-button__left");


//good
	const leftButton = document.querySelector(".c-button__left");

マジックナンバーを使わず、ちゃんとconstやletにアサインして使う。

//定数や変数に数値を割り当てることで、開発者はコードの品質、可読性、保守性を向上させ、コードベースのエラーやバグの発生確率を低減することができます。マジックナンバーを避け、変数の命名や値の割り当てに最善の方法を遵守することは、より堅牢で保守しやすいコードにつながります。

//bad
	function calculateArea(radius) {
	  return Math.PI * radius * radius;
	}


//good
	const PI = Math.PI;
	function calculateArea(radius) {
	  return PI * radius * radius;
	}

コーディングスタイル

変数宣言はそれぞれ別の行目で書く

//変数宣言をそれぞれ独立した行に配置することで、コード内で明確で整然とした構造を維持することができます。
//この区切りは、異なる変数とそれぞれの値を区別しやすくし、より構造化され、視覚的に魅力的なコードレイアウトを実現します。

//bad
	const popUpBtn = document.querySelector(".p-popup__btn"), popUpBody = document.querySelector(".p-popup__body"), popUpImage = document.querySelector(".p-popup__body__image"),

//good
	const popUpBtn = document.querySelector(".p-popup__btn"), 
				popUpBody = document.querySelector(".p-popup__body"), 
				popUpImage = document.querySelector(".p-popup__body__image"),
				//もしくは
	const popUpBtn = document.querySelector(".p-popup__btn");
	const popUpBody = document.querySelector(".p-popup__body");
	const popUpImage = document.querySelector(".p-popup__body__image");

セミコロンで文を終える

//JavaScriptではASIによるいくつかのケースでセミコロンを省略することが可能ですが、コードの明確さを確保し、エラーを防ぎ、互換性を維持し、JavaScript開発における最良の実践に従うために、文の最後にセミコロンを含めることが推奨されています。

//bad		
	const PI = Math.PI
	

//good
	const PI = Math.PI;

コードの最適化

エラーを気付くためにstrictモードを使う

//JavaScriptのstrictモードを使用することは、エラーのキャッチ、コード品質の向上、セキュリティの強化、ベストプラクティスの促進、将来の互換性の確保、パフォーマンスの最適化に不可欠です。

//good
"use strict";

function myFunction() {
  // Code in strict mode
}

var を使うよりconstやletを使う

//constとletはブロックスコープであり、それらは定義されたブロック（中括弧で囲まれたもの）に限定されています。
//これにより、変数の巻き上げを防ぎ、意図しないスコープ外での変数宣言のリスクを減らすのに役立ちます。

//bad
	var largeBtn = document.querySelector(".c-button");
	

//good
let largeBtn = document.querySelector(".c-button");
(or)
const largeBtn = document.querySelector(".c-button");

== より ===を使う

//bad
	if(window.innerWidth == 740) {}

//good
	if(window.innerWidth === 740) {}

chaining operator (?)を使う

//bad
//chaining operator使用しない場合
const user = {
  name: 'John',
  address: {
    city: 'New York',
    zipCode: 12345
  }
};

const city = user.address ? user.address.city : 'Unknown';
console.log(city); // Output: New York

//good
// chaining operator使用する場合
const user = {
  name: 'John',
  address: {
    city: 'New York',
    zipCode: 12345
  }
};

const cityChained = user.address?.city;
console.log(cityChained); // Output: New York