<option></option>を「' '」で囲む理由

Question

###前提・実現したいこと
プログラミング初心者です

progateというプログラミング学習サイトでフォームの作成を学習しているのですが、一部理解できない点があります。

###理解できていない点

for文と文字列の連結を用いて、6から100までのoptionをechoさせようとしているのですが、
①<option></option>を「' '」でそれぞれ囲まなければいけない理由
②"'.$i.'"のように「" "」と「' '」で二重で囲まないといけない理由
の２つが理解できていません。

###ソースコード

<?php for($i=6; $i<=100; $i++){ echo '<option value="'.$i.'">'.$i.'</option>'; } ?>

Answer 1

<option></option>を「' '」でそれぞれ囲まなければいけない理由

プログラムで扱えるデータには、数値、文字列などがあります。数値は０～９とせいぜい小数点と符号くらいで表現できますが、文字列にはどんな文字も書けます。なので、文字列とプログラムの他の部分を区別するために、文字列は引用符("または')で囲みます。

例えば、
echo ・・・・・・ PHPで何かを出力する命令
"echo" ・・・・・ echoという4文字の英字の文字列データ
のように区別します。

"'.$i.'"のように「" "」と「' '」で二重で囲まないといけない理由
二重で囲んでいるわけではありません。分かち書きすると、

echo '<option value="'
     .$i
     .'">'
     .$i
     .'</option>'
; 

のように、5つの要素を「文字列連結演算子」.でつないだものです。
5つの要素とは、
'で囲まれた文字列、
変数$i、
'で囲まれた文字列、
変数$i、
'で囲まれた文字列、
の5つです。

Comments

[t10702th]

ご回答いただきありがとうございます！５つの要素をつないでいるとのこと、理解することができました。
１点、上記の「'で囲まれた文字列」でそれぞれ(")が(')によって囲まれていると思うのですが、これはなぜなのでしょうか？(")が必要となっている意味が理解できておりません。

知識が乏しくすみませんが、よろしければ回答いただけますと幸いです。

[退会済みユーザー]

htmlの文法上必要だから、ですね。省略してもたいていのwebブラウザは解釈できますが、文法上正しくなくなりますし、正しい文法を前提とした何かのプログラムで問題が起きる可能性があります。

[otn]

HTMLタグの属性(value=とか、href=とか)の値は引用符で囲む決まりになっています。二重引用符でも一重引用符でもいいですが、よく見かけるのは二重引用符です。

[t10702th]

お二方ご回答いただきありがとうございました！
HTML上の決まりなのですね。意識せず("")を使っていました。
今後はルールとしてしっかり覚えようと思います。
ありがとうございました！

Answer 2

'<option value="'.$i.'">'.$i.'</option>'の部分が一つの文字列を形成しているわけではありません。分解すると、下記のようになります。

<?php
for ($i = 6; $i <= 100; $i++) {
  echo
    '<option value="' // <option value=" という文字列
    . // 文字列結合演算子
    $i // 数値 $i を表現する文字列 (文字列結合演算子により自動変換)
    . // 文字列結合演算子
    '">' // "> という文字列
    . // 文字列結合演算子
    $i // 数値 $i を表現する文字列 (文字列結合演算子により自動変換)
    . // 文字列結合演算子
    '</option>' // </option> という文字列
  ;
}

'<option value="'が'…'と引用符(')で囲まれているのは表示したい文字列「<option value="」の中に二重引用符(")があるからです。"…"と二重引用符(")で囲んでしまうと、エスケープしない限り使えません。'">'も同じ理由です。最後の'</option>'は引用符(')でも二重引用符(")のどちらで囲っても問題ありませんが、統一性を考慮して引用符(')を使用しているのだと思われます。

そして、.は文字列結合演算子であり、前後の文字列を結合しているだけです。言ってみれば+の文字列版みたいなものです。$iは数値ですが、文字列結合演算子で結合するときは自動的に数値を表す文字列になります。上のはコードはやり過ぎですが、わかりやすくなるように演算子の前後は空白を開けて、
'<option value="' . $i . '">' . $i . '</option>'
と書くと理解がしやすくなると思います。

Comments

[t10702th]

とてもご丁寧に回答いただき、ありがとうございます！
"..." '...'がそれぞれ文字列を形成し、(.)がそれらをつないでいるとのこと、理解することがでいました！

一点下記の内容について

> '<option value="'が'…'と引用符(')で囲まれているのは表示したい文字列「<option valu
> e="」の中に二重引用符(")があるからです。"…"と二重引用符(")で囲んでしまうと、エスケ
> ープしない限り使えません。'">'も同じ理由です。

「<option value="」と「'">'」が二重引用符(")を持っているのはなぜなのでしょうか？それぞれが「option value="」「">」という文字列を意味していることは理解できたのですが、(")が必要となる理由が理解できておりません。

理解力が乏しくすみません・・

[tjs]

(")はPHPではなくHTMLのoptionタグの属性を指定するための括弧ですね。
http://www.tohoho-web.com/html/memo/attr.htm
上記の「クォーテーション」を参考にされるとよいかもしれません。

元のご提示のコードは、PHPに以下のようなHTMLとして文字列を吐き出させたい意図のコードになります。
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
：
<option value="100">100</option>

蛇足ですが
http://www.tohoho-web.com/html/memo/attr.htm
にもあるように、HTMLの属性で数字のみならば(")は無くてもよいです。
つまり以下のように書いても成り立ちます。

<?php
for($i=6; $i<=100; $i++){
echo '<option value='.$i.'>'.$i.'</option>';
}
?>

ただあった方が変なミスもなくなるので、HTMLの属性の値は必ず("")で囲む癖を付けといて損はないです。

[t10702th]

ご返信ありがとうございます！
とてもご丁寧な内容で、理解することができました！
思い返してみれば、確かにHTMLの記載の際にいつも("")をつけていました。すっかりその視点が抜け落ちてしまっていました。
初歩的な内容にもかかわらず、お教えいただきありがとうございました！

Answer 3

文字列

引用符
二重引用符 の部分を読んでください。