リポジトリ作成、プルリクエスト作成、マージまでの流れを体験してみたい今回はこういった疑問について解説していきます。個人開発のみでチーム開発の雰囲気を知りたい人GitHubの扱い、プルリクエスト作成をしたこと無い(不安がある)人エンジニア転職を目指している人の場合、個人でプログラミングの勉強をすることはあっても、実際に仕事をするとなるとチーム開発が必須になるので、1人だとどうやって業務を進めるかイメージがつきずらいと思います。僕は普段、とあるベンチャー企業でフロントエンドエンジニアとして働いてます。今回は、素のJavaScriptを使った簡単なTODOアプリを作りながら、実際の実務ベースの開発の流れを解説して行きます。現場によりますが、主要な使用ツールを紹介しますGitHub:開発していくアプリのバージョン管理をしてくれるツールNotion:タスク管理やドキュメント作成などしてくれるツールVSCode:開発ツールGitHubにリポジトリを作成し、それをNotionでタスク管理しながらVSCodeで開発していく流れになります。リポジトリが作成されるので出てきたリポジトリアドレスをコピーするここまででGItHubにリポジトリができました。このリポジトリにこれから作っていくTODOアプリのコードを貯めて行きます。※ちなみに「リポジトリ」の意味は貯蔵庫・倉庫という意味です。開発2:ローカル環境にリポジトリを取り込むここからは実際にVSコードを立ち上げます。画面下から「ターミナル」を選択し開きます。J)を押すと開閉できます。リモートで作ったリポジトリをローカルに取り込みます。ファイルに移動します。-v正しくURLが表示されたらOK!開発3:どんな要件のTODOアプリを作るか要件定義するやりたいことは下記の通りです。inputフォームからタスクを登録できるそのタスクが画面に表示される登録したタスクを編集できる登録したタスクが削除できるいわゆるCRUD機能を持たせたアプリになります。※今回はフロントエンドのみの完結のため、画面リロードでデータは消えます開発4:どんな実装をすべきか設計する次に要件に応じてどのような実装をすべきか設計します。登録ボタンのonClickでイベント発火が必要そうその時にinputの要素をとってくるイメージそこにタスク入力をして登録ボタンを押下したらタスクが一覧で表示される一覧表示用のulタグを用意しておくそこに向かって登録されたタスクが表示されるように登録時のメソッドに処理を入れる必要がありそう表示されたタスクには「編集」「削除」ボタンが並列だ置かれる編集、削除ボタンを用意しておいて、タスクが作られたらそこに一緒に並べる編集ボタンを押すと、inputフォームを使ってタスクの編集ができるinputフォームのidを辿ってそこにタスク名を表示させて編集できるようにするこの時は「登録」ボタンを「更新」ボタンにする編集後「更新」ボタンを押下するとタスクの編集が完了する編集対象のタスクが更新されるように更新用の関数を作る削除ボタンを押下するとタスクを削除できる一覧から対象のタスクを削除する関数を作る大体でいいので、アプリの全体の流れを列挙して行きます。設計をすることでどのような流れで実装するかのイメージがつき、開発がスムーズに進みます。チーム開発をする場合、よくない設計だった場合早めに検知して修正することができるので、出戻りが起きにくくなるというメリットもあります。そのため、必ず実装前に設計をします。開発5:実装するでは、実際に実装をして行きます。'更新';}上記2つを同じディレクトリ内に配置しhtmlファイルをローカル起動したら動作確認ができると思います。serverという拡張機能を使うことで簡易的なサーバーを立ち上げることができます。)今回は開発の流れを重点的に解説していくのでコードの解説は割愛しますmm↓実際の挙動https://tenkoblog.com/wp-content/uploads/2024/05/画面収録-2024-05-05-20.57.30.mp4開発6:コミットを積んでリモートにプッシュする開発を終えたらコードをコミットしてリモート環境にプッシュして行きます。:リモートにコミットをプッシュするコミットの粒度について1機能1コミットになっているかコミットメッセージは適切かこの2つを意識してコミットを積んでいきます。rebaseなど)プルリクエストを作成するリモートにプッシュしたらプルリクエスト(PR)を作成します。プルリクエストを作る意図は自分の実装を完成品にマージしていいかどうかレビュー者に見てもらうためです。整えて問題なければinreviewにします。実装途中だったり、前もってコードをチームメンバーに共有したいときなdraft状態でPRを作成します。なったらコードをマージします。お疲れ様でした、これで無事に完成しました!まとめいかがでしたでしょうか?今回はTODOアプリを作るという名目で普段業務で行うチーム開発の流れを体験してみました。実際の現場では設計をより細かくしたり、実装の過程でPRを複数作成したり、場合によって取り組むタスクを分割して細かく実装したりと柔軟な対応をしながら開発していくことになります。今回やった開発の流れを今後現場で開発する上で参考にしていただけたら幸いです。おまけ僕は普段、フロントエンジニアとして都内で働いています。元々はWebマーケティングの営業から未経験でエンジニアにジョブチェンジしました。その時の体験談をまとめた記事がこちらです。