前の記事までで、
次の知識がそろいました。
・DOMとは何か
・DOMの取得と操作
・イベント処理（click / change）
しかし、この段階で多くの人が感じます。
・理解はしたけど、何が作れるのか分からない
・知識が点でバラバラな感じがする
そこでこの記事では、
JavaScriptでよくある実装例 を通して、
これまでの知識を一本につなげます。
この記事で学べること
・JavaScriptで何ができるのかの具体像
・表示切替の考え方
・入力チェックの考え方
・実装を組み立てる思考手順
実装例① 表示・非表示を切り替える
最もよく使われる実装のひとつが、
表示・非表示の切り替えです。
使いどころ
・メニュー開閉
・詳細表示
・注意文の表示切替
表示切替の考え方
表示切替は、
次の考え方で実装されます。
・対象の要素を取得する
・クリックイベントを設定する
・表示状態を切り替える
「見せる／隠す」は、
DOMの状態を変えているだけです。
なぜCSSとセットで使うのか
表示切替では、
JavaScriptだけで完結させるのではなく、
・CSSで見た目を定義
・JavaScriptで状態を切り替える
という役割分担が基本です。
JavaScriptは
「きっかけと制御」
を担当します。
実装例② クラスを付け外しする
表示切替の応用として、
classの付け外しがあります。
これは、
非常に多くのUIで使われます。
例
・開いている状態
・選択中の状態
・エラー表示
class操作の考え方
classを操作することで、
・見た目が変わる
・レイアウトが変わる
という結果が得られます。
重要なのは、
JavaScriptで直接デザインを作らない
という点です。
実装例③ 入力チェック（空欄チェック）
次に、
フォームで必須となる
入力チェック を見てみましょう。
使いどころ
・未入力の防止
・入力ミスの早期発見
入力チェックの基本思考
入力チェックは、
次の流れで考えます。
・入力欄の値を取得する
・条件に合っているか判定する
・結果に応じて表示を変える
ここでも、
条件分岐とイベント処理が使われます。
なぜJavaScriptで入力チェックをするのか
入力チェックは、
HTMLやCSSだけでは不十分です。
JavaScriptを使うことで、
・リアルタイムでチェックできる
・ユーザーに即時フィードバックできる
結果として、
使いやすいフォーム になります。
実装例④ チェックボックスに応じて表示を変える
もうひとつよくあるのが、
選択状態に応じた表示切替です。
例
・同意チェックが入ったらボタン有効
・オプション選択で入力欄表示
changeイベントが活躍する場面
このような実装では、
changeイベントが活躍します。
・値が変わったとき
・選択が確定したとき
に処理を実行できるため、
フォーム制御に非常に向いています。
実装を組み立てるときの思考手順
ここが最も重要なポイントです。
JavaScript実装は、
次の順で考えると迷いません。
-
何をしたいかを言葉にする
-
対象のHTML要素を決める
-
イベントを決める
-
条件と結果を整理する
いきなりコードを書かず、
日本語で設計する ことが成功のコツです。
初心者がやりがちな失敗
よくある失敗を整理します。
・コードから考え始める
・CSSとJavaScriptの役割が混ざる
・どの要素を操作しているか分からない
実装がうまくいかないときは、
必ず
「何を操作しているか」
に立ち返りましょう。
JavaScriptは「組み合わせの言語」
ここまで見てきた実装は、
すべて次の組み合わせです。
・DOM取得
・イベント処理
・条件分岐
難しいことはしていません。
基本の組み合わせで、多くのUIが作れる
という点を理解してください。
まとめ
JavaScriptを使うと、
・表示を切り替える
・状態に応じて見た目を変える
・入力内容をチェックする
といった、
Webページに欠かせない機能を実装できます。
重要なのは、
・DOMを取得する
・イベントで反応する
・状態を変更する
という流れを意識することです。
これで、
JavaScript基礎の実装理解は完了です。
次に読むべき記事
▶ 次の記事
5-7 JavaScriptエラーの見方とデバッグ方法
▶ 関連記事
5-5 イベント処理の基本（click / change）
コメント