<CodeLearn/>
JavaScript レッスン15

JavaScript総合演習

これまで学んだ知識を活かしてTODOアプリを作ろう

総合演習について

この演習では、HTML・CSS・JavaScriptを組み合わせて完全なTODOアプリを構築します。 これまで学んだ以下の知識をすべて活用します。

  • DOM操作 — 要素の作成、追加、削除、イベント処理
  • 配列メソッド — filter、map、forEachでデータを操作
  • オブジェクト — TODOデータの構造化
  • 関数 — 機能ごとの関数設計
  • エラーハンドリング — 入力のバリデーション
  • テンプレートリテラル — HTMLの動的生成

ステップ1: 基本構造とタスクの追加

まずはTODOの追加と表示の基本機能を作りましょう。

index.htmllazy
9 lines0 issues

Monaco Editor を準備しています

表示領域に入った時点で Monaco と Shiki を初期化します。

preview.local
Live Preview
Console

console.log / warn / error の出力がここに表示されます。

ステップ2: フィルタリングと高度な機能

フィルタ機能、一括操作、アニメーションを追加した完成版です。

index.htmllazy
26 lines0 issues

Monaco Editor を準備しています

表示領域に入った時点で Monaco と Shiki を初期化します。

preview.local
Live Preview
Console

console.log / warn / error の出力がここに表示されます。

自由に試してみよう

TODOアプリにオリジナルの機能を追加してみましょう。以下のアイデアを参考にしてください。

index.htmllazy
19 lines0 issues

Monaco Editor を準備しています

表示領域に入った時点で Monaco と Shiki を初期化します。

preview.local
Live Preview
Console

console.log / warn / error の出力がここに表示されます。

← 前のレッスン

モジュール

コース一覧へ →

トップに戻る