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

こんにちは。KOUKIです。

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

実装するもの

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

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

環境構築

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

JavaScriptでアプリ開発 ~環境構築~

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

$ tree
.
├── index.html
├── script.js
└── style.css

$ tree

├── index.html

├── script.js

└── style.css

CSS版

CSSでメモ帳アプリのスタイリングをしよう!

ページ(HTML)の作成

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" />
    <link rel="stylesheet" href="style.css" />
    <title>Notes App</title>
  </head>
  <body>
    <button class="add" id="add">
      <i class="fas fa-plus"></i> Add note
    </button>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.2.2/marked.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Notes App</title>

</head>

<body>

<i class="fas fa-plus"></i> Add note

</button>

</body>

</html>

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

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

// marked
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.2.2/marked.min.js"></script>

1 2	// marked <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/1.2.2/marked.min.js"></script>

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

スタイル(CSS)を装飾

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

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');

* {
  box-sizing: border-box;
  outline: none;
}

body {
  background-color: #7bdaf3;
  font-family: 'Poppins', sans-serif;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding-top: 3rem;
}

.add {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background-color: #9ec862;
  color: #fff;
  border: none;
  border-radius: 3px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}

.add:active {
  transform: scale(0.98);
}

.note {
  background-color: #fff;
  box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);
  margin: 30px 20px;
  height: 400px;
  width: 400px;
  overflow-y: scroll;
}

.note .tools {
  background-color: #9ec862;
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem;
}

.note .tools button {
  background-color: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  margin-left: 0.5rem;
}

.note textarea {
  outline: none;
  font-family: inherit;
  font-size: 1.2rem;
  border: none;
  height: 400px;
  width: 100%;
  padding: 20px;
}

.main {
  padding: 20px;
}

.hidden {
  display: none;
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');

* {

box-sizing: border-box;

outline: none;

}

body {

background-color: #7bdaf3;

font-family: 'Poppins', sans-serif;

display: flex;

flex-wrap: wrap;

margin: 0;

padding-top: 3rem;

}

.add {

position: fixed;

top: 1rem;

right: 1rem;

background-color: #9ec862;

color: #fff;

border: none;

border-radius: 3px;

padding: 0.5rem 1rem;

cursor: pointer;

}

.add:active {

transform: scale(0.98);

}

.note {

background-color: #fff;

box-shadow: 0 0 10px 4px rgba(0, 0, 0, 0.1);

margin: 30px 20px;

height: 400px;

width: 400px;

overflow-y: scroll;

}

.note .tools {

background-color: #9ec862;

display: flex;

justify-content: flex-end;

padding: 0.5rem;

}

.note .tools button {

background-color: transparent;

border: none;

color: #fff;

cursor: pointer;

font-size: 1rem;

margin-left: 0.5rem;

}

.note textarea {

outline: none;

font-family: inherit;

font-size: 1.2rem;

border: none;

height: 400px;

width: 100%;

padding: 20px;

}

.main {

padding: 20px;

}

.hidden {

display: none;

}

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

JavaScriptの実装

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

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

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

メモ帳作成機能

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

要素を取得する

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

// 要素を取得する
const addBtn = document.getElementById('add')

1 2	// 要素を取得する const addBtn = document.getElementById('add')

clickイベントの登録

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

// 作成ボタンのクリックイベントの登録
addBtn.addEventListener('click', () => addNewNote())

1 2	// 作成ボタンのクリックイベントの登録 addBtn.addEventListener('click', () => addNewNote())

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

DOMにメモ帳を追加する

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

function addNewNote(text = '') {
    // div要素を作成
    const note = document.createElement('div')
    // noteクラスを追加
    note.classList.add('note')

    // メモ帳を追加
    note.innerHTML = `
    <div class="tools">
        <button class="edit"><i class="fas fa-edit"></i></button>
        <button class="delete"><i class="fas fa-trash-alt"></i></button>
    </div>
    <div class="main ${text ? "" : "hidden"}"></div>
    <textarea class="${text ? "hidden" : ""}"></textarea>
    `

    // bodyの子要素として追加
    document.body.appendChild(note)
}

function addNewNote(text = '') {

// div要素を作成

const note = document.createElement('div')

// noteクラスを追加

note.classList.add('note')

// メモ帳を追加

note.innerHTML = `

</div>

// bodyの子要素として追加

document.body.appendChild(note)

}

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

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

メモ帳削除機能

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

要素の取得

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

function addNewNote(text = '') {
    // div要素を作成
    // noteクラスを追加

    // メモ帳を追加
    ...

    // 操作に必要な要素を取得
    const editBtn = note.querySelector('.edit')
    const deleteBtn = note.querySelector('.delete')
    const main = note.querySelector('.main')
    const textArea = note.querySelector('textarea')

}

function addNewNote(text = '') {

// div要素を作成

// noteクラスを追加

// メモ帳を追加

...

// 操作に必要な要素を取得

const editBtn = note.querySelector('.edit')

const deleteBtn = note.querySelector('.delete')

const main = note.querySelector('.main')

const textArea = note.querySelector('textarea')

}

clickイベントの作成

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

function addNewNote(text = '') {
    // div要素を作成
...
    `
    // 操作に必要な要素を取得
...

    // 削除のクリックイベントの登録
    deleteBtn.addEventListener('click', () => {
      deleteNote(note)
    })

}

function addNewNote(text = '') {

// div要素を作成

...

// 操作に必要な要素を取得

...

// 削除のクリックイベントの登録

deleteBtn.addEventListener('click', () => {

deleteNote(note)

})

}

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

メモ帳をDOM要素から削除

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

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

// メモ帳削除
function deleteNote(note) {
  // ノートを削除
  note.remove()

  // ローカルストレージの更新
  updateLS()
}

func updateLS() {
  // 後で実装
}

// メモ帳削除

function deleteNote(note) {

// ノートを削除

note.remove()

// ローカルストレージの更新

updateLS()

}

func updateLS() {

// 後で実装

}

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

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

メモ帳編集機能

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

clickイベントの作成

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

addBtn.addEventListener('click', () => addNewNote())

function addNewNote(text = '') {
    ...

    // 削除のクリックイベントの登録

    // 編集ボタンのクリックイベント
    editBtn.addEventListener('click', () => {
      editNote(main, textArea)
    })
...
}

addBtn.addEventListener('click', () => addNewNote())

function addNewNote(text = '') {

...

// 削除のクリックイベントの登録

// 編集ボタンのクリックイベント

editBtn.addEventListener('click', () => {

editNote(main, textArea)

})

...

}

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

編集画面切り替え

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

// メモ帳編集
function editNote(main, textArea) {
  // hiddenがついているものは消し、ついてないものは付与する
  main.classList.toggle('hidden')
  textArea.classList.toggle('hidden')
}

// メモ帳編集

function editNote(main, textArea) {

// hiddenがついているものは消し、ついてないものは付与する

main.classList.toggle('hidden')

textArea.classList.toggle('hidden')

}

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

編集文字の表示

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

function addNewNote(text = '') {}

1	function addNewNote(text = '') {}

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

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

function addNewNote(text = '') {
...
    // メモ帳を追加
    // 操作に必要な要素を取得
...

    // テキストエリアに引数で渡したテキストを代入
    // 新規/編集があるのでこうしている
    textArea.value = text
    // markedは、HTMLに追加したプラグイン
    main.innerHTML = marked(text)

    // 削除のクリックイベントの登録
  ...
}

function addNewNote(text = '') {

...

// メモ帳を追加

// 操作に必要な要素を取得

...

// テキストエリアに引数で渡したテキストを代入

// 新規/編集があるのでこうしている

textArea.value = text

// markedは、HTMLに追加したプラグイン

main.innerHTML = marked(text)

// 削除のクリックイベントの登録

...

}

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

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

inputイベントの登録

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

function addNewNote(text = '') {
 ...
    // テキストエリアに引数で渡したテキストを代入
    // 新規/編集があるのでこうしている
    // 削除のクリックイベントの登録
    // 編集ボタンのクリックイベント
...)

    // テキストエリアのイベント
    textArea.addEventListener('input', (e) => {
        const { value } = e.target

        main.innerHTML = marked(value)

        // ローカルストレージの更新
        updateLS()
    })

    // bodyの子要素として追加
...
}

function addNewNote(text = '') {

...

// テキストエリアに引数で渡したテキストを代入

// 新規/編集があるのでこうしている

// 削除のクリックイベントの登録

// 編集ボタンのクリックイベント

...)

// テキストエリアのイベント

textArea.addEventListener('input', (e) => {

const { value } = e.target

main.innerHTML = marked(value)

// ローカルストレージの更新

updateLS()

})

// bodyの子要素として追加

...

}

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

メモ帳保存機能

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

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

// 要素を取得する
// ローカルストレージからデータを取得する
const notes = JSON.parse(localStorage.getItem('notes'))

// メモ帳追加処理を実行
if(notes) {
    notes.forEach(note => addNewNote(note))
}
// 作成ボタンのクリックイベントの登録
function addNewNote(text = ''){...}

...
// ローカルストレージにメモ帳を保存
function updateLS() {
    // 要素を取得
    const notesText = document.querySelectorAll('textarea')

    const notes = []

    // 要素を格納
    notesText.forEach(note => notes.push(note.value))

    // notesという名前でローカルストレージを保存
    localStorage.setItem('notes', JSON.stringify(notes))
}

// 要素を取得する

// ローカルストレージからデータを取得する

const notes = JSON.parse(localStorage.getItem('notes'))

// メモ帳追加処理を実行

if(notes) {

notes.forEach(note => addNewNote(note))

}

// 作成ボタンのクリックイベントの登録

function addNewNote(text = ''){...}

...

// ローカルストレージにメモ帳を保存

function updateLS() {

// 要素を取得

const notesText = document.querySelectorAll('textarea')

const notes = []

// 要素を格納

notesText.forEach(note => notes.push(note.value))

// notesという名前でローカルストレージを保存

localStorage.setItem('notes', JSON.stringify(notes))

}

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

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

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

これで完成です。

おわりに

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

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

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

JavaScriptで作るTodoリスト

それでは、また!

JavaScriptまとめ

JavaScript ~ 記事まとめ ~

JavaScript ソースコード

// 要素を取得する
const addBtn = document.getElementById('add')

// ローカルストレージからデータを取得する
const notes = JSON.parse(localStorage.getItem('notes'))

// メモ帳追加処理を実行
if(notes) {
    notes.forEach(note => addNewNote(note))
}

// 作成ボタンのクリックイベントの登録
addBtn.addEventListener('click', () => addNewNote())

function addNewNote(text = '') {
    // div要素を作成
    const note = document.createElement('div')
    // noteクラスを追加
    note.classList.add('note')

    // メモ帳を追加
    note.innerHTML = `
    <div class="tools">
        <button class="edit"><i class="fas fa-edit"></i></button>
        <button class="delete"><i class="fas fa-trash-alt"></i></button>
    </div>
    <div class="main ${text ? "" : "hidden"}"></div>
    <textarea class="${text ? "hidden" : ""}"></textarea>
    `

    // 操作に必要な要素を取得
    const editBtn = note.querySelector('.edit')
    const deleteBtn = note.querySelector('.delete')
    const main = note.querySelector('.main')
    const textArea = note.querySelector('textarea')

    // テキストエリアに引数で渡したテキストを代入
    // 新規/編集があるのでこうしている
    textArea.value = text
    // markedは、HTMLに追加したプラグイン
    main.innerHTML = marked(text)

    // 削除のクリックイベントの登録
    deleteBtn.addEventListener('click', () => {
      deleteNote(note)
    })

    // 編集ボタンのクリックイベント
    editBtn.addEventListener('click', () => {
      editNote(main, textArea)
    })

    // テキストエリアのイベント
    textArea.addEventListener('input', (e) => {
        const { value } = e.target

        main.innerHTML = marked(value)

        // ローカルストレージの更新
        updateLS()
    })

    // bodyの子要素として追加
    document.body.appendChild(note)
}

// ローカルストレージにメモ帳を保存
function updateLS() {
    // 要素を取得
    const notesText = document.querySelectorAll('textarea')

    const notes = []

    // 要素を格納
    notesText.forEach(note => notes.push(note.value))

    // notesという名前でローカルストレージを保存
    localStorage.setItem('notes', JSON.stringify(notes))
}

// メモ帳削除
function deleteNote(note) {
  // ノートを削除
  note.remove()

  // ローカルストレージの更新
  updateLS()
}

// メモ帳編集
function editNote(main, textArea) {
  // hiddenがついているものは消し、ついてないものは付与する
  main.classList.toggle('hidden')
  textArea.classList.toggle('hidden')
}

// 要素を取得する

const addBtn = document.getElementById('add')

// ローカルストレージからデータを取得する

const notes = JSON.parse(localStorage.getItem('notes'))

// メモ帳追加処理を実行

if(notes) {

notes.forEach(note => addNewNote(note))

}

// 作成ボタンのクリックイベントの登録

addBtn.addEventListener('click', () => addNewNote())

function addNewNote(text = '') {

// div要素を作成

const note = document.createElement('div')

// noteクラスを追加

note.classList.add('note')

// メモ帳を追加

note.innerHTML = `

</div>

// 操作に必要な要素を取得

const editBtn = note.querySelector('.edit')

const deleteBtn = note.querySelector('.delete')

const main = note.querySelector('.main')

const textArea = note.querySelector('textarea')

// テキストエリアに引数で渡したテキストを代入

// 新規/編集があるのでこうしている

textArea.value = text

// markedは、HTMLに追加したプラグイン

main.innerHTML = marked(text)

// 削除のクリックイベントの登録

deleteBtn.addEventListener('click', () => {

deleteNote(note)

})

// 編集ボタンのクリックイベント

editBtn.addEventListener('click', () => {

editNote(main, textArea)

})

// テキストエリアのイベント

textArea.addEventListener('input', (e) => {

const { value } = e.target

main.innerHTML = marked(value)

// ローカルストレージの更新

updateLS()

})

// bodyの子要素として追加

document.body.appendChild(note)

}

// ローカルストレージにメモ帳を保存

function updateLS() {

// 要素を取得

const notesText = document.querySelectorAll('textarea')

const notes = []

// 要素を格納

notesText.forEach(note => notes.push(note.value))

// notesという名前でローカルストレージを保存

localStorage.setItem('notes', JSON.stringify(notes))

}

// メモ帳削除

function deleteNote(note) {

// ノートを削除

note.remove()

// ローカルストレージの更新

updateLS()

}

// メモ帳編集

function editNote(main, textArea) {

// hiddenがついているものは消し、ついてないものは付与する

main.classList.toggle('hidden')

textArea.classList.toggle('hidden')

}

月	火	水	木	金	土	日
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28

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

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

メモ帳作成機能

要素を取得する

clickイベントの登録

DOMにメモ帳を追加する

メモ帳削除機能

要素の取得

clickイベントの作成

メモ帳をDOM要素から削除

メモ帳編集機能

clickイベントの作成

編集画面切り替え

編集文字の表示

inputイベントの登録

メモ帳保存機能

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残すコメントをキャンセル

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

実装するもの

環境構築

CSS版

ページ(HTML)の作成

スタイル(CSS)を装飾

JavaScriptの実装

メモ帳作成機能

要素を取得する

clickイベントの登録

DOMにメモ帳を追加する

メモ帳削除機能

要素の取得

clickイベントの作成

メモ帳をDOM要素から削除

メモ帳編集機能

clickイベントの作成

編集画面切り替え

編集文字の表示

inputイベントの登録

メモ帳保存機能

おわりに

JavaScriptまとめ

JavaScript ソースコード

おすすめ書籍

シェア！

コメントを残す コメントをキャンセル

RECOMMENDこちらの記事も人気です。

[React]~Ambassador画面9:Lazy Loading機能の実…

[golang]fiber API8~Ambassador: ページネーショ…

Go言語で作るWebアプリのテンプレート2~Staticファイル~

[Go言語]JSON -Struct構造なしでデータを操る方法-

CSSで通知アプリのスタイリングをしよう!

[React]~Admin画面:ソースコードまとめ~

[Go言語]goroutineのエラーハンドリング方法

[Golang/React]~MovieApp2: 関連データの処理~

スポンサーリンク

プロフィール

最近の投稿

最近のコメント

カテゴリー

メタ情報

にほんブログ村

スポンサーリンク

カレンダー

アーカイブ

コメントを残すコメントをキャンセル