Savvy Code

【JavaScript入門】ToDoアプリを作ってみよう

本章から実践編になるよ!

本チュートリアルでは、「JavaScript入門」の実践編としてToDoアプリをJavaScriptで作っていきます。

対象読者

このチュートリアルは、「JavaScript入門」でJavaScriptの基礎を学習した方向けの内容となっております。

「JavaScript入門」で学んだことを元に解説をしますので、まだの方はこちらから進めてください。

はじめに
「JavaScript入門」は、プログラミングを始めたい方、JavaScriptを勉強したい方向けにJavaScriptの基礎と実践を学ぶシリーズです。

初めての方は、まずこちらからお読みください。

【JavaScript入門】はじめに

ToDoアプリの概要

本チュートリアルで作るToDoアプリは、次のような機能があります。

  • タスクを表示する
  • タスクを追加する
  • タスクを削除する

なるべく分かりやすくするために最低限の機能で実装をしますが、実践的な内容になっています。

学習範囲

本チュートリアルを通して次のようなことを学ぶことができます。

  • ToDoリストの作り方
  • 配列データとtemplate要素の使い方
  • イベントとイベントハンドラの使い方
  • 共通処理を関数にまとめる方法

「JavaScript入門」の基礎編で学習したことにプラスして、応用的な内容になっています。

チュートリアルの進め方

コードを書くための準備としてサンプルファイルを用意しました。

各章でサンプルファイルをもとに進めていきますので、こちらからダウンロードしてください。

参考 ToDoアプリサンプルコードJavaScript入門

スタート」フォルダは編集前のファイルが収められており、各章の手順にしたがって学習をすることができます。

完成」フォルダは完成形のファイルが収められているので、「スタート」フォルダで分からなくなったときは、こちらで確認してください。

コードを書くときの注意点

コードを書くときはコピーアンドペーストをしないで、実際に手を動かして書いてください。

手を動かしてコードを書くことを写経すると表現します。

写経することによってコードを一つ一つ確認しながら書くので効率的に学習することができます。

これは、プログラミング未経験者だけでなく、熟練のプログラマたちでも実践されています。

ですので、なるべくコードは手を動かして書くようにしましょう。

目次

STEP1
タスクを表示しよう
【JavaScript入門】タスクを表示しよう
  • 配列データをもとにタスクを表示します
  • template要素の使い方を学びます
STEP2
タスクを追加しよう
【JavaScript入門】タスクを追加しよう
  • フォーム送信やイベントハンドラを用いてタスクの追加をします
  • イベントとイベントハンドラについて学びます
STEP3
タスクを削除しよう
【JavaScript入門】タスクを削除しよう
  • イベントハンドラを用いてタスクの削除を実装します
STEP4
共通処理を関数化させよう
【JavaScript入門】共通処理を関数化させよう
  • 共通で使う処理を関数にして効率的なコードにします
では、一緒にJavaScriptを学習しましょう。