投稿日:2022/11/24 最終更新日:2022/11/24
誰でもすぐに出来るReactのベストプラクティス集
Reactを扱う際のモダンな扱い方やベストプラクティスをまとめました。
周知の内容がほとんどですが、改めて問題なく使用出来ているか確認してみるのも良いでしょう。
テンプレートリテラルを使う
// ES5
var fluit = "apple";
console.log("This is " + fluit);
// ES6
const fluit = "apple";
console.log(`This is ${fluit}`);オブジェクトの定義方法
var name = "Ichiro";
var age = 10;
// ES5
var person = {
name: name,
age: age,
};
// ES6
const person = { name, age }; コンポーネント名はパスカル ケースにする
パスカルケースは複合語やフレーズ（句）、文を一語に繋げて表記する際に、語全体の先頭も含め各構成語の先頭を大文字にする方式です。
const helloText = () => <div>Hello</div>; // ✕
const HelloText = () => <div>Hello</div>; // 〇IDとクラス名はケバブケースにする
ケバブケースは単語間をハイフンでつなげる表記方法のことです。
<div className="hello_word" id="hello_world">Hello World</div>
<div className="hello-word" id="hello-world">Hello World</div> ※個人的にはダブルクリックでコピーしやすいので前者の書き方をよく使います
変数名と関数名はキャメルケースにする
const walking_time = 10; // ✕
const walkingTime = 10; // 〇
const get_number_sum = (a, b) => a + b; // ✕
const getNumberSum = (a, b) => a + b; // 〇インラインでCSSは書かない
const text = <div style={{ fontSize: "12px" }}>Hello World</div>; // △
const text = <div className="head_text">Hello World</div>; //〇※個人的にはCSS Modulesをよく使います
useEffectではイベントリスナーを常に削除する
const hello = () => console.log("Hello World");
useEffect(() => {
document.addEventListener("click", hello);
return () => document.removeEventListener("click", hello);
}); コードを書く習慣をつくる
Reactアプリの中で、複数のタイミングでユーティリティが必要な場合があります。
このような場合、helper-functions.jsやutils.jsなどのファイルにヘルパー関数を記述し、使いたい場所でimportしてその関数を呼び出すと効率的に対処できます。
オブジェクトの分割代入を使う
var member = {
name: "Ichiro",
age: 10,
};
// ES5
var name = member.name;
var age = member.age;
// ES6
const { name, age } = member; Propsを分解する
// ✕
const Details = (props) => {
return (
<div>
<p>{props.name}</p>
<p>{props.age}</p>
</div>
);
};
// 〇
const Details = ({ name, age }) => {
return (
<div>
<p>{name}</p>
<p>{age}</p>
</div>
);
}; フォルダーの構造に考慮する
開発する人や開発環境によって異なってきますが、重要なことです。
以下のフォルダ構成は一例です。
Assets Folder
Layouts Folder
Components Folder
Pages Folder
Middleware Folder
Routes Folder
Config Folder
Utils Folder
プロジェクトごとに作成するフォルダーは変更されると思いますが、すべてのファイルが一元化されて、全開発者が簡単に理解できるように常にフォルダ構造を維持することを意識することが大事です。
ES6を使用する
// ES5
function getSumNumber(a, b) {
return a + b;
}
// ES6
const getSumNumber = (a, b) => a + b;map関数ではキープロップを付ける
const students = [{id: 1, name: 'Ichiro'}, {id: 2, name: 'Jiro'}];
// returnをする関数コンポーネント内
<ul>
{students.map(({id, name}) => (
<li key={id}>{name}</li>
))}
</ul>; オブジェクトと配列のnull/undefinedをチェックする
const person = {
name: "Ichiro",
city: "Tokyo",
};
console.log("Age", person.age); // エラー
console.log("Age", person.age ? person.age : 10); // 〇
console.log("Age", person.age ?? 10); // 〇
const oddNumbers = undefined;
console.log(oddNumbers.length); // エラー
console.log(oddNumbers.length ? oddNumbers.length : "this is undefined"); // 〇
console.log(oddNumbers.length ?? "this is undefined"); // 〇 DOM操作はなるべく避ける
DOM操作をすることはReactでは避けて、出来る限りStateを扱うようにしましょう。
// △
<div id="message">Please enter a valid value</div>
document.getElementById("message").visibility = visible;
// 〇
const [valid, setValid] = useState(false);
<div hidden={valid}>Please enter a valid value</div>;State未使用の場合は関数コンポーネントを推奨
Stateを使用する必要がない場合は、クラスコンポーネントではなく関数コンポーネントを使用すると良いです。
React Hooksの知識があれば、関数コンポーネントでステートも簡単に扱えるはずです。
三項演算子を使用する
// △
if (hour < 10) {
greeting = "Good Morning";
} else {
greeting = "Hello";
};
// 〇
greeting = hour < 10 ? "Good Morning" : "Hello";=== 演算子でなく == 演算子を使用する
2つの値を比較する場合、両方の値とデータ型を厳密にチェックするようにしましょう。
"1" == 1 ? true : false; // true
"1" === 1 ? true : false; // falseまとめ
皆さんは問題なくReactを扱えているでしょうか？
ベストプラクティスは数多ありますので、一概にこの記事の内容が全て正しいというわけではありませんが、モダンな扱い方としてはポピュラーなものばかりですので、知らなかった内容はぜひ覚えておくといいかもしれません。
※参考元のサイトが404になっていたため、参考URLを載せることが出来ませんでした。
読んでいてまとめておくと便利だなと思ったので、自分で記事にしてみました。
