3 つの前提コースを受けていなくても進められますか？

条件分岐、配列とループ、関数、オブジェクト、DOM 操作を説明しながら書けるなら進められます。題材の HTML/CSS は用意されています。

Promise・async/await・fetch も学べますか？

このコースでは扱いません。修了後の「非同期JavaScript：API通信とモジュール」で、Promise、async/await、fetch を順に学びます。

React や Vue を使いますか？

使いません。フレームワークを使わない JavaScript で、データ処理とコード設計に集中します。

import と export、Node.js、npm は扱いますか？

このコースでは扱いません。import と export は次の非同期/APIコースで読み方とローカルで試す手順を扱い、Node.js と npm はこのトラックの範囲外です。

モダンJavaScript：データ処理とコード設計｜5分レッスンで基礎から学ぶ

Name: モダンJavaScript：データ処理とコード設計
Availability: InStock

モダンJavaScript：データ処理とコード設計

配列の map・filter・reduce・sort、クロージャと高階関数、オブジェクトとクラス、エラー設計、正規表現を学ぶ全 36 レッスン（665 分）のコースです。ローカルの作品データを題材に、表示とデータを分け、絞り込み・並び替え・入力検証までを組み立てます。Promise、fetch、API 通信、モジュールは次のコースで扱います。

レッスン

36件

所要時間

約11時間

ランク

中級

学習環境

ブラウザ完結

できるようになること

map・filter・reduce・sort をつないで、配列データを変換・抽出・集計・並び替えできる

クロージャ、高階関数、純粋関数を使い、状態と副作用の置き場所を説明できる

分割代入・スプレッド・レストとクラスを使い、作品データの構造を整理できる

try/catch、自作エラー、画面への失敗表示、正規表現による入力検証を組み立てられる

このコースの導入スライド

レッスンの最初に、図と短い言葉で学ぶ内容をつかみます。

導入スライドをすべて見る

実践JavaScript - strict mode で書き間違いを表に出す

ファイルの先頭に 1 行足す

JavaScript には、判定をゆるくしたまま動く既定のモードと、厳しく判定する strict mode の 2 つがあります。ファイルの先頭に 1 行書くだけで、そのファイル全体が厳しいほうに切り替わります。

正しく書けているコードの動きは何も変わりません。変わるのは、書き間違えたときの扱いです。

先頭に置いたこの 1 行が、そのファイル全体の判定を厳しくします。

"use strict";

let viewCount = 0;
viewCount = 12;
console.log(viewCount); // 12

1 / 4

strict mode で書き間違いを表に出す

実践JavaScript - 作品データと表示を分けて持つ

作品データを 1 か所に集める

ポートフォリオに並べる作品を、HTML に直接書かずに配列として持ちます。1 件ぶんの項目をそろえておくと、あとから件数が増えても同じ扱いのまま足せます。

この配列が、この先ずっと画面のもとになります。あとで中身を API から取ってくる形に差し替えます。

作品 1 件を 1 つのオブジェクトにして、それを配列に並べます。

const works = [
  { title: "レシピ検索サイト", year: 2024, tags: ["HTML", "CSS"], views: 1200 },
  { title: "家計簿アプリ", year: 2025, tags: ["JavaScript"], views: 860 },
];

console.log(works.length); // 2
console.log(works[0].title); // "レシピ検索サイト"

1 / 4

作品データと表示を分けて持つ

実践JavaScript - map で形を変える

1件ずつ別の形に置き換える

ポートフォリオの作品配列から、画面に出したいのは題名だけ、ということがあります。map は元の配列を 1 件ずつ見て、返した値を並べた新しい配列を作ります。元の配列はそのまま残ります。

4 件を渡したら 4 件が返ります。map は件数を変えません。変わるのは 1 件ずつの形だけです。

この works をこの章の最後まで使い回します。中身を覚えておいてください。

const works = [
  { title: "旅の記録サイト", year: 2023, views: 320, published: true },
  { title: "家計簿アプリ", year: 2024, views: 1250, published: true },
  { title: "写真ギャラリー", year: 2024, views: 860, published: false },
  { title: "天気ボット", year: 2025, views: 540, published: true },
];

const titles = works.map((w) => w.title);
console.log(titles.length); // 4
console.log(titles[1]); // "家計簿アプリ"

1 / 4

map で形を変える

実践JavaScript - filter と find で絞り込む

条件に合うものを取り出す 2 つの道具

map が形を変える道具だとすると、filter と find は数を減らす道具です。filter は条件に合ったものを全部、find は最初に見つかった 1 件だけを返します。

写真ギャラリーは views が 860 で条件に合いますが、家計簿アプリのほうが前にあるので find はそこで止まります。

filter が返すのは配列、find が返すのは要素そのものです。ここが最初の分かれ目です。

const published = works.filter((w) => w.published);
console.log(published.length); // 3

const first = works.find((w) => w.views > 800);
console.log(first.title); // "家計簿アプリ"