学習記録

プログラミングの学習中に調べて解決したこと等の記録です。

todoアプリの頭の文字しか表示されない不具合

jsprimer.net

こちらのサイトでtodoアプリを作りながらjsについて勉強していたときのこと。

 

todoアプリ画像

todoアプリ画像

写真のように、todoを投稿すると頭の1文字しか表示されない不具合が発生しました。

デベロッパーツールで追って行ったところ、中のデータはちゃんと「今日の予定」と入っているのに、画面に出力される部分で「今」だけになってしまっていることが判明。

 

原因となっていたコードがこちら。

×誤りバージョン

export function element(strings, values){

○正解バージョン

export function element(strings, ...values){

 

何が違うのか?

 

はい、第二引数のvaluesですね!

 

入力するtodoの文字数が毎回異なるため、毎回引数に入ってくる文字数の個数が異なる→「可変長引数」

引数の前に「...」をつける書き方をして「これは可変長引数ですよ」と宣言しなければいけなかった→「残余引数(レストパラメータ)」

引数の前に「...」をつけなかったことにより、引数が1個に固定されてしまい、頭の文字のみ表示された→不具合の原因

 

ということっぽいです。

 

可変長引数(かへんちょうひきすう)とはプログラミング言語において、関数やメソッドやマクロの引数が固定ではなく任意の個数となっている引数のことである。

可変長引数 - Wikipedia

 

残余引数構文により、不定数の引数を配列として表すことができます。

残余引数 - JavaScript | MDN

 

参考にさせていただいたブログ

takamints.hatenablog.jp

 

「今日の予定」で引数に丸々入るものだとばっかり思い込んでいたので、「今」「日」みたいに分かれてるって発想がそもそもありませんでした。

 

でも、「じゃあ中のデータは「今日の予定」で丸々入っていたのはなんで?」と調べてもよくわかっていない部分もあるので、分かり次第追記か別記事を書きたいと思います。

 

半分ただの覚書みたいになってしまいましたが、とりあえず新しい知識がちょっとだけでも身についたということで、一応記録までに。

 

 

 

今回は以上となります。