VueやReactの文法を学ぶのも大事だが・・・
よくアプリ開発するときに、「どのフレームワークを採用しよう・・・？」と悩むことがあるだろう。
そのためにVueやReactの独自の書き方を中心に学んで開発することが多いが、そもそものJSの基本的な文法をわかってない状態で始めてしまうと混乱の原因になる。そこで、今回は備忘として、よく使うJSの基本的な構文をおさらいしていく。
オブジェクト分割代入
const user = { name: '佐藤', age: 25, email: 'satou@mail.com' };
const { name, age } = user;
console.log(name) // '佐藤'
console.log(age) // 25
必要なプロパティだけを取り出して、コードの見通しを良くするために使う。
配列の分割代入
const [state, setState] = ['初期値', function() {}];
console.log(state); // '初期値'
これはReactのuseStateの返り値でめちゃめちゃ見る形ですね。
デフォルト値付き分割代入
function greet({ name = 'ゲスト', age = 0 } = {}) {
return `${name}さん (${age}歳)`;
}
console.log(greet()); // 'ゲストさん（0歳）'
console.log(greet({ name: '田中' })) // '佐藤さん（0歳）'
引数が省略・未定義でも安全に動かすための防御的な書き方。
要素をスキップする分割代入
const arr = ['a', 'b', 'c', 'd', 'e'];
const [first, , third, , fifth] = arr; //2番目と4番目をスキップ
consle.log(first); // 'a'
consle.log(third); // 'c'
consle.log(fifth); // 'e'
必要な要素だけを取りたいときに、無駄な変数を作らずに済む。
スプレッド構文（配列）
const items = ['リンゴ', 'バナナ'];
const newItems = [...items, 'オレンジ'];
console.log(items); // ['リンゴ', 'バナナ']
console.log(newItems); // ['リンゴ', 'バナナ', 'オレンジ']
元の配列を壊さずに、新しい配列を作りたいときに使う。
二つの配列を結合
const fruits = ['リンゴ', 'バナナ'];
const vegetables = ['にんじん', 'キャベツ'];
const newItems = [...fruits, ...vegetables];
console.log(newItems); // ['リンゴ', 'バナナ', 'にんじん', 'キャベツ']
配列同士をシンプルに結合でき、concatより可読性が高い。
スプレッド構文（オブジェクト）
const user = { name: '太郎', age: 25 };
const updateUser = { ...user, age: 26 };
console.log(user); // { name: '太郎', age: 25 }
console.log(updateUser); // { name: '太郎', age: 26 }
オブジェクトをイミュータブルに更新したいときの基本形。
二つのオブジェクトを結合
const basicInfo = { name: '花子', age: 28 };
const contact = { email: 'hanako@mail.com', phone: '090-1234-5678' };
const profile = { ...basicInfo, ...contact };
console.log(profile); // { name: '花子', age: 28, email: 'hanako@mail.com', phone: '090-1234-5678' }
複数の情報を1つのオブジェクトでまとめるときによく使う。
レスト構文
const { variant, ...otherProps } = { variant: 'primary', onClick: () => {}, disabled: false };
consle.log(variant); // 'primary'
console.log(otherProps); // { onClick: () => {}, disabled: false }
「特定のキー以外をまとめて扱いたい」場面で真価を発揮する。
アロー関数
const double = x => x * 2;
const add = (a,b) => a + b;
console.log(double(5)); // 10
console.log(add(3, 7)); // 10
短く書けて、thisを意識せずに関数を定義できる。
map
const todos = ['学習', '復習', '実践'];
const todoElements = todos.map(todo => `<li>${todo}</li>`);
console.log(todoElements); // ['<li>学習</li>', '<li>復習</li>', '<li>実践</li>']
配列を「別の配列」に変換したいときに使う（元は変えない）。
filter
const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(n => n % 2 === 0);
console.log(evenNumbers); // [2, 4]
条件に合う要素だけを残した新しい配列を作る。
find
const users = [{ id: 1, name: '太郎' }, { id: 2, name: '花子' }];
const foundUser = users.find(u => u.id === 1);
console.log(foundUser); // { id: 1, name: '太郎' }
条件に合う「最初の1件」だけを取得したいときに使う。
reduce
const array = [2, 3, 4, 5];
// 1 + 2 + 3 + 4 + 5
const initialValue = 1;
const sumWithInitial = array.reduce(
(accumulator, currentValue) => accumulator + currentValue,
initialValue,
);
console.log(sumWithInitial); // 10
配列から「1つの値」を作り出すための万能ツール。
配列の存在チェック（includes）
const colors = ['red', 'blue', 'green'];
const isValidColor = colors.includes('blue');
const isInvalidColor = colors.includes('yellow');
console.log(isValidColor); // true
console.log(isInvalidColor); // false
値が含まれているかを直感的に判定できる。
配列の結合（join）
const fruits = ['リンゴ', 'バナナ', 'オレンジ'];
const fruitsList = fruits.join(', ');
const html = fruits.map(fruit => <li>${fruit}</li>).join('');
console.log(fruitsList); // 'リンゴ', バナナ, オレンジ'
console.log(html); // <li>リンゴ</li><li>バナナ</li><li>オレンジ</li>
配列を文字列として出力したいときに使う。
三項演算子
const isLoggedIn = true;
const message = isLoggedIn ? 'おかえりなさい' : 'ログインしてください'
const.log(message); // 'おかえりなさい'
if文を書くほどでもない分岐を、1行で簡潔に表現できる。
論理演算子（&&） - 条件が真のときのみ表示
const hasError = false;
const errorMessage = hasError && 'エラーが発生しました';
console.log(errorMessage); // false
条件付きで値を返したいときに使う。
オプショナルチェイニング（?.）
const user2 = { profile: { address: { city: '東京' } } };
const city = user2?.profile?.address?.city;
console.log(city); // '東京'
ネストが深いオブジェクトでも、安全にアクセスできる。
Null合体演算子（??）
const userName = user2?.name ?? 'ゲスト';
console.log(userName); // 'ゲスト'
null / undefined のときだけデフォルト値を使いたい場合に使う。
テンプレート文字列
const name = '太郎';
const age = 25;
const introduction = `こんにちは、${name}です。${age}歳です。`;
console.log(introduction); // 'こんにちは、太郎です。25歳です。'
文字列連結を読みやすく、安全に書ける。
Object.keys/values/entries
const user3 = { name: '太郎', age: 25, city: '東京' };
const keys = Object.keys(user3);
const values = Object.values(user3);
const entries = Object.entries(user3);
console.log(keys); // ['name', 'age', 'city']
console.log(values); // ['太郎', 25, '東京']
console.log(entries); // [['name','太郎'], ['age', 25],['city', '東京']]
これはオブジェクトを配列として処理したい場合によく使いますね