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

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

##### <font color="52c0cc">この記事は次のような人におすすめです！</font>
+ そもそも、チーム開発って何？
+ どのような場面で開発ツールが必要になるの？
+ チーム開発で必要なツールの導入方法を知りたい！

## 本記事について
今回は、中央大学 市ヶ谷田町キャンパスで開催された
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アカウントの作成 



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

### <font color="a3c8cc">なぜ、チーム開発をするのか？</font>
開発には、以下のように様々な開発工程があります！
機能設計・画面設計・コーディング・テスト・マネジメント・・・

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

### <font color="a3c8cc">チーム開発の手法</font>
+ ウォーターフォール
　各工程を細かい内容に落とし込んでいく手法
+ アジャイル
　各工程を分割して「企画→設計→実装→テスト」を繰り返し行う手法

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

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

## <font color="a3c8cc">Githubとは</font>
チームで開発する際に欠かせない**コード管理＆共有**をするツール
※Git→バージョン管理ツール ／ GitHub→Gitの集まり

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

#### <font color="52c0cc">GitHubアカウントの作成</font>
1. [GitHub](https://github.com/)へアクセスする。
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 @ユーザー名のメールを受信したら登録完了です。

#### <font color="52c0cc">GitHub Desktopのインストール</font>
1. [GitHub Desktop](https://desktop.github.com/) へアクセスする。
2. `Download for Windows/Mac（64bit）`をクリックしてダウンロードする。
3. Downloadフォルダーから`GitHubDesktopSetup-x64.exe` クリックして開く。
4. GitHub Desktopが起動したらインストール完了です。

## <font color="a3c8cc">Visual Studio Codeとは</font>
Microsoftが提供するコードエディタ

**メリット**
+ 拡張機能が充実している
+ Gitとの連携が容易である

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

## <font color="a3c8cc">Figmaとは</font>
画面のUIデザインや遷移図などを可視化できるツール

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

#### <font color="52c0cc">Figmaアカウントの作成</font>
1. [Figma](https://www.figma.com/)へアクセスする。
2. `Get Started`をクリックする。
3. aかbのどちらかの方法を選択してください。
    a-1 Googleアカウントでログインする。
    a-2 ブラウザにWeldcome to Figmaと表示されれば登録完了です。
    b-1 **メール**と**パスワード**を入力する。
    b-2 **名前**と**用途**、**使用目的**を入力する。
    b-3 メールの認証後、ブラウザにWeldcome to Figmaと表示されれば登録完了です。

#### <font color="52c0cc">Figama Desktopのインストール</font>
1. [Figma Desktop](https://www.figma.com/downloads/)へアクセスする。
2. `Desktop App for Windows/macOS`をクリックしてダウンロードする。
3. アプリから開くことができればインストール完了です。


## <font color="a3c8cc">asanaとは</font>
カンバン方式でチームのタスクを一括管理するツール

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

#### <font color="52c0cc">asanaアカウントの作成</font>
1. [asana](https://asana.com/)へアクセスする。
2.  **メール**を入力する。
3. メールの`リンク`をクリックして、**氏名**と**パスワード**を入力する。
4. 受信したメールからログインする。
5. **役割**、**仕事**、**目標**を選択する。
6. 最初のプロジェクト作成の画面が表示されたら完了です。

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

今後は、各開発チームの進展に応じて勉強会を開催していきたいと思います。
GDSC Chuo University 主催のイベントについては[こちら](https://gdsc.community.dev/chuo-university/)をご覧ください。