こんにちは、Reiです！
これまで学んだHTMLやJavaScriptの知識を使って、
ここから シンプルなTODOアプリ を作っていきましょう。
今回はその最初のステップとして、
アプリの土台となるHTML構造を作っていきます。
TODOアプリの骨組みを作る
アプリを作るときに、まず大切になるのが
「骨組み（構造）」を作ること です。
HTMLは、タグという「入れ物」を組み合わせて
ページの構造を作っていきます。
イメージとしては、
大きな箱を作り、その中に部品を入れていく という感じです。
今回作るTODOアプリも、
・入力するエリア
・未完了のTODOを表示するエリア
・完了したTODOを表示するエリア
といったように、役割ごとに分けて構造を作っていきます。
このように最初にしっかり構造を作っておくことで、
・あとからデザインを整えやすくなる
・JavaScriptで操作しやすくなる
といったメリットがあります。
それでは、TODOアプリの土台となるHTMLを
順番に作っていきましょう！
準備：HTMLファイルを作成する
まずは、HTMLを書くためのファイルを用意します。
Webページは、HTMLファイルをもとにブラウザへ表示されます。
そのため、最初にこのファイルを作成しておく必要があります。
まず、TODOアプリ用のフォルダ（プロジェクトフォルダ）を用意し、
その中に index.html というファイルを作成しましょう。
構成は次のようになります。
プロジェクトフォルダ（ルート）└ index.html（ルート直下）
1. 土台となる基本構造を書く
まずは、Webページとして認識されるための
最小限のHTML構造を書いていきます。
【編集ファイル：index.html】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>TODOアプリ（JS）</title>
</head>
<body>
</body>
</html>
それぞれのタグには役割がありますが、
ここでは特に重要なものに絞って確認していきます。
- <!DOCTYPE html>
このページが HTML5で書かれていることをブラウザに伝える宣言 です。
これがないと、ブラウザが古い表示ルールでページを解釈してしまうことがあります。
- <html lang=”ja”>
ページ全体を囲むタグです。lang="ja"と書くことで このページの言語が日本語であること を示しています。
検索エンジンやスクリーンリーダーなどにも影響する大切な情報です。
- <head>
ページの設定情報をまとめる場所です。
タイトルや文字コード、外部CSSやJavaScriptの読み込みなど、ページの設定に関する情報 を書きます。
- <body>
ここには、実際に画面に表示される内容を書きます。
入力欄やボタンなど、ユーザーが見るものはすべて<body>の中に入ります。
これから、この <body> の中にTODOアプリの部品を追加していきます。
2. 入力エリアを追加する
次に、TODOを入力するための
入力欄とボタン を追加していきます。
【編集ファイル：index.html】
〜省略〜
<body>
<!-- 入力エリア -->
<div>
<input placeholder="TODOを入力"/>
<button>追加</button>
</div>
</body>
</html>
それぞれのタグには、次のような役割があります。
- <div>
複数の要素をまとめるためのタグです。
今回は、入力欄・追加ボタンのこの2つを ひとつのグループ としてまとめています。
- <input>
ユーザーが文字を入力できるフォーム部品です。placeholderは入力欄が空のときに表示される ヒントの文字 です。
- <button>
クリックできるボタンです。
あとでJavaScriptを使い、このボタンが押されたときの処理を追加していきます。
このように、
意味のある単位ごとに <div> で囲んでおくと
・ CSSでまとめてデザインを変える
・ JavaScriptでまとめて操作する
といったことがやりやすくなります。
3. 未完了エリアを追加する
次は、追加したTODOを表示する場所を作ります。
入力エリアの下に、
未完了のTODOを表示するエリア を追加していきましょう！
【編集ファイル：index.html】
〜省略〜
<!-- 未完了TODO -->
<div>
<p>未完了のTODO</p>
<ul>
<li>
<p>TODOです</p>
<button>完了</button>
<button>削除</button>
</li>
</ul>
</div>
</body>
</html>
それぞれのタグには、次のような役割があります。
- <ul>
順序のないリストを作るタグです。
TODOの一覧のように、同じ要素が並ぶとき によく使われます。
- <li>
リストの1項目です。
TODOが1つ追加されるごとに、この<li>が1つ増えていくイメージです。
- <p>
文章を表示するためのタグです。
ここでは、TODOの内容 を表示するために使っています。
このように <ul> と <li> を使っておくと、
TODOがいくつ増えても きれいに並べることができます。
また、完了ボタン・削除ボタンといった操作も、
TODOごとに管理しやすくなります。
4. 完了エリアを追加する
最後に、完了したTODOを表示する場所 を作ります。
【編集ファイル：index.html】
〜省略〜
<!-- 完了TODO -->
<div>
<p>完了のTODO</p>
<ul>
<li>
<p>完了したTODO</p>
</li>
</ul>
</div>
</body>
</html>
このエリアも、div → ul → li という同じ構造で作られています。
未完了エリアと構造をそろえておくと、JavaScriptで
・ 未完了のTODO
・ 完了したTODO
を それぞれ別の場所に移動させる処理 が書きやすくなります。
結果として、コードもシンプルになり、バグも起こりにくくできるのです！
全体像の確認
最終的に、次のような形になっていればOKです。
- index.html
TODOアプリの構造（入力エリア・未完了エリア・完了エリア）が作成されている
このように、役割ごとに構造を分けておくことで、
HTMLのどこに何があるのかが分かりやすくなり、後からの修正や機能追加もしやすくなります。
【ファイル：index.html】
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>TODOアプリ（JS）</title>
</head>
<body>
<!-- 入力エリア -->
<div>
<input placeholder="TODOを入力">
<button>追加</button>
</div>
<!-- 未完了TODO -->
<div>
<p>未完了のTODO</p>
<ul>
<li>
<p>TODOです</p>
<button>完了</button>
<button>削除</button>
</li>
</ul>
</div>
<!-- 完了TODO -->
<div>
<p>完了のTODO</p>
<ul>
<li>
<p>完了したTODO</p>
</li>
</ul>
</div>
</body>
</html>まとめ
今回は、HTMLのタグを組み合わせて
TODOリストページの 骨組み（構造）を作りました。
＼＼ 今回のまとめ ／／
・ <html> <body> で全体の枠組みを作る・ <div> で機能ごとにグループ化する・ <ul> <li> で繰り返し並ぶ項目をリスト化する
HTMLで構造がきちんと作られていると、
- CSSで特定のエリアだけデザインを変える
- JavaScriptで特定のTODOだけ操作する
といったことが、あとから簡単にできるようになります。
次は、CSSを使って画面のレイアウトを整えていきます。
TODOリストが見やすい画面になるようにデザインを作っていきましょう！
コメント