Go to Qiita Advent Calendar 2024 Top
LoginSignup
1
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@kaihatut963(NYkagawa)

javascriptでtodoリストを作成 ※データをjsonで管理

Posted at

#目的
ググったらたくさんtodoリストが出てきたけど、データをjsonで管理するのは
なかったので、javascriptの勉強がてらに作ってみました。

##画面キャプチャ
デモ動画を入れたかったけどうまくいかなかったので
画像で.....

キャプチャ.PNG
###機能
・タスク追加
・タスク削除
・期限・状態でソート可
・メモ欄あり

github

##推奨環境(動作確認済み)
###PC

  • window10
    • internet explorer11

      他ブラウザに非対応理由

      ActiveXObjectを使用してjsonファイル
      に読み書きを行っているから

##ソース
###html

todo.html
  <!DOCTYPE html>
 <html lang="en">

 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/i18n/jquery-ui-i18n.min.js"></script>
   <script type="text/javascript" src="todo.js" charset="UTF-8"></script>
   <title>todoリスト</title>
 </head>
 <link rel="stylesheet" type="text/css" href="todo.css">
 <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

 <body>
   <h1>todo list</h1>
   <form name="inputForm" id="inputForm_id" action="">
     <div class="taskTest">
       <input type="text" id="item" placeholder="タスク内容を入力">
     </div>

     <div class="calendar">
       <input type="text" id="datepicker" placeholder="期限を入力">
     </div>
     <div class="addButton">
       <button type="submit" onClick="submitItem();">追加</button>
     </div>
   </form>

   <div id="app">
     <div id="div_memoArea" style="display:none;">
       <textarea name="memoArea" id="memoArea_id" value="1" cols="60" rows=11></textarea>
     </div>
     <table id="dataTtable">
       <thead v-pre>
         <form name="Formtable" id="Formtable_id" action="">
           <tr>
             <th class="task"><button id="tskButton">
                 <font size=4>タスク</font>
               </button></th>
             <th class="deadLine"><button id="dieButton">
                 <font size=4>期限</font>
               </button></th>
             <th class="state"><button id="steButton">
                 <font size=4>状態</font>
               </button></th>
             <th class="memo"><button id="btnMemo">
                 <font size=4>メモ</font>
               </button></th>
             <th class="delBtn"><button id="btnButton">
                 <font size=4>-</font>
               </button></th>
           </tr>
         </form>
       </thead>
       <tbody>
         <!--javaScript でリストを追加-->
       </tbody>
     </table>
   </div>

   <!--クラス定義-->
   <script type="text/javascript">
     function dataInfo(editFlg) {
       this.setEditFlg(editFlg);
     };
     dataInfo.prototype = {
       setEditFlg: function (editFlg) {
         this._editFlg = editFlg;
       },
       getEditFlg: function () {
         return this._editFlg;
       }
     };
   </script>

   <!--グローバル変数定義-->
   <script type="text/javascript">
     dataFileName = "data.json";
   </script>

   <!--カレンダー表示-->
   <script type="text/javascript">
     $(function () {
       $.datepicker.setDefaults($.datepicker.regional['ja']);
       $('#datepicker').datepicker();
     });
   </script>

   <!--データ読み込む処理-->
   <script type="text/javascript">
     window.onload = onLoad;

     function onLoad() {

       /*指定したファイルが存在するかチェック
         存在しない場合新規でファイルを作成*/
       createJsonData();

       var xmlhttp = createXMLHttpObject();
       xmlhttp.onreadystatechange = function () {

         //ステータスが4の場合、jsonデータを取得
         if (xmlhttp.readyState == 4) {
           var JsonData = JSON.parse(xmlhttp.responseText);
           JsonData = sortJsonData(JsonData);

           //動的テーブル作成
           for (var j = 0; j < JsonData.data.length; j++) {

             //Id
             var dataId = document.createElement('input');
             dataId.setAttribute('type', 'hidden');
             dataId.setAttribute('id', 'dataId');
             dataId.value = JsonData.data[j].id;
             dataId.name = 'dataId';

             //タスク
             var dataTask = document.createElement('td');
             dataTask.setAttribute('id', 'task');
             dataTask.appendChild(document.createTextNode(JsonData.data[j].task));

             //期限
             var dataDeadLine = document.createElement('td');
             dataDeadLine.setAttribute('id', 'deadLine');
             dataDeadLine.appendChild(document.createTextNode(JsonData.data[j].deadLine));

             //状態
             var dState = "";
             if (JsonData.data[j].state == 1) {
               dState = "作業中";
             } else if (JsonData.data[j].state == 2) {
               dState = "完了";
             }

             var dataState = document.createElement('td');
             dataState.setAttribute('class', 'state');
             var stateButton = document.createElement('button');
             stateButton.setAttribute('id', 'stateButton');
             stateButton.value = JsonData.data[j].id;
             stateButton.appendChild(document.createTextNode(dState));
             var span = document.createElement('span');
             span.setAttribute('id', 'span');
             stateButton.appendChild(span);
             dataState.appendChild(stateButton);

             //メモボタン
             var btnMemo = document.createElement('td');
             btnMemo.setAttribute('class', 'btnMemo');
             var memoButton = document.createElement('button');
             memoButton.setAttribute('id', 'memoButton');
             memoButton.value = JsonData.data[j].id;
             memoButton.appendChild(document.createTextNode('メモ'));
             btnMemo.appendChild(memoButton);

             //削除ボタン
             var tdButton = document.createElement('td');
             tdButton.setAttribute('class', 'button');
             var deleteButton = document.createElement('button');
             deleteButton.setAttribute('id', 'deleteButton');
             deleteButton.value = JsonData.data[j].id;
             deleteButton.appendChild(document.createTextNode('削除'));
             tdButton.appendChild(deleteButton);

             //trに追加
             var tr = document.createElement('tr');
             tr.appendChild(dataId);
             tr.appendChild(dataTask);
             tr.appendChild(dataDeadLine);
             tr.appendChild(dataState);
             tr.appendChild(btnMemo);
             tr.appendChild(tdButton);

             document.getElementsByTagName('tbody')[0].appendChild(tr);
           }
         }
       }
       xmlhttp.open("GET", dataFileName);
       xmlhttp.send();
     }
   </script>
 </body>

 </html>

###javascript

todo.js

//-----------------------------共通処理-----------------------------

//XHRのオブジェクト作成
var XMLHttpFactories = [
 function () {
   return new ActiveXObject("Msxml2.XMLHTTP")
 },
 function () {
   return new ActiveXObject("Microsoft.XMLHTTP")
 },
 function () {
   return new ActiveXObject("Msxml3.XMLHTTP")
 },
 function () {
   return new XMLHttpRequest()
 }
];

//XHRのオブジェクト作成
function createXMLHttpObject() {
 var xmlhttp = false;
 for (var i = 0; i < XMLHttpFactories.length; i++) {
   try {
     xmlhttp = XMLHttpFactories[i]();
   } catch (e) {
     continue;
   }
   break;
 }
 return xmlhttp;
}

//新規jsonファイル作成
function createJsonData() {
 var dirPath = location.pathname;

 //先頭文字が"/"だった場合の対策
 if (dirPath.substring(0, 1) == "/") {
   dirPath = dirPath.substring(1, dirPath.length);
 }

 dirPath = dirPath.substring(0, dirPath.lastIndexOf("/")) + "/";
 var filename = dirPath + dataFileName;

 var ua = navigator.userAgent.toLowerCase();
 try {

   //ieの場合
   if (ua.indexOf("ie")) {

     var fso = new ActiveXObject("Scripting.FileSystemObject");

     //ファイル存在チェック
     if (!(fso.FileExists(filename))) {

       //jsonデータの初期値
       var JsonData = '{"data":[],"dataInfo":[{"sortId":1}]}';

       //OpenTextFileの引数：対象のファイルパス、書き込み、新規作成、UTF-16 　
       var file = fso.OpenTextFile(filename, 2, true, -1);
       file.Write(JsonData);
       file.Close();
       location.reload();
     }
   } else {
     alert("IE以外対応していません");
   }
 } catch (e) {
   alert("Error: " + e);
 } finally { }
}

//ソート処理
function sortJsonData(Jsondata) {
 var data = Jsondata.data

 var sortValue = 1;
 sortValue = Jsondata.dataInfo[0].sortId;

 //期限：昇順、ID：昇順順に表示
 if ((sortValue === undefined || sortValue === null) || (sortValue == 1)) {
   data.sort(function (a, b) {
     if (a.deadLine < b.deadLine) return -1;
     if (a.deadLine > b.deadLine) return 1;
     if (a.id < b.id) return -1;
     if (a.id > b.id) return 1;
   })

   //期限：降順、ID：昇順順に表示
 } else if (sortValue == 2) {
   data.sort(function (a, b) {
     if (a.deadLine < b.deadLine) return 1;
     if (a.deadLine > b.deadLine) return -1;
     if (a.id < b.id) return -1;
     if (a.id > b.id) return 1;
   })

   //状態：作業中、ID：昇順順に表示
 } else if (sortValue == 3) {
   data.sort(function (a, b) {
     if (a.state < b.state) return -1;
     if (a.state > b.state) return 1;
     if (a.id < b.id) return -1;
     if (a.id > b.id) return 1;
   })

   //状態：完了、ID：昇順順に表示
 } else if (sortValue == 4) {
   data.sort(function (a, b) {
     if (a.state < b.state) return 1;
     if (a.state > b.state) return -1;
     if (a.id < b.id) return -1;
     if (a.id > b.id) return 1;
   })
 }

 Jsondata.data = data
 return Jsondata;
}

//jsonデータ取得
function getJsonData() {
 var JsonData = "";
 var xmlhttp = createXMLHttpObject();
 xmlhttp.onreadystatechange = function () {

   //ステータスが4の場合、jsonデータを取得
   if (xmlhttp.readyState == 4) {
     JsonData = JSON.parse(xmlhttp.responseText);
     JsonData = sortJsonData(JsonData);
   }
 }
 xmlhttp.open("GET", dataFileName);
 xmlhttp.send();

 return JsonData;
}

//jsonデータ変更
function writeJsonData(filename, content) {
 var dirPath = location.pathname;

 //先頭文字が"/"だった場合の対策
 if (dirPath.substring(0, 1) == "/") {
   dirPath = dirPath.substring(1, dirPath.length);
 }

 dirPath = dirPath.substring(0, dirPath.lastIndexOf("/")) + "/";
 filename = dirPath + filename;

 var ua = navigator.userAgent.toLowerCase();
 try {

   //ieの場合
   if (ua.indexOf("ie")) {
     var fso = new ActiveXObject("Scripting.FileSystemObject");

     //OpenTextFileの引数：対象のファイルパス、書き込み、新規作成、UTF-16 　
     var file = fso.OpenTextFile(filename, 2, true, -1);
     file.Write(content);
     file.Close();
   } else {
     alert("IE以外対応していません");
   }
 } catch (e) {
   alert("Error: " + e);
 } finally {
   location.reload();
 }
}

//-----------------------------ボタン処理-----------------------------

//ソート処理(期限）
$(function () {
 $(document).on("click", "#dieButton", function (e) {

   var JsonData = "";
   var sortValue = 1;
   JsonData = getJsonData();
   sortValue = JsonData.dataInfo[0].sortId;

   //1:昇順、2:降順
   if (sortValue == 1) {
     JsonData.dataInfo[0].sortId = 2;
   } else {
     JsonData.dataInfo[0].sortId = 1;
   }
   writeJsonData(dataFileName, (JSON.stringify(JsonData)));

 });
});

//ソート処理(ステータス）
$(function () {
 $(document).on("click", "#steButton", function (e) {

   var JsonData = "";
   var sortValue = 1;
   JsonData = getJsonData();
   sortValue = JsonData.dataInfo[0].sortId;

   //3:作業中、4:完了
   if (sortValue == 3) {
     JsonData.dataInfo[0].sortId = 4;
   } else {
     JsonData.dataInfo[0].sortId = 3;
   }
   writeJsonData(dataFileName, (JSON.stringify(JsonData)));
 });
});

//データ追加
function submitItem() {

 var FormTask = document.forms.inputForm_id.item.value;
 var FormCalendar = document.forms.inputForm_id.datepicker.value;

 if ((FormTask == "") || (FormTask == null)) {

   alert("タスク名を入力してください");
   return;
 }

 if ((FormCalendar == "") || (FormCalendar == null)) {

   alert("期限を入力してください");
   return;
 }

 var JsonData = "";
 var maxId = 0;
 JsonData = getJsonData();

 var numArray = new Array();
 for (var j = 0; j < JsonData.data.length; j++) {
   numArray.push(JsonData.data[j].id);
 }

 //Idは最大値+1を設定
 if (numArray.length >= 1) {
   maxId = (Math.max.apply(null, numArray)) + 1;
 } else {
   maxId = 1;
 }

 //データ作成
 var obj = new Object();
 obj.id = maxId;
 obj.task = FormTask;
 obj.deadLine = FormCalendar;
 obj.state = 1;
 obj.memo = "";
 JsonData["data"].push(obj);
 writeJsonData(dataFileName, (JSON.stringify(JsonData)));
}

//ステータス更新処理
$(function () {
 $(document).on("click", "#stateButton", function (e) {
   var id = $(this).val();

   var JsonData = "";
   JsonData = getJsonData();

   //取得したidに対応するステータス値を変更
   for (var j = 0; j < JsonData.data.length; j++) {
     if (JsonData.data[j].id == id) {
       if (JsonData.data[j].state == 1) {
         JsonData.data[j].state = 2;
       } else if (JsonData.data[j].state == 2) {
         JsonData.data[j].state = 1;
       }
       break;
     };
   }
   writeJsonData(dataFileName, (JSON.stringify(JsonData)));
 });
});

//メモ追加・編集
$(function () {
 $(document).on("click", "#memoButton", function (e) {
   var id = $(this).val();

   var JsonData = "";
   var i = -1;
   JsonData = getJsonData();

   //一致するjson配列のインデックスを取得
   i = JsonData.data.reduce(function (prev, item, index, array) {
     if (item.id == id) {
       prev.push(index);
     }
     return prev;
   }, []);

   //ダイヤログ入力完了後、jsonデータ更新
   $(function () {
     var editObj = new dataInfo(false);
     var dialog = dialogProcess(editObj);
     dialog.done(function () {
       if (editObj.getEditFlg()) {
         JsonData.data[i].memo = memoArea.innerText;
         writeJsonData(dataFileName, (JSON.stringify(JsonData)));
       }
     });
   });

   var dialogProcess = function (editObj) {
     var defer = $.Deferred();
     var memoArea = document.getElementById("memoArea_id");
     memoArea.innerText = JsonData.data[i].memo;

     //入力ダイヤログ
     $("#div_memoArea").dialog({
       dialogClass: 'memoAreaTitle',
       modal: true, //モーダル表示
       title: "追加・編集",
       width: 600, //ダイアログの横幅(px)
       height: 400, //ダイアログの縦幅(px)

       buttons: [{
         text: "確定",
         class: "maBtnOk",
         click: function () {
           editObj.setEditFlg(true);
           $(this).dialog("close");
           defer.resolve();
         }
       },
       {
         text: "キャンセル",
         class: "maBtnNg",
         click: function () {
           $(this).dialog("close");
           defer.resolve();
         }
       }
       ]
     });

     // プロミスを作って返す 
     return defer.promise();
   };
 });
});

//データ削除処理
$(function () {

 //削除対象のid取得
 $(document).on("click", "#deleteButton", function (e) {
   var id = $(this).val();

   var JsonData = "";
   var i = -1;
   JsonData = getJsonData();

   //一致するjson配列のインデックスを取得
   i = JsonData.data.reduce(function (prev, item, index, array) {
     if (item.id == id) {
       prev.push(index);
     }
     return prev;
   }, []);

   //jsonから対象データ削除処理
   JsonData.data.splice(i, 1);
   writeJsonData(dataFileName, (JSON.stringify(JsonData)));
 });
});

###json

data.json
{"data":[{"id":7,"task":"TEST","deadLine":"2019/08/08","state":2,"memo":""},{"id":5,"task":"入力ダイヤログにcssを実装","deadLine":"2019/08/14","state":1,"memo":"\r\n参考サイト：\r\nhttp://teqspaces.com/jQuery/1\r\nhttps://codeday.me/jp/qa/20181223/87610.html"},{"id":6,"task":"修正する変数名(todo)","deadLine":"2019/08/14","state":1,"memo":"TEST"},{"id":8,"task":"TEST1","deadLine":"2019/08/27","state":1,"memo":""}],"dataInfo":[{"sortId":1}]}

###css

todo.css
.taskTest {
 margin: 0 auto;
 width: 650.16px;
}

.taskTest input[type="text"] {
 font: 15px/24px sans-serif;
 box-sizing: border-box;
 width: 650.16px;
 padding: 0.3em;
 transition: 0.3s;
 letter-spacing: 1px;
 border: 1px solid #1b2538;
 border-radius: 4px;
 margin: 3px;
}

.calendar {
 margin: 0 auto;
 width: 650.16px;
}

.calendar input[type="text"] {
 font: 15px/24px sans-serif;
 box-sizing: border-box;
 width: 150.16px;
 padding: 0.3em;
 transition: 0.3s;
 letter-spacing: 1px;
 border: 1px solid #1b2538;
 border-radius: 4px;
 margin: 3px;
}

tbody button {
 border: none;
 border-radius: 20px;
 line-height: 24px;
 padding: 0 8px;
 background: #93ffab;
 color: #000000;
 cursor: pointer;
 width: 70px;
 height: 35px;
}

.addButton button {
 border: none;
 border-radius: 20px;
 line-height: 24px;
 padding: 0 8px;
 background: #93ffab;
 color: #000000;
 cursor: pointer;
 width: 70px;
 height: 35px;
}

.addButton {
 position: absolute;
 margin-top: -70px;
 left: 50%;
 width: 500px;
 margin-left: 340px;
}

thead th button {
 background-color: transparent;
 border: none;
 cursor: pointer;
 outline: none;
 padding: 0;
 appearance: none;
 color: #0099e4;
}

.memoAreaTitle .ui-dialog-titlebar {
 background: #93ffab;
 color: #000000;
}

.memoAreaTitle .maBtnOk {
 background: #93ffab;
 color: #000000;
}

.memoAreaTitle .maBtnNg {
 background: #93ffab;
 color: #000000;
}

/*Elementに対してのCSS*/

h1 {
 background: #c2edff;
 padding: 0.5em;
}

* {
 box-sizing: border-box;
}
#app {
 max-width: 640px;
 margin: 0 auto;
}
table {
 width: 100%;
 border-collapse: collapse;
}
thead th {
 border-bottom: 2px solid #0099e4;
 color: #0099e4;
}

th,
th {
 padding: 0 8px;
 line-height: 40px;
}
thead th.task {
 width: 400px;
}
thead th.state {
 width: 100px;
}
thead th.button {
 width: 60px;
}
tbody td.button,
tbody td.state {
 text-align: center;
}
tbody tr td,
tbody tr th {
 border-bottom: 1px solid #ccc;
 transition: all 0.4s;
}
tbody tr.done td,
tbody tr.done th {
 background: #93ffab;
 color: #bbb;
}
tbody tr:hover td,
tbody tr:hover th {
 background: #f4fbff;
}

###フォルダ構成
todo
|-- data.json
|-- todo.css
|-- todo.html
|-- todo.js

##振り返り
###jquery ui 活用
jquery uiのカレンダーや入力ダイヤログを初めて使用したが、すごく
簡単に追加できてびっくり!　気になった人は参考のURLを張っているので
ググってみてください。
キャプチャ1.PNG
UIのカスタマイズも可能
キャプチャ2.PNG

【jQuery入門】Datepicker
【jQuery入門】オリジナルのダイアログ

###感想
ローカルファイルに対して読み書きを行う方法を調べるのに特に時間が
かかりました。ブラウザに依存するjavascriptでファイルの読み書きをさせる
ことに無理があったかな(笑)
それなりに楽しかったので、また投稿したいと思います。

###参考

ToDoリストを作りながら学習しよう！

1
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?