こんにちは、私は東京からのフルスタックWebデベロッパーであるTUANです。
今後の便利で面白い記事を見逃さないように、私のブログをフォローしてください。
開発者として、あなたは常にスキルを向上させ、効率を高める方法を探しています。この記事では、20の有用なJavaScriptのヒントを共有します。読みやすさを改善する簡単な方法から、より高度なテクニックまで、これらのヒントはあなたのプロジェクトで役立つこと間違いありません。
1. 番号の区切り
大きな数字を扱う場合、一目で読み取りや理解が難しいことがあります。読みやすさを改善する簡単な方法の1つは、アンダースコアを区切り文字として使うことです。
const largeNumber = 1_000_000_000;
console.log(largeNumber); // 1000000000
2. イベントリスナーは一度だけ実行されます
時には要素にイベントリスナーを追加したいが、一度だけ実行したい場合があります。これを実現するには、onceオプションを使用できます。
element.addEventListener('click', () => console.log('I run only once'), {
once: true
});
3. console.log変数ラッパー
console.log()を使用する場合、引数を大かっこで囲むことで、変数名と変数値の両方を確認できます。これはデバッグやコードの理解を深めるのに役立ちます。
const name = "Maxwell";
console.log({ name });
4. Caps Lockがオンかどうかを確認する
KeyboardEvent.getModifierState()メソッドを使用することで、Caps Lockがオンかどうかを検出できます。これは、ログインフォームや文字の大文字小文字が重要なアプリケーションを作成する場合に便利です。
const passwordInput = document.getElementById('password');
passwordInput.addEventListener('keyup', function (event) {
if (event.getModifierState('CapsLock')) {
// CapsLock is open
}
});
5. 配列から最小値/最大値を取得する
配列内で最小値または最大値を求める場合は、スプレッド演算子（...）を組み合わせてMath.min()やMath.max()関数を使用できます。
const numbers = [5, 7, 1, 4, 9];
console.log(Math.max(...numbers)); // 9
console.log(Math.min(...numbers)); // 1
6. マウスの位置を取得する
MouseEventオブジェクトのclientXとclientYプロパティを使用することで、現在のマウスの位置の座標に関する情報を取得できます。
document.addEventListener('mousemove', (e) => {
console.log(`Mouse X: ${e.clientX}, Mouse Y: ${e.clientY}`);
});
7. クリップボードにコピーする
クリップボード API を使用して「クリップボードにコピー」の機能を作成することができます。これを行う方法の例は次のようになります：
function copyToClipboard(text) {
navigator.clipboard.writeText(text);
}
8. 条件判断文を短くする
条件が真のときだけ実行される関数がある場合は、&&の短縮記法を使ってもっと簡潔に書けます。例えば:
// Common writing method
if (condition) {
doSomething();
}
// Abbreviated
condition && doSomething();
9. console.table()を使って整形済みの表を作成する
console.table()メソッドは、コンソール内にテーブル形式でデータを出力するために使用できます。構文は以下の通りです:
console.table(data [, columns]);
使用方法の例を次に示します:
function Person(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
const p1 = new Person("Mark", "Smith");
const p2 = new Person("Maxwell", "Siegrist");
const p3 = new Person("Lucy", "Jones");
console.table([p1, p2, p3], ["firstName"]);
10. 文字列を数値に変換する
単項プラス演算子 (+) を使用して、文字列を数値にすばやく変換できます。 例えば:
const str = '508';
console.log(+str) // 508;
11. 配列の重複削除
スプレッド演算子とSetオブジェクトを使用して配列から重複を削除することができます。例:
const numbers = [2, 3, 5, 5, 2];
console.log([...new Set(numbers)]); // [2, 3, 5]
12. 配列からダミーの値を除外する
配列からダミーの値(undefined、null、NaNなど)を除外したい場合は、filter()メソッドを使用できます。例:
const myArray = [1, undefined, NaN, 2, null, '@maxwell', true, false];
const filteredArray = myArray.filter(Boolean);
console.log(filteredArray); // [1, 2, '@maxwell', true, false]
13. URLクエリ文字列を作成する
URLSearchParamsオブジェクトを使用して、オブジェクトからURLクエリ文字列を作成できます。例:
const queryObject = {
page: 2,
search: 'javascript'
};
const searchParams = new URLSearchParams(queryObject);
const queryString = searchParams.toString();
console.log(queryString); // "page=2&search=javascript"
14. 要素がビューポートに含まれるか確認する
getBoundingClientRect()メソッドとwindow.innerWidth、window.innerHeightプロパティを使用して、要素がビューポートに含まれるか確認することができます。例:
function isInViewport(element) {
const rect = element.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= window.innerHeight &&
rect.right <= window.innerWidth
);
}
15. 関数をスロットルする
関数が呼び出される頻度を制限したい場合、setTimeout()メソッドを使用して「スロットル」関数を作成できます。例:
function throttle(callback, delay) {
let timeout;
return function() {
const context = this;
const args = arguments;
if (!timeout) {
timeout = setTimeout(function() {
callback.apply(context, args);
timeout = null;
}, delay);
}
};
}
const myThrottledFunc = throttle(function() {
console.log('I am throttled');
}, 1000);
myThrottledFunc(); // Will log "I am throttled"
myThrottledFunc(); // Will not log
setTimeout(myThrottledFunc, 1500); // Will log "I am throttled" after 1500ms
16. Array.includes()を使って素早くメンバーシップを確認する
Array.includes()メソッドは、配列内に要素が含まれているかを素早く確認するために使用できます。indexOf()メソッドよりも簡潔です。例:
const numbers = [1, 2, 3, 4, 5];
console.log(numbers.includes(3)); // true
console.log(numbers.includes(6)); // false
17. Array.find()で最初に一致する要素を取得する
Array.find()メソッドは、特定の条件に一致する配列内の最初の要素を取得するために使用できます。例:
const numbers = [1, 2, 3, 4, 5];
const evenNumber = numbers.find(number => number % 2 === 0);
console.log(evenNumber); // 2
18. Object.values()でオブジェクトの値の配列を取得する
Object.values()メソッドは、オブジェクトの値の配列を取得するために使用できます。配列のようにオブジェクトの値を操作する必要がある場合に便利です。例:
const person = {
firstName: 'Maxwell',
lastName: 'Siegrist',
age: 30
};
console.log(Object.values(person)); // ['Maxwell', 'Siegrist', 30]
19. Array.reduce()で配列を合計する
Array.reduce()メソッドは、各要素に関数を適用して配列を単一の値に縮小するために使用できます。配列を合計するにはどうすればよいかの例:
const myArray = [10, 20, 30, 40];
const reducer = (total, currentValue) => total + currentValue;
console.log(myArray.reduce(reducer)); // 100
20. datasetプロパティで要素のカスタムデータ属性にアクセスする
datasetプロパティは、要素のカスタムデータ属性（data-*）にアクセスするために使用できます。例:
<div id="user" data-name="Maxwell" data-age="32" data-something="Some Data">
Hello Maxwell
</div>
<script>
const user = document.getElementById('user');
console.log(user.dataset);
// { name: "Maxwell", age: "32", something: "Some Data" }
console.log(user.dataset.name); // "Maxwell"
console.log(user.dataset.age); // "32"
console.log(user.dataset.something); // "Some Data"
</script>
結論
この記事では、開発効率を向上させるために役立つ20のJavaScriptのヒントを紹介しました。これらのヒントには次のようなものが含まれています:
- 大きな数字の読みやすさを改善するためにアンダースコアを区切り文字として使用する
- 一度だけ実行するイベントリスナーを追加する
console.logの引数を大括弧で囲むことで変数名と値を確認するKeyboardEvent.getModifierState()を使用してCaps Lockがオンかどうかを確認する- スプレッド演算子と
Math.min()、Math.max()を使用して配列内の最小値または最大値を見つける MouseEventオブジェクトのclientXとclientYプロパティを使用してマウスの位置を取得するClipboard APIを使用してクリップボードにコピーする&&ショートハンドを使用して条件判断文を短くするconsole.table()を使用してコンソールにテーブルを出力する- 単項プラス演算子を使用して文字列を数値に変換する
- スプレッド演算子と
Setオブジェクトを使用して配列から重複を削除する filter()メソッドを使用して配列からダミーの値を除外するURLSearchParamsオブジェクトを使用してURLクエリ文字列を作成するgetBoundingClientRect()メソッドとwindow.innerWidth、window.innerHeightプロパティを使用して要素がビューポートに含まれるか確認するsetTimeout()を使用して関数をスロットルするArray.includes()を使用して素早くメンバーシップを確認するArray.find()を使用して配列内で最初に一致する要素を取得するObject.values()を使用してオブジェクトの値の配列を取得するArray.reduce()を使用して配列を合計するdatasetプロパティを使用して要素のカスタムデータ属性にアクセスする
これらのヒントがあなたの開発効率を向上させ、スキルを次のレベルに引き上げるのに役立てることを願っています。ハッピー・コーディング！
いつものように、この記事を楽しんで新しいことを学んでいただけたと思います。
ありがとうございました。次の記事でお会いしましょう！
この記事が気に入ったら、いいねをして購読してサポートしてください。ありがとうございます。