JavaScriptで作るTodoリスト

こんにちは。KOUKIです。

皆さんは、日常のTaskを何で管理しているでしょうか?

私は、Todoリストを作って、そこでTaskを管理しています。

そんな訳で、今日はJavaScriptで、Todoリストの作成を行いたいと思います。

完成イメージ

JavaScript記事まとめ(初心者向き)

プロジェクト

まずは、プロジェクトを作成してください。

ひな形

次は、Todoリスト画面のひな形を作成します。

このひな形には、次の便利ツールが含まれています。

Bootstrap
FontAwesome

BootstrapはCSSのフレームワークで、画面のデザインを手軽に行えるようなります。

FontAwesomeは、Webアイコンを手軽に導入できる便利ツールです。

画面の作成

Todoリスト画面の作成を行います。

以下の部分がFontAwesomeです。検索アイコンを付与しています。

画面を表示させてみましょう。

Styleの適用

TodoリストにStyleを適用させます。

画面を表示してみましょう。

Taskの追加機能

次は、JavaScriptで、Taskの追加機能を作成します。

画面上で動作確認しましょう。New Taskに適当な文字列を打ち込んでEnterキーを押下してください。

問題なくTaskが追加できたようです。

しかし、追加した要素が白く塗りつぶされているので、スタイルを修正しましょう。

削除機能

Taskの削除機能を実装しましょう。

画面上で、一度Taskを追加します。

Taskにゴミ箱が付与されるようになりました。

ゴミ箱には「.deleteクラス」を設定しており、クリックイベント時にこのクラスがclassList内に含まれている場合、親要素と一緒に削除するように実装しました。

classListは、要素に設定されているクラスをリストで取得できます。

サーチ機能の実装

次に、サーチ機能を実装します。

スタイルも変更します。

スタイルに設定した「display:none」は、HTML要素に付与すると要素そのものが画面から見えなくなります。

複数のTaskを追加して、動作確認をしてみましょう。

この状態でSearch Keywordに「Java」と打ち込んでください。

Taskを絞り込めましたね。

Task保存機能

追加したTaskは、ブラウザをリロードすると削除されてしまうので、ローカルストレージに保存します。

これで完成です。Taskを追加後、リロードしてもデータが消えなくなっているはずです。

おわりに

JavaScriptでもそこそこのアプリは作成できますね。

これからもJavaScriptで便利なアプリを作成していきたいと思います。

それでは、また!

関連記事

おすすめ書籍

ちょっと古い書籍ですが、この本がオススメです。

実務でも通用する力が身につきます(下手に優しいJS本よりよい)。

コメントを残す