サルでもわかるWEBプログラミング

おみくじアプリ、電卓アプリの次は、だいぶ難しくなってきますが、ToDoアプリ(することリスト)を作成します。

デザインはBulmaを利用します。

今回作成するToDoアプリは、

1. 『すること』の追加
2. 『すること』のリスト表示
3. 『すること』の削除

の3つの機能を持ち、

1. データはブラウザ上の『localStorage』という場所に保存(異なるスマホ・パソコン間では共有しない)

ものとします。なお、異なるパソコン間でデータを共有するためには、サーバー関連の知識が必要になります。当サイトでもこの次の回で、Firebase(一部無料のサーバーサービス)を用いたToDoアプリの解説を行いたいと思います。

今回は、こちらのサイトのソースコードを利用させていただこうと思います。

ソースコード

これから作るもの

パソコン

Windowsパソコンでも、Macでも、できれば、Chromeというブラウザをインストールして、Chrome上で操作を行ってください。

(必須ではないが強くお勧め)
VisualStudioCode

こちらからインストールして、VisualStudioCode上でプログラムを打ち込んでご自身のパソコンに保存してから、GitHub上にコピペするのがお勧めです。

GitHubアカウントの作成方法については、このサイトについてをご覧下さい。

前回、03.初めてのJavascriptでおみくじアプリのところで作成した、javascript-testリポジトリ(ファイルの置き場所)の中に、ファイルを作成していきます。

javascript-testリポジトリのトップページの画面で、「creating a new file」をクリックします。

以下のような真っ白な画面が出てきます。

1. name your file… のところに、todo.htmlと記入し、
2. 下の方に、以下のコード(Bulmaを利用するためのテンプレート)をコピペします
3. 入力し終わったら、下の方へ移動して、
4. Commit new file をクリック

1. javacript-test/リポジトリの画面でtodo.htmlをクリック（スマホではなくパソコンで開きます。）
2. 画面右上の『鉛筆ボタン』をクリックして、todo.htmlを編集します。

1. コードが編集できるようになるので、『Bulmaテンプレート』を『ToDoアプリ』に変更

1. さらに、『<!– ここにコンテンツを記載 –>』の部分を、以下に書き換え（大変ですが、キーボードで打ち込むのが上達の近道です。）

      <div class="field has-addons">
        <div class="control">
          <input id="task" class="input" type="text" placeholder="すること">
        </div>
        <div class="control">
          <a id="add" class="button is-info">
            追加
          </a>
        </div>
      </div>
      <hr class="hr">
      <div id="todos"></div>

作成中

Bulmaのフォームについて（公式サイト）：https://bulma.io/documentation/form/general/

https://code-maven.com/todo-in-html-and-javascript