私は黒い砂漠というMMOゲームをやっているのですが、たまたまそのゲームで所属しているギルドのギルメンにJavaScriptを解説する機会があったのでその時に作ったTodoリストの解説をこのブログに残します。
黒い砂漠はいいゲームなのでPCをお持ちの方は是非やりましょう。
目次
はじめに
まず、完成品を見てみましょう。
完成品はこちら
この完成品を見ながら作っていくので、タブを開きっぱなしにしておくと参照しやすいです。
このようなTodoリストを作っていきます。
HTML部分の作成
まず、画面で目に見える部分である、HTMLを作っていきます。
また、今回はCSSの部分はBulmaというCSSフレームワークを使うため、一部クラス名をそのフレームワークのものにしてあります。
Bulma
とりあえず見える部分はこれで一旦完成です。
こんな感じになっていると思います。
今回はJavaScriptの解説がメインなのでHTMLに関する解説は省略します。
JavaScript部分の作成
次に、いよいよJavaScriptを書いていきます。
今回書くスクリプトは、以下の2つの機能に分割されます。
- タスクの追加・削除
- TweetURLの作成
まずは、タスクの追加・削除機能の実装をしていきます。
タスク関連部の作成
まず、タスクの追加・削除機能を実装します。
まずは、完成品を見てみましょう。
このTodoリストでは、Formでタスク名を入力・送信したものをulタグ内に削除ボタンと共にリストとして表示しています。
formの入力を受け取る
そのため、まずはタスクを登録するためのFormの入力を受け取るためのものを書きます。
まず、document.querySelector(“#form”)で、Formに割り振ったIDである、formを指定しています。
次に、Formからデータが送信された時に動作させたいので、addEventListenerでsubmitを指定します。
こうすることにより、フォームのデータが送信された時にこの中のプログラムが動作するようになります。
次に、formからの入力を受け取り、変数に格納します。
JavaScriptでは変数を作成するときに、letとconstの2種類があります。
両者の違いは、letは再代入が可能ですが、constは再代入が出来ないというところです。
言葉だけでは意識しづらいと思いますので、以下にサンプルコードを提示します。
formからの入力を受け取る変数に対して再代入を行う必要はないので、今回はconstで変数を作成します。
タスク名は、form内のID:taskNameが指定されているinputの値に入っているので、このようになります。
これで、formからの入力を受け取ることが出来るようになりました。
タスクを追加する
ここまででformからの入力を受け取ることが出来るようになりました。
次に、formから受け取ったタスクを画面に見えるようにします。
完成品で、何か適当にタスクを追加してみてください。
このようにリストにタスク名と削除ボタンが追加されたはずです。
タスクは、ここではリスト表示の<li>要素と削除ボタンの<button>要素で出来ています。
HTMLではこのようになっています。
JavaScriptで<ul>要素内にこのように追加するための処理を書いていきます。
JavaScriptでHTMLに新たな要素を追加するのには、document.createElement()というものを使います。
例えば、<li>要素を追加するには、document.createElement(“li”); となります。
これを使って、タスクの追加を行うコードを書くと、以下のようになります。
7行目のli.innerText では、追加した<li>要素の中に表示する文字を指定しています。
ここで指定しているtaskNameという変数は、一番最初に作った変数です。
つまり、formの入力を受け取ったものをそのまま<li>要素の中身としています。
8行目のli.classList.add()というのは、追加する<li>要素のクラス名を指定しています。
同じような関数として、.classNameというものもありますが、複数一括で指定できるので、今回はclassList.add()を使っています。
ここで指定しているクラスは、後でTweetURLを作成するときに使うのと、今回使っているBulmaというCSSフレームワークでスタイルを整形するためのものです。
そうして作った<li>要素を<ul>内に追加するために、9行目でapppendChild()しています。
appendChildは、追加先.appendChild(追加する要素)という風に書き、HTML要素を追加する際に使います。
この関数では追加先の末尾に追加されますが、先頭に追加する際にはprepend()という関数を使います。書き方は同じです。
つまり、今回のコードでは<li>要素は<ul id=”contents”>に追加されているということです。
12～14行目では削除ボタンの追加をしています。
これも7～9行目の<li>要素の追加と同じです。
しかし、<li>要素の子要素にするため、削除ボタンの追加先を<li>要素にしています。
これで、タスクの追加部分を作ることができました。次は削除部分を作っていきます。
タスクを削除する
次に、一度追加したタスクを削除していきます。
といっても、今回のコードでは先ほど追加した<li>要素を消してあげるだけですので、それほど難しくありません。
まず、先ほどのタスクのHTMLでの構造を見てみましょう。
こんな感じになっています。
今回は、削除ボタンをクリックした際に<li>要素が削除されるようにしたいです。
そのために、15～17行目のようなコードを追加します。
この addEventListener() というのは、特定の動作が行われた時にのみ動作するコードを書くためのものです。
今回は deleteButton.addEventListener(“click”) なので、削除ボタンがクリックされた際に動作します。
この中に削除処理を書いていきます。
先ほども確認した通り、今回消すのは削除ボタンの<button>要素の親要素である<li>要素です。
そのため、削除処理は以下のようになります。
18行目が追加した処理です。
今回は、親要素を消したいので、deleteButton.parrentNode で親要素を指定しています。
また、.remove()で、指定した親要素を削除しています。
これにて削除機能も実装できました。
今回は配列を使っていないので削除処理が簡単に書けましたが、配列にタスクを格納し始めるともう少し長くなります。
次はいよいよ、最後の機能であるTweetURLを作っていきます。
TweetURLの作成
いよいよ、最後の機能であるTweetURLの作成をしていきます。
Twitterでは、特定のURLを指定することで、Tweet文をURLで指定することが出来ます。
そのURLは以下です。
https://twitter.com/intent/tweet?text=ツイート文
つまり、このURLのツイート文の部分にタスクを突っ込んでやればOKです。
また、HTMLを作成した段階で、「URLの作成」というbutton要素を作成していますが、その要素のonclickにcreateURL();と書いています。
つまり、この処理はcreateURL()という関数で行います。
その関数の中身は以下のようになっています。
まず、2行目では、タスクの<li>要素にあらかじめ振っておいたクラス名を持つ要素を全て指定するために、document.querySelectorAll()という関数を使っています。
これは、querySelector()の複数版で、querySelector()と同じようにCSSセレクタで指定することが出来ます。
そうしてタスクを取得し、contentsという変数の中に格納しています。
次に、タスクを格納するための配列を準備するために3行目では空の配列をarrayという変数で作成しています。
4行目では、TweetURLの基礎であるURLを変数としています。
また、5～8行目では2行目で受け取ったタスクたちを先ほど作った配列に入れるためのfor文を作成しました。
contentsに含まれるタスクの数だけこのfor文は繰り返され、array配列にタスクを入れていきます。
ここで注意するべきは、6行目です。
contents[i].textContent だけでは、削除ボタンの「削除」という文字もタスク名と一緒に配列に含まれてしまいます。
それを防ぐためにreplace()をしています。
こうすることにより、「削除」という文字が含まれないようになります。
そうして作った配列をURLにするために、9行目では文字列に変換しています。
array.join()とすることで、array配列が結合され1つの文字列となります。
また、その文字列を10行目で先ほど作成したTweetURLの基礎と結合しています。
また、<p>要素に作成したURLを表示するために11行目で<p id=”url”>の中身を変更しています。
そして最後に、12行目でツイートボタンに作成したTweetURLをジャンプ先にするように指定しています。
これで一旦Todoリストの完成です。
おわりに
簡単なJavaScriptでこんなものが作れるのです。
今回は入門向けということで一部削ったりした機能もありますが、Todoリストとしての最低限の体裁は保てているはずです。
たまたまギルメンに解説する機会があったのでそれを記事にしましたが、そこそこ書くのに疲れたので授業料でも請求するつもりです。
皆さんも参考になったら欲しいものリストを置いておくので何か送ってくれると嬉しいです。