こんにちは、Reiです。
プログラミングの基礎を学んだら、
次はいよいよ 「実際に動くもの」を作るフェーズ に入っていきます。
今回挑戦するのは、
フロントエンド開発の基本がぎゅっと詰まった「TODOアプリ」 です。
小さなアプリですが、
- HTML
- CSS
- JavaScript
フロントエンド開発の基本がぎゅっと詰まっています。
今回は、
真っ白な画面からアプリが完成するまでを
全7回の記事で順番に作っていきます。
今回制作するTODOアプリの完成イメージ
まずは、今回どのようなアプリを作り上げるのか、完成図を確認してみましょう！
シンプルな見た目ですが、
- タスクの追加
- タスクの完了・削除
といった、アプリ開発の基本となる機能を盛り込んでいます。
「自分にも作れそう！」と感じた方も、
「難しそう…」と感じた方も大丈夫です！
一歩ずつ、この完成形を目指して進めていきましょう。
まずは、全体の流れを見ていきましょう！
TODOアプリ制作のロードマップ
TODOアプリの開発は、
大きく分けて 3つのステップで進めていきます。
- HTMLで構造を作る
- CSSで見た目を整える
- JavaScriptで動きを付ける
一見複雑そうに見えるアプリも、
このように 役割ごとに分けて作っていくと理解しやすくなります 👀
それでは、それぞれの工程を見ていきましょう！
STEP1：HTML編（骨組みを作る）
最初に行うのは、アプリの構造を作る作業です。
入力欄やリストなど、TODOアプリに必要な要素をHTMLで配置していきます。
- 第１回：HTMLで「骨組み」を作る
div や ul などのタグを使いながら、アプリの基本となる画面を作ります。
STEP2：CSS編（見た目を整える）
HTMLだけの状態では、まだレイアウトや装飾が整っていないシンプルな画面です。
CSSを使って、余白や配置を整えながら見やすい画面にしていきます。
- 第２回：CSSで「見た目」を整える
背景色や余白、display: flex を使いながら、TODOアプリのレイアウトを作っていきます。
STEP3：JavaScript編（動きを付ける）
ここからJavaScriptを使い、アプリに動きを付けていきます。
ユーザーの入力やクリックに反応する仕組みを作っていきます。
- 第３回：ボタンと処理を紐付ける
addEventListener を使い、クリック時に処理が動く仕組みを作ります。
- 第4回：テキストボックスの内容を操作する
テキストボックスの入力内容を取得し、入力後にクリアする処理を実装します。
- 第5回：新しいTODOをリストに追加する
createElement を使い、JavaScriptからリスト要素を作ります。
- 第６回：リスト内にボタンを表示する
JavaScriptからボタン要素を作り、TODOごとに表示させます。
- 第７回：ボタンに「役割」を与える
完了や削除など、TODOアプリの基本機能を実装します。
STEP4：総仕上げ
最後に、ここまで作ったアプリを振り返ります。
コード全体を整理しながら、仕組みをもう一度確認しましょう！
- 第８回：完成形とファイル構成の総点検
完成コードの確認とポイントを振り返ります。
このシリーズを終えると得られるもの
このシリーズを通して、
実際にアプリを作りながら次のような力が身についていきます！
・DOM操作の実践感覚
JavaScriptを使って、HTMLの内容を追加・変更する基本的な操作が理解できます。
・ユーザー操作に反応する仕組み
クリックや入力など、ユーザーの操作に応じて処理を動かす方法がわかります。
・小さなアプリを完成させる経験
画面の構造から機能まで、アプリが完成するまでの流れを一通り体験できま
それでは、第1回からさっそく進めていきましょう！
コメント