JavaScriptとTypeScript：知っておくべき11のコンパクトな構成

クリーンで効率的なコードと、作成者だけが理解できるコードの間には、非常に細かい線があります。そして最悪の部分は、この線を明確に定義することが不可能であるということです。それを探している一部のプログラマーは、他のプログラマーよりもはるかに先に進む準備ができています。したがって、すべての人に理解されることが保証されるような方法で特定のコードを作成する必要がある場合、そのようなコードでは通常、3値演算子や1行矢印関数などのあらゆる種類のコンパクトな構造を使用しないようにします。



しかし、真実、不快な真実は、これらのコンパクトなデザインがしばしば非常に役立つということです。そして、それらは同時に、非常に単純です。これは、それらが使用されるコードに興味がある人は誰でもそれらを習得し、そのようなコードを理解できることを意味します。







この投稿では、JavaScriptやTypeScriptに見られる、非常に便利な（場合によっては不可解な）コンパクトな構造をいくつか見ていきます。それらを研究した後、あなたはそれらを自分で使うことができます、あるいは少なくともあなたはそれらを使うそれらのプログラマーのコードを理解することができます。

1.オペレーター??

値をチェックするためのオペレータnullとundefined（nullish合体演算子は）2つの疑問符のように見えます（??）。このような名前のこれが最も人気のあるオペレーターであるとは信じがたいです。本当ですか？



この演算子の意味は、左側のオペランドの値がnullまたはに等しい場合、右側のオペランドの値を返すことですundefined。これはその名前にはっきりと反映されていませんが、まあ、それは何ですか？使用方法は次のとおりです。

function myFn(variable1, variable2) {
  let var2 = variable2 ?? "default value"
  return variable1 + var2
}

myFn("this has ", "no default value") // "this has no default value"
myFn("this has no ") // "this has no default value"
myFn("this has no ", 0) // "this has no 0"

ここには、オペレーターの作業を整理するために使用されるメカニズムと非常によく似たメカニズムが含まれています||。式の左側がnullまたはundefinedに等しい場合、式の右側が返されます。それ以外の場合は、左側が返されます。その結果、演算子は??変数に何かを割り当てることができる状況での使用に最適ですが、nullまたはこの変数に該当する場合は、いくつかの対策を講じる必要がありますundefined。

2.演算子?? =

変数に値を割り当てるために使用される演算子は、値がある場合、nullまたはundefined（論理ヌルの割り当て演算子）2つの疑問符の後に等しい記号（??=）が続くように見える場合にのみ使用されます。上記の演算子の拡張と考えてください??。



を使用して書き直された前のコードスニペットを見てみましょう??=。

function myFn(variable1, variable2) {
  variable2 ??= "default value"
  return variable1 + variable2
}

myFn("this has ", "no default value") // "this has no default value"
myFn("this has no ") // "this has no default value"
myFn("this has no ", 0) // "this has no 0"

演算子を??=使用すると、関数パラメータの値を確認できますvariable2。に等しいnullかundefined、の場合、新しい値が書き込まれます。それ以外の場合、パラメーター値は変更されません。



デザインに??=慣れていない人には、デザインが理解できないように見える場合があることに注意してください。したがって、これを使用する場合は、コードの適切な場所に説明付きの短い解説を追加することをお勧めします。

3.TypeScriptコンストラクターの省略された宣言

この機能はTypeScriptに固有です。したがって、JavaScriptの純粋さの擁護者である場合、多くのことを見逃しています。 （もちろん冗談ですが、これは通常のJSには当てはまりません）。



ご存知のように、クラスを宣言するときは、通常、アクセス修飾子を使用してすべてのプロパティを一覧表示し、クラスコンストラクターでこれらのプロパティに値を割り当てます。ただし、コンストラクターが非常に単純で、コンストラクターに渡されたパラメーターの値がプロパティに単純に書き込まれる場合は、通常よりもコンパクトな構造を使用できます。



これはそれがどのように見えるかです：

// ...
class Person {
  
  private first_name: string;
  private last_name: string;
  private age: number;
  private is_married: boolean;
  
  constructor(fname:string, lname:string, age:number, married:boolean) {
    this.first_name = fname;
    this.last_name = lname;
    this.age = age;
    this.is_married = married;
  }
}

// ,   ...
class Person {

  constructor( private first_name: string,
               private last_name: string,
               private age: number,
               private is_married: boolean){}
}

コンストラクターを作成するときに上記のアプローチを使用すると、時間を節約できます。特に、多くのプロパティを持つクラスになると。



ここで重要なこと{}は、コンストラクターの説明の直後に追加することを忘れないでください。これは関数本体の表現であるためです。コンパイラはそのような記述に遭遇した後、すべてを理解し、残りはそれ自体で行います。実際、TSコードの最初と2番目のフラグメントの両方が最終的に同じJavaScriptコードに変換されるという事実について話しています。

4.三元演算子

三元演算子は、読みやすい構造です。この演算子はif…else、余分な文字を取り除き、複数行の構成を1行の構成に変えることができるため、短い命令の代わりによく使用されます。

//   if…else
let isEven = ""
if(variable % 2 == 0) {
  isEven = "yes"
} else {
  isEven = "no"
}

//  
let isEven = (variable % 2 == 0) ? "yes" : "no"

三元演算子の構造では、最初は論理式、2番目はreturn論理式が真のreturn場合に値を返すコマンドのようなもの、3番目も論理式が偽の場合に値を返すコマンドのようなものです。三元演算子は（例のように）値の割り当ての右側で最もよく使用されますが、どの関数が呼び出されるか、またはどの引数で同じものが呼び出されるかを関数を呼び出すメカニズムとして、自律的に使用することもできます。同じ関数は、論理式の値によって決定されます。これはそれがどのように見えるかです：

let variable = true;

(variable) ? console.log("It's TRUE") : console.log("It's FALSE")

ステートメントの構造は前の例と同じに見えることに注意してください。三元演算子を使用することの欠点は、将来、その部分の1つ（論理式の真の値を参照する部分、またはその偽の値を参照する部分）を拡張する必要がある場合、通常の命令に進む必要があることを意味しますif…else。

5.オペレーターが使用する短い計算サイクルを使用する||

JavaScript（およびTypeScriptでも）では、論理OR演算子（||）は簡略計算モデルを実装します。つまり、として評価された最初の式を返しtrue、残りの式はチェックしません。



次の文がある場合、この手段は、というif表現は、expression1偽の値（に還元が含まれているfalse）、およびexpression2-真（に還元true）、のみexpression1と計算されますexpression2。式espression3とexpression4は評価されません。

if( expression1 || expression2 || expression3 || expression4)

if変数に値を割り当てる ステートメントの外で、この機会を利用できます。これにより、特に、関数パラメータで表される値などがfalseであることが判明した場合（たとえば、equal undefined）に、デフォルト値を変数に書き込むことができます。

function myFn(variable1, variable2) {
  let var2 = variable2 || "default value"
  return variable1 + var2
}

myFn("this has ", " no default value") // "this has no default value"
myFn("this has no ") // "this has no default value"

この例は、演算子||を使用して、関数の2番目のパラメーターの値またはデフォルト値のいずれかを変数に書き込む方法を示しています。ただし、この例をよく見ると、小さな問題があります。実際にはvariable2、0または空の文字列にvar2値がある場合、0と空の文字列の両方がに変換されるため、デフォルト値が書き込まれますfalse。



したがって、すべてのfalse値をデフォルト値に置き換える必要がない場合は、あまり知られていない演算子を使用できます??。

6.ダブルビットワイズ演算子〜

JavaScript開発者は通常、ビット単位の演算子の使用に特に熱心ではありません。最近、数字のバイナリ表現を気にするのは誰ですか？ただし、これらの演算子はビットレベルで動作するため、対応するアクションを、たとえば一部のメソッドよりもはるかに高速に実行します。



ビット単位の演算子NOT（~）について説明すると、数値を取り、それを32ビットの整数に変換して（「余分な」ビットを破棄し）、この数値のビットを反転します。これにより、値が値にx変換されます-(x+1)。なぜ私たちはそのような数字の変換に興味があるのですか？また、2回使用すると、メソッド呼び出しと同じ結果が得られるという事実Math.floor。

let x = 3.8
let y = ~x // x   -(3 + 1),    ,    
let z = ~y //  y ( -4)  -(-4 + 1)   -  3

//   :

let flooredX = ~~x //      

~例の最後の行に ある2つのアイコンに注目してください。奇妙に見えるかもしれませんが、多くの浮動小数点数を整数に変換する必要がある場合、この手法は非常に便利です。

7.オブジェクトのプロパティに値を割り当てる

ES6標準の機能により、オブジェクトを作成するプロセス、特に、オブジェクトのプロパティに値を割り当てるプロセスが簡素化されます。これらのプロパティと同じ名前の変数に基づいてプロパティ値が割り当てられている場合、それらの名前を繰り返す必要はありません。以前は必要でした。



TypeScriptで記述された例を次に示します。

let name:string = "Fernando";
let age:number = 36;
let id:number = 1;

type User = {
  name: string,
  age: number,
  id: number
}

// 
let myUser: User = {
  name: name,
  age: age,
  id: id
}

// 
let myNewUser: User = {
  name,
  age,
  id
}

ご覧のとおり、オブジェクトプロパティに値を割り当てる新しいアプローチにより、よりコンパクトでシンプルなコードを記述できます。そして、そのようなコードは、古い規則に従って書かれたコード（この記事で説明されている他のコンパクトな構造を使用して書かれたコードについては言えません）よりも読むのが難しくありません。

8.矢印関数からの値の暗黙的な戻り

単一行の矢印関数が、単一行で実行された計算の結果を返すことをご存知ですか？



このメカニズムを使用すると、不要な式を取り除くことができますreturn。この手法は、filterやなどの配列メソッドに渡される矢印関数でよく使用されmapます。TypeScriptの例を次に示します。

let myArr:number[] = [1,2,3,4,5,6,7,8,9,10]

//  :
let oddNumbers:number[] = myArr.filter( (n:number) => {
  return n % 2 == 0
})

let double:number[] = myArr.map( (n:number) => {
  return n * 2;
})

//  :
let oddNumbers2:number[] = myArr.filter( (n:number) => n % 2 == 0 )

let double2:number[] = myArr.map( (n:number) =>  n * 2 )

この手法を適用することは、必ずしもコードをより複雑にすることを意味するわけではありません。このような構成は、コードを少しクリーンアップして、不要なスペースや余分な行を取り除くための良い方法です。もちろん、このアプローチの欠点は、そのような短い関数の本体を拡張する必要がある場合、再び中括弧の使用に戻らなければならないことです。



ここで考慮しなければならない唯一の特徴は、ここで考慮される短い矢印関数の唯一の行に含まれているのは式でなければならないということです（つまり、関数から返される結果を生成する必要があります）。そうしないと、そのような設計は機能しなくなります。たとえば、上記の1行の関数は次のように記述できません。

const m = _ => if(2) console.log("true")  else console.log("false")

次のセクションでは、引き続き1行の矢印関数について説明しますが、次に、中括弧なしでは作成できない関数について説明します。

9.デフォルト値を持つことができる関数パラメーター

ES6では、デフォルトの機能パラメーターに割り当てられる値を指定する機能が導入されました。以前は、JavaScriptにはそのような機能がありませんでした。したがって、パラメータに同様の値を割り当てる必要がある状況では、削減された演算子計算のモデルのようなものに頼る必要がありました||。



しかし、今では同じ問題を非常に簡単に解決できます。

//    2  
//     ,   
function myFunc(a, b, c = 2, d = "") {
  //   ...
}

シンプルなメカニズムですね。しかし、実際には、すべてが一見したところよりもさらに興味深いものです。重要なのは、デフォルト値は、関数呼び出しを含め、何でもかまいません。この関数は、関数の呼び出し時に対応するパラメーターが渡されない場合に呼び出されます。これにより、必要な関数パラメータパターンを簡単に実装できます。

const mandatory = _ => {
  throw new Error("This parameter is mandatory, don't ignore it!")
}

function myFunc(a, b, c = 2, d = mandatory()) {
  //    ...
}

// !
myFunc(1,2,3,4)

// 
myFunc(1,2,3)

ここでは、実際には、中括弧なしでは実行できない、作成時の同じ1行の矢印関数です。重要なのは、関数mandatoryが命令を使用するということthrowです。注意してください-「表現」ではなく「指示」。しかし、これは、関数に必要なパラメーターを装備する機能の最高価格ではないと思います。

10。!!を使用して任意の値をブール型にキャストします。

このメカニズムは、上記の構造と同じ原理で機能します~~。つまり、任意の値を論理型にキャストするには、2つの論理演算子NOT（!!）を使用できるという事実について話します。

!!23 // TRUE
!!"" // FALSE
!!0 // FALSE
!!{} // TRUE

1人のオペレーターが!すでにこのタスクのほとんどを解決しています。つまり、値をブール型に変換してから、反対の値を返します。そして、2番目の演算子!は起こったことを受け取り、その反対を返します。その結果、元の値がブール型に変換されます。



この短い構造は、さまざまな状況で役立ちます。まず、変数に実際のブール値が割り当てられていることを確認する必要がある場合（たとえば、タイプのTypeScript変数について話している場合boolean）。次に、===またはと何かの厳密な比較（を使用）を実行する必要があるtrue場合false。

11.構文の破壊と拡散

このセクションのタイトルで言及されているメカニズムについては、話し合うことができます。重要なのは、正しく使用すれば、非常に興味深い結果につながる可能性があるということです。しかし、ここではあまり深くは行きません。それらを使用していくつかの問題の解決を単純化する方法を説明します。

▍破壊オブジェクト

オブジェクトプロパティの複数の値を通常の変数に書き込むという課題に直面したことがありますか？このタスクは非常に一般的です。たとえば、これらの値を操作する必要がある場合（たとえば、値を変更することによって）、同時に元のオブジェクトに保存されているものに影響を与えません。



オブジェクトの非構造化を使用すると、最小限のコードを使用して同様の問題を解決できます。

const myObj = {
  name: "Fernando",
  age: 37,
  country: "Spain"
}

// :
const name = myObj.name;
const age = myObj.age;
const country = myObj.country;

// 
const {name, age, country} = myObj;

TypeScriptを使用したことのある人なら誰でも、この構文を説明で見たことがあるでしょうimport。これにより、プロジェクトの名前名を多くの不要な関数で汚染することなく、個々のライブラリメソッドをインポートできます。

import { get } from 'lodash'

たとえば、この命令では、ライブラリからlodashメソッドのみをインポートできますget。同時に、このライブラリの他のメソッドはプロジェクトの名前名に分類されません。そして、その中にはたくさんあります。

▍構文を広げ、既存のものに基づいて新しいオブジェクトと配列を作成する

Spread（…）構文を使用すると、既存のものに基づいて新しい配列とオブジェクトを作成するタスクを簡素化できます。これで、このタスクは、文字通り1行のコードを記述し、特別なメソッドを使用せずに解決できます。次に例を示します。

const arr1 = [1,2,3,4]
const arr2 = [5,6,7]

const finalArr = [...arr1, ...arr2] // [1,2,3,4,5,6,7]

const partialObj1 = {
  name: "fernando"
}
const partialObj2 = {
  age:37
}

const fullObj = { ...partialObj1, ...partialObj2 } // {name: "fernando", age: 37}

このアプローチを使用してオブジェクトをマージすると、それらのプロパティが同じ名前で上書きされることに注意してください。これはアレイには適用されません。特に、マージされる配列の値が同じである場合、それらはすべて結果の配列になります。繰り返しを取り除く必要がある場合は、データ構造を使用することに頼ることができますSet。

▍破壊と拡散構文の組み合わせ

破棄は、spread構文と組み合わせて使用​​できます。これにより、興味深い効果を得ることができます。たとえば、配列の最初の要素を削除し、残りはそのままにしておきます（リストの最初と最後の要素の一般的な例のように、その実装はPythonや他の言語で見つけることができます）。また、たとえば、オブジェクトからいくつかのプロパティを抽出し、残りはそのままにしておくこともできます。例を考えてみましょう：

const myList = [1,2,3,4,5,6,7]
const myObj = {
  name: "Fernando",
  age: 37,
  country: "Spain",
  gender: "M"
}

const [head, ...tail] = myList

const {name, age, ...others} = myObj

console.log(head) //1
console.log(tail) //[2,3,4,5,6,7]
console.log(name) //Fernando
console.log(age) //37
console.log(others) //{country: "Spain", gender: "M"}

割り当てステートメントの左側に使用されている3つのドットは、最後の項目に適用する必要があることに注意してください。最初にスプレッド構文を使用してから、個々の変数を記述することはできません。

const [...values, lastItem] = [1,2,3,4]

このコードは機能しません。

結果

今日お話ししたものと同様のデザインが他にもたくさんあります。しかし、それらを使用すると、コードがコンパクトになるほど、使用されている省略された構造に慣れていない人にとっては読みにくくなることを覚えておく価値があります。そして、そのような構成を使用する目的は、コードを縮小したり、高速化したりすることではありません。この目標は、コードから不要な構造を削除し、このコードを読む人の生活を楽にすることだけです。



したがって、すべての人を満足させるために、コンパクトな構成と通常の読み取り可能なコードの間の健全なバランスを維持することをお勧めします。コードを読んでいるのはあなただけではないことを常に覚えておく価値があります。



JavaScriptおよびTypeScriptコードで使用するコンパクトな構造は何ですか？