この記事はWano Group Advent Calendar 2023の14日目の記事となります。
はじめに
私は今年の6月からWanoグループに入社し、Tunecore Japanのフロントエンドエンジニアとして従事しており、エンジニア歴はまだ半年にも満たないジュニアエンジニアです.
今回は私がエンジニア転職を目指して、学習している時にエンジニアがどんなコードを書いているのか気になってました。
そこでJavaScriptにフォーカスして、どんなメソッドがよく使われているかを調べてみました。
本記事では、以下の点について説明しています。
1.そのメソッドの簡単な説明
2.例題コード
使用頻度が高かった順に説明しますので、エンジニアを目指す方々の参考になればと思います。
また、今回は２つの便利なツールも紹介していますので、日々の手助けになると幸いです。
スプレッド構文
スプレッド構文とは
JavaScriptのスプレッド構文（...）は、配列やオブジェクトの要素を個々の値として展開するために用いられます。
この構文を使用することで、配列の要素やオブジェクトのプロパティをより柔軟に操作できるようになります。特に、関数の引数リストの展開、配列の結合やコピー、オブジェクトのプロパティの結合や更新に役立ちます。
MDN
例題コード
`使用例`
// 配列の展開
const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5];
console.log(moreNumbers); // 出力: [1, 2, 3, 4, 5]
// オブジェクトのプロパティの展開
const obj = { name: "Alice", age: 25 };
const extendedObj = { ...obj, location: "Tokyo" };
console.log(extendedObj); // 出力: { name: "Alice", age: 25, location: "Tokyo" }
三項演算子
三項演算子とは
三項演算子は、JavaScriptにおける条件式の簡潔な表現方法です。構文は条件 ? 式1 : 式2という形で、条件がtrueの場合は式1が実行され、falseの場合は式2が実行されます。この演算子は、短い条件付きの代入や決定を行う際に特に有用です。可読性が高く、コードの行数を減らすことができます。
2重の三項演算子も可能ですが、可読性には注意が必要です。複雑になりすぎるとコードの理解が難しくなるため、状況に応じて適切に使用することが重要です。
例題コード
// 1つの条件
const score = 75;
const grade = score >= 60 ? '合格' : '不合格';
console.log(grade); // 出力: "合格"
// より複雑な条件でA or Bor Cとすることも出来ます
const score = 85;
const grade = score > 90 ? 'A' : score > 75 ? 'B' : 'C';
console.log(grade); // 出力: "B"
オプショナルチェーン
オプショナルチェーンとは
オプショナルチェーン（?.）は、オブジェクトのプロパティに安全にアクセスするために使用されます。これは、オブジェクトがnullまたはundefinedの場合にプロパティの読み込みを試みるとエラーが発生するのを防ぐために役立ちます。オプショナルチェーンを使用すると、オブジェクトのプロパティが存在する場合のみ値を取得し、存在しない場合はundefinedを返します。
私はJavaScriptを学習している内は、知りもしなかったのですが、TypeScriptの場合は型チェックが入るので、ロジック上で絶対に値が入るようになっているプロパティでもundefinedの可能性があるとエラーが出るようになってます。
MDN
例題コード
// typescriptでdetailsに?をつけることで、undefinedであることを定義してます。
type User = {
name: string;
details?: {
age: number;
location: string;
};
};
const user:User = {
name: 'Alice',
details: { age: 25, location: 'Tokyo' }
};
// オプショナルチェーンを使用
const ageA = user.details.age;
console.log(ageA); // 出力: 25
// オプショナルチェーンを使用
const ageB = user.details?.age;
console.log(ageB); // 出力: 25
Tips
TypeScriptだとundefinedの可能性があるプロパティに対して、undefinedの可能性を排除しないとこのようなエラーが発生します。
オプショナルチェーンを忘れたときに、Google検索で
JavaScript ?
で検索してもヒットしません。
JavaScript `?`
このようにGoogle検索するとヒットします。
mapメソッド
mapメソッドとは
mapメソッドは、配列の各要素に対して与えられた関数を実行し、その結果から新しい配列を生成します。このメソッドは配列を変換する際に非常に便利で、元の配列は変更されません。mapは配列の要素を一つずつ処理し、それぞれの要素に対して同じ操作を行いたい場合に特に役立ちます。
初学者向けの教材だと配列に対する処理をする際に、for文内でインクリメントしているイメージですが、実際の業務に入るとfor文は殆ど見ない気がします。
mapメソッドを使用することで、配列への処理が一目でわかりやすくなります.
MDN
例題コード
const numbers = [1, 2, 3, 4, 5];
// 各要素を2倍にする
const doubled = numbers.map(number => number * 2);
console.log(doubled); // 出力: [2, 4, 6, 8, 10]
否定演算子 !
否定演算子とは
否定演算子（!）は、JavaScriptにおいて任意の値を真偽値（trueまたはfalse）に変換するために使用されます。
最大で3回まで否定演算子を使用することが可能です。
!を追加する度に否定するため、以下のような挙動になります。
例題コード
const test = ""; //空文字なのでfalseと判定されます。（false)
console.log(!test); // １度だけ否定するのでtrueとなります（false -> true)
console.log(!!test); // 2度否定するのでfalseとなります（false -> true -> false)
console.log(!!!test); // 3度否定するのでtrueとなります（false -> true -> false -> true)
このテクニックは、条件文やデフォルト値の設定で特に役立ちます。
例えば、値が入っているかを確認したいが、値は使わないのでフラグだけ返したい時などに使用します。
否定演算子は対象のデータ型によって挙動が変わるので、思わぬところでバグを生むだす可能性があるので注意が必要です。
例題コード(string型)
// 空文字ではない場合
const value = "Hello, World!";
const isValuePresent = !value;
console.log(isValuePresent); // 出力: false
// 空文字の場合
const emptyString = "";
const isEmpty = !emptyString;
console.log(isEmpty); // 出力: true
例題コード(number型)
const num = 100;
console.log(!num); // 出力: false
数字の０はFalsyな値なので、trueが返ってきます。
const num = 0;
console.log(!num); // 出力: true
Falsyな値は他にも存在するので、こちらをご参照ください。
例題コード(array型)
const arr = ["aaaa"];
console.log(!arr); // 出力: false
空配列の場合は、truthyな値として判定されるのでfalseが返ってきます。
const arr = [];
console.log(!arr); // 出力: false
Object.keysメソッド
Object.keysとは
Object.keysメソッドは、オブジェクトのキー（プロパティ名）を文字列の配列として返します。このメソッドはオブジェクトが持つ「自身の列挙可能なプロパティ」のキーのみを取得します。列挙可能なプロパティとは、通常、コード内で明示的に設定されたプロパティを指します（対照的に、組み込みのメソッドやプロトタイプチェーンにあるプロパティは含まれません）。Object.keysは、オブジェクトの構造を調べたり、そのプロパティを列挙する場合に非常に便利です。
MDN
例題コード
const car = {
make: 'Toyota',
model: 'Corolla',
year: 2021
};
const keys = Object.keys(car);
console.log(keys); // 出力: ["make", "model", "year"]
似たようなメソッドにobject.valuesがあります。
このメソッドはkeyではなく、valueを取得出来るものになります。
MDN
filterメソッド
filterメソッドとは
filterメソッドは、配列の各要素に対してテストを行い、そのテストに合格（つまり、テスト関数がtrueを返す）する要素のみを集めた新しい配列を生成します。このメソッドは、特定の条件に基づいて配列から要素を選択し、新しい配列を作る場合に非常に便利です。filterメソッドは元の配列を変更せず、条件に合致する新しい配列を作成します。
数字がxx以上や、xxフラグがtrueの要素だけ抽出したい時などに使用します。
MDN
例題コード
// 偶数だけ抽出
const numbers = [1, 2, 3, 4, 5, 6];
const evenNumbers = numbers.filter(number => number % 2 === 0);
console.log(evenNumbers); // 出力: [2, 4, 6]
例題コード（複雑な条件）
オブジェクトの配列を扱う場合、filterメソッドは特定のプロパティに基づいて要素を選択するのに特に便利です。
const people = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 22 }
];
const adults = people.filter(person => person.age >= 25);
console.log(adults); // 出力: [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }]
例題コード（空の要素の除去）
filterメソッドは、配列からnull、undefined、空の文字列などの「falsy」な値を取り除くのにも使えます。
const mixedArray = ['Apple', '', 'Banana', null, 'Cherry', undefined];
const validItems = mixedArray.filter(item => item);
console.log(validItems); // 出力: ['Apple', 'Banana', 'Cherry']
includesメソッド
includesとは
includesメソッドは、配列や文字列が特定の要素や文字を含んでいるかどうかを判断するために使用されます。このメソッドはブーリアン値（trueまたはfalse）を返し、指定された要素や文字が配列や文字列に存在する場合はtrueを、そうでない場合はfalseを返します。includesメソッドは、特定のアイテムがデータ構造の中に含まれているかどうかをチェックする際に非常に便利です。
例題コード
const fruits = ['apple', 'banana', 'cherry'];
const hasBanana = fruits.includes('banana');
console.log(hasBanana); // 出力: true
この例では、fruits配列に'banana'が含まれているかどうかを確認しています。
例題コード（文字列での使用）
includesメソッドは文字列に対しても使用できます。
const sentence = 'Hello, world!';
const hasHello = sentence.includes('Hello');
console.log(hasHello); // 出力: true
ここでは、文字列sentenceが'Hello'という単語を含んでいるかどうかを確認しています。
例題コード（大文字と小文字の区別）
includesメソッドは大文字と小文字を区別します。
const hasWorld = sentence.includes('world');
console.log(hasWorld); // 出力: false
'world'は小文字で、sentenceには'World'（大文字で始まる）が含まれているため、結果はfalseです。
findメソッド
findメソッドとは
JavaScriptのfindメソッドは、配列内の要素で指定したテスト関数を満たす最初の要素を返します。このメソッドは、特定の条件を満たす最初のアイテムを見つける必要があるときに特に便利です。findメソッドは、条件に合う要素が見つかればその要素を、見つからなければundefinedを返します。
例題コード
const numbers = [3, 7, 11, 15, 20];
const firstEven = numbers.find(number => number % 2 === 0);
console.log(firstEven); // 出力: 20
この例では、numbers配列から最初の偶数を見つけています。ここでは20が最初の偶数として返されます。
。
例題コード（オブジェクトの配列での使用）
findメソッドはオブジェクトの配列に対しても使用できます。特定のプロパティを持つオブジェクトを探す場合に役立ちます
const people = [
{ name: 'Alice', age: 25 },
{ name: 'Bob', age: 30 },
{ name: 'Charlie', age: 22 }
];
const personNamedBob = people.find(person => person.name === 'Bob');
console.log(personNamedBob); // 出力: { name: 'Bob', age: 30 }
ここでは、nameがBobである最初のオブジェクトをpeople配列から見つけています。
例題コード（条件に合う要素がない場合）
条件に合う要素が配列内に存在しない場合、findメソッドはundefinedを返します。
const personNamedEve = people.find(person => person.name === 'Eve');
console.log(personNamedEve); // 出力: undefined
この例では、nameがEveである人物はpeople配列内にいないため、結果はundefinedになります。
一言コラム
MDNを見ていただければ、数多くのメソッドがあることがわかります。
その中でどのメソッドを使うかは、そのメソッドが破壊的なメソッドかどうかがあります。
破壊的メソッド（配列の元の状態を変更するメソッド）を使用することは極力避けたいので、実務では使われない傾向にあります。
[JavaScript] Arrayメソッド破壊・非破壊チートシート
破壊的メソッドは、そのメソッドを適用したオブジェクト自体を変更するJavaScriptのメソッドです。これは、メソッドが実行された後に元のデータが変更されたり、失われたりすることを意味します。
例題コード（非破壊メソッド）
// .concat() メソッドは新しい要素を配列に追加して新しい配列を作成しますが、元の配列は変更しません。
const fruits = ["apple", "banana"];
const newFruits = fruits.concat("orange");
console.log(fruits); // 出力: ["apple", "banana"]
console.log(newFruits); // 出力: ["apple", "banana", "orange"]
例題コード（非破壊メソッド）
// .splice() メソッドは配列に新しい要素を挿入したり、配列から要素を削除したりする際に使用され、元の配列自体を変更します。
const fruits = ["apple", "banana", "cherry"];
const removedFruits = fruits.splice(1, 1); // 1番目の位置から1つの要素を削除
console.log(fruits); // 出力: ["apple", "cherry"] <-元の配列から"banana"が無くなっている（破壊的）
console.log(removedFruits); // 出力: ["banana"]
業務効率UPのツール2選
私のような拙い知識では、短縮出来る作業は短縮していかないと何の成果もない1日になりかねないです。
なので、私が使用しているいくつかの便利だと思ったツールを紹介だけ致します。
Fig
Figはターミナル上でコマンドの補完を行うツールです。これにより、コマンドの記憶や入力の手間が減少し、開発の効率が向上します。
gitで開発しているとよく使うコードですが、各コマンドを「git b」など少ない入力で、実行したいコマンドの候補を出してくれるので、楽にコマンドを実行出来、スペルミスも防げます。
> git branch
> git switch xxxxx
> git add .
導入方法は簡単で、インストール後にアカウントを作成するだけで、iTermやVS Codeなど様々な場所で使用できます。
Raycast
かなり万能なツールで、何でも出来てしまいます。
command⌘ + spaceで起動するように設定しており、command⌘ + spaceに続けて「no」と入力するだけでNotionを立ち上げられます。
なので、マウスを使う必要がなく、かなり時間短縮につながっていると思ってます。
他にもスニペット機能があったり、Google検索が行えたり、クリップボード機能、画面分割機能など幅広いことがこの１つのツールで行えてしまいます。
あとがき
最後までご覧いただきありがとうございました。
今回は私がエンジニアになる前、気になっていたエンジニアが書くコードを記事にしてみました。
エンジニアになるまでmap関数の存在など知らず、ループ分の際には必ずといっていいほどfor文を使っていたので、その頃に比べたら多少なりとも「読みやすいコード」を書けるようになったのかなと思います。
ポートフォリオを作成する段階では、「読みやすいコード」を心掛けていませんでした。
自己学習以外のコードは基本的に自分以外の人の目にコードが映るので、適切なメソッドを使って無駄なコートを省き、見やすいコードを書くを心掛けるべきかなと最近思うようになりました。
これからポートフォリオを作成する方の参考になれば、大変嬉しく思います。
Wanoグループについて
現在、Wanoグループ / TuneCore Japan では人材募集をしています。興味のある方は下記を参照してください。
Wano | Wano Group JOBS
TuneCore Japan | TuneCore Japan JOBS