検索結果の表示順を守る：遅い以前の検索で上書きしない
検索語を変えたのに、古い検索の結果へ戻っていませんか。架空の資料検索で応答の順番を逆転させ、最新の呼び出しだけに表示更新を許す関数を作ります。古い失敗と空欄に戻す操作も確認します。
#JavaScript #非同期処理
CATEGORY / JavaScript
JavaScriptの記事一覧
JavaScriptについて学べるWeb制作スクール「0→1」の記事一覧。実践的な制作方法やポイントを分かりやすく解説します。
取得失敗と0件を分ける：fetchの応答から一覧の状態を決める
読み込みエラーを空配列へ置き換えていませんか。架空の資料一覧で、HTTPの結果、JSONの読取り、データ形式を順に確認します。成功した0件と、取得できなかった状態を分ける関数を作ります。
#JavaScript #非同期処理
ブラウザー保存の失敗を扱う：今の表示と次回の設定を分ける
表示設定を保存できないだけで、画面の操作まで止まっていませんか。架空の資料一覧を使い、保存先の取得と書き込みの例外を受け止め、現在の選択を返す関数を作ります。代役の保存先で失敗を再現する練習です。
#JavaScript #ブラウザー保存の失敗を扱う
URLの検索条件を読み取る：未指定・空欄・重複を分けて復元する
検索結果のURLを開き直したら、空の検索語まで初期表示へ戻っていませんか。架空の展示資料検索で、URLSearchParamsから未指定・空欄・重複を読み分け、復元する状態と期待結果を決める練習です。
#JavaScript #URLSearchParams #検索条件
Setで重複するタグを整理する：同じとみなす文字列の範囲を決める
タグの選択肢に同じ名前が何度も並ぶときに。架空の資料集でSetを使い、最初の順序を残した配列を作ります。前後の空白、異なる表記、オブジェクトの扱いを比べ、何を一つにしたかを確認します。
#JavaScript #Setで重複するタグを整理する
mapで表示用の文字列を作る：元データを残して一覧の文言をそろえる
一覧の名前へ所要時間や受付状態を付けたいときに。架空の体験講座データからmapで表示用の文字列を作り、全件に同じ規則を適用します。return漏れと元データの書き換えを、実行結果から確かめる練習です。
#JavaScript #map #配列
someで条件に合う要素の有無を調べる：trueとfalseで案内を選ぼう
一覧の中に一件でも該当するものがあるかを知りたいとき、someで真偽値を返せます。架空の点検項目を使い、未確認あり・すべて確認済み・項目なしを分けて案内を決める練習です。
#JavaScript #some
検索語の前後の空白をtrimで除く：空白だけの入力も先に分けよう
コピーした検索語が一致しないとき、前後に空白が付いていないか確かめます。架空の資料検索を題材に、trimの戻り値を使い、空白だけの入力と途中の空白を別々に扱う練習です。
#JavaScript #trim
クリックされた子要素から操作を探す：ボタン全体で同じ処理を呼ぼう
ボタンの文字は反応するのに、内側のアイコンを押すと処理が変わる場合は、参照している要素を調べます。架空の展示カードでtargetとcurrentTargetの違いを確かめる練習です。
#JavaScript #JAVASCRIPT
findで見つからない結果を扱う：名前を読む前に分岐しよう
配列から一件を探した後、名前の表示でエラーになる場合は、見つからなかった結果を確認します。架空の音声ガイド一覧を題材に、findの戻り値を調べてから情報を読む手順を紹介します。
#JavaScript #js
配列を並べ替える前に元データを残す：元の順序と表示用の順序を分ける
sortを使うと、元の配列の順序も変わります。架空の作業時間の一覧を題材に、コピーしてから数値を並べ替える例を作り、元の順序・昇順・降順をそれぞれ確認します。
#JavaScript #配列
JavaScriptのfilterで一覧を絞る：二つの条件と0件を分ける
カテゴリを選ぶと一覧が空になる処理を、条件ごとに確認します。架空の貸出道具データを使い、カテゴリと貸出可否を組み合わせ、0件を空配列の長さで判定する練習です。
#JavaScript #filter #条件分岐
ボタンが反応しないとき、JavaScriptの読み込み順を確かめよう
HTMLにボタンがあるのにJavaScriptから見つからない。架空の工房案内を例に、ファイルの読み込み、idの一致、実行のタイミングを順に調べ、deferで直す手順を紹介します。
#JavaScript #defer #読み込み順
入力欄の数字で計算する前に、空欄と範囲を確認しよう
数字を入れたはずなのに結果がつながった文字になる。架空の工作会の材料数を例に、valueAsNumberで数値を読み取り、空欄・小数・範囲外を分けて扱う計算例を紹介します。
#JavaScript #数値入力 #入力チェック
入力した文字をそのまま表示する、textContentの使い方
入力欄の文字をページに表示する小さなプレビューを作ります。架空の展示作品名を題材に、HTMLとして解釈させない表示方法、空欄の扱い、更新する範囲の決め方を確認します。
#JavaScript #textContent #入力値
TRY A LESSON
読んだら、
少し作ってみよう。
課題とレビューで学ぶ、
15本の無料レッスン。