【HTML Living Standard】week属性値の使い方
week属性値の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
weekプロパティは、HTMLの<input>要素に週を選択する機能を提供するプロパティです。具体的には、<input>要素のtype属性に"week"という値を設定することで、ユーザーが年と週を選択するための特別な入力フィールドが作成されます。このプロパティを持つ入力フィールドは、ブラウザが提供するカレンダーのような専用のユーザーインターフェース（UI）を表示し、直感的な週の選択を可能にします。例えば、プロジェクトの期間指定や、特定の週ごとのデータ入力など、日付選択よりも広い期間を指定したい場合に非常に便利です。
ユーザーが週を選択すると、その選択された値は「YYYY-Www」という形式で送信されます。ここで「YYYY」は年を、「Www」はその年の週番号（例えば、W01は1週目、W52は52週目）を表し、週の数値は常に2桁のゼロ埋め形式で表現されます。これにより、サーバー側で週単位の情報を一貫して、かつ明確に処理できます。
このtype="week"を持つ<input>要素には、他の入力要素と同様にname属性でフォーム送信時の名前を設定したり、id属性で要素を一意に識別したりできます。また、min属性とmax属性を使用することで、ユーザーが選択できる週の範囲を制限できます。例えば、特定の期間内でのみ週を選択させたい場合に有効です。さらに、required属性を指定することで、その入力フィールドを必須項目として設定できます。ブラウザのサポート状況によってはUIのデザインや操作感が異なる場合がありますが、基本的な週選択機能は共通して提供されます。
構文(syntax)
1<input type="week">
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLで週を選択する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>週選択ピッカー</title> 7</head> 8<body> 9 <form> 10 <label for="selected-week">希望する週を選択してください:</label> 11 <!-- 12 type="week" を使用すると、ユーザーは年と週（例: 2023年 第40週）をGUIで選択できます。 13 これは、システムのエンジニアがフォーム入力で特定の週を指定する際に便利です。 14 --> 15 <input type="week" id="selected-week" name="preferredWeek"> 16 <br><br> 17 <button type="submit">送信</button> 18 </form> 19</body> 20</html>
このHTMLコードは、ウェブページ上でユーザーが「週」を選択するための入力欄を表示する方法を示しています。具体的には、<input type="week">という要素を使用しており、これによりウェブブラウザは、年と週を直感的に選択できるグラフィカルなインターフェース（週選択ピッカー）を自動的に提供します。
システムエンジニアがウェブアプリケーションを開発する際、ユーザーに特定の日付ではなく、「第何週」といった週単位の情報を入力してほしい場面で非常に役立ちます。例えば、週ごとの作業計画やレポート提出、特定の週に開催されるイベントの登録など、多くのシステムで週単位のデータ入力が必要とされます。
type="week"は<input>要素のtype属性の値であり、関数のような「引数」や「戻り値」という概念は直接持ちません。この属性によって、<input>要素がどのような種類のデータを扱うべきか、またどのように表示・入力されるべきかが定義されます。ユーザーがピッカーで週を選択すると、その情報（例えば「2023年 第40週」）は、フォームが送信される際にname="preferredWeek"で指定された名前と関連付けられて、サーバー側へデータとして送られます。これにより、開発者は複雑なJavaScriptコードを書くことなく、手軽に週選択機能を実装し、週単位の情報をシステムで利用できるようになります。
type="week" は、ユーザーが年と週をGUIで選択できる便利な機能です。しかし、ブラウザによって表示や挙動が異なる場合があり、特に古いブラウザでは通常のテキスト入力欄として扱われる可能性があります。そのため、幅広いユーザーに対応するためには、JavaScriptによるフォールバックの実装も検討してください。フォーム送信時には「YYYY-Wnn」（例：2023-W40）形式の文字列がサーバーへ送られますので、この形式に沿ったデータの検証と処理が必要です。また、min属性やmax属性で選択可能な期間を制限したり、required属性で入力を必須にすることも可能ですが、週の定義（年間の始まりや週の数え方）が地域やブラウザによって異なる場合があるため、利用する際は注意が必要です。
HTMLで週選択フォームを作成する
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>週選択入力フィールドのサンプル</title> 7</head> 8<body> 9 <h1>週を選択するフォーム</h1> 10 11 <form action="#" method="get"> 12 <label for="selectWeek">週を選択してください:</label> 13 <!-- 14 type="week" は、年と週番号（例: 2023年第10週）を選択するための入力フィールドを作成します。 15 多くのモダンブラウザでは、これに対応するカレンダー形式のUIが自動的に表示されます。 16 これにより、ユーザーは簡単に特定の一週間を選択できます。 17 --> 18 <input type="week" id="selectWeek" name="selectedWeek"> 19 20 <br><br> 21 22 <button type="submit">送信</button> 23 </form> 24</body> 25</html>
このHTMLサンプルコードは、ウェブページ上に年と週番号を選択するための入力フィールドを表示する方法を示しています。具体的には、<input>タグのtype属性に「week」という値を指定することで、この特殊な入力フィールドを作成します。
type="week"が設定された<input>要素は、ユーザーがカレンダー形式のインターフェースを通じて、特定の一週間（例: 2023年第10週）を直感的に選択できるようにします。多くのモダンブラウザでは、この指定によって自動的に年と週を選択するためのグラフィカルなUIが提供されます。これにより、ユーザーは手動で入力する手間なく、容易に目的の週を選択できます。
この機能は、直接的な引数や戻り値を持つわけではありません。「week」は、<input>要素のtype属性に指定する値として機能し、ブラウザに対して特定の入力インターフェースを提供することを指示するものです。ユーザーが選択した週の情報は、フォームが送信された際にname属性で指定された名前（この例ではselectedWeek）に関連付けられた値としてサーバー側に送られます。
このように標準的なHTML要素を利用することで、スケジュール管理や期間指定など、週単位での情報入力を求める場面で、簡潔かつユーザーフレンドリーなインターフェースを効率的に実装できます。
input type="week"は、年と週番号を選択するための入力フィールドです。多くのモダンブラウザでは、カレンダー形式のUIが自動的に表示され、ユーザーは直感的に週を選択できます。しかし、一部のブラウザや古いバージョンではこのUIが提供されず、標準のテキスト入力として扱われることがあります。そのため、ブラウザ環境に依存しない入力体験を提供するために、JavaScriptライブラリなどによる代替UIの導入を検討することも重要です。フォーム送信時には「YYYY-Www」の形式（例: 2023-W10）で値が送られるため、サーバーサイドでの処理時にはこの形式を考慮して適切に扱う必要があります。ユーザーが選択できる週の範囲を制限したい場合は、min属性やmax属性を設定してください。