tanaka101

身につくスキル

  • -HTML/CSS/JavaScript の基本を実践で理解する
  • -ローカルストレージを使ったデータ永続化ができる
  • -Vercel を使って Web アプリを公開できる
進捗: 0 / 7

はじめに

ToDoアプリを作る意義と、このコースの前提条件を確認します。

なぜ ToDo アプリを作るのか

「またToDoアプリか...」と思った方もいるかもしれません。正直、ToDoアプリは面白いものではありません。

しかし、ToDoアプリにはWebアプリの基本が詰まっています

  • データの追加・表示・削除(CRUD操作)
  • ユーザー入力の処理
  • 状態の管理
  • DOMの操作

派手なアプリを作る前に、まずはこの「つまらないけど大事な基礎」を身につけましょう。

前提条件

このコースを始める前に、以下のガイドを完了してください。

ガイド内容
エディタ入門VSCodeのインストールと基本操作
Node.js入門.jsのインストールと確認方法
CLI入門の基本的な使い方

すでに環境構築が済んでいる方は、次のセクションに進んでください。

プロジェクトフォルダの作成

を開いて、お好きな場所にフォルダを作成します。 (手動で作成しても問題ないです)

mkdir todo-app
cd todo-app

フォルダー名は英語で作りましょう

日本語で『趣味』や『管理アプリ』のようなフォルダー名にすると、 ツールやが日本語のパスを正しく認識できず、 エラーの原因になることがあります。

英数字、ハイフン(-)やアンダーバー(_)で命名するのが安全です。

VSCode でフォルダを開きます。

code .

完成イメージ

このコースで作るものはこちらです。

完成イメージ

次のステップ

準備ができました。次のレッスンでは HTML と CSS でアプリの見た目を作っていきます。