フォームアプリ（例：ユーザー登録フォーム）について　31日目　2024/11/6（お金持ちまでの道のり）

英国紳士風のお金持ちアンドロイドの絵です。 プログラミング

ユーザー登録フォームを作成する際、基本的なHTML、CSS、JavaScriptの知識が役立ちます。本日は、HTMLでフォームを構築し、JavaScriptで入力内容を簡単に検証するシンプルなユーザー登録フォームの例を学習します。

初めての人はお金持ちまでの道のり：０日目をまず読んでみてください！よろしくお願いします★

フォームアプリの具体的な用途と活用例

  1. ソーシャルメディアやフォーラム
    • ソーシャルメディアやフォーラムのWebサイトでは、ユーザー登録を通してユーザーごとのアカウントを作成し、個別のプロフィールを持つことができます。たとえば、FacebookやTwitterなどでは、ユーザー登録によって各ユーザーがログインし、個人のタイムラインやフォローの管理を行えるようになります。
  2. Eコマースサイト（オンラインショップ）
    • オンラインショップでアカウントを作成することで、ユーザーは購入履歴、ウィッシュリスト、お気に入りの商品リスト、配送先情報の保存が可能になります。たとえば、Amazonや楽天などでは、ユーザー登録後、再度購入する際に住所や支払い情報を再入力せずにスムーズに購入できます。
  3. サブスクリプションサービス
    • NetflixやSpotifyのようなサブスクリプションサービスでは、ユーザー登録が必要です。登録すると、ユーザーは自分の好きな番組や音楽を保存したり、視聴履歴に基づいたおすすめコンテンツを受け取ったりできます。ユーザー情報は各ユーザーに最適なコンテンツを提供するためにも利用されます。
  4. 教育プラットフォーム
    • オンライン学習サイト（例えば、CourseraやUdemyなど）でも、ユーザー登録が必要です。登録後、各ユーザーは受講履歴を保存し、次回のアクセス時に途中から学習を再開することができます。また、進捗状況や修了証も各アカウントに保存されるため、学習管理がしやすくなります。
  5. コミュニティやオンラインイベント登録
    • ユーザー登録は、特定のイベントやコミュニティへの参加登録にも役立ちます。たとえば、Webセミナーの参加者リストを作成したり、地域コミュニティのメンバー管理に利用できます。ユーザーが一度登録すれば、次回のイベントにも簡単に参加申し込みができるようになります。
このフォームアプリが役立つ理由

このようなフォームアプリは、ユーザーごとのデータ管理とサービスのパーソナライズに役立ちます。ユーザーごとの情報を一元管理することで、サービス提供者側は利用者のニーズに応じた個別の体験を提供でき、また利用者もパーソナライズされた便利な機能を享受できます。

HTML: 基本のフォーム構造

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ユーザー登録フォーム</title>
</head>
<body>
    <h1>ユーザー登録</h1>
    <form id="registrationForm">
        <label for="username">ユーザー名:</label>
        <input type="text" id="username" name="username" required><br><br>

        <label for="email">メールアドレス:</label>
        <input type="email" id="email" name="email" required><br><br>

        <label for="password">パスワード:</label>
        <input type="password" id="password" name="password" required><br><br>

        <button type="submit">登録する</button>
    </form>
    <p id="message"></p>

    <script src="script.js"></script>
</body>
</html>
このHTMLコードで「名称変更不可の組み込みのコード」
組み込みのコード（変更不可）
  1. <!DOCTYPE html>
    • HTMLのバージョンを指定するもので、変更できません。HTML5では必ず <!DOCTYPE html> と書く必要があります。
  2. <html>, <head>, <meta>, <title>, <body>, <form>, <label>, <input>, <br>, <button>, <p>, <script>
    • これらはHTMLの組み込みタグであり、特定の目的で使われます。名前を変更することはできません。
  3. charset, name, content, for, type, id, name, required, lang, src
    • これらはHTMLタグ内で使用される組み込み属性です。それぞれ特定の役割を持つ属性であり、名前を変えることはできません。
    • 例えば、charset="UTF-8" で charset の部分を変えると、文字コードの指定が機能しなくなります。また、type="text" や type="email" なども、それぞれの入力フィールドに特定の動作をさせるために必要な属性です。
組み込みタグや属性のまとめ

以下の部分が、名称変更ができない組み込みのコードです：

  • タグ: <!DOCTYPE html>, <html>, <head>, <meta>, <title>, <body>, <form>, <label>, <input>, <br>, <button>, <p>, <script>
  • 属性: charset, name, content, for, type, id, required, lang, src
各部分の説明
1. <!DOCTYPE html>
  • このコードは、「このファイルはHTMLです」とパソコンに伝えるものです。
  • <!DOCTYPE html> と書くことで、HTML5という最新のバージョンのHTMLで書かれていることがわかります。
2. <html lang="ja">
  • <html> タグは、HTMLの始まりを示します。
  • lang="ja" と書かれている部分は、「このページの言語は日本語です」という意味です。"ja"は「Japanese（日本語）」を表します。
3. <head> とその中身
  • <head> タグの中には、このページを使うときに必要な情報が書かれています。ここには直接表示されない設定の情報が入ります。
    • <meta charset="UTF-8">
      • 文字コード（文字の表現の仕方）を設定しています。
      • UTF-8 という文字コードを使うことで、いろいろな言語や記号を正しく表示できるようになります。
    • <meta name="viewport" content="width=device-width, initial-scale=1.0">
      • スマホやタブレットなど、画面の大きさが違うデバイスで見たときに、見やすくするための設定です。
      • width=device-width で、デバイスの幅に合わせて表示の大きさを調整します。
      • initial-scale=1.0 で、ページの拡大率を初期設定（100%）にします。
    • <title>ユーザー登録フォーム</title>
      • ページのタイトルを設定します。
      • タイトルはブラウザのタブやお気に入りに表示される名前で、この場合は「ユーザー登録フォーム」となります。
4. <body> とその中身
  • <body> タグの中に、実際にページに表示される内容が書かれます。
    • <h1>ユーザー登録</h1>
      • <h1> は「見出し」を表すタグです。
      • <h1> と </h1> の間にある「ユーザー登録」が大きな文字で表示され、ページのタイトルとして表示されます。
    • <form id="registrationForm">
      • <form> タグは、ユーザーが入力したデータをサーバーに送信するための「フォーム」を作るタグです。このフォームの中に入力欄やボタンを配置し、データをまとめて送信できるようにします。
      • id="registrationForm" は、このフォームの名前を「registrationForm」と指定しています。この名前を使って後でフォームを操作できます。
      • <label for="username">ユーザー名:</label>
        • <label> タグは、入力欄に説明を付けるためのタグです。
        • for="username" と書くことで、この説明がどの入力欄に対応しているかを指定しています。ここでは、「ユーザー名」という説明が「username」の入力欄に対応しています。
      • <input type="text" id="username" name="username" required>
        • <input> タグは、データを入力するための欄を作るタグです。
        • input要素を使うとき、typeは必須、idとnameは任意です。
        • type="text" で、「テキストを入力するための欄」であることを指定しています。
        • id="username" は、HTML内で特定の要素を識別するためのID であり、JavaScriptやCSSでその要素を操作・スタイル適用するときに使います。
        • name="username"は、フォームデータをサーバーに送信する際のフィールド名 として使います。
        • required は、この入力欄が必須（空欄にできない）であることを示しています。
      • <br><br>
        • <br> は「改行」を意味します。
        • 2つの <br> を使うことで、見やすいように空白を作っています。
      • <label for="email">メールアドレス:</label> と <input type="email" id="email" name="email" required>
        • メールアドレス入力欄のラベルと入力欄です。
        • input要素を使うとき、typeは必須、idとnameは任意です。
        • type="email" を指定しており、メールアドレス形式であるかをチェックしてくれます。
        • id="email"はHTML要素に一意の識別子（ID）を設定するための属性です。
        • name="email"は、フォームが送信される際に、入力されたメールアドレスのデータを "email" という名前でサーバーに渡します。
      • <label for="password">パスワード:</label> と <input type="password" id="password" name="password" required>
        • パスワード入力欄のラベルと入力欄です。
        • input要素を使うとき、typeは必須、idとnameは任意です。
        • type="password" によって、入力した文字が隠され、見えないようにします（安全にパスワードを入力するための設定です）。
      • <button type="submit">登録する</button>
        • <button> タグはボタンを作るタグです。
        • type="submit" で、「送信ボタン」であることを指定しています。
        • ボタンをクリックすると、入力された情報が送信されます。
    • <p id="message"></p>
      • <p> タグは文章を表示するためのタグで、id="message" という名前が付いています。
      • ここには、JavaScriptでエラーメッセージや成功メッセージが表示されます。
    • <script src="script.js"></script>
      • <script> タグはJavaScriptファイルを読み込むためのタグです。
      • src="script.js" とすることで、「script.js」という名前のファイルに書かれたJavaScriptのプログラムを実行するようにしています。


このコード全体で「ユーザー名、メールアドレス、パスワードを入力して登録ボタンを押すと、エラーメッセージや成功メッセージが表示される」という基本的なフォームが作られています。

<form> タグの役割
  • フォームの枠組みを作る: <form> タグは、複数の入力欄（例えば、名前、メール、パスワードなど）や送信ボタンを1つのまとまりとして扱うための「枠組み」を作ります。
  • データの送信: <form> タグは、ボタンを押すとフォーム内のデータをサーバーに送信する役割を持っています。
基本構造

フォーム全体を <form> タグで囲み、その中に具体的な入力項目（<input> や <textarea> など）を配置します。さらに、フォームの送信には <button> タグや <input type="submit"> を使います。

labelとplaceholderの違い
  • label: 入力欄の名前や説明を表示します。通常、入力欄のすぐ隣（上や左）に表示され、入力内容に関係なく常に表示されるテキストです。
  • placeholder: 入力欄の中に薄い文字で表示される補助テキストです。何を入力すれば良いかのヒントを提供するために使います。
id = "〇〇"
  • id は、HTML内で設定された特定の要素を JavaScriptやCSSから取得・操作 するための識別名として使われます。（※HTMLがJavascriptやCSSから何かしらを取得する）
  • id = "〇〇"という形はHTML内にしかありません。
  • HTMLでの id=の後ろには必ず""（または '' シングルクォーテーション）を付けます。
  • 〇〇 の部分は実際の CSSやJavaScript内で使う名前で、この id を使って特定のHTML要素を参照する際に活用されます。
  • JavaScript内で document.getElementById("〇〇") を使い、その要素に対して動的な操作を行います。id要素を取得するためにはこれが一般的な方法で、id が指定された要素を取得する最も直接的な方法です。代わりに、querySelector("#〇〇") もよく使われます。querySelector は、CSSセレクタ形式で要素を取得する方法で、#〇〇 のように id もCSSスタイルで指定できます。
  • CSSで id を指定する場合、必ず #〇〇 という形になります。
for
  • for 属性は label タグの一部として機能するよう設計されています（for を単独で使っても意味がない）。
  • label 要素に使われ、入力欄（input 要素など）とラベル（説明）を関連付けるために使用します。
  • for の値に、関連付けたい input 要素の id を指定します。これにより、ラベルをクリックすると対応する入力欄がフォーカスされます。
<input> 要素を使うときのtype、id、name の3つについて
  • type：通常は必須。入力の種類を指定するために使う。
  • id：必須ではないが、JavaScriptやCSSで特定の要素を操作する際に便利。
  • name：必須ではないが、フォームデータをサーバーに送信する場合に必要。


1. 基本的な type の種類

  • type="text": 通常のテキスト入力欄。
  • type="email": メールアドレス入力用で、メール形式（@を含むなど）のチェックが行われます。
  • type="password": パスワード入力欄で、入力内容が見えないように隠されます。

2. その他の type の種類

  1. type="number"
    • 数値を入力するための欄で、上下ボタンで数値を増減できます。
  2. type="tel"
    • 電話番号入力用の欄。電話番号形式の入力が求められることが多く、スマホで使うと数字キーボードが表示されます。
  3. type="url"
    • URL（ウェブアドレス）を入力する欄。URL形式の入力が求められます。
  4. type="date"
    • 日付を入力する欄で、カレンダーから選択できるインターフェースが表示されます（ブラウザによって異なります）。
  5. type="time"
    • 時間を入力する欄で、時刻を選択できるインターフェースが表示されます。
  6. type="datetime-local"
    • 日付と時間を組み合わせて入力するための欄です。
  7. type="month"
    • 年と月のみを入力する欄です（例: 2024年3月）。
  8. type="week"
    • 年と週を入力する欄で、週番号を選択できます。
  9. type="color"
    • カラーピッカーが表示され、色を選択できます。

3. ファイルや選択用の type

  1. type="file"
    • ファイルを選択するための欄で、ユーザーがコンピュータからファイルをアップロードできます。
  2. type="checkbox"
    • チェックボックスが表示され、オン・オフの選択ができます。
  3. type="radio"
    • ラジオボタンが表示され、同じ名前の複数のボタンから1つだけを選択できます。
  4. type="range"
    • スライダーで数値の範囲を調整できる入力欄です（例: 音量調節）。

4. その他のボタン系 type

単なるボタンです。特定の機能を持たないため、JavaScriptなどで動作を指定することが多いです。

type="submit"

フォームを送信するボタンです。押すと、フォーム内のデータが指定の宛先に送信されます。

type="reset"

フォーム内の入力をリセット（初期化）するボタンです。

type="button"

単なるボタンです。特定の機能を持たないため、JavaScriptなどで動作を指定することが多いです。

JavaScript: 入力検証機能

document.getElementById("registrationForm").addEventListener("submit", function(event) {
    event.preventDefault(); // フォームのデフォルト送信を防ぐ

    const username = document.getElementById("username").value;
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;
    const message = document.getElementById("message");

    // シンプルな入力チェック
    if (username === "" || email === "" || password === "") {
        message.textContent = "全ての項目を入力してください。";
        return;
    }

    // メール形式チェック
    if (!email.includes("@")) {
        message.textContent = "有効なメールアドレスを入力してください。";
        return;
    }

    // パスワードの長さチェック
    if (password.length < 6) {
        message.textContent = "パスワードは6文字以上で入力してください。";
        return;
    }

    // 成功メッセージ
    message.textContent = "登録が完了しました！";
});
各部分の説明
1. document.getElementById("registrationForm")
  • document.getElementById は、HTML内の特定の要素を取得するためのメソッドです。
  • ("registrationForm") とすることで、id が "registrationForm" である <form> 要素を取得しています。
2. .addEventListener("submit", function(event) { ... })
  • .addEventListener は、「イベント」を監視し、発生したときに指定された関数を実行するためのメソッドです。
  • "submit" は、フォームが「送信されたとき」にイベントが発生することを意味します。
  • function(event) { ... } は、イベントが発生したときに実行する関数を定義しています。
  • まとめると: この部分は「フォームが送信されたときに、指定された処理を実行する」という設定です。
3. event.preventDefault();
  • event.preventDefault() は、フォームが通常どおり送信される動作をキャンセルするためのメソッドです。
  • フォーム送信後にページがリロードされるのを防ぎ、JavaScriptでカスタムチェックを行うために使います。
4. const username = document.getElementById("username").value;
  • const は、変数を宣言するためのキーワードです（ここでは変更されない変数を意味します）。
  • document.getElementById("username") で、id が "username" である <input> 要素を取得します。
  • .value を使うことで、ユーザーが入力した内容（値）を取得しています。
  • 同じ方法で email と password の値も取得しています。
5. const message = document.getElementById("message");
  • message という変数に、id が "message" である <p> 要素を取得して代入しています。
  • ここに、エラーメッセージや成功メッセージを表示するために使います。
username、email、password
  • これらは <input> タグで作成された入力欄であり、ユーザーが入力した値を取得する必要があります。
  • <input> タグにはユーザーの入力内容があるので、.value を使って入力内容を取得しています。
<input type="text" id="username">
<input type="email" id="email">
<input type="password" id="password">
const username = document.getElementById("username").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;
message
  • message は、エラーメッセージや成功メッセージなどを表示するためのテキスト要素です。ユーザーが入力する場所ではなく、プログラムが文字を表示する役割を持っています。
  • そのため、.value の代わりに .textContent や .innerText を使ってテキストを表示・変更します。
<p id="message"></p> <!-- メッセージ表示用の要素 -->
const message = document.getElementById("message");
message.textContent = "エラーメッセージを表示します";
6. if (username === "" || email === "" || password === "") { ... }
  • if 文は条件が成り立つかを確認し、条件が「真」であれば { ... } 内の処理を実行します。
  • username === "" は「username が空文字（何も入力されていない状態）であるか」をチェックしています。
  • || は「または」を意味し、どれか1つでも空であれば条件が「真」になります。
  • まとめると: ユーザー名、メールアドレス、パスワードのどれかが空であれば、エラーメッセージ「全ての項目を入力してください。」を表示し、処理を終了します。
7. if (!email.includes("@")) { ... }
  • ! は「否定」を意味し、条件を逆にする役割を持ちます。
  • email.includes("@") は、メールアドレスに「@」が含まれているかを確認するためのメソッドです。
  • !email.includes("@") となると、「@が含まれていない場合」に条件が「真」となります。
  • まとめると: メールアドレスに「@」が含まれていない場合、「有効なメールアドレスを入力してください。」というメッセージが表示され、処理を終了します。
8. if (password.length < 6) { ... }
  • password.length は、パスワードの文字数（長さ）を取得します。
  • < 6 は、パスワードが6文字未満の場合に条件が「真」となることを意味します。
  • まとめると: パスワードが6文字未満であれば、「パスワードは6文字以上で入力してください。」というメッセージが表示され、処理を終了します。
9. message.textContent = "登録が完了しました！";
  • message.textContent は、id="message" の <p> 要素にテキストを追加または変更するためのプロパティです。
  • "登録が完了しました！" という文字列を設定することで、成功メッセージを表示します。
  • まとめると: 上記のすべての条件をクリアした場合、「登録が完了しました！」というメッセージが表示されます。
このJavaScriptコードのまとめ

このコードは、フォームが送信されるときに、以下の順番で入力内容を確認し、問題があれば適切なエラーメッセージを表示します。

  1. 全ての項目が入力されているか（空の項目があればエラーメッセージ）。
  2. メールアドレスの形式チェック（「@」が含まれていなければエラーメッセージ）。
  3. パスワードの長さチェック（6文字未満であればエラーメッセージ）。
  4. 全ての条件をクリアした場合、成功メッセージ「登録が完了しました！」が表示されます。

これにより、ユーザーが必要な情報を正しく入力してから送信できるようにし、間違った内容が入力された場合にユーザーに知らせることができます。

名称変更不可の組み込みのコード一覧
  1. document
    • Webページの内容（DOM: Document Object Model）にアクセスするためのオブジェクトです。
    • document は、HTML文書全体を表し、特定の要素を取得したり操作したりするために使います。
  2. getElementById
    • HTMLの要素を id 属性で検索し、該当する要素を取得するためのメソッドです。
    • 例えば、document.getElementById("username") のように使い、HTML要素にアクセスします。
  3. addEventListener
    • 指定したイベント（例: "submit", "click"）が発生したときに、特定の処理（関数）を実行するためのメソッドです。
    • 例えば、addEventListener("submit", function() { ... }) としてフォーム送信時の動作を指定します。
  4. submit
    • フォームが送信されるイベントです。
    • "submit" と指定すると、フォームが送信されたときにイベントが発生します。イベント名は変更できません。
  5. function
    • 関数を定義するためのキーワードです。
    • JavaScriptでは、特定の処理をまとめるために function キーワードを使います。
  6. event
    • イベントに関する情報が格納されているオブジェクトです。
    • イベントが発生したときに自動的に生成され、イベントの詳細（イベントの種類や対象要素）を含んでいます。
  7. preventDefault
    • デフォルトの動作（ここではフォームの送信）をキャンセルするためのメソッドです。
    • 例えば、event.preventDefault() によって、フォームが再読み込みされずにJavaScriptでカスタム処理が実行されます。
  8. textContent
    • HTML要素内のテキストを取得または設定するプロパティです。
    • 例えば、message.textContent = "登録が完了しました！"; のように使って、特定の要素内のテキスト内容を変更します。
  9. if
    • 条件が真（true）であるかを確認し、条件に合致する場合にのみコードを実行する構文です。
    • 例えば、if (username === "") { ... } のように、条件に応じて異なる処理を行うために使用します。
  10. return
    • 関数の実行を終了し、指定された値を返すためのキーワードです。
    • ここでは return; によって、条件が満たされた場合にコードの実行を中断します。
  11. const
    • 値が変更されない変数を定義するためのキーワードです。
    • 例えば、const username = ...; のように使用し、一度代入された値は変更できません。
  12. ===
    • 値と型が両方とも一致するかを比較するための演算子です（「厳密等価演算子」）。
    • 例えば、username === "" では、username が空文字であることを確認します。
  13. ||
    • 「または」を意味する論理演算子です。
    • 例えば、username === "" || email === "" で、どちらかが空である場合に条件が真となります。

getElementByIdとtextContentの違い

  • getElementById: HTML要素を取得するために使います。
    ※開始タグと終了タグで囲まれた部分が1つの要素です。（例：<p>こんにちは</p>）
  • textContent: 要素のテキスト内容を取得または設定するために使います。

完成したフォームアプリ

条件を満たして入力が完了すると「登録が完了しました！」と表示されるだけのアプリです。実際はユーザー名とメールアドレスを収集・管理するのですが、これらのコードではそこまではできません。プラグインに同じような機能のものがあるため、それらを使う方が無難です。

どうしてもこのコードを使いたい場合
  • 作成したフォームアプリをどうしても使いたい場合は、データ送信先やバリデーション処理などをWordPressと連携させるカスタマイズが必要ですが、設定が複雑になることが多いです。
  • この方法は、WordPressの知識やPHP・JavaScriptのコーディングスキルが求められ、保守管理の手間も増えます。

本日の感想

AIが勧めてきたアプリ制作３連発がやっと終わりました。私の中で何かが変わった３連発でした。ある程度の理解で進めているので、モヤモヤしながらやっていたのですが、これなら何か本当に作りたいものを見つけて、AIと協力してそれに特化した学習に変更するべきなのではないかと思ったのです。

まぁでも本当にやりたいことを明確に言語化できていないので、それができるまで当初のプラン通り学習を続けます。

30日目の記事はこちら
カウントダウンタイマーアプリの制作　30日目　2024/11/5（お金持ちまでの道のり）

32日目の記事はこちら

ここに初めて来た人はゼヒ０日目を読んでください。プログラミング知識０のおじさんがお金持ちになるまでのプランと熱い思いが載っています。私と一緒に運要素を排除したゴリゴリの脳筋プレイでお金持ちを目指しませんか？

０日目の記事はこちら
お金持ちまでの道のり：０日目

コードの読み方が全く分からないという方は以下の記事がオススメです。コードの読み方の説明が一番詳しく書かれてある記事です。

ToDoリストアプリの作成　12-15日目　2024/10/18-21（お金持ちまでの道のり）

コメント

タイトルとURLをコピーしました