チーム開発のための環境構築

はじめに

こんにちは、中央大学 国際情報学部2年の進藤です！
「チーム開発を始めたいけど、どこから始めればいいの…」と悩んでいませんか？
今回の記事では、そんな方に向けてゼロから開発環境を構築できる記事を書きました！

この記事は次のような人におすすめです！

• そもそも、チーム開発って何？
• どのような場面で開発ツールが必要になるの？
• チーム開発で必要なツールの導入方法を知りたい！

本記事について

今回は、中央大学 市ヶ谷田町キャンパスで開催された
GDSC Chuo University主催の第1回勉強会の様子を紹介します。
私も、GDSCのTech部門メンバーとして勉強会に参加しました。

Tech-Study部門で開発経験のある3年小久保さんが詳しく解説してくれました。
これからチーム開発を始めようと考えている方は、ぜひ参考にしてみてください！

目次

チーム開発

• なぜ、チーム開発をするのか？
• チーム開発の手法

開発ツールの導入編

• Githubとは
  • Githubアカウントの作成
  • Github Desktopのインストール
• Visual Studio Codeとは
  • Visual Studio Codeのインストール
• Figmaとは
  • Figmaアカウントの作成
  • Figma Deesktopのインストール
• asanaとは
  • asanaアカウントの作成

チーム開発

開発と聞いてプログラミングを思い浮かべる方が多いと思いますが
実は、プログラミングができなくても開発に携わることができます！

なぜ、チーム開発をするのか？

開発には、以下のように様々な開発工程があります！
機能設計・画面設計・コーディング・テスト・マネジメント・・・

そのため、多くの企業では個人の特性を生かしたチーム開発を行っています！

チーム開発の手法

• ウォーターフォール
  　各工程を細かい内容に落とし込んでいく手法
• アジャイル
  　各工程を分割して「企画→設計→実装→テスト」を繰り返し行う手法

最近では、急速な変化に対応して顧客価値の最大化が求められているため
アジャイルの開発手法がよく用いられています。

開発ツールの導入

それでは、開発ツールをあなたのPCに実装していきましょう！

Githubとは

チームで開発する際に欠かせないコード管理＆共有をするツール
※Git→バージョン管理ツール ／ GitHub→Gitの集まり

メリット

• 複数人で共有して、差分管理ができる
• エンジニアの履歴書としての役割にもなる

GitHubアカウントの作成

1. GitHubへアクセスする。
2. メールアドレスを入力して、Sign up for GitHubをクリックする。
   2-1 Enter your Email にメールアドレス入力してContinueをクリックする。
   2-2 Create a Passwordにパスワードを入力してContinueをクリックする。
   2-3 Enter a usernameにユーザー名を入力してContinueをクリックする。
   2-4 Would you like to receive product updates and announcements via email？
   →y(yes)かn(no)で答えてContinueをクリックする。
   2-5 Varify your accountには検証するをクリックして検証する。
3. Criate accountをクリックする。
4. 登録したメールアドレスに送信された半角数字のコードを入力する。
5. 画面が遷移し、Welcome to Github @ユーザー名のメールを受信したら登録完了です。

GitHub Desktopのインストール

1. GitHub Desktop へアクセスする。
2. Download for Windows/Mac（64bit）をクリックしてダウンロードする。
3. DownloadフォルダーからGitHubDesktopSetup-x64.exe クリックして開く。
4. GitHub Desktopが起動したらインストール完了です。

Visual Studio Codeとは

Microsoftが提供するコードエディタ

メリット

• 拡張機能が充実している
• Gitとの連携が容易である

Visual Studio Codeのインストール

1. Visual Studio Codeへアクセスする。
2. PCに合ったバージョンを選択してUser Instollarをダウンロードする。
3. DawnloadフォルダからVSCodeUserSetup-x64.exeをクリックして開く。
   3-1 使用許諾契約書を読み、同意のラジオボタンをクリックして次へをクリックする。
   3-2 インストール先のディレクトリの場所を確認して、次へをクリックする。
   3-3 スタートメニューに追加する場合は次へをクリックする。
   （追加しない場合はチェックボックスにチェックして、次へをクリックする。）
   3-4　追加タスクを設定する場合はチェックボックスにチェックして次へをクリックする。
   （設定しない場合は、次へをクリックする。）
   3-5 インストール準備完了が表示されたら、インストールをクリックする。
4. Visual Stufio Codeセットアップウィザードの完了が表示されたら、インストール完了です。

Figmaとは

画面のUIデザインや遷移図などを可視化できるツール

メリット

• コメント機能を利用できる
• デザインからCSSのコードが生成される

Figmaアカウントの作成

1. Figmaへアクセスする。
2. Get Startedをクリックする。
3. aかbのどちらかの方法を選択してください。
   a-1 Googleアカウントでログインする。
   a-2 ブラウザにWeldcome to Figmaと表示されれば登録完了です。
   b-1 メールとパスワードを入力する。
   b-2 名前と用途、使用目的を入力する。
   b-3 メールの認証後、ブラウザにWeldcome to Figmaと表示されれば登録完了です。

Figama Desktopのインストール

1. Figma Desktopへアクセスする。
2. Desktop App for Windows/macOSをクリックしてダウンロードする。
3. アプリから開くことができればインストール完了です。

asanaとは

カンバン方式でチームのタスクを一括管理するツール

メリット

• チーム開発の進捗状況を可視化することができる
• チームのコミュニケーションがとりやすくなる

asanaアカウントの作成

1. asanaへアクセスする。
2. メールを入力する。
3. メールのリンクをクリックして、氏名とパスワードを入力する。
4. 受信したメールからログインする。
5. 役割、仕事、目標を選択する。
6. 最初のプロジェクト作成の画面が表示されたら完了です。

最後に

今回は、チーム開発を円滑に進めるためのツールを導入しました。
チーム開発することを意識したメリットについてもお伝えしました！

今後は、各開発チームの進展に応じて勉強会を開催していきたいと思います。
GDSC Chuo University 主催のイベントについてはこちらをご覧ください。