【チーム開発】JavaScriptでTODOアプリを作りながら実務の流れを体験してみる

個人開発しかしたことなく、チーム開発のイメージがつかない
簡単なTODOアプリは作ったことあるけど理解が曖昧
要件定義、設計、開発、リポジトリ作成、プルリクエスト作成、マージまでの流れを体験してみたい

今回はこういった疑問について解説していきます。

対象読者

エンジニア転職に向けて勉強中の人
個人開発のみでチーム開発の雰囲気を知りたい人
GitHubの扱い、プルリクエスト作成をしたこと無い（不安がある）人

エンジニア転職を目指している人の場合、個人でプログラミングの勉強をすることはあっても、実際に仕事をするとなるとチーム開発が必須になるので、1人だとどうやって業務を進めるかイメージがつきずらいと思います。

僕は普段、とあるベンチャー企業でフロントエンドエンジニアとして働いてます。

今回は、素のJavaScriptを使った簡単なTODOアプリを作りながら、実際の実務ベースの開発の流れを解説して行きます。

実際の流れ

GitHubでリポジトリ作成
ローカル環境にリポジトリを取り込む
どんな要件のTODOアプリを作るか要件定義する
どんな実装をすべきか設計する
実装する
コミットを積んでリモートにプッシュする
プルリクエストを作成する
レビューを行い、マージする

それでは実際にやってみましょう！

使用ツールの紹介

現場によりますが、主要な使用ツールを紹介します

GitHub：開発していくアプリのバージョン管理をしてくれるツール
Notion：タスク管理やドキュメント作成などしてくれるツール
VSCode：開発ツール

GitHubにリポジトリを作成し、それをNotionでタスク管理しながらVSCodeで開発していく流れになります。

開発1：TODOアプリのリポジトリを作成する

初めにリポジトリを作成します

1. GitHubの自分のページから「Repositories」を選択

2. 「New」を選択

3. リポジトリ名を決めて、下スクロールをし、Create Repositoriesを選択

4. リポジトリが作成されるので出てきたリポジトリアドレスをコピーする

ここまででGItHubにリポジトリができました。このリポジトリにこれから作っていくTODOアプリのコードを貯めて行きます。

※ちなみに「リポジトリ」の意味は貯蔵庫・倉庫という意味です。

開発2：ローカル環境にリポジトリを取り込む

ここからは実際にVSコードを立ち上げます。画面下から「ターミナル」を選択し開きます。

画面下に何も表示されていない場合、Command + J（Windowsの場合Ctrl + J）を押すと開閉できます。

リモートで作ったリポジトリをローカルに取り込みます。

git clone {さっきコピーしたURL}

cd {アプリ名} でファイルに移動します。

リモートのリポジトリが取り込めているかを確認

git remote -v

正しくURLが表示されたらOK!

開発3：どんな要件のTODOアプリを作るか要件定義する

やりたいことは下記の通りです。

inputフォームからタスクを登録できる
そのタスクが画面に表示される
登録したタスクを編集できる
登録したタスクが削除できる

いわゆるCRUD機能を持たせたアプリになります。

※今回はフロントエンドのみの完結のため、画面リロードでデータは消えます

開発4：どんな実装をすべきか設計する

次に要件に応じてどのような実装をすべきか設計します。

タスク登録用のinputフォームと登録ボタンを用意する
1. htmlで用意
2. 登録ボタンのonClickでイベント発火が必要そう
3. その時にinputの要素をとってくるイメージ
そこにタスク入力をして登録ボタンを押下したらタスクが一覧で表示される
1. 一覧表示用のulタグを用意しておく
2. そこに向かって登録されたタスクが表示されるように登録時のメソッドに処理を入れる必要がありそう
表示されたタスクには「編集」「削除」ボタンが並列だ置かれる
1. 編集、削除ボタンを用意しておいて、タスクが作られたらそこに一緒に並べる
編集ボタンを押すと、inputフォームを使ってタスクの編集ができる
1. inputフォームのidを辿ってそこにタスク名を表示させて編集できるようにする
2. この時は「登録」ボタンを「更新」ボタンにする
編集後「更新」ボタンを押下するとタスクの編集が完了する
1. 編集対象のタスクが更新されるように更新用の関数を作る
削除ボタンを押下するとタスクを削除できる
1. 一覧から対象のタスクを削除する関数を作る

大体でいいので、アプリの全体の流れを列挙して行きます。設計をすることでどのような流れで実装するかのイメージがつき、開発がスムーズに進みます。

また、チーム開発をする場合、よくない設計だった場合早めに検知して修正することができるので、出戻りが起きにくくなるというメリットもあります。

そのため、必ず実装前に設計をします。

開発5：実装する

では、実際に実装をして行きます。

完成コードはこちら

index.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="style.css">
  <title>Todoアプリ</title>
</head>
<body>
  <h1>MyTodoアプリ</h1>
  <div class="form">
    <input class="input" type="text" id="taskInput">
    <button class="button" onclick="addTask()">登録</button>
  </div>
  <span class="message">以下に新しいタスクが追加されていく</span>
  <ul id="ul"></ul>
  <script src="main.js"></script>
</body>
</html>

main.js

let editingTask = null;

function addTask() {
  const taskInput = document.getElementById('taskInput');
  const ul = document.getElementById('ul');

  if (taskInput.value !== "") {
    if (editingTask) {
      editingTask.querySelector('span').textContent = taskInput.value;
      document.querySelector('button').textContent = '登録';
      editingTask = null;
    } else {
      const li = document.createElement('li');

      const span = document.createElement('span');
      span.textContent = taskInput.value;

      const deleteButton = document.createElement('button');
      deleteButton.textContent = '削除';
      deleteButton.onclick = function () {
        deleteTask(this);
      };

      const editButton = document.createElement('button');
      editButton.textContent = '編集';
      editButton.onclick = function () {
        editTask(this);
      };

      li.appendChild(span);
      li.appendChild(editButton);
      li.appendChild(deleteButton);

      ul.appendChild(li);
    }

    taskInput.value = "";
  }
}

function deleteTask(button) {
  const li = button.parentNode;
  const ul = li.parentNode;
  ul.removeChild(li);
}

function editTask(button) {
  const li = button.parentNode;
  const span = li.querySelector('span');
  const taskInput = document.getElementById('taskInput');
  
  taskInput.value = span.textContent;
  editingTask = li;
  document.querySelector('button').textContent = '更新';
}

上記2つを同じディレクトリ内に配置しhtmlファイルをローカル起動したら動作確認ができると思います。

（vscodeの場合 Live serverという拡張機能を使うことで簡易的なサーバーを立ち上げることができます。）

今回は開発の流れを重点的に解説していくのでコードの解説は割愛しますmm

↓実際の挙動