GitBookjs-primerアプリの構成要素HTMLとJavaScriptのエントリーポイントを作成しましたが、次はこのTodoアプリの構成要素を改めて見ていきましょう。Todoアプリには、次のような機能を実装していきます。状態の表示など複数の機能を持っています。Todoアイテムを追加するTodoアイテムを更新するTodoアイテムを削除するTodoアイテム数(合計)の表示また、アプリと呼ぶからには見た目もちょっとしたものにしないと雰囲気が出ません。このセクションでは、まずウェブアプリケーションを構成するHTML、CSS、JavaScriptの役割について見ていきます。このセクションで見た目だけで機能がないハリボテのTodoアプリを完成させ、次のセクションから実際にJavaScriptを使ってTodoアプリの機能を実装していきます。HTMLとCSSとJavaScriptTodoアプリはブラウザで動くアプリケーションとして作成しますが、ウェブアプリを作成するにはHTMLやCSS、JavaScriptを組み合わせて書いていきます。今回はHTTP通信などはいらないクライアントサイドのみで解決するウェブアプリなので、サーバーサイドの言語は登場しません。多くのウェブアプリケーションはHTMLでコンテンツの構造を定義し、CSSで見た目を装飾し、JavaScriptで動作をつけることで実装されます。そのため、ウェブアプリはHTML、CSS、JavaScriptを組み合わせて作られています。ブラウザにはiOSやAndroidのようにOSが提供するようなUIフレームワークの標準はありません。ユーザーが実装したさまざまな種類のUIフレームワークがあります。そのため、Todoアプリという題材をとってみても、フレームワークや人によって書き方がまったく異なる場合もあります。今回のTodoアプリは特別なUIフレームワークを使わずに、そのままのHTML、CSS、JavaScriptを組み合わせて書いていきます。Todoアプリの構造をHTMLで定義する最初に今回作成するTodoアプリのHTMLの構造を定義しています。ここで定義したHTMLとCSSは最後までこの形のまま利用します。次のセクションから変更していくのはJavaScriptだけということになります。「エントリーポイント」のセクションで作成したtodoappディレクトリのindex.htmlを次の内容に変更します。</body></html>HTMLの内容を変更後にブラウザでアクセスすると次のような表示になります。JavaScriptでTodoアプリの機能は実装していませんが、見た目だけのTodoアプリはこれで完成です。実際に変更したHTMLを上から順番に見てみましょう。CSSファイルを読み込みhead要素の中でlinkタグを使い、外部のCSSファイルを読み込んでいます。今回読み込んでいるCSSファイルは、Todoアプリらしい表示に必要なCSSを定義したファイルになっています。https://jsprimer.net/use-case/todoapp/final/final/index.cssこのCSSは動作には影響がないため、今回のユースケースでは外部ファイルをそのまま取り込むだけにして解説は省略します。CSSに定義したスタイルを正しく適用するには、class属性やHTML要素の構造が一致している必要があります。表示が崩れている場合は、class属性が正しいか、HTMLの構造が同じになっているかを確認してください。class属性をCSSのために指定divタグのclass属性にtodoappという値(クラス名)を設定しています。class属性は基本的にはCSSから装飾するための目印として利用されます。1つのページの中で同じクラス名を複数の要素に対して設定できます。HTMLのclass属性はJavaScriptのclass構文とは無関係なことには注意が必要です。今回のtodoappというクラス名を持つ要素を、CSSから.todoappというCSSセレクタで指定できます。CSSセレクタとはクラス名などを使って、HTML要素を指定できる記法です。特定の「クラス名」を持つ要素の場合は.クラス名(クラス名の前にドット)で選択できます。次のCSSコードでは、todoappというクラス名を持つ要素のbackgroundプロパティの値をblackにしています。todoappクラス名の要素の背景色を黒色にするという意味になります。black;}CSSセレクタではタグ名、id属性や構造などに対する指定もできます。特定の「id名」を持つ要素の場合は#id名で選択できます。id属性をJavaScriptのために指定id属性は、その要素に対するページ内でユニークな識別子をつけるための属性です。id属性はCSS、JavaScript、リンクのアンカーなど、さまざまな用途で利用されます。1つのページの中では同じid属性名を複数の要素に対して設定できません。今回のTodoアプリではJavaScriptから要素を選択するためにid属性を設定しています。先ほどのCSSセレクタはCSSから要素を指定するだけではなく、JavaScriptから要素を指定する際にも利用できます。APIではCSSセレクタを使って要素を選択できます。次のコードでは、document.querySelector("CSSセレクタ")を利用して特定のid属性名の要素を取得しています。document.querySelector("#js-form");そのため、JavaScriptで参照する要素にはid属性を目印としてつけています。わかりやすくするために、JavaScriptから扱うid属性は慣習的にjs-からはじまる名前にしています。TodoアプリのメインとなるTodoリストjs-todo-listというid属性をつけたdiv要素が、今回のTodoアプリのメインとなるTodoリストです。このdiv要素の中身はJavaScriptで動的に更新されるため、HTMLでは目印となるid属性をつけています。初期表示時はTodoリストの中身がまだ空であるため、何も表示されていません。<!--と-->で囲まれた範囲はHTMLのコメントであるため、表示されません。Todoアイテム数の表示js-todo-countというid属性をつけたspan要素は、現在のTodoリストのアイテム数を表示します。初期表示時はTodoリストが空であるため0個となりますが、Todoアイテムを追加や削除する際には合わせて更新する必要があります。まとめこのセクションではHTMLでアプリの構造を定義し、CSSでアプリのスタイルを定義しました。次のセクションではJavaScriptモジュールを作成していき、現在は空であるTodoリストを更新していきます。このセクションのチェックリスト実装するTodoアプリの構成要素を理解したHTML、CSS、JavaScriptの役割の違いを理解したTodoアプリの見た目をHTMLとCSSで定義したここまでのTodoアプリは次のURLで確認できます。https://jsprimer.net/use-case/todoapp/app-structure/todo-html/。