2022 ソフトウェア設計及び演習用の班Wiki

22::gr08::ツール

チームページへ

開発で使用したツールなど

8班で開発時に利用したサービス,使用したツールをまとめました.
開発の参考にしてみてください.

  1. Git, GitLab, GitLab-wiki
  2. 班wiki → Notion
  3. Discord, (Zoom)
  4. チーム用Googleアカウント
  5. Figma

1. Git GitLab, GitLab-wiki

言わずもがなGitです.講義ではリポジトリ管理にGitLabを使用するということで,MergeRequestやwikiの記載なんかはGitLab上で行いました.
Gitはチーム開発をする上で本当に便利なツールです.使い方が分からないから...とか難しそうだから...と言っていると冗談抜きで時間が勿体無いです.ぜひ使い方を調べて積極的に使ってみてください.

自分が考えるGitの利点は二つあります.
一つがブランチを切って作業できること,もう一つが複数人が編集したコードを合体させる時に,システムのアシストが入ることです.
ブランチを切るとは何か.簡単に言えば編集用にファイルのコピーを作成するイメージです.作成したコピーに対して機能追加や修正などの編集を行い,ある程度形になった段階で元のファイルに戻します.これがマージです.
そしてファイルのコピーを取ったことはメンバー全員が知ることができ,コピーしたものは全員で編集することができます(便利すぎる!!).
普通だったら編集してるファイルはその人のPCにしかないので,大学で集まった時にしか確認できないわけですが,Gitを使うとこれがオンラインでできるんですね.

ブランチを切ってもう一度元のブランチに戻す時には,マージという作業を行います.
通常一つのファイルを複数人で編集すると,合体するのがとても手間になりますが,Gitを使ってブランチを切り分けて作業すると,なんと合体作業の時にシステムのアシストが入ります.元のファイルとここが違ってて,ここを戻すとエラーが起きるけどどうする?みたいなことを自動で検知して教えてくれます.なんて便利..
これは使うしかない.

VSCodeを使えばボタン操作で下の面倒なコマンドを実行できるので,これも便利(さすがMicrosoft)."VSCode git"で調べると天国に行けます.

以下に普段使いするGitコマンドを紹介します.

  1. git clone
  2. git add
  3. git commit
  4. git push
  5. git branch -a
  6. git branch ${branch_name}
  7. git checkout ${branch_name}

クローン,ステージング,コミット,プッシュ,ブランチ操作です.GitLab-wikiにまとめてるので,アカウントが出来てから覗いてみてもいいかも.Gitコマンドチートシート

2. 班wiki → Notion

山中先生,すいません.メモは基本的にNotionにまとめていたので,あんまり班wiki使わなかったです.
Notionは講義ノートから研究ノート,アイデア帳,タスク管理とか論文管理なんかもできる優秀なツールなので,知らなかったという人はこれを機に使ってみてもいいと思います.
今のところ,込み入ったことをしない限り無料で使えます.
作成したページはオンラインで共有できて,しかも複数人でリアルタイム編集が可能なので,グループ活動でも役に立つ場面が多かったです.

3. Discord, (Zoom)

作成したサーバ内で,用途に応じた複数のテキストチャンネルを作ったり,ボイスチャンネルを作って運用しました.
雑談板とか連絡板とか,コード用板とか.
あとは@メンションを飛ばして作業開始の通知を送ったり,今から作業するけど誰か来ない?みたいな使い方もよくしました.最後の最後まで使い倒しました.
これも無料.

Zoomは,Discordで作業してる最中にVPN接続しなきゃいけないタイミングで使いました(マージする時とかpushする時).
VPN接続をすると,自宅等の回線→大学内のネットワーク→外部ネットワークみたいな感じで一旦大学内のネットワークを経由することになるのですが,大学のセキュリティの関係で(Discordのボイスチャットに使用するポートが解放されていないみたい),VPNを使っているときは自分の声が届かなくなります.

4. Googleアカウント

外部ツールを使用するときのために作成しました.
主に使ったのはFirebaseとFigmaです.Firebaseは別のページに記載予定.

5. Figma

Figmaはウェブデザインツールです.AdobeXDみたいな.デザインの原画を作るのに使用しました.
本来複数人で編集するモードは有料なんだけど,複数人が同じアカウントでログインして作業する分には問題ないみたい.リアルタイムで共同編集できました.
あまり推奨はしないやり方です.(後で普通に請求きたりして...)
このサービスも最後まで使い倒しました.デザインを作成する以外にも,アイデアのブレインストーミングなんかにも使えると思います.

まとめ

HTML/CSS, JSでウェブアプリの開発をするなら,上記のツール以外にも便利で開発が捗るものが沢山あります!
実際に開発してみて思ったのは,コードを書く以外の時間が思った以上にかかるということです.
自分の考えをメンバーに共有したりされたり,考えたデザインを共有したりされたり,他の人が書いたコードを自分が引き継いで編集したり....こういった共有の時間が思った以上に開発のオーバーヘッドになってくるので,リアルタイム編集とか即時反映あたりがキーになってくるかなと思います.

実際に企業で使われているようなツールは,小規模チームでも十分役に立つはずです!
仮にもう一度開発をするなら,SlackとかTrelloなんかも使ってみたいなーなんて思ってます.


最終更新日:2022/08/05 13:22:17