Web開発の世界は進化が速く、数年前の書き方が「今はもう古い」とされることもあります。ここでは、現代のJavaScript開発では必須となる2つのテクニックをマスターしましょう。
1. アロー関数 (Arrow Functions)
これまでは function キーワードを使って関数を書いてきましたが、ES6から登場した「アロー関数」を使うと、驚くほど短く書くことができます。
従来との違い
JavaScript
// 従来の関数
const add = function(a, b) {
return a + b;
};
// アロー関数
const add = (a, b) => {
return a + b;
};
さらに短くする（暗黙の戻り値）
アロー関数には特別なルールがあります。処理が1行だけの場合、{}（波括弧）と return を省略できるのです。
JavaScript
// もっと短く！
const add = (a, b) => a + b;
// 引数が1つだけなら、さらに `()` も省略可能
const double = n => n * 2;
なぜこれを使うの？
- コードがスッキリして可読性が上がる。
map()やfilter()などの配列操作と相性が抜群（中級編・第7章で詳しくやります）。
2. テンプレートリテラル (Template Literals)
文字列の中に変数や計算結果を埋め込むとき、これまでは + 記号で繋いでいましたよね。
JavaScript
const name = "タロウ";
const age = 25;
// 従来の書き方
console.log("私の名前は" + name + "で、" + age + "歳です。");
これだと、どこで文字列が終わるのか分かりにくくなりがちです。そこで登場するのが、バッククォート ( ` ) を使ったテンプレートリテラルです。
テンプレートリテラルの書き方
${変数名} という形式で、文字列の中に変数を直接埋め込めます。
JavaScript
const name = "タロウ";
const age = 25;
// テンプレートリテラルの書き方
console.log(`私の名前は${name}で、${age}歳です。`);
さらに便利なこと： 改行もそのまま書くことができます。
JavaScript
const message = `
こんにちは、${name}さん。
明日の予定を確認してください。
`;
console.log(message);
3. 実践：組み合わせて使ってみよう
では、ここまで学んだ2つの要素を組み合わせてみましょう。 「ユーザー情報を整形して表示する」関数を作ります。
JavaScript
const user = { name: "サクラ", rank: "ゴールド" };
// アロー関数とテンプレートリテラルを組み合わせる
const showProfile = (user) => {
return `ユーザー名：${user.name}、ランク：${user.rank}です！`;
};
console.log(showProfile(user));
第6章のまとめ
- アロー関数 (
=>)：短くスマートに書ける。処理が1行ならreturnも省略できる。 - テンプレートリテラル (
`)：${}を使って変数を埋め込める。改行も簡単。
モダンな書き方を覚えると、コードを書く速度も、そして書いた後の「見やすさ」も格段に向上します。
次は第7章「データ処理（配列とオブジェクトの便利なメソッド）」です。