JavaScriptガイドパート6：例外、セミコロン、テンプレートリテラル

JavaScriptチュートリアル翻訳のこの部分のトピックは、例外処理、自動セミコロン機能、およびテンプレートリテラルです。

→ パート1：最初のプログラム、言語機能、標準
→ パート2：コードスタイルとプログラム構造
→ パート3：変数、データ型、式、オブジェクト
→ パート4：機能
→ パート5：配列とループ
→ パート6：例外、セミコロン、ワイルドカードリテラル
→ パート7：厳格モード、このキーワード、イベント、モジュール、数学計算
→ パート8：ES6機能の概要
→ パート9：ES7、ES8、およびES9標準の概要

例外処理

コードの実行中に問題が発生すると、JavaScriptで例外として表されます。 例外を処理する手段を講じない場合、例外が発生すると、プログラムが停止し、コンソールにエラーメッセージが表示されます。

次のコードスニペットを検討してください。

let obj = {value: 'message text'} let notObj let fn = (a) => a.value console.log(fn(obj)) //message text console.log('Before') //Before console.log(fn(notObj)) //,    console.log('After') 

ここに、 valueプロパティを持つオブジェクトを処理するために使用する予定の関数があります。 彼女はこのプロパティを返します。 この関数を本来の目的、つまり、動作するように設計されたオブジェクトを転送するために使用する場合、実行時にエラーは生成されません。 しかし、この例では宣言されているが初期化されていない変数に不適切なものを渡すと、 undefined値のvalueプロパティにアクセスしようとするとエラーが発生します。 エラーメッセージがコンソールに送信され、プログラムの実行が停止します。

Node.jsでこのコードを実行すると、次のようになります。


Node.jsのTypeError例外

WebページのJSコードでこのようなことが発生した場合、同様のメッセージがブラウザーコンソールに送信されます。 これが実際のプログラムで発生する場合、たとえば-Webサーバーコードでは、この動作は非常に望ましくありません。 プログラムを停止することなく、エラーをキャッチし、それを修正するための対策を講じることができるメカニズムがあれば便利です。 このようなメカニズムはJavaScriptに存在し、 try...catchコンストラクトによって表されます。

▍建設しよう...キャッチ

try...catchコンストラクトを使用すると、例外をキャッチして処理できます。 つまり、エラーを引き起こす可能性のあるコードを含むtryブロックと、エラーが発生したときに制御が転送されるcatchが含まれます。 tryブロックには、すべてのプログラムコードが含まれているわけではありません。 実行時エラーを引き起こす可能性のある部分はそこに配置されます。 たとえば、外部ソースから受信した特定のデータを処理する必要がある関数の呼び出し。 そのようなデータの構造が関数で予想されるものと異なる場合、エラーが発生する可能性があります。 これは、 try...catch構成スキームがどのようなものかを示していtry...catch 。

 try { // ,     } catch (e) { //  } 

コードがエラーなしで実行された場合、 catch （例外ハンドラー）は実行されません。 エラーが発生した場合、エラーオブジェクトがそこに転送され、このエラーに対処するためにいくつかのアクションが実行されます。

この例では、この構造を適用して、プログラムの危険なセクションfn()関数fn()呼び出されるセクション）を保護します。

 let obj = {value: 'message text'} let notObj let fn = (a) => a.value try {   console.log(fn(obj)) } catch (e) {   console.log(e.message) } console.log('Before') //Before try {   console.log(fn(notObj)) } catch (e) {   console.log(e.message) //Cannot read property 'value' of undefined } console.log('After') //After 

Node.jsでこのコードの結果を見てみましょう。


Node.jsでのエラー処理

ご覧のとおり、この例を前の例と比較すると、すべてのコードが実行され、問題の行の前にあるコードと、その行の後にあるコードが実行されます。 Errorオブジェクトのmessageプロパティの値をコンソールに出力するだけで、エラーを「処理」します。 実際に使用されるコードで発生したエラーの処理は、エラーによって異なります。

上記でtry...catchブロックについて説明しましたが、実際には、この構造には別のブロックが含まれていますfinally 。

▍最後にブロック

finallyブロックには、 tryブロックで実行されるコードでエラーが発生したかどうかに関係なく実行されるコードが含まれています。 外観は次のとおりです。

 try { //  } catch (e) { //  } finally { //  } 

finallyブロックは、 try...catch...finallyブロックにcatchブロックがない場合にも使用できます。 このアプローチでは、たとえばtryブロックで占有されているリソースを解放するために、 catch使用した構築と同じ方法で使用されます。

▍ネストされたtryブロック

tryブロックは一緒にネストできます。 この場合、例外は最も近いcatch処理されcatch 。

 try { //  try {   //   } finally {   // -  } } catch (e) { } 

この場合、内部tryブロックで例外が発生すると、外部catch処理されcatch 。

▍自己生成の例外

throwステートメントを使用して、自分で例外をスローできます。 外観は次のとおりです。

 throw value 

この命令が実行された後、制御は最も近いcatch転送されcatch 。そのようなブロックが見つからない場合、プログラムは停止します。 例外値は何でもかまいません。 たとえば、ユーザー定義のエラーオブジェクト。

セミコロンについて

JavaScriptでのセミコロンの使用はオプションです。 一部のプログラマーはそれらを使用せず、自動配置システムに依存し、絶対に必要な場所にのみ配置します。 可能な限りそれらを配置することを好む人もいます。 この資料の著者は、セミコロンなしでやりたいプログラマーのカテゴリーに言及しています。 彼は、2017年の秋にそれらを使用せず、明示的に挿入せずにどこでも削除できるようにPrettierを設定することにしたと言います。 彼の意見では、セミコロンなしのコードはより自然で読みやすいように見えます。

おそらく、JS開発者のコ​​ミュニティは、セミコロンに関して2つのキャンプに分かれていると言えます。 同時に、明示的なセミコロンの配置を規定するJavaScriptスタイルガイドと、それらを使用しないことを推奨するガイドもあります。

JavaScriptには自動セミコロン（自動セミコロン挿入、ASI）のシステムがあるため、これはすべて可能です。 ただし、JSコードでは、多くの状況でこれらの文字を使用せずに実行できるという事実、および実行のためにコードを準備するときにセミコロンが自動的に配置されるという事実は、プログラマーがこれが発生する規則を知る必要がないという意味ではありません。 これらのルールを無視するとエラーが発生します。

automatic自動セミコロンのルール

JavaScriptパーサーは、次の状況でプログラムテキストを解析するときにセミコロンを自動的に追加します。

1. 次の行が現在のコードを中断するコードで始まる場合（特定のコマンドのコードは複数の行にある場合があります）。
2. 次の行が文字}で始まる場合、現在のブロックを閉じます。
3. プログラムコードファイルの終わりが検出されたとき。
4. returnコマンドのある行。
5. breakコマンドのある行。
6. throwコマンドのある行。
7. continueコマンドのある行。

expected期待どおりに機能しないコードの例

上記のルールを示す例をいくつか示します。 たとえば、次のコードフラグメントを実行した結果、何が出力されると思いますか？

 const hey = 'hey' const you = 'hey' const heyYou = hey + ' ' + you ['h', 'e', 'y'].forEach((letter) => console.log(letter)) 

このコードを実行しようとすると、 Uncaught TypeError: Cannot read property 'forEach' of undefinedエラーがUncaught TypeError: Cannot read property 'forEach' of undefinedれます。ルールNo. 1に基づいて、 Uncaught TypeError: Cannot read property 'forEach' of undefinedシステムのUncaught TypeError: Cannot read property 'forEach' of undefined 。次のようにコードを解釈しようとします。

 const hey = 'hey'; const you = 'hey'; const heyYou = hey + ' ' + you['h', 'e', 'y'].forEach((letter) => console.log(letter)) 

この問題は、最初の例の最後から2番目の行の後にセミコロンを置くことで解決できます。

ここに別のコードがあります。

 (1 + 2).toString() 

実行の結果は、文字列"3"出力になります。 しかし、次のコードスニペットにこのようなものが現れたらどうなりますか？

 const a = 1 const b = 2 const c = a + b (a + b).toString() 

この場合、 TypeError: b is not a functionエラーが表示されます。上記のコードは次のように解釈されるため、 TypeError: b is not a function 。

 const a = 1 const b = 2 const c = a + b(a + b).toString() 

ここで、ルール4に基づく例を見てみましょう。

 (() => { return {   color: 'white' } })() 

このIIFEはcolorプロパティを含むオブジェクトを返すと思うかもしれませんが、実際にはそうではありません。 代わりに、システムはreturnコマンドの後にセミコロンを追加するため、関数はundefinedを返します。

同様の問題を解決するには、オブジェクトリテラルの左中括弧をreturnコマンドと同じ行に配置する必要があります。

 (() => { return {   color: 'white' } })() 

次のコードフラグメントを見ると、メッセージボックスに0が表示されていると思うかもしれません。

 1 + 1 -1 + 1 === 0 ? alert(0) : alert(2) 

ただし、ルール1に従ってこのコードは次のように表されるため、2を出力します。

 1 + 1 -1 + 1 === 0 ? alert(0) : alert(2) 

JavaScriptでセミコロンを使用する場合は注意が必要です。 セミコロンの熱烈な支持者とその敵に会うことができます。 実際、コードにセミコロンが必要かどうかを判断するときは、JSが自動置換をサポートしているという事実に頼ることができますが、コードで必要かどうかは全員が自分で決定する必要があります。 主なことは、選択したアプローチを一貫して合理的に適用することです。 セミコロンの配置とコードの構造に関して、次の規則を推奨できます。

• returnコマンドを使用して、コマンドと同じ行に関数から返されるものを配置します。 同じことがbreak 、 throw 、 continueコマンドについてcontinue言えます。
• この行は前の行と自動的に結合され、システムによって関数の呼び出しまたは配列要素へのアクセスの試行として提示される可能性があるため、コードの新しい行がブラケットで始まる状況に特に注意してください。

一般に、セミコロンを自分で置くか、自動配置に依存するかにかかわらず、コードをテストして、期待どおりに動作することを確認することができます。

引用符とワイルドカード文字

JavaScriptで引用符を使用する機能について説明しましょう。 つまり、JSプログラムで許可されている次の種類の引用について説明しています。

• 単一引用符。
• 二重引用符。
• バッククォート。

一般に、一重引用符と二重引用符は同じと見なすことができます。

 const test = 'test' const bike = "bike" 

それらの間には実質的に違いはありません。 おそらく、唯一の顕著な違いは、単一引用符で囲まれた文字列では、単一引用符の文字をエスケープする必要があり、二重引用符で囲まれた文字列では、文字が二重であることです。

 const test = 'test' const test = 'te\'st' const test = 'te"st' const test = "te\"st" const test = "te'st" 

さまざまなスタイルガイドで、単一引用符の使用に関する推奨事項と二重引用符の使用に関する推奨事項の両方を見つけることができます。 この資料の著者は、JSコードでは、単一引用符のみを使用し、二重引用符はHTMLコードでのみ使用するよう努めていると述べています。

バックティックは、2015年のES6標準のリリースでJavaScriptに登場しました。 他の新機能の中でも特に、複数行の文字列を簡単に記述することができます。 このような文字列は、エスケープシーケンス\nを使用して、通常の引用符を使用して指定することもできます。 こんな感じです。

 const multilineString = 'A string\non multiple lines' 

反転コンマ（通常、それらを入力するためのボタンはキーボードの数字キー1の左側にあります）は\nなしで実行します。

 const multilineString = `A string on multiple lines` 

しかし、逆引用符の可能性はこれに限定されません。 そのため、逆引用符を使用して文字列を記述する場合、 ${}構成を使用して、JS式の計算結果の値をそれに代入することができます。

 const multilineString = `A string on ${1+1} lines` 

このような文字列は、テンプレートリテラルと呼ばれます。

テンプレートリテラルには次の機能があります。

• 複数行テキストをサポートしています。
• それらは文字列を補間することを可能にします;組み込み式はそれらで使用できます。
• タグ付きテンプレートを使用して、独自のドメイン固有言語（DSL、ドメイン固有言語）を作成できます。

これらの機能について話しましょう。

▍複数行テキスト

バッククォートで複数行のテキストを設定するとき、そのようなテキストのスペースは他の文字と同じくらい重要であることを覚えておく必要があります。 たとえば、次の複数行のテキストを考えます。

 const string = `First               Second` 

彼の結論はおよそ以下を与えるでしょう。

 First               Second 

つまり、このテキストがエディターに入力されたときに、おそらくプログラマーは、出力時にFirstとSecondという単語が厳密に互いの下に表示されることを期待していましたが、実際はそうではありません。 この問題を回避するには、改行で複数行テキストを開始し、逆引用符を閉じた直後に、行の先頭または末尾にある空白文字を削除するtrim()メソッドを呼び出しtrim() 。 このような文字には、特にスペースとタブが含まれます。 行末文字も削除されます。

こんな感じです。

 const string = ` First Second`.trim() 

▍補間

ここでの補間とは、変数と式を文字列に変換することを意味します。 これは、 ${}構造を使用して行われます。

 const variable = 'test' const string = `something ${ variable }` //something test 

式も${} 、 ${}ブロックには何でも追加できます。

 const string = `something ${1 + 2 + 3}` const string2 = `something ${foo() ? 'x' : 'y' }` 

テキストsomething 6が定数stringに入り、テキストsomething xまたはテキストsomething yが定数string2書き込まれます。 関数foo()がtrueまたはfalseを返すかどうかに依存します（疑問符の前にあるものがtrueの場合、疑問符の後にあるものを返す三項演算子がここで使用されます。コロンの後に来る）。

aggedタグ付きテンプレート

タグ付きテンプレートは、多くの一般的なライブラリで使用されています。 それらの中には、 Styled Components 、 Apollo 、 GraphQLがあります。

このようなパターンが出力するものは、関数によって定義されたいくつかのロジックに従います。 タグ付きテンプレート文字列を操作する方法を示す、 出版物の 1つで少し修正された例を次に示します。

 const esth = 8 function helper(strs, ...keys) { const str1 = strs[0] //ES const str2 = strs[1] //is let additionalPart = '' if (keys[0] == 8) { //8   additionalPart = 'awesome' } else {   additionalPart = 'good' } return `${str1}${keys[0]}${str2}${additionalPart}.` } const es = helper`ES ${esth} is ` console.log(es) //ES 8 is awesome. 

ここで、 8番目の数字がesth定数に書かれている場合、 ES 8 is awesome行はesます。 それ以外の場合は、別の行があります。 たとえば、 esth数値6 esth場合、 ES 6 is goodように見えます。

スタイル付きコンポーネントは、タグ付きテンプレートを使用してCSS文字列を定義します。

 const Button = styled.button` font-size: 1.5em; background-color: black; color: white; `; 

Apolloでは、GraphQLクエリを定義するために使用されます。

 const query = gql` query {   ... } ` 

タグ付きテンプレートの仕組みを知っていれば、前の例のstyled.buttonとgqlは単なる機能であることを理解するのは簡単です。

 function gql(literals, ...expressions) { } 

たとえば、 gql()関数は、計算の結果である可能性のある文字列を返します。 この関数のliteralsパラメーターは、テンプレートリテラルの内容を部分に分割した配列であり、式は式の評価結果を含みます。

次の行を解析しましょう。

 const string = helper`something ${1 + 2 + 3} ` 

helper関数は、2つの要素を含むliterals配列を取得しliterals 。 最初の行にはスペースが付いたテキストがあり、2行目には空の行があります。つまり、式${1 + 2 + 3}と行の終わりの間にあります。 espressions配列には6つの要素があります。
これはもっと複雑な例です。

 const string = helper`something another ${'x'} new line ${1 + 2 + 3} test` 

ここで、 helper関数では、次の配列が最初のパラメーターとして取得されます。

 [ 'something\nanother ', '\nnew line ', '\ntest' ] 

2番目の配列は次のようになります。

 [ 'x', 6 ] 

まとめ

今日は、例外処理、セミコロンの自動置換、およびJavaScriptのテンプレートリテラルについて説明しました。 次回は、言語のより重要な概念をいくつか見ていきます。 特に-厳格モード、タイマー、数学計算で動作します。

親愛なる読者！ JavaScriptでタグ付きテンプレートの機能を使用していますか？