質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
エスケープ処理

エスケープ処理とは、一連の文字や一文字に対して、一定の規則に従って別の意味を適用する処理過程です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1072閲覧

JavaScriptのエスケープ処理関数の引数...valuesについて

maskmelon

総合スコア63

エスケープ処理

エスケープ処理とは、一連の文字や一文字に対して、一定の規則に従って別の意味を適用する処理過程です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/07/05 01:22

編集2020/07/05 02:54

JavaScript

1function escapeHTML(strings, ...values) { 2 return strings.reduce((result, str, i) => { 3 const value = values[i - 1]; 4 if (typeof value === "string") { 5 return result + escapeSpecialChars(value) + str; 6 } else { 7 return result + String(value) + str; 8 } 9 }); 10}

上記はHTMLの記述をstringsに渡して特殊記号をエスケープする関数なのですが、第2引数の...valuesは何を指しているのでしょうか?

ちなみに下記のような形で使われています。ここでは第2引数を取っていないように見えることも混乱を招いています。

JavaScript

1function fetchUserInfo(userId) { 2 fetch(`https://api.github.com/users/${encodeURIComponent(userId)}`) 3 .then(response => { 4 if (!response.ok) { 5 console.error("エラーレスポンス", response); 6 } else { 7 return response.json().then(userInfo => { 8 // HTMLの組み立て 9 const view = escapeHTML` 10 <h4>${userInfo.name} (@${userInfo.login})</h4> 11 <img src="${userInfo.avatar_url}" alt="${userInfo.login}" height="100"> 12 <dl> 13 <dt>Location</dt> 14 <dd>${userInfo.location}</dd> 15 <dt>Repositories</dt> 16 <dd>${userInfo.public_repos}</dd> 17 </dl> 18 `; 19 // HTMLの挿入 20 const result = document.getElementById("result"); 21 result.innerHTML = view; 22 }); 23 } 24 }).catch(error => { 25 console.error(error); 26 }); 27} 28 29function escapeSpecialChars(str) { 30 return str 31 .replace(/&/g, "&amp;") 32 .replace(/</g, "&lt;") 33 .replace(/>/g, "&gt;") 34 .replace(/"/g, "&quot;") 35 .replace(/'/g, "&#039;"); 36} 37 38function escapeHTML(strings, ...values) { 39 return strings.reduce((result, str, i) => { 40 const value = values[i - 1]; 41 if (typeof value === "string") { 42 return result + escapeSpecialChars(value) + str; 43 } else { 44 return result + String(value) + str; 45 } 46 }); 47} 48

(参考サイト)
https://jsprimer.net/use-case/ajaxapp/display/

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/07/05 02:00 編集

例示のソースが文法的におかしいので最低限動くものを提示してください userInfoなどの情報も不足しています
maskmelon

2020/07/05 02:59 編集

コメントありがとうございます。ソースコード全体を追記させていただきました。
guest

回答1

0

ベストアンサー

第2引数の...valuesは何を指しているのでしょうか?

残余引数です。

【残余引数 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Functions/rest_parameters

関数の最後の引数に ... の接頭辞を付けると、 (ユーザーが提供した) その位置にある残りの引数を JavaScript の「標準の」配列の中に入れることができます。

投稿2020/07/05 01:49

kei344

総合スコア69606

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maskmelon

2020/07/06 09:09

回答ありがとうございます。残余引数について理解できました。 例示したコードのようにHTMLの記述全体を引数として代入した場合、位置引数と残余引数はどのように分けられるのでしょうか?
maskmelon

2020/07/12 11:03

valuesに埋め込まれる値が配列として入り、stringsに細切れになったHTMLが配列として入るんですね。コード例を参考にして理解することができました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問