Vue3を学び始める前に、HTMLの知識があまりないことへ気付きました。
Vueの<template>はHTMLをベースに書くため、まずは画面に何を置くのか、どのタグで表すのかを読めるようになりたいと思いました。
画像解析結果やデータをブラウザで見やすく表示することにもつなげたいため、今回はHTMLだけで画面の骨組みを作るイメージを持つことが目標です。VueのテンプレートはHTMLベースの構文なので、Vueへ進む前にここを補完しておきたいです。(Vue.js公式ドキュメント：テンプレート構文) vueframework
まだ途中段階なので、勘違いなどあれば教えていただけるとうれしいです。
今日やったこと
HTMLの基本構文と、画面でよく使いそうなタグの役割を確認しました。
HTMLは、見出し・文章・画像・リンク・入力欄など、画面に何を置くかを表すものだと今は理解しています。CSSは見た目を整え、JavaScriptやVueは画面へ動きを付ける役割なので、HTMLは画面の骨組みに近いものとして捉えています。
 |
> 「Vueの前に、画面の中に何があるのかをHTMLで読めるようになりたいね。」 |
HTMLは、基本的に開始タグ・内容・終了タグで書きます。
<!-- p は文章の段落を表すタグ。開始タグと終了タグで内容を囲む -->
<p>解析結果を確認します。</p>
レンダリング結果
解析結果を確認します。
Qiitaでは、コードブロックの外に書いた一部のHTMLをレンダリング結果として確認できます。HTMLブロックの前後には空行を入れる必要があるため、記事内でもその形で書いています。(Qiita Markdown) help.qiita
よく使うHTMLタグ
画像解析結果の表示や検索画面を考えたときに、出てきそうなタグを整理しました。
| タグ | 今の理解 | 利用イメージ |
|---|---|---|
<h1>〜<h6>
|
見出しを表す | ページ名、解析結果のタイトル |
<p> |
文章の段落を表す | 判定結果、説明文、注意書き |
<div> |
特別な意味を持たない箱 | 複数の要素をまとめる |
<main> |
ページの中心となる主要な内容 | 解析結果一覧の領域 |
<section> |
関連する内容のまとまり | 検索条件、検索結果の区切り |
<article> |
単独でも意味が通る内容のまとまり | 1件の解析結果、作品カード |
<img> |
画像を表示する | 解析対象の画像、サムネイル |
<a> |
別ページや別サイトへのリンク | 詳細ページへの移動 |
<button> |
利用者が押す操作を置く | 詳細表示、検索、表示切り替え |
<ul>・<li>
|
順番を意識しない一覧 | 検出項目、タグの一覧 |
<ol>・<li>
|
順番が意味を持つ一覧 | 操作手順、優先順位 |
<form> |
入力と送信に関係する要素をまとめる | 検索フォーム |
<label> |
入力欄が何の項目かを示す | 検索語、対象日の説明 |
<input> |
1行の入力欄を作る | キーワード検索、数値入力 |
<textarea> |
複数行の入力欄を作る | メモ、コメントの入力 |
見出しは文字を大きくするためではなく、内容の階層を表すために使うものだと理解しています。h1の中にh2、さらに細かい話題としてh3を置くように、順番を意識すると画面の構造も追いやすくなりそうです。(Vue.js公式ドキュメント：アクセシビリティ) vueframework
<!-- h1 はページ全体の主な見出し -->
<h1>画像解析結果</h1>
<!-- h2 はページ内の大きな話題の見出し -->
<h2>検索結果</h2>
<!-- p は見出しの内容を説明する文章 -->
<p>3件の画像が見つかりました。</p>
レンダリング結果
画像解析結果
検索結果
3件の画像が見つかりました。
記事の中では見出し階層が崩れないよう、レンダリング結果ではh3とh4に置き換えました。実際のHTMLファイルやVueの画面では、ページ全体の見出しとしてh1から使うことを試してみたいです。
よく使うHTML構文
タグの中へ補足情報を書く「属性」も、HTMLを読むときによく出てきます。今は属性名="値"の形で開始タグの中へ書くものとして整理しています。
リンクを作る
aは別のページやサイトへ移動するリンクを作るタグです。hrefに移動先を書きます。
<!-- href に移動先を書く。
リンクの文章だけで、どこへ移動するか分かるようにしたい -->
<a href="https://ja.vuejs.org/">Vue.js公式ドキュメントを開く</a>
レンダリング結果
リストを作る
ulは順番を意識しない一覧、olは順番が意味を持つ一覧です。どちらも各項目はliで書きます。
<!-- ul は順不同の一覧。検出項目の表示などに使えそう -->
<ul>
<li>検出件数：3件</li>
<li>判定：確認が必要</li>
<li>処理時間：1.2秒</li>
</ul>
<!-- ol は順番が大事な手順に使う -->
<ol>
<li>画像を選択する</li>
<li>解析を実行する</li>
<li>結果を確認する</li>
</ol>
レンダリング結果
- 検出件数：3件
- 判定：確認が必要
- 処理時間：1.2秒
- 画像を選択する
- 解析を実行する
- 結果を確認する
フォームの形を書く
form、label、input、buttonを使うと、検索フォームの骨組みを書けそうです。
<!-- form は検索に関係する入力項目と操作をまとめる -->
<form>
<!-- for と id を同じ名前にして、説明と入力欄を結び付ける -->
<label for="keyword">検索語</label>
<!-- type="search" は検索用の入力欄を表す -->
<input
id="keyword"
type="search"
placeholder="例：画像001"
>
<!-- button は検索を実行するための操作。
HTMLだけでは処理は動かず、後からVueやJavaScriptを追加する -->
<button type="submit">検索する</button>
</form>
Qiitaの記事内ではbuttonや入力欄がレンダリングできない場合があるため、この例はコードとして確認する形にします。ローカルのHTMLファイルやVueアプリで表示すれば、入力欄とボタンを含むフォームとして確認できそうです。
つまずいたところ
似た役割に見えるタグがあり、最初は「どれで囲めばよいのか」で迷いました。
<p>と<div>の違い
<p>と<div>は、どちらも文字を囲めるため同じように見えました。
ただ、<p>は文章の段落を書くためのタグで、<div>は複数の要素をまとめるための、特別な意味を持たない箱です。判定結果のような文章にはpを使い、画像・文章・ボタンをひとまとまりにしたい場合にdivを使う、と考えると少し分かりやすくなりました。
|
> 「文章ならp、複数の要素をまとめる箱ならdiv。まずはこの分け方で覚えたい。」 |
<!-- div は複数の要素をまとめるための箱 -->
<div>
<!-- p はそれぞれ独立した文章の段落 -->
<p>検出件数：3件</p>
<p>判定：確認が必要</p>
<!-- button は操作の入口 -->
<button type="button">詳細を見る</button>
</div>
レンダリング結果
検出件数：3件
判定：確認が必要
Qiitaではbuttonを表示できないため、レンダリング結果には含めていません。CSSも使っていないためdiv自体は見た目にほとんど現れませんが、HTMLでは「2つの文章とボタンを同じグループとして扱う」という構造を表せています。
また、pの中へdivのような大きなまとまりを入れる書き方は避けたほうがよさそうです。pは文章の段落なので、文章以外のブロック要素を入れると構造が崩れやすくなります。
<!-- p の中に div を入れない。このような構造は避ける -->
<p>
<div>解析結果</div>
</p>
<div>と<section>の違い
divとsectionも、どちらも内容を囲む箱に見えます。
今の理解では、sectionは「検索結果」「解析条件」のように、見出しを付けて区切れる話題のまとまりです。単に配置やグループ分けのために囲むならdiv、画面の中に意味のある話題を作るならsectionと考えています。
<!-- section は「検索結果」という話題のまとまり -->
<section>
<h2>検索結果</h2>
<!-- div は文章とボタンをまとめるための箱 -->
<div>
<p>画像001：確認が必要</p>
<button type="button">詳細を見る</button>
</div>
</section>
レンダリング結果
検索結果
画像001：確認が必要
|
> 「sectionには話題の名前があり、divは必要な要素をまとめる箱。今はこのくらいで整理しておく。」 |
<section>と<article>の違い
sectionとarticleは、どちらも内容のまとまりに使うため迷いました。
articleは、単独で取り出しても意味が通る内容です。1件の解析結果、1つの作品カード、ブログ記事などが当てはまりそうです。一方でsectionは、それらを含む「検索結果」や「新着作品」のような大きな話題の区切りとして使えそうです。
<!-- section は検索結果全体を表す -->
<section>
<h2>検索結果</h2>
<!-- article は単独でも意味が通る1件の解析結果 -->
<article>
<h3>画像001</h3>
<p>検出件数：3件</p>
<p>判定：確認が必要</p>
</article>
<article>
<h3>画像002</h3>
<p>検出件数：0件</p>
<p>判定：問題なし</p>
</article>
</section>
レンダリング結果
検索結果
画像001
検出件数：3件
判定：確認が必要
画像002
検出件数：0件
判定：問題なし
CSSなしではカードのような見た目にはなりませんが、「検索結果の中に複数の解析結果がある」という構造をHTMLで表せているように見えます。
<a>と<button>の違い
リンクもボタンもクリックできるため、どちらを使うか迷いそうです。
aは別ページや別サイトへ移動するためのもの、buttonは現在の画面内で何らかの処理や表示変更を行うためのもの、と今は理解しています。
<!-- a は別ページへ移動するためのリンク -->
<a href="https://qiita.com/">画像001の詳細ページへ</a>
<!-- button は画面内の操作。
HTMLだけでは動かず、後からJavaScriptやVueの処理を追加する -->
<button type="button">詳細を表示する</button>
レンダリング結果
aはQiita上でもリンクとして確認できます。一方でbuttonはローカルのHTMLファイルやVueアプリで表示を確認するものとして扱います。
<ul>と<ol>の違い
どちらもリストですが、順番に意味があるかどうかで選ぶものだと理解しました。
|
> 「見た目が似ていても、順番に意味があるかで選ぶんだね。」 |
-
ulは、検出項目やタグのように順番を意識しない一覧 -
olは、操作手順や優先順位のように順番が大切な一覧
今の理解（メモ）
まだふわっとしていますが、HTMLはVueのテンプレートを読むための土台に見えています。
- HTMLは、画面へ置く見出し・文章・画像・リンク・ボタン・入力欄などの構造を書く
- 基本は
<タグ>内容</タグ>の形で書く。ただしimgやinputのように終了タグを持たない要素もある -
pは文章の段落、divは意味を持たないグループ用の箱 -
sectionは関連する話題のまとまり、articleは単独でも意味が通る内容のまとまり -
aは別の場所へ移動するリンク、buttonは画面内で処理を行う操作 -
ulは順番のない一覧、olは順番のある手順 -
src、alt、href、class、id、typeなどは属性で、開始タグへ補足情報として書く - Vueの
<template>ではHTMLをベースにして、{{ }}で値を表示したり、@clickでボタンへ処理を付けたりする
VueのテンプレートはHTMLベースであり、通常のHTMLにVue独自の記法を追加して画面とデータを対応させていくものだと今は理解しています。(Vue.js公式ドキュメント：テンプレート構文) vueframework
|
> 「まずHTMLだけで画面の形を作ってから、Vueでデータや操作を足すと考えると、順番が少し見えてきた。」 |
次にやりたいこと
HTMLだけで小さな画面を作りながら、タグの使い分けを確かめたいです。
-
main、section、articleを使い、画像解析結果の一覧画面の骨組みを書く。どこまでを1つのまとまりとして考えるか試したい -
pとdivを意識し、文章とグループ用の箱を分けて書く。何となくタグを選ばない練習にしたい -
aとbuttonをそれぞれ置き、移動と操作の違いを画面の目的と結び付けたい -
imgのsrcとaltを変え、画像の場所と説明の役割を確認したい -
form、label、input、buttonで検索フォームの構造を書く。後からVueのrefやcomputedをつなげる前の形を作りたい
今日の整理
今回出てきたタグと、迷いやすい使い分けを短く整理しました。
| 分類 | タグ・構文 | 役割 | 利用イメージ |
|---|---|---|---|
| 文章 | <p> |
文章の段落を書く | 判定結果、補足説明 |
| 汎用の箱 | <div> |
特別な意味なしで要素をまとめる | 文章とボタンのグループ |
| 話題の区切り | <section> |
関連する内容をまとめる | 検索条件、検索結果 |
| 単独の内容 | <article> |
単独でも成立する内容をまとめる | 1件の解析結果、作品カード |
| ページ移動 | <a href=""> |
別ページ・別サイトへ移動する | 詳細ページへのリンク |
| 画面内の操作 | <button> |
処理や表示変更を行う入口 | 詳細を開く、検索する |
| 順不同の一覧 | <ul><li> |
順番を意識しない項目を表示する | 検出項目の一覧 |
| 順番のある一覧 | <ol><li> |
手順を順番に表示する | 解析の操作手順 |
| 画像 | <img src="" alt=""> |
画像と説明を表示する | 解析対象の画像 |
| 属性 |
class=""、id=""
|
要素に名前や補足情報を付ける | CSSやVueで対象を選ぶ目印 |
おわりに
今回はVue3へ進む前にHTMLだけを取り出して、タグと構文、特に迷いそうなタグの違いを見直してみました。まだdiv、section、articleをすぐ選べる段階ではありませんが、画面に置く内容の意味を考えることが大切そうだと感じています。
画像解析結果をブラウザで見やすく扱うには、まず「検索結果のまとまり」「1件の結果」「詳細ページへの移動」「画面内での操作」を分けて考える必要がありそうです。次は検索フォームのHTMLを書いてみて、後からVueのrefやcomputedにつなげられる形を試してみたいです。
学習中の内容なので、勘違いや理解不足もあると思います。もし気になる点があれば教えてもらえるとうれしいです。
注意事項
本ブログに掲載している内容は、私個人の見解であり、
所属する組織の立場や戦略、意見を代表するものではありません。
あくまでエンジニアとしての経験や考えを発信していますのでご了承ください。