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

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

ただいまの
回答率

88.78%

for文の二重ループを使用して図形を作る、というコードが理解できません。

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 538

hayamine1111

score 11

str = str + ""; というコードが理解できません

以下の内容を示すコードを見て、一部理解できない箇所があります。

JavaScriptで、for文を使った二重ループを使用して、「*」を縦横に並べて長方形を作るという内容です。縦横に並べる「*」の個数は、1~10までの数値でランダムに選出します。

発生している問題・エラーメッセージ

以下のソースコードをにある「str += "";」(3行目)と、その少し下にある「str = str + "*";」(6行目) と「str = str + "\n"」(8行目)の3つのコードの意味がわかりません。

3行目のコードはなぜ「""」となっているのでしょうか。
6,8行目の「str = str + "*"; 」「str = str + "\n"」は、なぜ「str +」となっているのでしょうか。
並べるのは「*」だけなので、「str +」は必要ないのではと思うのですが、それを削除するとコンソールには何も表示されなくなります。

エラーメッセージは表示されません。

JavaScript

let width = Math.round(Math.random() * 10);
let height = Math.round(Math.random() * 10);
let str = "";
for(let i = 1; i <= height; i++){
    for(let j = 1; j <= width; j++){
        str =str + "*";
    }        
    str =str +  "\n";
}
console.log(str);

試したこと

【3行目について考えたこと】
・「str = "";」は、空白を入れる(strの存在を残しておく??)という意味。ただ、そもそも空白(" ")ではないので、違うだろうとは思います。
・まだ代入するものはないけど、とりあえず変数strを作っておきたいため。
・後述する「str =」を後から入れるため。

【6、8行目について考えたこと】
・試しに「str +」を消して、「str = "*";」「str = "\n";」としてみましたが、そうするとコンソールには何も表示されなくなります。
・3行目で作った変数strに足すことで、文字列を具現化できる(???)。
正直さっぱりです。

当方まだJSを勉強し始めて日が浅いため、基本的な理解が足りない部分があると思います。
うまく伝えられているか不安ですが、もしよろしければどなたか回答をしていただけると非常に助かります。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • 退会済みユーザー

    退会済みユーザー

    2019/04/30 13:09

    =は、数学的な等価ではなく、文字列を連結して再代入していると考えては?

    キャンセル

  • hayamine1111

    2019/04/30 15:32

    hai_haiさん、ありがとうございます。
    再代入ですか。そう考えるとしっくりくるような、、、。

    キャンセル

回答 2

+1

3行目の理解はだいたい合っています。正確には空白ではなく、長さ0の文字列で初期化しています。表示に必要な文字は後続の処理で追加していくので、最初は何もなしで構わないわけです。

6行目と8行目は、表示に必要な文字(「*」や「\n」)をstrに追加しています。追加せずに単純に代入してしまうと、その文字だけが「console.log(str);」で表示されることになってしまいます。何も表示されなくなったのは、「console.log('\n');」が最終的に実行されたためです。strの内容が、目に見えない改行文字になってしまったからです。

追加と代入の違いは、下記のコードを動かして見てみるとわかりやすいと思います。

let str = '';
str = str + '*';
str = str + '\n';
str = str + '*';
str = str + '*';
console.log(str);
let str = '';
str = '*';
str = '\n';
str = '*';
str = '*';
console.log(str);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/30 15:32

    ご回答ありがとうございます。
    ”空白ではなく、長さ0の文字列で初期化”というのがしっくりきました。
    後で追加される2つ分を3行目で宣言していたのですね。
    確認用のコードを動かしてみましたが、頭の中がすっきりまとまりました。
    ありがとうございました。

    キャンセル

checkベストアンサー

0

3行目のコード

単に変数strを宣言して、空の文字列を代入しているだけです。
宣言let strだけでも問題ありませんが、空文字列を代入しておいた方が「あぁ、あとで別の文字列を入れるのかな」と予想がつきます。

6行目のコード

str = str + "*";は「今のstr"*"を足して、もう一度strに代入」しています。
JavaScriptでは、文字列どうしを+で連結することができます。

8行目のコード

6行目と同じですが、こちらは改行文字\nを代入しています。


「図形をつくる」というよりも「*を、1行につき何文字(width)、何行(height)表示する」と考えるといいと思います。

必要な処理は、以下の通りです。

(1)1行分の文字列を作る(5~7行目)
(2)改行をいれる(8行目)
(3)(1)と(2)を必要な行数分繰り返す(4~9行目)

(1)をさらに分解すると、以下の通りです。

(1-1)変数strに保存されている文字列の末尾に文字"*"を追加する(6行目)
(1-2)次の処理のために、新しい文字列を変数strに再代入する(6行目)

試しに「str +」を消して、「str = "*";」「str = "\n";」としてみましたが、そうするとコンソールには何も表示されなくなります。

hayamine1111さんが試したのは、以下のような処理になり、最終的改行文字だけになり、コンソールには、一見して何もないように見えます。

(1-1)str"*"を代入する(上書きする)
(1-2)str"\n"を代入する(上書きする)

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/30 15:32

    非常にわかりやすい解説をありがとうございます。
    3行目は宣言だけでもいいけど空文字列にすると後々わかりやすい、というのがかなり納得しました。
    6,8行目に関しては再代入というのがキーワードですね。
    このソースコード以外でもよく見かけるものだったので、これで学習が捗りそうです。

    キャンセル

  • 2019/04/30 16:47

    解決したようでよかったです。

    キャンセル

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

  • ただいまの回答率 88.78%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る