[JavaScript]メモ帳アプリでタスク管理をしよう!

こんにちは。KOUKIです。

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

実装するもの

今回は、メモ帳アプリをJavaScriptで実装したいと思います。タスク管理などに使えると思います。

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

環境構築

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

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

ページ(HTML)の作成

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

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

今回、markedというプラグインを導入しています。GitHubはこちら

Qiitaとかに使われるMarkDown形式で書かれた文章を簡単にHTMLに変換できるプラグインのようですね。

スタイル(CSS)を装飾

次にスタイルを記述しましょう。

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

JavaScriptの実装

今回は、大まかに4つの機能を実装します。

メモ帳の機能 1: 作成(Create)
2: 削除(Delete)
3: 編集(Edit)
4: 保存(Save)

解説中に「どこに実装するんだ?」と迷われるかも知れないので、ページの最後の方に実装後のソースコードを載せておきます。

メモ帳作成機能

最初にメモ帳作成機能を実装します。

要素を取得する

画面操作に必要な要素を取得しましょう。

clickイベントの登録

次にclickイベントを登録します。これは、「+Add note」を押した時に発火されるイベントです。

addNewNote関数はこれから作成します。

DOMにメモ帳を追加する

addNewNote関数には、HTMLのDOM要素にメモ帳を追加する機能を実装します。

要素を追加するときは、createElementで要素を作ってから追加したい要素の子要素としてappendChildします。ざっくりした説明ですが、他のアプリケーション開発でも扱った内容なので、詳細は割愛します。

この時点で、「+Add note」ボタンを押すとメモ帳が表示されます。

メモ帳削除機能

次は、メモ帳を削除する機能を作成します。

要素の取得

まずは、画面操作に必要な要素を取得します。先ほど作成したaddNewNote関数に以下の処理を追加しましょう。

clickイベントの作成

次にclickイベントを登録します。これは、「削除ボタン」を押した時に発火されるイベントです。これもaddNewNote関数に追加します。

deleteNote関数は、これから実装します。

メモ帳をDOM要素から削除

deleteNote関数は、2つのことをします。一つは、追加したメモ帳を削除すること、もう一つはローカルストレージの更新をすることです。

ローカルストレージについては、後述します。

createElementメソッドで作成した要素は、removeメソッドを持っており、これで要素を削除できます。updateLS関数は後で作成します。

これで、メモ帳を削除することができるようになりました。

メモ帳編集機能

次は、メモ帳を編集する機能を作成します。

clickイベントの作成

作成や削除の時と同様に、clickイベントを登録します。これは、「編集ボタン」を押した時に発火されるイベントです。これもaddNewNote関数に追加します。

editNote関数はこれから実装します。

編集画面切り替え

編集ボタンをクリックするとメモ帳上でエリアが切り替わります。入力することができるエリアと、参照しかできないエリアです。

classListのtoggleは、hiddenクラスが設定されていれば除去し、なければ追加できる便利メソッドです。

編集文字の表示

addNewNote関数には、textパラメータを渡せるようになっています。ここにローカルストレージに保存した文字列を渡します。

これは、後ほど実装するメモ帳保存機能の時に必要になるので、覚えておいてください。

引数として渡されたデータはメモ帳上で表示する必要があるので、addNewNote関数に以下の処理を追加します。

marked関数は、HTMLに追加したMarkedプラグインのメソッドです。MarkDownで書かれた文字列をHTMLに変換してくれます。

以下の動画は、これから実装するinputイベントを登録してから確認することができますが、MarkDownをHTMLに変換する例です。

inputイベントの登録

次に、inputイベントを登録して、編集を可能にしましょう。

ここまで実装すると編集ができるようになります。

メモ帳保存機能

最後にローカルストレージにメモ帳のデータを保存する処理を実装します。

ローカルストレージは、ブラウザにデータを保存できる便利な機能です。

ローカルストレージのsetItemメソッドでブラウザにデータを保存できます。 ちなみにページを閉じるとデータは消えてしまいます。消したくない場合は、セッションストレージを使いましょう。

データを取得したい場合は、getItemを使います。ページが読み込まれたら最初にローカルストレージをチェックし、データが存在していたらaddNewNoteを実行してメモ帳を表示しています。

データを保存したらChromeのデベロッパーツールをF12で開いて、Applicationタグから「Local Storage」を選択してください。そこから確認できます。

これで完成です。

おわりに

今回のメモ帳アプリもすごく面白いですね。

何より、markedプラグインを知れたことが一番の収穫でした。

以前作成したJavaScriptのTodoリストとも作り方が似てますね^^

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍


コメントを残す