JavaScript

Day30 総復習の練習問題Day30 は「30 日間の学習で身につけた力を、自分の手で確認する日」です。ここでは、総復習の 5 つの柱に沿って、条件分岐・配列・DOM 操作・イベント処理・小規模 Web アプリ構築をまとめてチェックできる...

Day30 前半のゴールここまで 29 日間かけて作ってきた TODO アプリは、「小さな Web アプリ」としてちゃんと成立しています。Day30 は総復習。前半では、次のポイントを一つずつ確認していきます。条件分岐を書けるか配列を操作で...

Day29：TODOアプリ⑤の練習問題Day29 のテーマは コード整理と関数分割。ここでは、前半・後半で学んだ内容をしっかり定着させるために、「実際に手を動かして理解できる」練習問題と丁寧な解答・解説をまとめます。コードを読みやすくする役...

Day29 前半のゴールDay29 のテーマは コード整理と関数分割。ここまでで TODO アプリはかなり機能が増えましたが、そのぶんコードが長くなり、「どこで何をしているのか」が少しずつ見えにくくなってきています。前半ではまず、どこが「ご...

Day28：TODOアプリ④の練習問題Day28 のテーマは 完了機能（チェックボックスでタスクの状態を切り替える）。ここでは、前半・後半で学んだ内容をしっかり定着させるために、段階的な練習問題と丁寧な解答・解説をまとめます。タスクをオブジ...

Day28 前半のゴールここまでで、TODOアプリは「追加・削除・保存・復元」までできるようになりました。Day28 のテーマは 完了機能。前半でやるのは、ざっくり言うとこの2つです。タスクに「完了したかどうか」の情報を持たせるその情報を画...

Day27：TODOアプリ③の練習問題Day27 のテーマは localStorage を使ったタスク保存と復元。ここでは、初心者でも確実に理解できるように、段階的な練習問題と丁寧な解答・解説をまとめます。localStorage・JSON...

Day27 前半のゴールここまでで、TODOアプリは「追加」と「削除」ができるようになりました。Day27 のテーマは localStorage 保存。前半ではまず、ページをリロードしてもタスクが消えないようにするlocalStorage ...

Day26：TODOアプリ②の練習問題Day26 のテーマは タスク削除機能の実装。ここでは、前半・後半で学んだ内容をしっかり定着させるために、段階的な練習問題と丁寧な解答・解説をまとめます。削除ボタンの設置、index の扱い、配列と画面...

Day26 前半のゴールDay25 で「タスクを追加できる TODO アプリ」ができました。Day26 のテーマは タスク削除の実装。前半ではまず、「どのタスクを消すか」をどう特定するか削除ボタンをどう配置するか配列と画面をどう連動させるか...

Day25：TODOアプリ①の練習問題Day25 のテーマは TODOアプリのタスク追加機能。ここでは、前半・後半で学んだ内容をしっかり定着させるための練習問題と、丁寧な解答・解説をまとめます。タスク追加の基礎から、配列管理・描画関数までを...

Day25 前半のゴールいよいよ「ちゃんとした Web アプリ」に一歩踏み込むところです。Day25 のテーマは TODOアプリ①：タスク追加の実装。前半ではまず、タスクを入力する画面を作る「追加」ボタンでタスクを画面に増やす最低限「使える...

Day24：アプリ設計の練習問題Day24 のテーマは 入力・処理・出力。これはどんな Web アプリでも必ず存在する「3つの柱」です。ここでは、初心者でも確実に理解できるように、段階的な練習問題と丁寧な解答・解説をまとめます。入力・処理・...

Day24 前半のゴールここからはいよいよ「ミニWebアプリ開発」のフェーズです。Day24 のテーマは アプリ設計。キーワードはとてもシンプルで、入力処理出力この 3 つです。前半では、なぜ「入力・処理・出力」で考えると楽になるのか小さな...

Day23：総合演習②（簡易メモ帳）の練習問題Day23 のテーマは「簡易メモ帳」。ここまで学んだ DOM 操作・イベント・関数分割・localStorage・デバッグ を総動員して作る総合演習です。以下では、初心者でも確実に力がつくように...

Day23 前半のゴール今日のテーマは「総合演習②：簡易メモ帳」です。ここまで学んできたDOM 操作フォーム入力localStorage による保存関数分割デバッグ（console.log）を全部まとめて、小さな「使える」アプリを作っていき...

Day22：デバッグの練習問題デバッグは「バグを直す技術」ではなく、「バグの原因を見つける技術」です。Day22 の学習内容である console.log と エラー確認 を中心に、初心者でも確実に力がつく練習問題と解答・解説をまとめました...

Day22 前半のゴールここまでで、かなりいろいろ書けるようになってきたはずです。でも、こう感じる瞬間が増えてきていない？「動かない。どこが悪いのか分からない。」「エラーが出てるけど、何を言われているのか分からない。」Day22 は、ここを...

Day21：関数分割の練習問題関数分割は「大規模化の基礎」です。処理を整理し、読みやすく、変更しやすく、再利用しやすいコードを書くための必須スキルです。ここでは Day21 の内容に沿って、初心者でも確実に理解できる練習問題と解答・解説をま...

Day21 前半のゴールここまでで、DOM 操作・入力チェック・localStorage など、かなり多くのことを学んできました。その結果、こう感じていないでしょうか。「コードが長くなってきて、どこに何が書いてあるか分かりにくい」「ちょっと...

Day20：localStorageの練習問題localStorage は「ブラウザにデータを保存する」ための仕組みで、Web アプリを作るうえで欠かせない機能です。ここでは Day20 の内容をしっかり定着させるために、基礎から応用までの...

Day20 前半のゴールここまでで「入力して」「チェックして」「画面に表示する」ところまでは来ました。Day20 では、そこから一歩進んで、「データをブラウザに保存する」ことを学びます。キーワードは localStorage（ローカルストレ...

Day19.5：条件 + DOM 応用の練習問題複雑なフォーム処理では、「複数の項目を複数の条件でチェックし、エラーをまとめて管理し、見た目にも反映する」という高度な DOM 操作が必要になります。ここでは、Day19.5 の内容を確実に理...

Day19.5 前半のゴールDay19.5 は、Day19 までに学んだ「入力チェック」「条件分岐」「DOM 操作」をもう一段レベルアップさせて、“ちょっと複雑なフォーム”を扱えるようになる日です。前半のゴールはこうです。前半で身につけたい...

Day19：条件 + DOMの練習問題入力チェックは「ユーザーの入力をそのまま信用しない」ための重要な技術です。ここでは、Day19 の内容を確実に身につけるために、段階的な練習問題と丁寧な解答・解説をまとめます。基本問題：空文字チェック問...

Day19 前半のゴールDay19 は「条件分岐（if）＋ DOM ＋ フォーム入力」を組み合わせて、“ちゃんと入力されているかチェックする” という、超実務的なテーマに入ります。前半のゴールはこうです。Day19 前半でつかみたい感覚入力...

Day18.5：フォーム操作②の練習問題チェックボックスとラジオボタンは、テキスト入力とはまったく違う性質を持つフォーム要素です。「オンかオフか」「複数選択してよいか」「1つだけ選ぶのか」など、ユーザーの選択状態を正しく扱うための練習問題を...

Day18.5 前半のゴールDay18 では「テキスト入力（input.value）」を扱いました。Day18.5 では一歩進んで、チェックボックスとラジオボタンを扱います。チェックボックスとラジオボタンは、「ユーザーに選択させる」ためのパ...

Day18：フォーム操作の練習問題input の値を JavaScript で取得することは、Webアプリの基礎中の基礎です。ここでは、Day18 の内容をしっかり定着させるために、段階的な練習問題と丁寧な解答・解説をまとめます。基本問題：...

Day18 前半のゴールDay18 では、いよいよ「フォーム操作」に入ります。ここまでで「クリックされたら文字を変える」「要素を増やす」はできるようになりました。ここからは、ユーザーが入力した値を JavaScript で受け取る、という一...

Day17：イベント処理の練習問題click イベントは「ユーザーの操作をきっかけに JavaScript を動かす」ための最重要機能です。ここでは、Day17 の内容をしっかり定着させるために、段階的な練習問題と丁寧な解答・解説をまとめま...

Day17 前半のゴールDay17 は 「イベント処理」＝ユーザーの操作に反応して JavaScript を動かす仕組み を本格的に理解する日です。特に click イベント は、Webアプリの 80% を支える最重要イベント。ここを押さえ...

Day16.5：DOM操作③の練習問題classList・style・remove は「見た目を変える」「状態を表現する」「要素を消す」という、Webアプリの UI 制御に欠かせない機能です。ここでは、初心者でも確実に理解できるように、段階...

Day16.5 前半のゴールDay16.5 では、DOM 操作をもう一段レベルアップさせます。これまで「要素を増やす・文字を変える」はできるようになりました。ここからは「見た目を変える」「要素を消す」という、実用的な操作に踏み込みます。前半...

Day16：DOM操作②の練習問題createElement と appendChild は「新しい要素を作って、DOM に追加する」ための基本操作です。Day16 の内容をしっかり定着させるために、段階的な練習問題と丁寧な解説をまとめます...

Day16 前半のゴールDay16 では、いよいよ「HTMLをあとから増やす」世界に入ります。これまでの document.getElementById / textContent は「既にある要素をいじる」だけでしたが、createEle...

Day15：総合演習①の練習問題ボタンクリックで文字を変更する仕組みは、DOM 操作の基礎をすべて含んだ「総合問題」です。document.getElementById、textContent、イベント処理、状態管理など、Day14 までの...

Day14：DOM操作①の練習問題document.getElementById と textContent は、DOM 操作の“入口”であり、Webアプリを作るための最初の大きな壁です。ここでは、初心者でも確実に理解できるように、実践的な...

Day14 前半のゴールDay14 からいよいよ「画面（HTML）を JavaScript でいじる世界」に入ります。ここを超えると、「ただの計算」から「動くWebページ」を作る側に回れます。前半のゴールはこの2つです。Day14 前半でつ...

Day13.5：非同期処理 練習問題セットPromise / async / await は、JavaScript を「実務レベル」で扱うための必須スキルです。ここでは、初心者でも確実に理解できるように、段階的な練習問題と丁寧な解説をまとめ...

Day13.5 前半のゴール非同期処理は「今すぐ終わらない処理」と仲良くするための仕組みです。ネットワーク通信、ファイル読み込み、タイマーなどはすぐに終わらないので、JavaScript は「待ちながらも他の処理を進める」必要があります。前...

Day13 前半のゴールDay13 は「エラーが起きたら終わり」から「エラーが起きても、ちゃんと受け止めて処理を続ける」世界に進む日です。前半のゴールはこの2つです。Day13 前半でつかみたい感覚try：エラーが起きそうな処理を“囲う場所...

Day12.5 オブジェクト応用の練習問題ネスト構造とデータ整形は、JavaScript の実務で最も重要なスキルのひとつです。ここでは、初心者でも確実に理解できるように、段階的な練習問題と丁寧な解説をまとめます。ネスト構造の練習問題問題1...

Day12 配列応用の練習問題map / filter / forEach は JavaScript 実務で最も使われる三種の神器。ここでは、初心者でも確実に理解できるように、それぞれの特徴を活かした練習問題と解答・解説をまとめます。map...

Day12 前半のゴールDay12 は「配列を“ただ回す”段階から、“意味を持って変換・抽出・処理する”段階」に進む日です。テーマは map / filter / forEach。しかも「実務で超重要」。前半ではまず、それぞれをこういうイメ...

Day11 文字列操作の練習問題template literal / split / replace を「実際に使える」レベルにするための練習問題です。初心者でも確実に理解できるように丁寧に解説します。template literal の練...

Day11 前半のゴールDay11 は「文字列を“ただ表示する”から“自在に扱う”」ステージに進む日です。前半では特に次の感覚をつかむことをゴールにします。Day11 前半で身につけたいことtemplate literal で「読みやすく安...

Day11.5 条件分岐の応用の練習問題三項演算子と switch は、JavaScript の条件分岐を「短く」「読みやすく」「安全に」書くための重要ツールです。ここでは、初心者でも確実に理解できるように、実践的な練習問題と解答・解説をま...

Day11.5 前半のゴールDay11.5 は「条件分岐をもっとコンパクトに・読みやすく」書くための日です。テーマは三項演算子と switch。前半ではまず、それぞれをこういうイメージでつかむことを目標にします。Day11.5 前半でつかみ...

Day10 関数②の練習問題Day10 のテーマは スコープ / 無名関数 / アロー関数。ここでは、理解を深めるための練習問題と、それぞれの解答・解説をまとめていきます。関数②は「書き方の幅が広がる」だけでなく、安全で読みやすいコードを書...

Day10 前半のゴールDay10 は「関数レベルを一段上げる日」です。テーマはスコープ・無名関数・アロー関数。前半では特に、Day10 前半で押さえたいポイントスコープ＝「変数が生きている範囲」という感覚をつかむ関数の中と外で、同じ名前の...

Day9 関数①の練習問題Day9 のテーマは function / 引数 / return。ここでは、関数の基本をしっかり理解するための練習問題と、それぞれの解答・解説をまとめていきます。関数は「処理をまとめて名前をつける」ための最重要パ...

Day9 前半のゴールDay9 のテーマは「関数」です。ここから一気に「コードを部品として再利用する」力が手に入ります。前半では、まず次の3つをしっかり押さえることをゴールにします。Day9 前半で身につけたいことfunction で「処理...

Day8 オブジェクトの練習問題Day8 のテーマは オブジェクト / key / value。ここでは、オブジェクトの基本操作をしっかり身につけるための練習問題と、それぞれの解答・解説をまとめていきます。配列よりも「現実の情報に近い形」で...

Day8 前半のゴールDay8 のテーマは「オブジェクト」です。ここから一気に「現実世界の情報をそのままコードで表現する」力が手に入ります。前半では、とくに次の感覚をつかむことをゴールにします。Day8 前半で身につけたいことオブジェクトと...

Day7 配列の練習問題Day7 のテーマは 配列 / push / splice。ここでは、配列操作の理解を深めるための練習問題と、それぞれの解答・解説をまとめていきます。配列は JavaScript の中でも使用頻度が非常に高いので、こ...

Day7 前半のゴールDay7 のテーマは「配列」です。ここから一気に「データをまとめて扱う」力が手に入ります。前半では、まず次の3つを目標にします。Day7 前半で身につけたいこと配列とは何かをイメージでつかむ配列の作り方・中身の取り出し...