はじめに
こんにちは！ Halです！
僕は現在、「JISOU」 というプログラミングアウトプットコミュニティで活動しています。そのアウトプットの過程としてこの記事を書きました
この記事の内容は以下のUdemy講座の内容になります。
作ったTODOアプリ
作成環境
CodeSandbox 環境を使用しました。
CodeSandboxとはウェブブラウザ上でWebアプリケーションの開発、プロトタイピング、共有を迅速に行えるオンラインコードエディタおよびプラットフォームです。
CodeSandboxで試せます
実装した機能
以下の4つの機能を実装しました：
- タスクの追加（入力欄から未完了エリアへ）
- タスクを完了状態にする
- 完了タスクを未完了に戻す
- タスクを削除する
各動作
タスクを追加する
タスクを完了状態にする
タスクを完了から未完了にする
タスクを削除する
Reactを使わずに作成した感想
マークアップ・ロジックの分離
ReactではJSXを用いてマークアップ(HTML)とロジック(JS)を一箇所のファイルで記述できます。しかし素のJavaScriptで書く場合には、それぞれファイルを分離するのでファイルの行き来がちょっと面倒に感じました。
コードの記述量が多い
ただボタンを押して要素を追加する、といった操作でも、とにかくコードを書く量が多いです。
document.createElementでDOM作って~, 次は○○の要素に追加して~
みたいなことをしていると余裕で20行、30行行きます。簡単なTODOアプリでも可読性が低下したコードになったので、JSXが無い時代にJSを書いていた人は、ホントにすごいと思います。
作成したタスクを未完了リストに追加する関数
const createIncompleteTodo = (todo) => {
// 要素の生成
const li = document.createElement("li");
const div = document.createElement("div");
const p = document.createElement("p");
const completeButton = document.createElement("button");
const deleteButton = document.createElement("button");
// クラス名とテキストの設定
div.className = "list-row";
p.className = "todo-item";
p.innerText = todo;
completeButton.innerText = "完了";
deleteButton.innerText = "削除";
// イベントリスナーの追加
completeButton.addEventListener("click", () => {
// 完了処理（さらに10行以上のコード）
const moveTarget = completeButton.closest("li");
// ... 省略 ...
});
deleteButton.addEventListener("click", () => {
// 削除処理
const deleteTarget = deleteButton.closest("li");
document.getElementById("incomplete-list").removeChild(deleteTarget);
});
// DOM階層の構築
div.appendChild(p);
div.appendChild(completeButton);
div.appendChild(deleteButton);
li.appendChild(div);
// 最終的にリストに追加
document.getElementById("incomplete-list").appendChild(li);
};
命令的な処理
素のJSのみでイベントハンドラを書く場合は「DOMを参照」、「処理をする」、「DOMを更新する」といった形でviewを更新します。
つまり命令的な形で処理を行うことになります。
そのため大規模なアプリケーションとかになってくると、ハンドラ間で不明瞭な依存関係が生じたり、大量のハンドラが散らばったりすることが予想され、コードの保守性などに問題が出てくると感じました。
おわりに
今回は学習の一環として、あえてReactを使わず素のJavaScriptのみでTODOアプリを作ってみました。
現在、フロントエンド開発には豊富なライブラリが存在しており、「とりあえず」でそれらを利用してアプリを作っている人が多いのではないでしょうか。
そこであえてライブラリを使わないことで、見えてくる苦労や現在使っているライブラリの良さを実感できると思います！
参考
今回教材として使用させていただいたUdemy講座
▼▼▼
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼