- vừa được xem lúc

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

0 0 11

Người đăng: NGUYỄN ANH TUẤN

Theo Viblo Asia

こんにちは、私は東京からのフルスタック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オブジェクトのclientXclientYプロパティを使用することで、現在のマウスの位置の座標に関する情報を取得できます。

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. 配列からダミーの値を除外する

配列からダミーの値(undefinednullNaNなど)を除外したい場合は、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.innerWidthwindow.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のヒントを紹介しました。これらのヒントには次のようなものが含まれています:

  1. 大きな数字の読みやすさを改善するためにアンダースコアを区切り文字として使用する
  2. 一度だけ実行するイベントリスナーを追加する
  3. console.logの引数を大括弧で囲むことで変数名と値を確認する
  4. KeyboardEvent.getModifierState()を使用してCaps Lockがオンかどうかを確認する
  5. スプレッド演算子とMath.min()Math.max()を使用して配列内の最小値または最大値を見つける
  6. MouseEventオブジェクトのclientXclientYプロパティを使用してマウスの位置を取得する
  7. Clipboard APIを使用してクリップボードにコピーする
  8. &&ショートハンドを使用して条件判断文を短くする
  9. console.table()を使用してコンソールにテーブルを出力する
  10. 単項プラス演算子を使用して文字列を数値に変換する
  11. スプレッド演算子とSetオブジェクトを使用して配列から重複を削除する
  12. filter()メソッドを使用して配列からダミーの値を除外する
  13. URLSearchParamsオブジェクトを使用してURLクエリ文字列を作成する
  14. getBoundingClientRect()メソッドとwindow.innerWidthwindow.innerHeightプロパティを使用して要素がビューポートに含まれるか確認する
  15. setTimeout()を使用して関数をスロットルする
  16. Array.includes()を使用して素早くメンバーシップを確認する
  17. Array.find()を使用して配列内で最初に一致する要素を取得する
  18. Object.values()を使用してオブジェクトの値の配列を取得する
  19. Array.reduce()を使用して配列を合計する
  20. datasetプロパティを使用して要素のカスタムデータ属性にアクセスする

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

いつものように、この記事を楽しんで新しいことを学んでいただけたと思います。

ありがとうございました。次の記事でお会いしましょう!

この記事が気に入ったら、いいねをして購読してサポートしてください。ありがとうございます。

Ref

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 496

- vừa được xem lúc

Bạn đã biết các tips này khi làm việc với chuỗi trong JavaScript chưa ?

Hi xin chào các bạn, tiếp tục chuỗi chủ đề về cái thằng JavaScript này, hôm nay mình sẽ giới thiệu cho các bạn một số thủ thuật hay ho khi làm việc với chuỗi trong JavaScript có thể bạn đã hoặc chưa từng dùng. Cụ thể như nào thì hãy cùng mình tìm hiểu trong bài viết này nhé (go).

0 0 413

- vừa được xem lúc

Một số phương thức với object trong Javascript

Trong Javascript có hỗ trợ các loại dữ liệu cơ bản là giống với hầu hết những ngôn ngữ lập trình khác. Bài viết này mình sẽ giới thiệu về Object và một số phương thức thường dùng với nó.

0 0 134

- vừa được xem lúc

Tìm hiểu về thư viện axios

Giới thiệu. Axios là gì? Axios là một thư viện HTTP Client dựa trên Promise.

0 0 117

- vừa được xem lúc

Imports và Exports trong JavaScript ES6

. Giới thiệu. ES6 cung cấp cho chúng ta import (nhập), export (xuất) các functions, biến từ module này sang module khác và sử dụng nó trong các file khác.

0 0 93

- vừa được xem lúc

Bài toán đọc số thành chữ (phần 2) - Hoàn chỉnh chương trình dưới 100 dòng code

Tiếp tục bài viết còn dang dở ở phần trước Phân tích bài toán đọc số thành chữ (phần 1) - Phân tích đề và những mảnh ghép đầu tiên. Bạn nào chưa đọc thì có thể xem ở link trên trước nhé.

0 0 228