JavaScript開発者が知っておくべき7つの省略記法最適化テクニック 😎
どの言語にも独自の特徴があり、最も使用されるプログラミング言語であるJavaScriptも例外ではありません。この記事では、コードをより良く書くのに役立つJavaScript省略記法最適化テクニックを多数紹介し、これらを見た時に驚かないようにしましょう。
1. 複数の文字列チェック
文字列が複数の値と等しいかどうかをチェックする必要がある場合は、非常に疲れることがあります。幸いなことに、JavaScriptにはこれを手伝ってくれる組み込みのメソッドがあります。
// 長い記法
const isVowel = (letter) => {
if (
letter === "a" ||
letter === "e" ||
letter === "i" ||
letter === "o" ||
letter === "u"
) {
return true;
}
return false;
};
// 省略記法
const isVowel = (letter) =>
["a", "e", "i", "o", "u"].includes(letter);
2. For-of と For-in ループ
For-of と For-in ループは、配列やオブジェクトをイテレートする際に、手動でインデックスやキーを追跡する必要がない素晴らしい方法です。
For-of
const arr = [1, 2, 3, 4, 5];
// 長い記法
for (let i = 0; i < arr.length; i++) {
const element = arr[i];
// ...
}
// 省略記法
for (const element of arr) {
// ...
}
For-in
const obj = {
a: 1,
b: 2,
c: 3,
};
// 長い記法
const keys = Object.keys(obj);
for (let i = 0; i < keys.length; i++) {
const key = keys[i];
const value = obj[key];
// ...
}
// 省略記法
for (const key in obj) {
const value = obj[key];
// ...
}
3. 真偽値チェック
変数が null、undefined、0、false、NaN、または空の文字列かどうかをチェックしたい場合は、論理否定(!)演算子を使用して、複数の条件を一度にチェックすることができます。これにより、変数が有効なデータを含んでいるかどうかを簡単にチェックできます。
// 長い記法
const isFalsey = (value) => {
if (
value === null ||
value === undefined ||
value === 0 ||
value === false ||
value === NaN ||
value === ""
) {
return true;
}
return false;
};
// 省略記法
const isFalsey = (value) => !value;
4. 三項演算子
JavaScrsssript コードを書く上で、三項演算子に出会ったことはあるでしょう。これは、if-else文を簡潔に書くための素晴らしい方法です。しかし、簡潔なコードを書くために、または複数の条件をチェックするために連鎖させることで使用することもできます。
// 長い記法
let info;
if (value < minValue) {
info = "Value is too small";
} else if (value > maxValue) {
info = "Value is too large";
} else {
info = "Value is in range";
}
// 省略記法
const info =
value < minValue
? "Value is too small"
: value > maxValue ? "Value is too large" : "Value is in range";
5. 関数呼び出し
三項演算子を使って、条件に基づいてどの関数を呼び出すかを決めることもできます。
重要な副注記: 関数の呼び出しシグネチャが同じでなければ、エラーに繋がるリスクがあるので注意が必要です。
function f1() {
// ...
}
function f2() {
// ...
}
// 長い記法
if (condition) {
f1();
} else {
f2();
}
// 省略記法
(condition ? f1 : f2)();
6. Switch省略法
長いswitchケースは、キーをスイッチ、値をリターン値として使用するオブジェクトを使って最適化することがよくあります。
const dayNumber = new Date().getDay();
// 長い記法
let day;
switch (dayNumber) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
}
// 省略記法
const days = {
0: "Sunday",
1: "Monday",
2: "Tuesday",
3: "Wednesday",
4: "Thursday",
5: "Friday",
6: "Saturday",
};
const day = days[dayNumber];
7. フォールバック値
||演算子は、変数のフォールバック値を設定するために使用することができます。
// 長い記法
let name;
if (user?.name) {
name = user.name;
} else {
name = "Anonymous";
}
// 省略記法
const name = user?.name || "Anonymous";
以上で終わりです！🎉
個人的な財務が難しいと感じていますか？私のInstagramをチェックして、Dollar Ninjaについてもっと知ってください。
高評価のフロントエンド開発フリーランサーが必要ですか？Upworkで私に連絡してください。
私が何に取り組んでいるのか知りたいですか？私の個人ウェブサイトとGitHubをチェックしてください。
私はデジタルノマドで、時々旅行します。私が何をしているのかをチェックするために、Instagramでフォローしてください。
私のブログでは、2週間ごとに新しい知識の断片をDevに投稿しています。
FAQ
これらは、私がよく受ける質問です。ですので、このFAQセクションがあなたの問題を解決することを願っています。
-
初心者ですが、フロントエンドWeb開発をどのように学べばいいですか？
次の記事を参考にしてください。 -
私をメンターしてもらえませんか？
申し訳ありませんが、既に多くの仕事に追われており、誰かをメンターする時間がありません。
こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/ruppysuppy/7-shorthand-optimization-tricks-every-javascript-developer-should-know-4fj5
