90日で身につけるJavaScript

Day 45：DOM総合制作（前半）「インタラクティブToDoアプリ Ver.1 を通して“DOM操作の一連の流れ”を形にする」Day 45前半では、これまで学んできたDOM操作を総動員して、 インタ...

Day 44：DOM総復習（前半）「DOM操作の“基本6セット”を1つのミニアプリでつなげて理解する」Day 44前半では、これまで学んできたDOM操作を総復習します。 テーマは次の6つです。要素取得...

Day 43：DOM操作演習（前半）「ランダムカラーアプリで“見た目を変えるDOM操作”を体験する」Day 43前半では、ランダムカラーアプリを作成していきます。 このアプリはとてもシンプルですが、ラ...

Day 42：DOM操作演習（前半）「簡易電卓を通して“入力 → 計算 → 結果表示”の流れを身につける」Day 42前半では、DOM操作演習として 「簡易電卓」 を作成していきます。 電卓はとてもシ...

Day 41：DOM操作演習（前半）「文字数カウンターを通して“DOM操作の流れ”を体で覚える」Day 41前半では、これまで学んできた DOM操作・イベント処理・フォーム操作 をまとめて使う演習とし...

Day 40：イベント委譲（前半）「親要素にイベントを設定して“あとから増える要素”もスマートに操作する」Day 40前半では、JavaScriptのイベント処理の中でも実務で頻出のテクニック、イベン...

Day 39：イベントオブジェクト（前半）「event と event.target で“誰がクリックされたか”を正しく理解する」Day 39前半では、JavaScriptのイベント処理の中でもとても...

Day 38：要素の削除（前半）「remove() を使って“不要になった要素を安全に消す”ToDo削除機能の基礎を身につける」Day 38 前半では、DOM操作の中でもとても重要な 要素の削除 を扱...

Day 37：要素の追加（前半）「createElementで“新しいタグ”を作り、appendでページに生やす」Day 37前半では、DOM操作の中でもとてもワクワクする 「要素の追加」 を扱います...

Day 36：フォーム操作（前半）「ユーザーの入力を“受け取って扱う”ための基本を身につける」Day 36前半では、Webページでとても重要な「フォーム操作」を扱います。 ここから、ページは「ただ見せ...

Day 35：イベント処理（前半）「addEventListenerで“ユーザーの行動”に反応するページを作る」Day 35前半では、Webページを「ただ表示するだけ」から一歩進めて、 ユーザーの操作...

Day 34：CSS操作（前半）「クラスを切り替えて“見た目のモード”を変える」Day 34前半では、JavaScriptからCSSを操作するための基本テクニックである classList を学びます...

Day 33：テキスト操作（前半）「画面の“文章”をJavaScriptで書き換える基本スキル」Day 33では、DOM操作の中でも頻出のテーマである テキスト操作 を扱います。 Webページを動かす...

Day 32：要素の取得（前半）「JavaScriptで“どのHTMLを触るか”を正確に指定する」Day 32では、DOM操作の中でも超重要なテーマである 「要素の取得」 を扱います。 Webページを...

Day 31：DOMとは（前半）「JavaScriptが“Webページそのもの”を触れるようになる仕組み」Day 31からはいよいよ、 「Webページを直接操作する」世界 に入っていきます。ここまで学...

Day 29：自力コーディング練習（後半）「“見本なし”で書けるようになるための、実戦トレーニング」Day 29後半では、前半で確認した最大値を求める配列を検索データをフィルター合計を計算という4つの...

Day 29：自力コーディング練習（前半）「見本なしで“自分の手で”コードを書くためのウォームアップ」Day 29では、これまで学んできた配列オブジェクト条件分岐ループデータ処理（検索・フィルター・合...

Day 28：データ処理演習②（前半）「ユーザーデータを“整理して扱う”力を鍛える」Day 28では、ユーザーデータを題材にして、ユーザー検索年齢フィルターソート（並び替え）データ追加をまとめて練習し...

Day 27：データ処理演習①（前半）「商品データを“自由に扱える”感覚を身につける」Day 27では、これまで学んできた 配列・オブジェクト・条件分岐・ループ を使って、 実務に近い形の「商品データ...

Day 26：try / catch（前半）「エラーが起きても“アプリを落とさずに”安全に処理するための仕組み」Day 26では、JavaScriptでエラーを安全に扱うための仕組みである 例外処理（...

Day 25：エラーとデバッグ（前半）「エラーは“敵”ではなく、コードを育てるためのヒント」Day 25では、JavaScriptを書くうえで避けて通れない エラー と、 それを解決するための デバッ...

Day 24：JSON（前半）「JavaScriptのデータを“外の世界”とやり取りするための共通言語」Day 24では、Web開発でほぼ必ず登場する JSON（ジェイソン） について学びます。学習内...

Day 23：スプレッド構文（前半）「元のデータを壊さずに“新しいデータ”を作る力を身につける」Day 23では、JavaScriptでとてもよく使われる スプレッド構文（...） を学びます。学習内...

Day 22：分割代入（前半）「必要なデータだけ、スマートに取り出すテクニック」Day 22では、配列やオブジェクトから 必要なデータだけを取り出すためのテクニック 「分割代入（ぶんかつだいにゅう）」...

Day 21：オブジェクトと配列（前半）「現実のデータ構造」に一気に近づく日ですDay 21では、これまで学んできた 配列 と オブジェクト を組み合わせて、オブジェクトの配列実務でのデータ構造を扱っ...

Day 20：オブジェクトの基礎 ― 「意味のあるまとまり」でデータを扱うDay 20では、JavaScriptでとても重要な「オブジェクト」というデータの形を学びます。オブジェクトとはプロパティ値の...

Day 19：配列メソッド② ― 「集計」と「条件チェック」を武器にするDay 19では、配列をさらに一歩踏み込んで扱うための4つのメソッドを学びます。reduce()：合計・集計・まとめるsome(...

Day 18：配列メソッド① ― 「配列を変換・絞り込み・検索する」力を身につけるDay 18では、配列をより賢く扱うための3つの重要なメソッドを学びます。map()：配列を「変換」するfilter(...

Day 17：配列の繰り返し（前半）「1つずつ」ではなく「まとめて処理する」力を身につけるDay 17では、配列の要素を 1つずつ順番に処理するための繰り返し構文 を学びます。 ここまでで「配列を作る...

Day 16：配列の追加・削除（前半）―「リストを動かす」感覚を身につけるDay 16では、配列の中身を 追加したり削除したりして動かす 方法を学びます。 ここまでで「配列とは」「インデックス」「要素...

Day 15：配列の基礎（前半）―「ひとつずつ」から「まとめて扱う」へ進むDay 15では、JavaScriptでデータを扱ううえで欠かせない 配列（Array） を学びます。 ここまでの学習では、変...

Day 14：Week 2 総復習（前半）で「土台を固める」Week 2では、JavaScriptの基礎として変数データ型演算子条件分岐繰り返し関数を一通り学んできました。 Day 14前半では、それ...

Day 13：アロー関数（前半）で「関数をより短く、より読みやすく」書く力を身につけるDay 13前半では、JavaScriptのモダンな書き方である アロー関数（Arrow Function） を学...

Day 12：引数と戻り値で「入力→処理→結果」の流れをつかむDay 12では、関数の中でもとても重要な要素である 引数・戻り値・return を学びます。 関数を「入力→処理→結果」を扱う小さな箱と...

Day 11：関数の基礎で「処理に名前をつけて再利用する」感覚を身につけるDay 11では、JavaScriptのとても重要な概念である 「関数」を学びます。 関数は、ひと言でいうと 「処理のかたまり...

Day 10：while文で「条件を満たすまで繰り返す」感覚を身につけるDay 10では、「条件を満たすまで繰り返す」タイプのループである while 文と do...while 文を学びます。 さら...

Day 9：for文で「同じ処理を繰り返す」感覚をつかむDay 9では、プログラミングの中でもとても重要な考え方である 「繰り返し処理」を学びます。 その代表的な仕組みが for 文です。ここでは、f...

Day 8：switch文で「分岐の整理」を体験するDay 8では、これまで学んできた if / else if / else に続いて、switch 文による条件分岐を学びます。 特に「ひとつの値に...

Day 7：条件分岐の実践（前半）Day 7前半では、条件分岐を一歩進めて、複数条件・&&・||・!・ネストした条件分岐を扱います。 ここまで来ると、現実のサービスに近いロジック——たとえばログイン判...

Day 6：条件分岐 if（前半）Day 6前半では、プログラムに「状況によって動きを変える力」を与える条件分岐を学びます。 ここで扱うのは、if・else・else if・比較条件です。これらを使う...

Day 5：文字列操作 ― 「言葉を扱うコード」に一歩踏み込むJavaScript入門90日コースのDay 5では、「文字列操作」をテーマに進めていきます。 これまで数字や真偽値を扱ってきましたが、実...

Day 4：演算子 ― 「計算・比較・条件」をまとめて体験する日JavaScript入門90日コースのDay 4では、「演算子」をテーマに進めていきます。 演算子は、値どうしを計算したり、比べたり、条...

Day 3：データ型 ― 「値の種類」を意識してみる日JavaScript入門90日コースのDay 3では、「データ型」をテーマに進めていきます。 昨日までで「変数」という箱を手に入れましたが、今日は...

Day 2：変数とデータ ― 「値をしまっておく箱」を手に入れるJavaScript入門90日コースの2日目では、プログラミングの世界で超・基本になる「変数」と「データ」についてじっくり学んでいきます...

Day 1：JavaScriptとは何かJavaScript入門90日コースの1日目では、「JavaScriptってそもそも何者なのか？」というところから、実際にブラウザで動かしてみるところまでをじっ...