26.0K 655 413

Đã đăng vào Jan 10th, 2023 10:24 a.m. 1 phút đọc

開発効率の向上に役立つ20の有用なJavaScriptのヒント

開発者として、あなたは常にスキルを向上させ、効率を高める方法を探しています。この記事では、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プロパティを使用して要素のカスタムデータ属性にアクセスする

これらのヒントがあなたの開発効率を向上させ、スキルを次のレベルに引き上げるのに役立てることを願っています。ハッピー・コーディング！

Mình hy vọng bạn thích bài viết này và học thêm được điều gì đó mới.

Donate mình một ly cafe hoặc 1 cây bút bi để mình có thêm động lực cho ra nhiều bài viết hay và chất lượng hơn trong tương lai nhé. À mà nếu bạn có bất kỳ câu hỏi nào thì đừng ngại comment hoặc liên hệ mình qua: Zalo - 0374226770 hoặc Facebook. Mình xin cảm ơn.

Momo: NGUYỄN ANH TUẤN - 0374226770

TPBank: NGUYỄN ANH TUẤN - 0374226770 (hoặc 01681423001)