前回はjavascriptで何ができるかについて紹介しました。
今回はJavaScriptの便利な機能トップ10ついて紹介していきます。
 |
1冊ですべて身につくJavaScript入門講座 [ Mana ] 価格:2794円 |
JavaScriptの便利な機能トップ10：これだけ知れば一歩リード！
Web開発の現場や学習で欠かせないJavaScript。実は、知っているだけで作業がスムーズになる便利な機能や小技がたくさんあります。この記事では、そんなJavaScriptの便利な機能を厳選して10個紹介します。
これらを知れば、コードを書くスピードが上がるだけでなく、効率的で読みやすいプログラムが作れるようになります。ぜひ最後まで読んで、使えそうな技を取り入れてみてください！
1. mapで配列を簡単に処理しよう
配列の各要素を変換したいときに役立つのがmapです。ループを使わなくてもシンプルに書けます。
使用例
以下は、数値の配列を2倍に変換する例です：
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8, 10]
「この処理が何をしているのか」を一目で理解できるコードになりますね！
2. filterで条件に合った要素だけを取り出す
特定の条件を満たす要素だけを抽出したいときは、filterが便利です。
使用例
以下は、偶数だけを取り出す例です：
const numbers = [1, 2, 3, 4, 5];
const evens = numbers.filter(num => num % 2 === 0);
console.log(evens); // [2, 4]
この関数を使うと、データの絞り込みが簡単になります。
3. reduceでデータをまとめる
配列のすべての要素をまとめて1つの値にする場合は、reduceを活用しましょう。
使用例
以下は、配列の合計を計算する例です：
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((total, num) => total + num, 0);
console.log(sum); // 15
「合計」「平均」「最大値」など、さまざまな処理に応用できます。
4. 分割代入でコードをスッキリ
オブジェクトや配列の要素を簡単に取り出せる機能です。
使用例
以下は、オブジェクトの値を取り出す例です：
const user = { name: 'Alice', age: 25 };
const { name, age } = user;
console.log(name); // 'Alice'
console.log(age); // 25
「取り出し処理が煩雑になりがち」という問題を解消してくれます。
5. テンプレートリテラルで文字列を簡潔に書く
文字列に変数を埋め込みたいときは、テンプレートリテラル（“）を使いましょう。
使用例
const name = 'Alice';
const message = `こんにちは、${name}さん！`;
console.log(message); // 'こんにちは、Aliceさん！'
これで+を多用した文字列連結から解放されます！
6. async/awaitで非同期処理を簡単に
JavaScriptで非同期処理を書くとき、async/awaitを使うとコードが見やすくなります。
使用例
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
console.log(data);
}
fetchData();
複雑なコールバック地獄を回避できるのが魅力です。
7. スプレッド構文でオブジェクトや配列を操作
スプレッド構文（...）を使うと、配列やオブジェクトを簡単にコピー・結合できます。
使用例
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combined = [...array1, ...array2];
console.log(combined); // [1, 2, 3, 4, 5, 6]
8. setTimeoutで時間を使った動作を実現
指定した時間後に処理を実行することができます。
使用例
setTimeout(() => {
console.log('3秒後に実行されました！');
}, 3000);
9. localStorageでデータを保存
ブラウザにデータを簡単に保存できる機能です。
使用例
localStorage.setItem('username', 'Alice');
console.log(localStorage.getItem('username')); // 'Alice'
10. デフォルトパラメータで柔軟な関数を作成
関数の引数にデフォルト値を設定できます。
使用例
function greet(name = 'ゲスト') {
console.log(`こんにちは、${name}さん！`);
}
greet(); // 'こんにちは、ゲストさん！'
greet('Alice'); // 'こんにちは、Aliceさん！'
まとめ
JavaScriptには、便利な機能や小技がたくさんあります。今回紹介した10個の機能を活用することで、より効率的で洗練されたコードが書けるようになるはずです。
「どれから試してみようかな？」と思ったら、まずは気になる機能を1つ選んで実践してみましょう。繰り返し使うことで、自分のスキルとして定着していきます！
参考リンク
- MDN Web Docs – 詳細なJavaScriptドキュメント
- JavaScript.info – 基礎から応用まで学べる情報サイト
以上がjavascriptでできることでした。
次回はアニメーションの作成方法について紹介します。
