前回は関数を極める応用テクニックについて紹介しました。
Javascript(17)関数を極める応用テクニック
今回は、関数を極めて初めて使える応用テクニックを紹介してきます。非常に使える要素がたくさんあります。
kamechannel.com
2025.02.05
今回はユーティリティ関数について紹介していきます。
【もっと詳しく知りたい人は是非これを読んでください！！】
 |
1冊ですべて身につくJavaScript入門講座 [ Mana ] 価格:2794円 |
Webアプリ開発で役立つ！JavaScriptの便利なユーティリティ関数まとめ
JavaScriptを使ったWebアプリ開発では、ちょっとした処理を効率化するために「ユーティリティ関数」を活用すると便利です。ユーティリティ関数を使えば、コードの可読性が向上し、開発効率もアップします。
この記事では、Webアプリ開発で役立つ便利なユーティリティ関数を厳選して紹介します。
1. 配列操作の便利な関数
1.1 配列の重複を削除する
const uniqueArray = (arr) => [...new Set(arr)];
console.log(uniqueArray([1, 2, 2, 3, 4, 4, 5])); // [1, 2, 3, 4, 5]
この関数はSetを使って配列の重複を簡単に取り除きます。
1.2 配列をシャッフルする
const shuffleArray = (arr) => arr.sort(() => Math.random() - 0.5);
console.log(shuffleArray([1, 2, 3, 4, 5]));
要素の順番をランダムに並び替える関数で、ゲームやクイズアプリに役立ちます。
1.3 指定した要素を削除する
const removeItem = (arr, value) => arr.filter(item => item !== value);
console.log(removeItem([1, 2, 3, 4, 5], 3)); // [1, 2, 4, 5]
特定の値を配列から削除する際に便利です。
2. 文字列操作の便利な関数
2.1 文字列を反転する
const reverseString = (str) => str.split('').reverse().join('');
console.log(reverseString("hello")); // "olleh"
文字列の並びを逆にする関数で、パスワード生成などにも応用できます。
2.2 文字列をスネークケースに変換する
const toSnakeCase = (str) => str.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase();
console.log(toSnakeCase("helloWorld")); // "hello_world"
キャメルケースの文字列をスネークケースに変換する関数です。
3. 日付操作の便利な関数
3.1 今日の日付をYYYY-MM-DD形式で取得
const getTodayDate = () => new Date().toISOString().split('T')[0];
console.log(getTodayDate());
現在の日付をフォーマットして取得できます。
3.2 2つの日付の差を計算する
const dateDiffInDays = (date1, date2) => {
const diffTime = Math.abs(new Date(date2) - new Date(date1));
return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
};
console.log(dateDiffInDays('2024-01-01', '2024-01-10')); // 9
指定した2つの日付の間の日数を計算できます。
4. その他の便利な関数
4.1 URLパラメータをオブジェクトに変換
const getQueryParams = (url) => {
return Object.fromEntries(new URL(url).searchParams.entries());
};
console.log(getQueryParams("https://example.com?page=1&sort=desc"));
// { page: "1", sort: "desc" }
URLのクエリパラメータをオブジェクト形式に変換する関数です。
4.2 UUIDを生成する
const generateUUID = () => crypto.randomUUID();
console.log(generateUUID());
ユニークな識別子を生成するために便利です。
まとめ
今回紹介したユーティリティ関数を活用すれば、Webアプリの開発をよりスムーズに進めることができます。特に、配列操作・文字列処理・日付操作など、頻繁に使う処理を効率化することが重要です。
ぜひ、これらの関数をプロジェクトに組み込み、開発の効率化を図ってみてください。
参考リンク
以上がユーティリティ関数についての紹介になります。
次回はDOMの操作について紹介します。
