今回の記事について

私の周囲で他レイヤーからフロント開発へ幅を広げる方が増えていることもあり、こちらの記事を残しておこうと思います。

自身もサーバーサイドからフロントエンドへ転身した経験を持っており、javascriptを触れ始めたとき特異に感じた箇所がいくつかありました。

今回は他言語経験者が学ぶ上での差異をポイントにまとめておこうと思います。

書き方

構文についての知識は体系的に得る以外ではググりづらいものが多いので、その点も踏まえて要点をまとめておきます。

アロー変数

functionを書かずに即時実行しないfunc型を定義する。
- 最近は他の言語でもよく目にするかもしれません。

const getSum = (a, b) => {
  return a + b;
};
const c = getSum(1, 2);
console.log(c);
// 3

// 上の省略形、暗黙のreturn
const getSum = (a, b) => a + b;

関数型を即時実行することもできる。

// 関数型の即時実行
const c = ((a, b) => a + b)(1, 2);

分割代入

オブジェクトをキー別変数に直接定義する。
- 関数内で引数の展開に使われることが多い。

const func = ({ name, age }) => `${name} is ${age} years old.`;

const user = {
  name: 'Taro',
  age: 18,
}
func(user);
// 'Taro is 18 years old.'

ショートハンド

オブジェクトへの代入の際、キー名と同じ変数名を省略できる。
- 初見でびっくりするが、慣れると読み書きしやすいので推奨。

const name = 'Taro';
const age = 18;

const user = {
   name,
   age,
}
console.log(user);
// { name: 'Taro', age: 18 }

スプレッド構文

配列やオブジェクトを上の階層に展開する。
- オブジェクトのマージや値更新に利用すると便利です。
- 配列をメソッド引数として並べることも可能。

const user = {
  name: 'Taro',
  age: 18,
}
const contacts = {
  email: 'taro@example.com',
  tel: '080-0000-0000',
}

const newAge = 19;

const updatedUser = {
  ...user,
  ...contacts,
  age: newAge,
}
console.log(updatedUser);
// {name: 'Taro', age: 19, email: 'taro@example.com', tel: '080-0000-0000'}

オプショナルチェーン

オブジェクトの展開時、値の有無を検証する。
- 型の検証に便利です。

const contacts = {
  email: 'taro@example.com',
  tel: '080-0000-0000',
}
console.log(contacts.address.prefecture);
// TypeError

console.log(contacts.address?.prefecture);
// undefined（オプショナルチェーンによる参照）

静的解析・自動整形

静的解析や自動整形は初学者こそ導入すべきと感じています。

動作の正誤はプログラムの実行で確認できますが、作法や品質は学びづらいものです。それを正してくれるのが静的解析や自動整形になります。

eslint

eslint.org

Javascriptの静的解析ツールで、ルールに従って構文が書かれているかを確認してくれます。ルールについては個々に手動設定もできますが、プラグインで広まっているものを導入するのが良いと思います。

例えば、Reactを用いたプロダクトであれば eslint-plugin-react などを用いるのが通例です。

github.com

例えば、以下のようなことは書き始める前に気になることかと思います。

インデントはスペース2文字で揃える。
オブジェクトキー名はキャメルで定義する。
型一致まで確認する、厳密等価演算子（===）が推奨される。

VSCode等でリアルタイム解析をおこなえば、コーディングしながら学べます。

prettier

prettier.io

自動整形をおこなってくれます。

こちらはかなり恣意的な作法を強いられますが、prettierが作法であると定めることによって、コーディング規約における派閥論理を抑え込む作用があります。

例えば改行ルールなど、人間がおこなうと可読性を考えてルールがおろそかになりがちですが、prettierを用いるとガッチリと揃えられます。

フロントエンドエンジニアの中でも好き嫌いが分かれるかと思いますが、導入することでメンバー間の規約差異を仲裁してもらえると思えば有益です。

総括

ここに記載した内容は私自身が業務経験で培ってきたものなので、人によっては異なる作法を持っている場合もあるかと思います。

ただ、私の薦める方向性は一貫して 「マジョリティを見つけてそれに倣う」 ということです。

前半に記載した「書き方」については多くのコードを読めるための技術であり、後半の「静的解析・自動整形」は他人と同じように書く技術になります。

javascriptはおそらく最もコードに溢れた言語なので、良否を見極めるために多く読み、多く書くことが上達の秘訣だと感じています。

Webエンジニアの備忘録

およそ自己の作業メモとして残しております。

javascript初学者向けメモ(2022年)