WEBブラウザで動くToDoリストアプリのコード解説（HTML）
前回作成したWEBアプリのコード解説（HTML）です。
- ToDoリストアプリ（1/5）
- ToDoリストアプリ（2/5）
- ToDoリストアプリ（3/5）
- ToDoリストアプリ（4/5）
- ToDoリストアプリ（5/5）
- WEBアプリのURL
- GitHubのURL
GitHubのPagesで公開しているのでToDoリストアプリを使用できます。
ToDoリストアプリ
make-and-learn.github.io
コード概要
- HTML5の基本構造を持つToDoリストアプリのフロントエンド
- レスポンシブデザインに対応
- タスク入力フォーム、日付選択機能、エラー表示機能を含む
- カスタムカレンダーとタスクリスト表示領域を提供
- 外部CSSとJavaScriptファイルを使用
HTMLファイル (index.html)の解説
HTMLドキュメントタイプの宣言
<!DOCTYPE html>- この行はHTMLドキュメントの開始を宣言します。
- DOCTYPE（ドキュメントタイプ）宣言は、ブラウザにこのファイルがHTML5で書かれていることを伝えます。これにより、ブラウザは最新の標準モードでページをレンダリングします。
HTML要素の開始
<html lang="ja">- HTML文書のルート要素を定義します。
lang="ja"属性は、この文書の主要言語が日本語であることを指定しています。
これは検索エンジンや音声読み上げソフトウェアなどに有用な情報を提供します。
ヘッド部分の開始
<head>- ドキュメントのメタデータを含む部分の開始を示します。
- この中には、文書のタイトル、文字エンコーディング、スタイルシートへのリンクなど、ページの表示には直接関係しない情報が含まれます。
文字エンコーディングの設定
<meta charset="UTF-8">- ページの文字エンコーディングをUTF-8に設定します。
- UTF-8は、ほぼすべての言語の文字を表現できる広く使用されている文字エンコーディングです。これにより、日本語を含む多言語のテキストを正しく表示できます。
ビューポートの設定
<meta name="viewport" content="width=device-width, initial-scale=1.0">- レスポンシブデザインのためのビューポート設定です。
width=device-widthはビューポートの幅をデバイスの幅に設定し、initial-scale=1.0は初期のズームレベルを設定します。これにより、モバイルデバイスでもページが適切に表示されるようになります。
ページタイトルの設定
<title>ToDoリストアプリ</title>- ブラウザのタブやブックマークに表示されるページタイトルを設定します。
- 簡潔で分かりやすいタイトルを使用することで、ユーザーがページの内容を理解しやすくなります。
CSSファイルのリンク
<link rel="stylesheet" href="css/styles.css">- 外部CSSファイルをHTMLドキュメントにリンクします。
href属性にはCSSファイルの相対パスが指定されています。これにより、ページのスタイルが適用されます。
ボディ部分の開始
<body>- ウェブページの可視コンテンツが含まれる部分の開始を示します。
- この中に、ユーザーに表示されるテキスト、画像、フォームなどのコンテンツが配置されます。
メインコンテナ
<div class="container">- ページの主要コンテンツを包む親要素です。
- この
div要素にcontainerクラスを付与することで、CSSでレイアウトやスタイルを一括して制御しやすくなります。
ページタイトル
<h1>ToDoリスト</h1>- ページのメインタイトルを表示します。
h1タグは、ページ内で最も重要な見出しを示します。SEOの観点からも重要で、ページの主題を明確に示します。
タスク入力フォーム
<form id="task-form">- 新しいタスクを入力するためのフォームの開始を示します。
id="task-form"を指定することで、JavaScriptからこのフォームを簡単に参照できるようになります。
入力グループ
<div class="input-group">- 入力フィールドとボタンをグループ化するためのコンテナです。
- このグループ化により、関連する要素をまとめてスタイリングしやすくなります。
タスク入力フィールド
<input type="text" id="task-input" placeholder="新しいタスクを入力" required>- ユーザーが新しいタスクを入力するためのテキストフィールドです。
placeholder属性でフィールドの使用方法を示し、required属性で入力を必須にしています。
日付選択ボタン
<button type="button" id="date-select-btn" aria-label="日付を選択">📅</button>- タスクの日付を選択するためのボタンです。
- カレンダーの絵文字（📅）を使用してボタンの機能を視覚的に表現しています。
aria-label属性は、スクリーンリーダーのユーザーにボタンの機能を説明します。
タスク追加ボタン
<button type="submit">追加</button>- フォームを送信し、新しいタスクを追加するためのボタンです。
type="submit"属性により、このボタンをクリックするとフォームが送信されます。
エラーメッセージコンテナ
<div class="error-container">
<span class="error-message" id="task-error"></span>
<span class="error-message" id="date-error"></span>
</div>- タスクや日付に関するエラーメッセージを表示するための領域です。
- 2つの
span要素を用意することで、タスクと日付それぞれに関するエラーを個別に表示できます。
選択された日付表示コンテナ
<div id="selected-date-container">
<span id="selected-date"></span>
</div>- ユーザーが選択した日付を表示するための領域です。
- JavaScriptで選択された日付をこの
span要素内に挿入することができます。
カスタムカレンダー表示領域
<div id="custom-calendar" class="custom-calendar"></div>- カスタムのカレンダーを表示するための領域です。
- JavaScriptを使用して、この
div内にカレンダーのUIを動的に生成することができます。
タスクリスト
<ul id="task-list"></ul>- 追加されたタスクを表示するためのリストです。
- JavaScriptを使用して、このリストに新しいタスク項目を動的に追加することができます。
JavaScriptファイルの読み込み
<script type="module" src="js/app.js"></script>- ページの機能を実装するJavaScriptファイルを読み込みます。
type="module"属性は、このスクリプトがES6モジュールとして扱われることを示します。これにより、モダンなJavaScript機能を使用できます。
このHTMLファイルは、シンプルながら機能的なToDoリストアプリケーションの基本構造を提供しています。適切なCSSとJavaScriptを組み合わせることで、使いやすく見栄えの良いアプリケーションを作成することができます。
まとめ
コードの特徴
- HTML5の文書型宣言と日本語言語設定
- アクセシビリティに配慮（例：aria-label属性の使用）
- モジュラー設計を採用（type=”module”のJavaScript）
- エラーメッセージ用の専用コンテナを実装
- カレンダーアイコンを使用した直感的な日付選択UI
- フレキシブルなレイアウトのための.containerクラスの使用
このHTMLコードは、モダンでユーザーフレンドリーなToDoリストアプリケーションのフロントエンド構造を定義しています。レスポンシブデザインとアクセシビリティに重点を置き、直感的なユーザーインターフェースを提供しています。
タスクの入力、日付の選択、エラー表示、そしてタスクリストの表示といった主要機能をシンプルかつ効果的にレイアウトしています。
外部CSSとJavaScriptファイルを利用することで、コードの管理と保守が容易になっています。また、モジュラー設計を採用することで、将来の拡張性も考慮されています。
全体として、このコードは現代的なWeb開発に沿った、効率的で使いやすいToDoリストアプリケーションの基盤を提供しています。
コメント