JavaScriptとGo言語でToDoリストアプリを作ろう!~UI開発~

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、フロントサイドをToDoリストアプリを実装します。加えて、バックエンドをGo言語で作成して、データのやりとりをしてみましょう。プチ連携です。

demoは「こちら」で確認できます。

Todoアプリの仕様

仕様 1. Todoをリストとして保持する
2. Todoをクリックすることで、Task完了となる
3. Todoを右クリックするとタスクが消える

パソコンからじゃないと使えないかもですね。

環境構築

簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

ページ(HTML)の作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイル(CSS)を装飾

次は、ページにスタイルをつけます。

ここまで実装すると以下のようになります。

JavaScriptの実装

今回は、フロントエンドで全て完結するアプリケーションを一旦作成します
そして、次の記事でバックエンド側を作成したら、それに合わせてJavaScriptの処理を変更します。

要素を取得する

最初に、画面操作に必要な要素を取得します。

データ保存

ページをリロードしても作成したTodoを保持しておかなければなりません。そこで、ローカルストレージを使ってデータを保持します。

ローカルストレージは、任意のデータをブラウザ上で保持できる仕組みです。

ただし、Go言語でバックエンドを作成したらそこにデータを持たせるため、不要になります。

ローカルストレージにデータを保存したい場合は、localStorage.setItemを使います。第一引数にkeyとして任意の文字列を、第二引数に保存したいデータをそれぞれ指定します。JSONデータも保存できるので、かなり便利ですよね。

JSON.stringifyは、JavaScriptのオブジェクトや値をJSONに変換してくれる便利メソッドです。

逆に取り出すときは、localStorage.getItemを使います。引数には、ローカルストレージに保存した時のキー(todos)を指定します。

completedは、CSSのクラスです。classList.containsでこのクラスが存在するかチェックし、true/falseの値を返します。このクラスが付与されたTodoは完了扱いになります。

Todo作成イベントの発火

Todoを入力した時、submitイベントを発火させ、Todoを作成します。

preventDefaultは、HTML要素が元々持っているデフォルトの挙動をキャンセルします。ここでは、submitした時にページがリダイレクトされてしまうので、それを防いでいます。

Todo作成

Todoを作成します。

基本的には、コメントに書いてある通りです。

contextmenu属性は、右クリックを押した時にイベントを発火させます。

Todoデータの読み込み

最後に、ページを開いた時にTodoリストを作成するようにします。

これで、完成です。

おわりに

今回のTodoリストは、Todo作成、完了、削除の3つの機能しかありませんが、更新があると更に便利そうですね。時間に余裕があれば、作成してみてください。

次回

次回は、バックエンド側の処理を実装します。

関連記事

こちらの記事も人気です!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す