strict mode が先に教えてくれる間違い
宣言し忘れた代入を strict mode が止める有料プラン
モダンJavaScript：データ処理とコード設計
配列の map・filter・reduce・sort、クロージャと高階関数、オブジェクトとクラス、エラー設計、正規表現を学ぶ全 36 レッスン（665 分）のコースです。ローカルの作品データを題材に、表示とデータを分け、絞り込み・並び替え・入力検証までを組み立てます。Promise、fetch、API 通信、モジュールは次のコースで扱います。
レッスン
36件
所要時間
約11時間
ランク
中級
最初のレッスンを読む
15分・登録なしで読めます
動く図解・strict mode が先に教えてくれる間違い
動く図解・strict mode が先に教えてくれる間違い
目標
作品データ処理の関数・WorkCollection クラス・入力検証の演習（配列パイプライン、関数設計、クラス、エラー処理、正規表現）
できるようになること
map・filter・reduce・sort をつないで、配列データを変換・抽出・集計・並び替えできる
クロージャ、高階関数、純粋関数を使い、状態と副作用の置き場所を説明できる
分割代入・スプレッド・レストとクラスを使い、作品データの構造を整理できる
try/catch、自作エラー、画面への失敗表示、正規表現による入力検証を組み立てられる
よくある質問
前提知識・必要な環境
必須
- • 「JavaScript入門：コードを動かす」「JavaScript基礎文法：処理を組み立てる」「JavaScriptでWebページを動かす」修了相当
- • 条件分岐、配列とループ、関数、オブジェクト、DOM イベントを一度書いた経験
推奨
- • ブラウザのコンソールでエラーを確認した経験
- • プロフィールページ程度の HTML/CSS を読めること
環境
ブラウザ完結（インストール不要）
必要ツール: ブラウザ内エディタ, JavaScript 実行環境, 関数テスト, HTML/JavaScript プレビュー
このコースに入っているもの
触れる図解
26本
導入スライド
104枚
手を動かす演習
27問
理解度クイズ
7問
つまずき辞典
53件
読み物のレッスン
2本
監修
ゆめさくコード編集部
プログラミング学習をもっと身近に。初心者から実務レベルまで、わかりやすいコンテンツをお届けします。
生田 陸人
ゆめさくエンジニア / 現役ソフトウェアエンジニア。Ruby on Rails・Nuxt.js・Next.js・CakePHPなどの実務の開発をベースに、学習コンテンツを作成しています。
入門で作ったプロフィールサイトを開き直し、strict mode が知らせてくれる事故を先に見ます。表示とデータを切り分け、作品データを一か所に集めるところまで準備します。
map で形を変え、filter と find で絞り込み、reduce でまとめ、sort で並べ替えます。元の配列が壊れる罠と文字列比較の罠を押さえ、作品一覧の絞り込みと並び替えを作ります。
クロージャで状態を閉じ込め、設定を覚えた関数を作り、関数を返す関数を書きます。副作用のない関数がなぜ読みやすいのかを言語化し、後半の下ごしらえをします。
引数での分割代入、ネストの分割代入、レスト引数、既定値の上書き順など、関数の入口で使う形に絞って扱います。表示オプションをビット演算で 1 つの数値にまとめる回も置きます。
Work と WorkCollection を題材に、クラスとインスタンス、private フィールドとアクセサ、継承と super、多態と static を学びます。最後に作品コレクションをクラスに作り替えます。
try catch finally と再送出、自分でエラーを投げる設計を学びます。コンソールに出して終わりにせず、利用者に見える形で失敗を画面に出すところまでやります。
パターンの読み書きから始め、入力の検証、キャプチャグループを使った置換までを扱います。正規表現で検証しきれない範囲がどこかも合わせて押さえます。
このコースを終えると取れるバッジ
JavaScript 第7コース
0 / 36 レッスン
このコースの動く図解
動かしながら、仕組みや変化を目で確かめられます。
こんな人におすすめ
JavaScript の基礎文法と DOM 操作を一度書いた人
配列処理や関数設計を、保守しやすいコードにつなげたい人
クラス・エラー処理・正規表現まで素の JavaScript で学びたい人
おすすめしない人
- ×条件分岐・配列・ループ・関数・オブジェクト・DOM 操作をまだ学んでいない人
- ×Promise・fetch・外部 API 通信だけを先に学びたい人
前提が不安な方へ
先にこちらを通しておくと、つまずきにくくなります
次に学ぶなら
このコースを終えたあとに進むと、無理なく続けられます
