undefinedについて

Question

実現したいこと

localstorageの全データをalert内に表示するうえで、未定義なコード（document.inner +=)を正規なコード（確実に使える機能）に書き換えたい。

現状

下記コードのように変数を複数使用してalert表示していて、undefinedが表示されてます。
非定義な変数はvar all なのですが、これに似た代用な正規コードがわかりません。



document.inner += の意図(思い付きは）、
for(var i = 1; i < localStorage.length; i++){
var key = localStorage.key(i); //＝なので毎回代入・上書きされる
var all = localStorage.getItem(key);//＝なので毎回代入・上書きされる }
なので上書きされないよう、document.getElementById('').innerHTML += ;を入れたのですが、alertにidが無い為、getElementById('')を抜いたdocument.inner +=を入れたところ機能していたので安心していたのですが、document.inner +=　は未定義なためundefinedが表示されます。

上記で述べた様にlocalstrageの全データをalert内に表示し、正規コードを使いalert表示.画像のような形からundefinedを除いている結果を出力したいです。

Comments

[m.ts10806]

>localstorage内のデータ詳細は、key 0 = 太郎；key 1 = あいうえお；key 2 = かきくけこ；となってます。）

本当にそのまま入ってるなら取れるわけがないです。デベロッパツールのキャプチャを提示してください

[syosinsyascript]

失礼しました。localStorageのkeyとvalueを提示したかったのですが、誤解を招く事となりました。修正しております。

[m.ts10806]

デベロッパツールのキャプチャを提示してください。手打ちではミスが起き得ます。

[H40831]

48行目に書いてある document.inner というものが存在しないので、あなたが何をしたいのか想像できなくて、回答者のみなさんが困っていますよ？
存在しないものを表示しようとしているから undefined がでるんです

[syosinsyascript]

私のしたいことは、上記でも書いている様に、undefinedを非表示にしたい事です。そして存在しないものを使って私のしたい事が出来ているのですが、ただundefinedが表示されるのです。総合的に私のしたいことは上記のalertの表示からundefinedを除く事です。説明不足で申し訳ないですが、代用コード又はundefinedの非表示するコードを質問しています。ご存じでしたら、ご教授いただけますか？

[H40831]

私が言った「あなたが何をしたいのか」というのは
「あなたが書いた document.innner というワードは、何をしたくて書いたのか」ということです。

48行目のコードを
var all = "\n" + get;
に直したら、undefined は表示されなくなると思います。

[maisumakun]

document.innerは何を意図して書いているものですか？

[m.ts10806]

提示された画像はソースコードです。
ソースコードはマークダウンのcode機能で良いのです。
提示してほしいのはLocalstorageの情報。
Chromeでしたら
デベロッパツール→Applicationタブ→Local Storage　です。

[m.ts10806]

>undefinedを非表示にしたい事
「表示させない」と「解決」は別のものですが、認識問題ないでしょうか。
非表示にしたいだけなら事前でif文で存在チェックをかませば良いだけです。

[syosinsyascript]

document.inner += の意図としては、
for(var i = 1; i < localStorage.length; i++){
var key = localStorage.key(i); //＝なので毎回代入・上書きされる
var all = localStorage.getItem(key);//＝なので毎回代入・上書きされる
}なので上書きされないよう、document.getElementById('').innerHTML += ;を入れたのですが、alertにidが無い為、getElementById('')を抜いたdocument.inner +=を入れたところ機能していたので安心していたのですが、undefinedが表示されていることにきずきましてちゃんと定義されたコードをご教示してもらうために質問させていただきました。

[syosinsyascript]

意図ではなく思いつきになります。なのでundefinedがでる理由も理解しています。

[m.ts10806]

＞意図ではなく思いつきになります

コードは思った通りではなく、書いた通りに動きます。
なので「こんな機能あったらいいな」と雑に書いても動かないのは当然です。
仕様書（ドキュメント・リファレンス）を確認して確実に使える機能を使ってください。

[syosinsyascript]

>コードは思った通りではなく、書いた通りに動きます。
そうですね。確実に使える機能がわからないので質問させてもらってます。

[syosinsyascript]

<「表示させない」と「解決」は別のものですが、認識問題ないでしょうか。
確かにそうですね、解決したいです。しかし解決方法がなければご教示いただいたif文で存在チェックをかませる手段を取ろうと思います。ありがとうございます。

[miyabi_pudding]

> undefinedがでる理由も理解しています。

であるならば、
なぜ、

> undefinedを正しい定義(var all)，又は非表示(alert内に)のやり方をご教授ください。

の解決方法がわからないのでしょうか？

そして、

> 非定義な変数はvar all

とありますが、
allは定義されている変数です。

ならば、、、なぜalertにundefinedと表示されるのか、それの解消法の回答を求めている、ということでよろしいですか？

[m.ts10806]

ところで、いつ質問は修正されるのでしょうか。
基本的にこの「質問への追記修正欄」で指摘されたことや聞かれたことは質問本文に反映してもらいたいのですけど。
多くは「質問内容のみ」を見て回答します。
コードは画像で提示され、LocalStorageの正しい情報も提示されない状態でどう答えろというのでしょうか　　というのがこちらの本音です。

[AkitoshiManabe]

> >localstorage内のデータ詳細は、key 0 = 太郎；key 1 = あいうえお；key 2 = かきくけこ；となってます。）
ディベロッパーツールのキャプチャ（Applicationタブの Local Storage で表示される内容）を示してください。

[H40831]

48行目のコードを
var all = "\n" + get;
に直したら、undefined は表示されなくなるのですが、それじゃダメなんですか？

[syosinsyascript]

>undefined は表示されなくなるのですが、それじゃダメなんですか？
確かに表示は消えるのですが、allの値がlocalstorageの最後の値だけになるので(上書きされるため？）違う物を探しております。説明ができなくて申し訳ないです。

[H40831]

ああ、そのコメントで、やっと何が問題なのか把握できました

[syosinsyascript]

頭を悩ますコメントばかりで申し訳ないです。何が分からないのか分からない状態でして、状況の説明もままならないド素人な為、お世話おかけしております。

[miyabi_pudding]

変数宣言、代入、四則演算、文字列連結、
と、そこらへんを理解していかないと、解決しないと思いますよ。
（JavaScriptというか、プログラミングの基本）

[m.ts10806]

前の質問で回答に書いた「ループと変数の基本部分で間違えています。」というアドバイスが全く活きていないことが分かりました。
まぁ役に立たないと思うのは勝手ですが、同じような指摘をずっとされ続けていて何も思うところがないのでしたら、成長の余地はなさそうですね。

[syosinsyascript]

m.ts10806さんのコメントやアドバイスは毎度有難く頂いていますし勉強させてもらっています。勉強が足りていないのは自分でも承知しておりますし、毎度質問させていただく度に痛感しております。
今後と無いよう精進します。

Answer 1

document.inner

var all = document.inner += "\n" + get;

そもそも、document.inner なるプロパティは存在しません。

console.log('inner' in document); // false

将来的に inner プロパティが実装される可能性を踏まえると、新しいプロパティを独自拡張すべきではありません。

WeakMap

どうしても、document に紐付けしたいのであれば、WeakMapを使用して下さい。

• WeakMap - JavaScript | MDN

const inner = new WeakMap([[document, 'あいうえお']]);

console.log(inner.get(document)); // "あいうえお"

Re: syosinsyascript さん

Comments

[syosinsyascript]

いろんな物があるのですね。weakmap勉強してみます。ありがとうございます。ただ私はdocumentと紐付けたいわけでなく、alert内にlocalstrageの全データを改行して表示したいのですが、どうもalert内に"undefined"が出現しますので質問させていただきました。weakmapはalert内にlocalstrageの全データを改行して表示できますか？もしご存じでしたらご教授ください。お願いします。

[miyabi_pudding]

横槍失礼します。

> weakmapはalert内にlocalstrageの全データを改行して表示できますか？

本件から離れるので、別質問にした方がいいですよ。
ただ、本質問で、みなさんが言われていることは（質問修正依頼のコメント含め）、基本も含めて、しっかり理解すべき内容なので、
よく参照してください。
（でないと、次の質問も同じ様な事を言われる結果になりそう。）

[syosinsyascript]

ご指摘ありがとうございます。

[think49]

To: syosinsyascript さん

> どうもalert内に"undefined"が出現します

ですから、「document.innerが存在しないこと」が原因と指摘しているのですが…。

> weakmapはalert内にlocalstrageの全データを改行して表示できますか？

出来ません。
WeakMapについては、回答で示したMDNを読んで下さい。

---

そもそも、document.inner += で代入しているのは、どういう意図ですか？
何がしかの理由があって、代入しているのではないのですか。

[think49]

私の指摘は、H40831 さん、maisumakun さんの指摘と同様です。
私はあなたが何がしかの狙いがあって、document.innerを使用している前提で回答しました。

もしも、何もわからないままに、わからないコードを書いているとしたら、「コードの動きを理解すること」が第一にすべき作業と考えます。

[syosinsyascript]

おっしゃる通りです。しっかり勉強します。

[think49]

部分的に返答すると伝わらないので、止めた方が良いです。

結局のところ、document.innerに意図はなく、コードの意味がわからない状態で書いていたのですか。

あるいは、どこかのサイトでサンプルコードを持ってきただけとかですか。

https://teratail.com/questions/286894
のm.ts10806さんの回答コードに document.inner+= を追加したのは分かるんですが。

Answer 2

順番に解説しますと、
まず、 document.inner が空なのが undefined が表示される原因なので、
document.inner をundefinedではなく、空の文字列にしておきます。

document.inner = '';

function his(){
    var key = 0;
    var name = localStorage.getItem(key);
    var data = parseInt(localStorage.length) - parseInt(1);
    for(var i = 1; i < localStorage.length; i++){
        var get = localStorage.getItem(localStorage.key(i));
        var all = document.inner += "\n" + get;
    }
    alert("name :" + name + "\n\n" + "counts :" + data + all);
    localStorage.reload();
}

これで、undefinedは表示されなくなります。

しかし、特に意味もなくdocument.inner を使っているのなら、わかりやすい名前の変数に変えましょう。
ここではallにしておきます。

var all = '';

function his(){
    var key = 0;
    var name = localStorage.getItem(key);
    var data = parseInt(localStorage.length) - parseInt(1);
    for(var i = 1; i < localStorage.length; i++){
        var get = localStorage.getItem(localStorage.key(i));
        var all = all += "\n" + get;
    }
    alert("name :" + name + "\n\n" + "counts :" + data + all);
    localStorage.reload();
}

こうすると、var all = all += "\n" + get;という一文に無駄な記述があることに気づきますので、
all += "\n" + get; にしましょう。

var all = '';

function his(){
    var key = 0;
    var name = localStorage.getItem(key);
    var data = parseInt(localStorage.length) - parseInt(1);
    for(var i = 1; i < localStorage.length; i++){
        var get = localStorage.getItem(localStorage.key(i));
        all += "\n" + get;
    }
    alert("name :" + name + "\n\n" + "counts :" + data + all);
    localStorage.reload();
}

これでお望みの結果になったのではないでしょうか？

Comments

[syosinsyascript]

なるほど、コードをみるとうなずけるのですが自分で考えるとなるとチンプンカンプンになってしまいます。
説明やコメントなど親切に取り合っていただきありがとうございます。

[H40831]

前回の質問など閲覧してないので、どのような学習方法でされているか存じませんが、
もし、そのときそのときに必要になった知識だけ学んでいるようなら、大事なところが欠けますので
流れに一貫性のある資料でひととおり学ぶことをオススメします

Answer 3

他の方がおっしゃる通り、document.innerというものは存在しないので、
出力する際、undefinedとなることはご理解いただけたでしょうか？
では、なぜ、all変数には、"undefined"（あえてクォーテーションで文字列として扱う）
が格納されているのか。
（もちろん他の文字も格納されているが、省略）

それは、
var all = document.inner += '\n' + get;は、文字列連結になっているからです。
JavaScriptは動的型付けのため、
異型のデータを連結する際、一つの型に丸めて連結される性質があります。
例えば、下記のような現象が起きます。

const a = 1 + 2; // 3
const b = '1' + 2; // "12"

というようになります。
すなわち今回の場合、
document.innerは、未定義のため、文字列連結をする際、
"undefined"という文字列として連結されます。
よって、allには、"undefined\n" + getの値というデータが格納されることになります。

なので、allが未定義状態なのではなく、
単純に、未定義の値（undefined）が文字列連結された文字列データがallに入っていて、
それがalertで表示されていただけということです。

では、どうすれば、未定義変数だった場合は、空文字（非表示）とすることができるかというと、
変数の存在可否は、typeofキーワードを使うのが、単純でやりやすいのかな、と思います。

const a = typeof hoge == 'undefined' ? '' : hoge;

他にも、新しい構文で、null合体演算子というものもありますので、
そちらも使えるかと。
（これは、左辺がnullかundefinedでなければそのまま左辺、そうだったら右辺の値を使うという演算子）

const obj = {};
const a = obj.inner ?? ''; // ''

変数にどんなデータが入っているかはプログラミングにおいては、とても大事なことになりますので、
よくよく学習されてください。

Comments

[syosinsyascript]

すごくわかりやすいです。ありがとうございます。document.innerが未定義な為それの文字列としてundefinedが表示されるということですね。気になる点があるのですが、文字列として認識しているはずなのにdocument.inner += を外すとallの値が上書きされてstorageの最後の値のみ出力されます。それはどれで反応しているのか分かりますか？

[miyabi_pudding]

そりゃそうですよ、
"\n" + getと続いてるので、
"\n"とgetに格納されているstrageの値が文字列として、allに格納されるからです。

[miyabi_pudding]

代入演算に関しても、もっと理解深めてください。

[syosinsyascript]

そうですね。全体的に理解を深めたいと思います。説明や回答を親切にありがとうございます。

Answer 4

おそらくdocument.innerがundefinedで、それがそのまま表示されているように思えます。

undefinedを正しい定義(var data)，又は非表示(alert内に)のやり方をご教授ください

document.innerが本来何を意図した値なのか不明なので非表示にする方法だけ紹介します。
単純に三項演算子を使った方法です。

var data  = (document.inner? document.inner : "") + "\n" + "あいうえお";

Comments

[syosinsyascript]

(document.inner? document.inner : "")を使って色々やってみましたが、うまく機能しませんでした。
三項演算子について調べてみます。ありがとうございます。

[syosinsyascript]

又、もしdocument.innerの様に反応するような代用コードを存じてましたらご教授いただけますか？お願いします。

[maisumakun]

forループの外側でvar all = '';を宣言して、ループ内ではall+=としていく、という形ではだめでしょうか？

[m.ts10806]

私も単純な文字列に追記の形ではダメな理由が分かりません。

[syosinsyascript]

>forループの外側でvar all = '';を宣言して、ループ内ではall+=としていく、という形ではだめでしょうか？
本当ですね、すっかりやりたいことが出来ました。皆様、お騒がせしてすみません。しっかりと色々と理解を深めます。ありがとうございました。